@compiled/babel-plugin-strip-runtime

Babel 7

Babel plugin used to strip the runtime away.

npm install @compiled/babel-plugin-strip-runtime --save-dev

Options

Configure in your Babel config.

// .babelrc
{
  "plugins": [["@compiled/babel-plugin-strip-runtime", {}]]
}

When set will prevent additional require (one import per rule) in the bundle and add style rules to meta data. This could be used when enabling style sheet extraction in a different configuration for SSR.

Type: boolean
Default: false

extractStylesToDirectory

When set, extracts styles to an external CSS file. This is beneficial for building platform components that are to be published on NPM.

Example of usage:

Given the below folder structure:

- src
  - index.jsx

// src/index.jsx
import { css } from '@compiled/react';

const Component = () => <div css={css({ fontSize: 12, color: 'blue' })}>hello world</div>;

Set the source folder and output folder relative to the root project path.

// .babelrc
[
  "@compiled/babel-plugin-strip-runtime",
  { "extractStylesToDirectory": { "source": "src", "dest": "dist" } }
]

It extracts the CSS sheet to a seperate file.

- dist
  - index.js
  - index.compiled.css

// src/index.jsx
import './index.compiled.css';
import * as React from 'react';
import { ax, ix } from '@compiled/react/runtime';
const Component = () =>
  /*#__PURE__*/ React.createElement(
    'div',
    {
      className: ax(['_1wyb1fwx _syaz13q2']),
    },
    'hello world'
  );

Type: { source: string; dest: string }
Default: undefined