atlassian-labs/compiled v0.4.2

on GitHub

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 (747b371)
• Upgrade to v2 of github actions checkout (a9579b2)