Styling complex and third party markup

[Brendan-csel]

I'm working on our migration to vanilla-extract and it is all going really well and performance is much improved. I've just come to our grid component and having to take a breath as this looks like a big refactor.

To be fair, the challenge is mostly related our existing component structure - which includes embedded 3rd-party editors where we don't control the mark-up (they do use conventional class names we can target though).

Our previous styling solutions had the ability to nest selectors and styles (SASS, styled-components, etc). Unfortunately this has been embraced whole heartedly with this grid component. Essentially a "styled" class has been attached at the top level along with a very large, nested hierarchy of selectors and styles. That is actually all quite readable but...

A core principal of vanilla-extract seems to be that each style object targets a single selector. globalStyle functions also appear to target a single (albeit flexible) selector.

So I seem to have 2 options (or a combination):

1. Wherever possible attach more targeted vanilla-extract class names.
2. Add lots of globalStyle functions. These look like they'll have quite repetitive selectors strings (as they can't be nested).

While option 2 makes everything possible, the DX is not so great for selling to my co-workers. At least with the nested object styles we could use features like collapsible editor sections.

Is there another approach I'm missing?

Even just tell me it will all be for the greater good and everything will be much more maintainable when I'm done! 😅

[Brendan-csel]

I'm back here to tell myself - this is for the greater good!!

Working through the above I'm finding obsolete styles and even some just bad selectors! The constraints of vanilla-extract, enforced by typescript, are helping me squash bugs!

...still definitely not a trivial migration though.

[Brendan-csel]

I just came across another instance where we've used a 3rd-party component (react-big-calendar) which uses standard class names and we don't control the mark up.

I also just realised that:

• if we don't control the class names used (so can't benefit from vanilla-extract's hashed class names),
• and, don't need to style instances differently (so don't need to wrap everything in a hashed class name).

Then is is okay to just import a plain CSS file. We don't have to move all CSS into .css.ts files for this scenario. Also, because the bundler is already set up to handle CSS, it will bundle this plain CSS file just like any that vanilla-extract has generated from typescript.

[Brendan-csel]

By the way - we've completely replaced styled-components in one project now and should have another one completed in the next couple of days. These projects contained around 500 styled components. We're seeing at least a 20% reduction in page render "scripting" times. Very happy with the results.

[Brendan-csel]

I might have been a little optimistic with that estimate. There is definitely an improvement in performance but, depending on the page, it is sometimes less dramatic.