You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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)
Every style block needs a unique, constant BEM style label
Props with infinite possible values can't be directely interpolated in the CSS:
// This can't be statically extracted.// 0 <= top <= ∞;conststyles=({ top })=>css` label: component; position: absolute; top: ${top};`;// This is okay.// spacing = kilo | mega | gigaconstpositionStyles=({ theme, spacing })=>spacing&&css` label: component--${spacing}; position: absolute; top: ${theme.spacings[spacings]};`;
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.
The text was updated successfully, but these errors were encountered:
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
Enabling constraints
Some of these requirements are only possible through enabling constraints:
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.
The text was updated successfully, but these errors were encountered: