atlassian-labs/compiled v0.2.15

v0.2.15 | Atlassian ShipIt 48 🥳

on GitHub

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.