Extract static styles

[connor-baer]

Follow-up to #92 and #94.

Purpose

There are some frontend projects at SumUp that can't or don't use React. They need to implement all styles from scratch and need to be updated separately. This would be solved if we could somehow get the styles from the React components as plain CSS. This is exactly what static style extraction aims to achieve.

Requirements

• Readable and intuitive class names ideally using BEM style
• Small file size (exclude CSS for unused components)
• Include global base styles
• Hosted and versioned
• Documentation with usage examples
• Bonus: change the theme at runtime

Enabling constraints

Some of these requirements are only possible through enabling constraints:

1. Every style block needs a unique, constant BEM style label
2. Props with infinite possible values can't be directely interpolated in the CSS:

// This can't be statically extracted.
// 0 <= top <= ∞;
const styles = ({ top }) => css`
  label: component;
  position: absolute;
  top: ${top};
`;

// This is okay.
// spacing = kilo | mega | giga
const positionStyles = ({ theme, spacing }) => spacing && css`
  label: component--${spacing};
  position: absolute;
  top: ${theme.spacings[spacings]};
`;

3. Components that rely on JavaScript (JS) for their functionality will need custom vanilla JS code to work. Circuit UI might provide code examples, but currently doesn't include or maintain these scripts.

Potential downsides

The above constraints limit some of the advantages that CSS-in-JS brings (e.g. dynamic style props). Changes to components will need to be tested in React and plain CSS.

[ilyanoskov]

🎉 This issue has been resolved in version 1.2.2-canary.5 🎉

The release is available on:

• npm package (@canary dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[ilyanoskov]

🎉 This issue has been resolved in version 1.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