Static CSS extraction

[DanTsk]

It looks like stitches can be extended with a static CSS extraction feature to improve performance even more. With variants (no direct interpolation\parametrization), all CSS scope for the certain component can be easily extracted.

I'm not talking about full extraction, but extraction for only styled components (that are most common) will increase performance a lot.

[peduarte]

@DanTsk Yeah this is something we've got in mind at the moment. Keen to hear a bit more about what your expectations are though.

PS: I've converted your initial issue into a Github Discussion.

[DanTsk]

@peduarte
As for the first feature release, it will be enough to implement extraction for styled components only.

In my opinion, it can be implemented pretty easily using babel plugin/preset with babel macros under the hood. Babel is the right choice, as it allows functionality to be bundler/builder agnostic.

Extraction flow is pretty simple:

1. Use babel-macros to find the actual styled calls. emotion babel-macros can be referenced as an example of such processing.
2. Parse styled function call to extract styling object.
3. Iterate over CSS properties to make some kind of diff. Properties with literal or identifier values can be extracted and processed as static. Any other properties can't be extracted.
4. Apply existing stitches processing. Process static properties, generate CSS class names, write them into CSS file. Or just confirm that atomic CSS class name for such property already exists. Obtain names for required CSS class names.
5. Replace styled call with a modified internal function call, that accepts predefined CSS class names for static CSS properties.

Simple example (Modified example from stitched docs):
Such styled component definition

const Button = styled('button', {
  backgroundColor: 'gainsboro',
  fontSize: '13px',
  borderRadius: getBorderRadius(),
  
  ':hover': {
    transform: 'translateY(-2px)',
    boxShadow: getBoxShadow()
  },
});

will be compiled to the following representation

const Button = __stitches__extracted_styled('button', '_fEDayN _eJromA _jWObkk scid-gtKRhv', {
   borderRadius: getBorderRadius(),
  ':hover': {
    boxShadow: getBoxShadow()
  },
});

The same strategy must be applied to variants.

Also, such a plugin can improve DX for styling react components. Instead of explicitly defining the toString method and explicitly modifying className property of top-level node for React components, class names can be pre-generated and passed directly to JSX on the compilation step.