css-in-js-precompiler

Precompiles static CSS-in-JS objects to CSS strings

CURRENTLY A WORK IN PROGRESS

The problem

You love the benefits of CSS-in-JS, but don't love some of the performance characteristics and trade-offs you have to make with regards to not using actual CSS files.

This solution

This module takes in your source code and gives you back the source code with the literal CSS-in-JS objects swapped for class names as well as the generated CSS. You can then use that to create a css file and deploy that.

It's still pretty early stages

Installation

This is not yet published. But you can install it anyway with:

npm install kentcdodds/css-in-js-precompiler
cd node_modules/css-in-js-precompiler
npm install
npm start build

And you should be able to use it now :)

Usage

This is still under development so the API and assumptions are going to change. But right now, we're naïvely assuming you're using glamorous. But this solution will be modified to work with any CSS-in-JS library you're using.

const precompileCSSInJS = require('css-in-js-precompiler')
const options = {
  sources: [
    {
      code: `import glamorous from 'glamorous';\nglamorous.div({fontSize: 23})`,
      filename: '/some/path.js',
      babelOptions: {/* optional. Shallowly merges with the default babelOptions */}
    },
  ],
}

const result = precompileCSSInJS(options)
result.transformed[0].code === `import glamorous from 'glamorous';\nglamorous.div("css-my79es");`
result.transformed[0].map === '<the code source map>'
result.css === '.css-my79es,[data-css-my79es]{font-size:23px;}'

options

sources

This is an array of SourceObjects which will be used to determine what source to precompile and how. Here are the available properties on these objects:

code

This is the source code to actually precompile. If this is not provided, then the code will be derived from the filename.

filename

This is a string path to the filename. If the code is not provided, this will be used to read the file. If this is not provided, then you will be unable to handle importing dynamic values from other files.

babelOptions

This is the same thing you would pass to babel.transform if you were calling it yourself. Read more here. This will be shallowly merged with the default babelOptions. Currently (2017-05-03) the default babelOptions are:

{
  babelrc: false,
  sourceMaps: true,
  plugins: [/* our custom plugin to do this extraction */],
  parserOpts: {plugins: [/* all of them except estree */]},
}

This is shallowly merged, with the exception of plugins. You can specify any plugins you want and we'll make sure we always include our own plugin to do the precompiling. (You're welcome).

Inspiration

I started thinking about this around here.

Other Solutions

I'm not aware of any, if you are please make a pull request and add it here!

Contributors

Thanks goes to these people (emoji key):

Kent C. Dodds 💻 📖 🚇 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT