css-out-js

Author collocated styles in JS, pull them during build time to ship static CSS. No runtime dependency.

 

the big idea:

I like to author styles collocated with component code, that's how I find them maintainable.

But before shipping them to users, I'd like to pull styles out of components and ship them in static CSS files. No runtime dependency.

 

prior art: This idea is not entirely new, there have been other similar interpretations of this idea before like callstack/linaria and atlassian-labs/compiled

 

input

App.js

import { css } from 'css-out-js';

const Title = (props) => {
  return <h1 className={css({ fontSize: '2em' })}>Hello!</h1>;
};

output

The plugin extracts the styles into a css file
and replaces the function call with generated className string.
If there are any dynamic styles, it creates a css variable for them.
Finally, it removes the removes the import for css-out-js, no runtime.

dist.css

+.Title-1bdbzov {
+  font-size: 2em;
+}

App.js

- import { css } from 'css-out-js';

const Title = (props) => {
- return <h1 className={css({ fontSize: '2em' })}>Hello!</h1>;
+ return <h1 className="Title-1bdbzov">Hello!</h1>;
};

 

works with dynamic styles as well:

input

App.js

import { css } from 'css-out-js';

const Home = (props) => {
  const className = css({ color: props.color });

  return (
    <section className={className}>
      <p>Home sweet home</p>
    </section>
  );
};

output

Dynamic styles based on props are made possible by setting a css variable.

dist.css

+.Home-2b9glr {
+  color: var(--props-color-1trdzir);
+}

App.js

- import { css } from 'css-out-js';

const Home = (props) => {
- const className = css({ color: props.color });
+ const className = "Home-2b9glr"
+ document.documentElement.style.setProperty('--props-color-1trdzir', props.color),

  return (
    <section className={className}>
      <p>Home sweet home</p>
    </section>
  );
}

setup

• install

  npm install css-out-js --save-dev
  
  # or
  
  yarn add css-out-js --dev
  

• Add plugin to babelrc, you can specify the location of your generated css file (hint: see examples directory)

  module.exports = {
    plugins: [['css-out-js/babel', { path: 'public/dist.css' }]]
  };
  

• add css import

  this may differ based on the framework of your choice. (hint: see examples directory)

  // App.js
  import './dist.css';