At the moment because of the way extract-text-webpack-plugin works, decss-loader fails to properly build the components.

I'm trying to make this work with postcss-each and I'm running into some issues.

What I want to do is something like

React:

<MyComponent color="red" />

CSS:

@each $color in var(--colors) {
  .MyComponent-color-$color { background-color: $color; }
}

Where I'm getting an error Cannot read property '1' of null on this line in getComponents in the console, and none of my react application loads. Is there a better way to do this?

Is it a way to define tag in CSS? Like base from React CSS competent.

I think it will be nice to have it, since you will work it only once. Right now you can use your component in many places and it is easy to forget to set tag for Button.

Since #16 adds an ability to pass the className prop it also makes sense to introduce an alias class for Preact.

Do we have an TypeScript support?

If yes, we should add it to docs, because it is awesome :D.

Steps to reproduce
Attach a ref to a decss component

Expected Behavior
The ref is attached to the DOM node rendered

Actual Behavior
The ref is attached to the decss wrapper, making it impossible to e.g. focus wrapped element programmatically.

Just wanted to let you know I created a Preact CLI configuration plugin for decss:
preact-cli-decss.

In the example in the blog post, a <button> HTML element is rendered. At least, that's what's in the code you are refactoring.

But I could not wrap my head around how decss knows to use an HTML button instead of, say, a div.

So I peeked in the source and there I saw this:

 * // Usage with default props
 * const { Button, Icon } = decss(createElement, style, {
 *   Button: {tag: 'button', type: 'button'},
 *   Icon: {type: 'close'}
 * })
 * <Button><Icon />Close</Button>
 */
function decss (h, style, defaultProps) {

So... here are my questions:

• Is it correct that defaultProps accepts a mapping from Component to HTML element/props?
• If so, does this mean you can't use this mapping when using decss-loader?
• If both of the above are true, could we maybe extend your rules to allow the html element to be specified? I was thinking along the lines of:

.Button {
  color: white;
}

Maps to

<div class="Button-23564">My button</div>

whereas

button.Button {
  color: white;
}

would map to

<button class="Button-23564">My button</button>

When user is trying to import component for rule which doesn't exist.
https://cl.ly/1L3a1r0u1s2y

I'm running into this issue using <Link>s from react router, for example. Given when I want to style a link, what I've been doing is

import { classNames } from 'app.css';

/* in the jsx */
<Link className={classNames.MyLinkStyle} to="/">Home</Link>

And that's fine but it would be super cool to pass a component like

import { MyLinkStyle } from 'app.css';

/* in the jsx */
<MyLinkStyle component={Link} to="/">Home</MyLinkStyle>

When Decss-components has only one children and it is equal 0 (number), it's not displayed

React example:

import {Block} from './style.css'

const Component = () => (
  <div>
    // displayed
    <Block children="0"/> 
    <Block>0</Block>

     // not displayed
    <Block children={0}/>
    <Block>{0}</Block>
  </div>
)

Hello! Great lib, thanks for it. I want use it with Parcel, could you explain, how I can do it?

It will be nice allow to explicit extend component's classes via className prop:

<Component className="global-class"/> // <div class="Component global-class"/>

Also, it let's to mix Decss'ed components:

// Inner.js
import {Inner} from './Inner.css'
export default () => <Inner/>

// Wrapper.js
import {Wrapper} from './Wrapper.css'
import {Inner} from './Inner.js'
export default () => (
  <Wrapper tag={Inner} className="global-class"/> // <div class="Wrapper Inner global-class"/>
)

It'll be useful in cases, when the creating of the nested tags is undesirable.

What do you think about it?