compiled

Bug fixes

Missing semi colon (#206)

There was a case where when referencing a template literal in a CSS object it was missing a semi colon - thus causing a build error because of invalid CSS. This is now fixed!

Pesky semi-colons 😉

const gridSize = 4;

const Div = () => (
  <div css={{
      padding: `0 ${gridSize}px`,
      color: 'red',
    }}
  />
);

New features

Minification (#175)

You can now minify your CSS! Add minify: true to your transformer/plugin options and enjoy smaller bundles!

{
  "plugins": [["@compiled/babel-plugin-css-in-js", { "minify": true }]]
}

{
  "compilerOptions": {
    "plugins": [
      {
        "transform": "@compiled/ts-transform-css-in-js",
        "options": { "minify": true }
      }
    ]
  }
}

Bug fixes

Short circuit dynamic properties (#204)

Previously when defining a dynamic property that had a suffix you would see undefined in your HTML if you didn't pass it a value! Now it defaults to an empty string '' so at worst - you just see that suffix by itself.

Say we had this code:

import { styled } from '@compiled/css-in-js';

const MyComponent = styled.div`
  padding: ${props => props.padding}px;
`;

<MyComponent />

Would render this CSS before:

padding: undefinedpx;

But now it renders:

padding: px;

Progress!

Css prop having some props removed (#202)

Previously props that weren't named className or style were removed - whoops! Now they correctly remain. So this code should now work as expected:

const MyComponent = props => {
  return <div {...props} css={{ color: 'red' }} />
};

Minification adding charset rule unintentionally (#201)

The minification tool cssnano - a PostCSS plugin - was adding an extra @charset rule which blows up when running in production mode. This fix turns it off.

Which means when turning on minify: true in your options it'll work fantastically now!

Dangling pseduos edge cases (#199)

Previously the solution was susceptible to some (very small) edge cases - this clean that up so it wouldn't happen anymore.

Chores

• Ran prettier over the codebase (#203)
• Ensure releases are ran only from master (https://github.com/atlassian-labs/compiled-css-in-js/commit/747b371c29e350f3856a2de8cad79f7695e20c1e)
• Upgrade to v2 of github actions checkout (https://github.com/atlassian-labs/compiled-css-in-js/commit/a9579b28432cbd76d55994831307032fce0de818)

Small bug fix release.

Bug fixes

Styled interpolation fixes (#198)

Some style interpolations weren't being applied correctly and would result in a build time exception - or even worse just broken CSS!

Here are some examples that were broken before but now work:

const Div = styled.div`
  border-radius: ${2 + 2}px;
  color: blue;
`;

const getBr = () => 4;

const Div = styled.div`
  border-radius: ${getBr}px;
  color: red;
`;

const getBr = () => {
  return true ? 'red' : 'blue';
};
        
const Div = styled.div`
  font-size: ${getBr()}px;
  color: red;
`;

Happy styling! 🥳

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 the CS export
• @compiled/css-in-js's named export Style has been renamed to CS

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

New features

Jest matcher improvements (#168)

The jest matcher @compiled/jest-css-in-js has been improved thanks to @ankeetmaini! It now parses the CSS into an AST which enabled some cool improvements.

Notably, we can now narrow the assertion using target and/or media options like so:

expect(element).toHaveCompiledCss('color', 'blue', { target: '&:hover' });

For more information see the website https://compiledcssinjs.com/docs/testing

New features

Dead code elimination (#169)

The Styled Component API now prepends a pure pragma to ensure bundlers know it's safe to get rid of when it hasn't been used! You can find the test code for it here which is then passed through size-limit to ensure it's the size we expect.

Bug fixes

Template literal interpolations

These interpolations now are correctly extracted when in a group, and multiple groups. CSS that broke before looked like:

<div
  css={`
    transform: translate3d(${x}, ${y}, ${z});
  `}
/>

Fear not! It should work as expected now. If you see anything interesting create an issue.

De-duplicated interpolations

Previously if the same interpolation was used multiple times the inline style prop would have it duplicated.

Css prop class name

When a css prop was passed a class name it wouldn't conditionally apply it - so it would end up appearing as undefined when it shouldn't!

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!

New features

SSR but smaller (#156)

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 🥳.

Developer experience

Source maps #153

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.

Misc

Bundle size

The bundle size for @compiled/style has been reduced from 423 B to 323 B! Pretty chuffed TBH.

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! 👏

New features

CSP nonce (#146)

@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!

Jest matcher can now assert 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');

Bug fixes

Template literal dynamic values (#150)

@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);
}

Remove potential for hash collisions with Emotion (#136)

@flexdinesh removes the potential for collisions with Emotion by renaming the prefix we use from css to cc (Compiled Component). Dope!

Removing jest types from css in js library (#148)

@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.

Jest matcher can't find multiple style tags (#147)

@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.

Remove unneeded prefix (#141)

@danieldelcore removed the cc prefix from the hash added to Compiled Components - to save some bytes!

Developer experience

Jest typeahead plugin (#134)

@danieldelcore added the ability to find tests while developing Compiled a bit easier!

Eslint (#149)

@danieldelcore added eslint which will run both in CI and as a pre-commit hook. It's watching you 👀.

Styled components display names (#145)

@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;
  }
`;

Runtime warnings (#144)

@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:

Style typing consolidation (#126)

@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.

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