search

markerikson / react-community-tools-practices-cheatsheet

Descriptions and use cases for common tools and practices in the React community
https://react-community-tools-practices-cheatsheet.netlify.app/
328 stars 13 forks source link

Write CSS Modules doc #25

Closed srmagura closed 2 years ago

srmagura commented 2 years ago

Hmm, just realized I didn't include a realistic example at the bottom like I did for the other pages. Let me know if this is something that should be added. 🙂

netlify[bot] commented 2 years ago

Deploy Preview for react-community-tools-practices-cheatsheet ready!

Name Link
Latest commit 0c67e459b99c944767bd6c5fedc121bf507288b3
Latest deploy log https://app.netlify.com/sites/react-community-tools-practices-cheatsheet/deploys/62b1bf67fbb841000869f01a
Deploy Preview https://deploy-preview-25--react-community-tools-practices-cheatsheet.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

markerikson commented 2 years ago

Yeah, consistent examples would be useful!

markerikson commented 2 years ago

For this particular page, can you show a couple examples of what a hypothetical mangled classname looks like, and what the resulting import object looks like? ie, .label becomes .MyComponent_MyStyleFile_label_abcd1234, and the object looks like { "label": "MyComponent_MyStyleFile_label_abcd1234" }

srmagura commented 2 years ago

Sure. I actually already had an example of mangled class names, but I added a paragraph about the JS object you get when you import a CSS Module. This is all in the second half of the "Purpose and Use Cases" section.

markerikson commented 2 years ago

Sweet!