atlassian-labs/compiled @compiled/react@0.10.0

on GitHub

Minor Changes

• 427cead: Breaking change: When using the css prop with TypeScript you now need to declare a JSX pragma enabling types for that module. Previously when importing the @compiled/react package the global JSX namespace would be polluted as a side effect potentially causing collisions with other CSS-in-JS libraries. Now thanks to the use of locally scoped JSX namespaces the global JSX namespace will no longer be polluted.

  As an added bonus the css prop will only be available on JSX elements that have also defined a className prop with the potential for more type safe features later on.

  Make sure to update @compiled/babel-plugin, @compiled/webpack-loader, and @compiled/parcel-transformer to latest when adopting this change.

  Automatic runtime

  -import '@compiled/react';
  +/** @jsxImportSource @compiled/react */
  
  <div css={{ display: 'block' }} />;

  Classic runtime

  -import '@compiled/react';
  +/** @jsx jsx */
  +import { jsx } from '@compiled/react';
  
  <div css={{ display: 'block' }} />;

  To aid consumers in adopting this change easily, a new ESLint rule jsx-pragma has been created which will automatically migrate you to use a JSX pragma if missing when running with --fix. The rule takes an option to configure the runtime (either classic or automatic) and defaults to automatic.

  npm i @compiled/eslint-plugin

  {
    "rules": {
      "@compiled/jsx-pragma": ["error", { "runtime": "classic" }]
    }
  }

Patch Changes

• 79cfb08: Internal refactor changing how the TypeScript compiler picks up source files.