New features
CommonJS bundle (#419)
@compiled/react is now available as a CommonJS bundle - sourced via the usual main field in package.json. This means if you're using NextJS and other tools where your node module dependencies can't use ES modules you can now use Compiled!
Bug fixes
Browser bundle split points (#417)
Previously we were splitting server/browser module points via require() calls. Unfortunately this doesn't work in snowpack, and other strict bundlers. This code has now been consolidated into a single module. As an added bonus it also reduced the runtime bundle slightly.
Dynamic interpolations (#418 #423)
Previously this was a mess. There were a ton of edge case bugs, and the code wasn't something I'd want to tell my grandma about. Well - the code has now been mostly re-written - and definitely improved.
These changes closed a few bugs:
The one I'm really liking though is now dynamic interpolations (which are powered by CSS variables) will no longer leak to children if the child has an interpolation which resolved to undefined. Awesome!
import { styled } from '@compiled/react';
const Box = styled.div`
border: 2px solid ${props => props.color};
`;
<Box color="pink">
Has a pink border
<Box>Now has a black border, previously would have a pink border!</Box>
</Box>JSX automatic runtime (#421)
With the new automatic runtime available in @babel/preset-react we wanted to ensure @compiled/react works great with it. A few changes were needed to get it working - but not much.
If you're using the new automatic runtime make sure to turn off automatic importing of React.
{
"presets": [
["@babel/preset-react", { "runtime": "automatic" }]
],
"plugins": [
["@compiled/react/babel-plugin", { "importReact": false }]
]
}Normalize input CSS (#427)
Previously Compiled would generate different atomic CSS rules for CSS declarations that are semantically the same, but are written slightly different, for example selectors/at rules having different whitespace, and empty values being slightly different (0 vs. 0px).
A fix has been put in place where for all builds, whitespace will no longer affect atomic groups. This means the following example would generate the same atomic rule now:
> :first-child { color: red; }
>:first-child{ color: red; }This same behavior also applies to at rules.
More advanced optimization happens when building for production, when NODE_ENV is set to production CSS values will be normalized and shrunk to their smallest possible values.