atlassian-labs/compiled v0.5.0

on GitHub

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 #390 #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.