A familiar and performant compile time CSS-in-JS library for React.
APACHE-2.0 License
Bot releases are hidden (Show)
We're continuing the story of getting the basic features that we all expect from a modern CSS in JS library. This release has a juicy new feature, a DX improvement, and some bundle size wins!
When server side rendering you will now only render the smallest amount of CSS - and you don't have to do anything to enable this! It will happen immediately after upgrading.
Say we're rendering this:
const StyledParent = styled.div`
display: flex;
`;
const StyledDiv = styled.div`
font-size: 12px;
`;
<StyledParent>
<StyledDiv>hello world</StyledDiv>
<StyledDiv>hello world</StyledDiv>
</StyledParent>
On the server before you'd get this HTML:
<style>.cc-10mivee{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style>
<div class="cc-10mivee">
<style>.cc-1610nsm{font-size:12px;}</style>
<div class="cc-1610nsm">hello world</div>
<style>.cc-1610nsm{font-size:12px;}</style>
<div class="cc-1610nsm">hello world</div>
</div>
Now we get...
<style>.cc-10mivee{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style>
<div class="cc-10mivee">
<style>.cc-1610nsm{font-size:12px;}</style>
<div class="cc-1610nsm">hello world</div>
- <style>.cc-1610nsm{font-size:12px;}</style>
<div class="cc-1610nsm">hello world</div>
</div>
If we extrapolate this out at scale - we're now saving a lot of Kb 🥳.
Source map support has landed!
You can turn them on in your transformer options like so:
{
"plugins": [["@compiled/babel-plugin-css-in-js", { "sourceMap": true }]]
}
{
"compilerOptions": {
"plugins": [
{
"transform": "@compiled/ts-transform-css-in-js",
"options": {
"sourceMap": true
}
}
]
}
}
Make sure to only turn them on in development
! Else suffer a big bundle. Note source maps are currently only working in Chrome - we have a bug open for Firefox here.
The bundle size for @compiled/style
has been reduced from 423 B
to 323 B
! Pretty chuffed TBH.
Published by itsdouges over 4 years ago
So @madou @flexdinesh and @danieldelcore worked over hackathon to smash out bugs, add new features, improve the testing story, and get some huge DX wins. Check it out! 👏
@madou added content security policy nonce
support, you can use it by setting the nonce
option in both the Babel plugin or TypeScript transformer:
// .babelrc
{
"plugins": [["@compiled/babel-plugin-css-in-js", { "nonce": "__webpack_nonce__" }]]
}
// tsconfig.json
{
"compilerOptions": {
"plugins": [
{
"transform": "@compiled/ts-transform-css-in-js",
"options": {
"nonce": "__webpack_nonce_"
}
}
]
}
}
Not sure what content security policy aka CSP is? Have a read here: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP. It allows us to be explicit about what can and can't run - JavaScript, styles, images even!
For us and styles it's about using the style-src
part. So we could have a meta
tag in our HTML head:
<meta
http-equiv="Content-Security-Policy"
content="style-src 'nonce-k0Mp1lEd' 'unsafe-inline' 'unsafe-eval' 'strict-dynamic' https: http:;"
/>
Notice the nonce
is k0Mp1lEd
. Using the settings above if we imagine __webpack_none__
ends up resolving this string, we'll end up rendering style elements that look like:
<style none="k0Mp1lEd"></style>
And thus the styles will be allowed to render! But if the nonce
did not match.. well.. the styles would be blocked by the browser!
not
! (#140)@danieldelcore added the ability for us to not
our assertions now! And did some extra cleanup and added tests. What a guy!
expect(compiledComponent).not.toHaveCompiledCss('font-size', '12px');
@flexdinesh fixed dynamic template literals not being compiled correctly!
Now you can use dynamic values inside calc
CSS values and the like and it will correctly be transformed into a CSS variable.
<div
css={{ marginLeft: `calc(100% - ${heading.depth}rem)` }}
/>
Which would end up rendering the CSS
.cc-112AS {
margin-left: calc(100% - var(--var-asA23);
}
@flexdinesh removes the potential for collisions with Emotion by renaming the prefix we use from css
to cc
(Compiled Component). Dope!
@madou removed duplicate types for the jest matcher that were in @compiled/css-in-js
!
Still need them? They're where they belong inside @compiled/jest-css-in-js
.
@danieldelcore fixed the jest matcher util available in @compiled/jest-css-in-js
to now correctly pick up style declarations when they're spread over multiple styles.
@danieldelcore removed the cc
prefix from the hash added to Compiled Components - to save some bytes!
@danieldelcore added the ability to find tests while developing Compiled a bit easier!
@danieldelcore added eslint which will run both in CI and as a pre-commit hook. It's watching you 👀.
@madou added display names to styled components that will only be applied in dev. When you build your code for production it should be dead code that will be eliminated! This is super useful for local development.
const Highlight = styled.div`
:hover {
background-color: pink;
}
`;
@madou added a runtime help that only runs in development to warn you when using unsafe selectors such as :first
and :nth-child
.
It'll look like this:
@madou consolidated all the types for all the APIs. Now they all share the same underlying types so there shouldn't be any inconsistencies for later development.
Published by itsdouges over 4 years ago
Jsx pragma has been removed - instead it will be activated when any @compiled/css-in-js
import is found.
Before
/** @jsx jsx */
import { jsx } from '@compiled/css-in-js';
<div css={{}} />
After
import '@compiled/css-in-js';
<div css={{}} />
There is also an issue to enabled css
prop with no import as a configuration option, follow along here: https://github.com/atlassian-labs/compiled-css-in-js/issues/102