Question: How do you determine the html element to use?

[Download]

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>

[kossnocorp]

Hey, thanks for the questions! Here are the answers:

Is it correct that defaultProps accepts a mapping from Component to HTML element/props?

Yes, that's right but decss-loader doesn't use defaultProps. In fact, I completely forgot about this feature that I wrote in the early stages of development.

If so, does this mean you can't use this mapping when using decss-loader?

Yup.

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:

That's tricky, but I believe it's possible. Although it will require a lot of changes to css-loader. Initially, I did plan to make it this way (you can see it by the presence of defaultProps) but it turned out to be challenging so I gave up on this. In the end, I used to pass tag whenever I need it, but sometimes I forgot to do so and end up with "div buttons", so I feel your pain.

If you feel brave enough you might try to send a PR to css-loader or make a fork. I'll gladly accept any changes necessary to decss. I've tried to contribute to css-loader once but with no luck.

[Download]

Thanks for your response! I actually already cloned the repo and perused the code but I think it's a bit too much for me at the moment to make a PR. But good to see that my understanding was correct. Thanks!