Styled-components-website: Add "Why do my DOM nodes have two classes?" to the FAQ

[mxstbr]

This is copied from a recent chat log, we should clean this up and add it to the FAQ:

The first class (sc-bfhe32) is static per-component, meaning every instance of a <Button /> will have that class. The second is per-dynamic-stylr-fragmet, so all <Button primary /> will have the same one, all <Button secodary /> will have the same one etc.
Note that the first one doesn't actually have any styles attached to it because it's only used for when you interpolate the component (${Button}) and so that in the DevTools you can quickly tweak all Buttons no matter if they're primary, secondary or whatever else

[nilsgoksor]

I could give this a go as my first contribution! Just to clarify, I'm supposed to make a new question in the FAQ explaining this in a good way and using an example?

[mxstbr]

Yes, that's exactly it! Looking forward to your PR :blush:

[kitten]

Wow that would be an amazing addition! We’ve had to answer this too many times :)

[nilsgoksor]

Hi,
I'm still working on this but it's going slowly because I've encountered some issues + been on vacation. I was hoping I could get some guidance...

After cloning the repository and making my changes in my branch, I try to do "npm start" in my repository but I get "module.js:471 throw err;" which means it's something wrong with packages.json. I've tried googling without success.

I suspect I do some very basic mistake when trying to get it running, since this is all very new to me. Any advise what might be wrong is appreciated :)

[kitten]

@nilsgoksor are you using yarn and node >= 6? That should do it. Otherwise feel free to ping me on Twitter to get some hands-on support :wink:

[nilsgoksor]

Thanks for the quick answer! I'm using both. I managed to fix the issue with;
set NODE_ENV=development&& nodemon server.js

But it's good to know I can ping you the next time I encounter some problem ;)

[kitten]

Are you sure you're running the yarn dev task then? Also, you won't need nodemon since next takes care of updates/restarts

The yarn start task is for production, so yarn build needs to be run first.

[mxstbr]

Ohh, are you on windows @nilsgoksor?

[nilsgoksor]

I'm using yarn dev now and it's working! Thanks @philpl :) And I'm on mac @mxstbr.

This is what I've done so far. I'm not sure I understood it 100% correctly, any feedback is appreciated!

I also wonder how to use ${Button} because currently it's not working.

[kitten]

@nilsgoksor I don’t think we need the live example, now that I’m seeing it’s context 🤔 it doesn’t really add any value, since you don’t need to prove that that’s how it works. Also, we have plenty example around that users can test, since there’s more live examples and we are using styled-components for the are of course.

Can you also submit a PR please? It’s fine if it’s a work in progress, but we can then comment and request changes there 😬