Compiled

The CSS in JS authoring experience we love without the runtime cost

CSS in JS
atlassian-labs/compiledcompiledcssinjs.com@compiled/react

README

Compiled


A familiar and performant compile time CSS-in-JS library for React.
Apache 2.0 @compiled/react PRs welcome

Get started now ➚

Usage



  1. ``` js
  2. import { styled, ClassNames } from '@compiled/react';

  4. // Tie styles to an element
  5. <div css={{ color: 'purple' }} />

  7. // Create a component that ties styles to an element
  8. const StyledButton = styled.button`
  9.   color: ${(props) => props.color};
  10. `;

  12. // Use a component where styles are not necessarily tied to an element
  13. <ClassNames>
  14.   {({ css }) => children({ className: css({ fontSize: 12 }) })}
  15. </ClassNames>
  16. ```

Extract styles


Turn on extraction and all components styled in your app and sourced through NPM will have their runtime stripped and styles extracted to an atomic style sheet.

  1. ```diff
  2. -import { CC, CS } from '@compiled/react/runtime';
  3. -
  4. -const _2 = '._syaz1q9v{color: hotpink}';
  5. -const _ = '._1wybfyhu{font-size: 48px}';
  6. -
  7. export const LargeHotPinkText = () => (
  8. -  <CC>
  9. -   <CS>{[_, _2]}</CS>
  10.     <span className="_syaz1q9v _1wybfyhu">Hello world</span>
  11. -  </CC>
  12. );
  13. ```

  1. ```css
  2. ._1wybfyhu {
  3.   font-size: 48px;
  4. }
  5. ._syaz1q9v {
  6.   color: hotpink;
  7. }
  8. ```

See CSS extraction for more information.

Installation


Install the React package.

  1. ``` sh
  2. npm install @compiled/react
  3. ```

Then configure your bundler of choice or use Babel directly.

Webpack


Install the Webpack loader.

  1. ``` sh
  2. npm install @compiled/webpack-loader --save-dev
  3. ```

See installation for more information.

Parcel


Install the Parcel v2 configuration.

  1. ``` sh
  2. npm install @compiled/parcel-config --save-dev
  3. ```

Extend from the .parcelrc configuration:

  1. ``` json
  2. {
  3.   "extends": ["...", "@compiled/parcel-config"]
  4. }
  5. ```

See installation for more information.

Babel


Install the Babel plugin.

  1. ```
  2. npm install @compiled/babel-plugin --save-dev
  3. ```

See installation for more information.

Contributions


Contributions are welcomed!
Please see CONTRIBUTING.md to get started.
Atlassian