compiled

New features

• @compiled/webpack-loader now supports Webpack v4 (#608)

New features

Parcel transformer (#512)

Note Parcel v2 is currently in pre-release which makes this transformer experimental, it may break when updating Parcel. Use with caution.

The first cut of @compiled/parcel-transformer is now available. This will improve local developer experience when working with Parcel v2 when your imports have been statically evaluated into your CSS. See #344 for background.

npm install @compiled/parcel-transformer --save-dev

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.{js,jsx,ts,tsx}": [
      "@compiled/parcel-transformer",
      "@parcel/transformer-babel",
      "@parcel/transformer-js"
    ]
  }
}

See installation docs for more information. There will be bugs - found one? Raise an issue.

Bug fixes

• Webpack loader now works with TypeScript and Flow languages (#559)

New features

Webpack loader (https://github.com/atlassian-labs/compiled/pull/530)

The first cut of @compiled/webpack-loader is now available. This will improve local developer experience when working with Webpack when your imports have been statically evaluated into your CSS. See #344 for background.

npm install @compiled/webpack-loader --save-dev

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          { loader: 'babel-loader' },
          {
            loader: '@compiled/webpack-loader',
          },
        ],
      },
    ],
  },
};

See Installation docs for more information. There will be bugs - found one? Raise an issue.

Chores

• Dependencies have been upgraded to latest

New features

