decss

decss converts CSS modules into React/Preact components. Thanks to simple CSS class naming convention it generates enum and boolean props for the component automatically so you can keep your code clean and tidy.

The runtime size is exactly 693 B.

💁 See Medium post for introduction and reasoning behind

Installation

If you want to use decss with webpack, install decss-loader:

npm install decss-loader --save-dev
# or
yarn add --dev decss-loader

To use the low-level API, or to manage the core library version, install decss:

npm install decss --save
# or
yarn add decss

Configuration

// ...
{
  test: /\.css$/,
  use: [
    'style-loader',
    'decss-loader/react', // 👈 Add loader (use 'decss-loader/preact' for Preact)
    {
      loader: 'css-loader',
      options: {
        modules: true, // 👈 You must enable modules to make it work
        importLoaders: 1,
        localIdentName: '[local]-[hash:base64:5]',
      }
    },
    'postcss-loader'
  ],

  // or if you prefer classic:

  loader: 'style!decss/preact!css?modules&importLoaders=1&localIdentName=[local]-[hash:base64:5]&!postcss'
},
// ...

Usage with ExtractTextPlugin:

// ...
{
  test: /\.css$/,
  use: ['decss-loader/preact'].concat(
    ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: [
        {
          loader: 'css-loader',
          options: {
            modules: true,
            importLoaders: 1,
            localIdentName: '[local]-[hash:base64:5]'
          }
        },
        'postcss-loader'
      ]
    })
  )
},
// ...

Usage

See low-level API docs for more implementation details.

React

import React from 'react'
import { Button } from './style.css'

function PanicButton({ alreadyPanicking }) {
  return (
    <Button tag="button" color="red" disabled={alreadyPanicking}>
      Panic
    </Button>
  )
}

Preact

import { h } from 'preact'
import { Button } from './style.css'

function PanicButton({ alreadyPanicking }) {
  return (
    <Button tag="button" color="red" disabled={alreadyPanicking}>
      Panic
    </Button>
  )
}

Convention

Component (.Component)

.Component is a component 🤡 The name must be in class-case, e.g. .FormInput, .UI.

In this example, .Button represents <Button />.

.Button {
  color: white;
}

Boolean Prop (.Component-propName)

.*-disabled is a boolean prop.

.Button-disabled {
  opacity: 0.5;
}

In the example, .Button-disabled is applied to the component when its disabled prop is truthy:

<Button disabled>Whatever</Button>

Enum Prop (.Component-propName-option)

.*-color-gray is an enum prop.

.Button-color-red {
  background: red;
}

.Button-color-green {
  background: green;
}

.Button-color-red is applied to the component when its color prop equals "red":

<Button color="red">Click Me</Button>

Setting Default Value

To set the default value to certain enum option, use good ol' CSS:

.Button,
.Button-color-green {
  background: green;
}

Refs to DOM nodes

Passing ref to component will give a ref to the decss wrapper, not to DOM node. So it's not possible to call DOM methods, like focus on that wrapper. To get a ref to wrapped DOM node, pass innerRef prop.

Note: innerRef only supports callback refs (i.e. ref={comp => this.bla = comp}), string refs (i.e. ref="bla") won't work.

Related

• styled-components: the source of inspiration.
• React CSS components: a similar project.
• decss-loader: decss webpack loader source code.

License

MIT © Sasha Koss