Skip to content
🎨 Write plain CSS, import as React/Preact components πŸ‘©β€πŸŽ¨
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Add stats script (#4) Jul 4, 2017
CHANGELOG.md Promote to v0.8.0 Apr 30, 2018
README.md Add note about preact-cli-decss to the README (closes #18) Apr 30, 2018
index.js Allow to mix classes with custom className (closes #15) Apr 30, 2018
package.json
preact.js I don't test that I push Jun 21, 2017
react.js Fix React, add docs (#3) Jul 4, 2017
test.js Allow to mix classes with custom className (closes #15) Apr 30, 2018

README.md

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

If you use preact-cli, install preact-cli-decss plugin:

npm install preact-cli-decss --save-dev
# or
yarn add --dev preact-cli-decss

See preact-cli-decss for more details and configuration instructions.

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

License

MIT Β© Sasha Koss

You can’t perform that action at this time.