Breaking changes
PostCSS (#175)
Internally we've replaced stylis with post-css - as a consumer of Compiled you shouldn't notice any difference (but if you do please raise an issue!). This change paves the way for more interesting CSS plugins down the track, and also enables more powerful customization of autoprefixer, minification, and more.
Package export renaming (#187)
@compiled/style's default export has been removed and replaced with theCSexport@compiled/css-in-js's named exportStylehas been renamed toCS
New features
Constant inlining (#178)
Interpolations that reference simple variables (a string or number) will now be inlined directly in your CSS instead of being references as a CSS variable!
Before:
const color = 'blue';
<span css={{ color }} />
// Transforms to css with dynamic property
<style>{['.cc-1sbi59p { color: var(----var-1ylxx6h); }']}</style>
<span style={{ '--var-1ylxx6h': color }} className="cc-1sbi59p" />After:
const color = 'blue';
<span css={{ color }} />
// Transforms to static property
<style>{['.cc-1sbi59p { color: blue; }']}</style>
<span className="cc-1sbi59p" />Thanks @ankeetmaini!
Bug fixes
Destructured variable idenfitiers (#185)
Previously when referencing a de-structured variable identifier it would blow up - this is fixed now!
const [color] = ['blue'];
<div css={{ color: `${color}` }}>hello world</div>Thanks @ankeetmaini!
Chores
- Jest matcher types were consolidated thanks @jdanil #180
- Documentation was updated to point to the correct transformer section thanks @gwyneplaine #181