atlassian-labs/compiled v0.3.0

on GitHub

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.