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'// ...
Usage
See low-level API docs for more implementation details.
React
{ return <Button tag="button" color="red" disabled=alreadyPanicking> Panic </Button> }
Preact
{ 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 />
.
.Component-propName
)
Boolean Prop (.*-disabled
is a boolean prop.
In the example, .Button-disabled
is applied to the component when its disabled
prop is truthy:
<Button disabled>Whatever</Button>
.Component-propName-option
)
Enum Prop (.*-color-gray
is an enum prop.
.Button-color-red
is applied to the component when its color
prop equals "red"
:
<Button ="red">Click Me</Button>
Setting Default Value
To set the default value to certain enum option, use good ol' CSS:
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.