Functions with arguments static evaluation (https://github.com/atlassian-labs/compiled/pull/476)

Functions that take arguments can now be statically evaluated further, meaning you can further create reusable CSS atoms to reuse between components.

import '@compiled/react';

const font = color => ({
  color,
  fontSize: 20,
});

<div css={font('red')} />

.color-red { color: red; }
.font-size-20px { font-size: 20px; }

BREAKING CHANGES

Remove babel plugin entrypoint from @compiled/react (https://github.com/atlassian-labs/compiled/pull/504)

The babel plugin entrypoint has been removed from the @compiled/react package, along with the package dependency. This means how you install and consume Compiled has slightly changed now.

-npm i @compiled/react
+npm i @compiled/react @compiled/babel-plugin

{
-  "plugins": ["@compiled/react/babel-plugin"]
+  "plugins": ["@compiled/babel-plugin"]
}

Bug fixes

• The @compiled/react package entrypoints field in its package json now point to both the commonjs and esm exports, thanks @adevnadia! (https://github.com/atlassian-labs/compiled/pull/502)
• CSS prop has boolean added to its array type declaration to properly support conditional CSS rules, thanks @sonatard! (https://github.com/atlassian-labs/compiled/pull/491)
• The @compiled/cli package now correctly finds codemods again (https://github.com/atlassian-labs/compiled/pull/498)

Chores

• Import tests for nodejs have been added to ensure things work across different versions (https://github.com/atlassian-labs/compiled/pull/503)

Chores

• Renovate has been enabled for the repository keeping our dependencies up to date (https://github.com/atlassian-labs/compiled/pull/428)
• JSDoc annotations have been added to all public APIs (https://github.com/atlassian-labs/compiled/commit/711aa155bb688a2fb840a3ae8d79d7d8280a6cd5)

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:

• https://github.com/atlassian-labs/compiled/issues/333
• https://github.com/atlassian-labs/compiled/issues/345
• https://github.com/atlassian-labs/compiled/issues/346
• https://github.com/atlassian-labs/compiled/issues/413

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.

Chores

• TypeScript updated to v4.1 (https://github.com/atlassian-labs/compiled/pull/425)
• Local dependencies have been updated (https://github.com/atlassian-labs/compiled/pull/420)
• Jest has been upgraded to the latest version (#426)

Bug fixes

Unguarded styled destructuring (https://github.com/atlassian-labs/compiled/pull/415)

When we added support for destructuring in styled interpolations, for example:

styled.div`
  font-size: ${({ isBig }) => isBig ? '20px' : '10px'};
`;

There were some scenarios where it would blow up because of unguarded code, which has now been fixed.

Compiled has been re-written as a Babel Plugin and has been architected for the future. The primary entry point to use Compiled now is via @compiled/react.

Installation

npm i @compiled/react

Read the installation docs for more help.

New features

All React APIs and behavior that was available in v0.4.x are still available in v0.5.0.

Consistent style overrides

When overriding styles now they will be applied consistently. Previously depending on the order you rendered them they could have the wrong styles! Now when using for example the styled API:

import { styled } from '@compiled/react';

const RedText = styled.span`
  color: red;
`;

export const BlueText = styled(RedText)`
  color: blue;
`;

The text ends up always being blue! Awesome!

Conditional CSS rules

This one is huge! Now you can conditionally apply your CSS rules when using CSS prop.

import * as React from 'react';
import '@compiled/react';

export const Lozenge = (props) => (
  <span
    css={[
      props.primary && {
        border: '3px solid pink',
        color: 'pink',
      },
      !props.primary && {
        border: '3px solid blue',
        color: 'blue',
      },
    ]}>
    {props.children}
  </span>
);

Conditional CSS support for the styled and ClassNames apis are coming soon https://github.com/atlassian-labs/compiled/issues/390 https://github.com/atlassian-labs/compiled/issues/391.

Atomic CSS

The library now delivers atomic CSS when baked into the JavaScript. Previously this wasn't the case! But as we were re-writing the library as a Babel Plugin we quickly realized that the behavior when extracted to CSS would end up being different to when baked. Not good! To ensure we have a consistent experience throughout the life-cycle of components styled with Compiled we shifted gears earlier.

Instead of the output CSS looking like:

.aw2g43 {
  border: none;
  font-size: 14px;
  background-color: purple;
  border-radius: 3px;
}

It now looks more like:

._1ss5hd22 {
  border: none;
}

._f3a09ddd {
  font-size: 14px;
}

._7ssk3a2s {
  background-color: purple;
}

.uue229zs {
  border-radius: 3px;
}

However at the end of the day it's just an implementation detail. As a developer you won't actually be writing CSS like this. Interestingly shifting to atomic CSS has enabled both style overrides and CSS rules to be implemented - without it they could not work.

Module traversal

When importing things from other modules they are now able to be known and used in your CSS! Think of functions that return a CSS object, strings and numbers, and really anything else you'd want to use.

export const largeFont = {
  fontSize: 50,
};

import { styled } from '@compiled/react';
import { largeFont } from './mixins';

const Text = styled.h1`
  ${largeFont};
`;

This is a work-in-progress and there will definitely be edge cases that need to be fixed. Found one? Please raise an issue.

Static evaluation

Thanks to moving to Babel we can now evaluate expressions more easily. This means that code such as this:

import { styled } from '@compiled/react';

const gridSize = 8;

const Box = styled.div`
  padding-top: ${gridSize * 3}px;
`;

Ends up generating static CSS:

padding-top: 24px;

This is a work-in-progress and there will definitely be edge cases that need to be fixed. Found one? Please raise an issue.

CLI & Codemods

To make migrating to Compiled easier we've made a CLI runner with its first preset - codemods! To run we recommend using npx:

npx @compiled/cli --preset codemods

Make sure to have @compiled/react installed locally before running - that's where the codemods live!

And then follow the prompts. There are known missing features and behavior that are on the roadmap to be implemented in the future - so you probably won't be able to convert everything using the codemods just yet.

This is a work-in-progress and there will definitely be edge cases that need to be fixed. Found one? Please raise an issue.

Array CSS

All APIs now support writing CSS with arrays, with the styled API also supporting multi arguments.

styled.div([
  `
  font-size: 12px;
`,
  { color: (props) => props.color },
])

styled.div(
  `
  font-size: 12px;
`,
  { color: (props) => props.color }
)

<div css={[`font-size: 12px;`, isPrimary && { color: 'blue' }]} />

<ClassNames>
  {({ css, style }) =>
    children({
      style,
      className: css([`font-size: 12px`, { color: 'blue' }]),
    })
  }
</ClassNames>

Breaking changes

• TypeScript transformer support has been dropped.

You know when you start working on something and then you get new information that changes things - but you forget to go back and fix up your stuff to use the new assumptions? Yeah.

Bug fixes

Template literal css extraction blows up when referencing an unknown import

When the transformer doesn't know what the import is (such as when it's being used in Babel, or when type checking is turned off) it would blow up instead of just... working. Not ideal.

...So now this code will work!

import { gridSize } from '@styles/my-lib';
import { styled } from '@compiled/css-in-js';

export const MySweetDiv = styled.div`
 padding: ${gridSize}px;
`;

This is an overarching pull & tug of utilizing TypeScript transformers in different contexts - the "fix" will probably come by others means, hopefully #217, but also maybe #67 #66 too.

More bug fixes.

Bug fixes

• Adds missing config to babel plugin to parse flow (#216)
• Fixes hashing exploding when using a node creating during transformation (#219)

Fixing an oopsie!

Bug fixes

Infinite loop when running Babel Flow (#215)

The code was inheriting the parent babelrc and caused an infinite loop - whoops! Should work great now though.

Edit:

Narrator: It didn't work great. Back to the drawing board 😎

These nightlies have it working:

• https://www.npmjs.com/package/@compiled/css-in-js/v/0.4.6-224c703f47734c02664c4520e3624b103ee7bdd4.0
• https://www.npmjs.com/package/@compiled/babel-plugin-css-in-js/v/0.4.6-224c703f47734c02664c4520e3624b103ee7bdd4.0

Few bug fixes and some nice features this release!

New features

Honor browserlist options via config/env vars (#211)

Thanks to @ankeetmaini browserlist options are now honored! This means if you have one set in your package json, browserlistrc file, or environment variables, it will be picked up! That's potential for big savings from reducing the amount of autoprefixing needed.

Bug fixes

Fix interpolations that are delimited by spaces being picked up as suffixes (#209)

There was a bug where some interpolations were breaking our CSS! This is fixed now - so the following code will work as expected.

import '@compiled/css-in-js';
import React from 'react';

const gridSize = () => 8;
const HORIZONTAL_SPACING = `${gridSize() / 2}px`;

<div css={{
  padding: `0 ${HORIZONTAL_SPACING}`,
  color: 'red',
}}>hello world</div>

Fix not working with Babel Flow (#214)

Before when using Compiled with Babel Flow types it would blow up. Now it should be smooth sailing to reach that pinnacle of compiled goodness!

Misc

• Use the official PostCSS selector parser @pgmanutd (#210)
• Use github actions v2 @madou (https://github.com/atlassian-labs/compiled-css-in-js/commit/7d92b7fd7450b15bc403cf6d39fa69ac3b285ecf)
• Update CLA links (#212)
• Bump websocket-extensions from 0.1.3 to 0.1.4 (#213)

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!