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 664 B.
💁 See Medium post for introduction and reasoning behind
If you want to use decss with webpack, install decss-loader:
npm install decss-loader --save-dev
# or
yarn add --dev decss-loaderTo use the low-level API, or to manage the core library version, install decss:
npm install decss --save
# or
yarn add decss// ...
{
test: /\.css$/,
use: [
'style',
'decss/react', // 👈 Add loader (use 'decss/preact' for Preact)
{
loader: 'css',
options: {
modules: true, // 👈 You must enable modules to make it work
importLoaders: 1,
localIdentName: '[local]-[hash:base64:5]',
}
},
'postcss'
],
// or if you prefer classic:
loader: 'style!decss/preact!css?modules&importLoaders=1&localIdentName=[local]-[hash:base64:5]&!postcss'
},
// ...See low-level API docs for more implementation details.
import React from 'react'
import { Button } from './style.css'
function PanicButton ({ alreadyPanicking }) {
return (
<Button tag='button' color='red' disabled={alreadyPanicking}>
Panic
</Button>
)
}import { h } from 'preact'
import { Button } from './style.css'
function PanicButton ({ alreadyPanicking }) {
return (
<Button tag='button' color='red' disabled={alreadyPanicking}>
Panic
</Button>
)
}.Component is a component 🤡 The name must be in class-case, e.g. .FormInput, .UI.
In this example, .Button represents <Button />.
.Button {
color: white;
}.*-disabled is a boolean prop.
.Button-disabled {
opacity: .5;
}In the example, .Button-disabled is applied to the component when its disabled prop is truthy:
<Button disabled>
Whatever
</Button>.*-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>To set the default value to certain enum option, use good ol' CSS:
.Button,
.Button-color-green {
background: green;
}- styled-components: the source of inspiration.
- React CSS components: a similar project.
- decss-loader: decss webpack loader source code.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent