css-loader
css-loader copied to clipboard
webpack-contrib
Produce JSON file(s) with class mappings
Previously discussed in #143 , but that solution has not worked for a long time.
- Operating System: ubuntu
- Node Version: v12.5.0
- NPM Version: yarn 1.16.0
- webpack Version: 4.32.2
- css-loader Version: 2.1.1
Feature Proposal
When compiling CSS modules, export a JSON file containing the mappings, so that the generated classnames can be used by e.g. SSR setups, and even from other languages.
Feature Use Case
I really like using CSS modules as it lets me be sure that my CSS is not clobbering anything.
I'm using webpacker through rails, and I'd like to use CSS modules from my rails templates.
EG in a rails template, I'd like to be able do to:
<%= css_module('search-listing/article') do |cssm| %>
<div class="<%= cssm.container %>">
Content in an article search result container
</div>
<% end %>
The css_module helper is mostly straightforward to write, but I don't see a stable/supported way of extracting the mapping from classname to mangled name.
Maybe we can implement getJSON option as it is done in https://github.com/css-modules/postcss-modules
It's surprising this feature doesn't exist already. Seems simple enough to just dump all the mappings in a JSON file. After looking into postcss-modules I don't like how the getJSON works as it creates a .json file for each .less/.scss file. I would prefer to have a flat JSON file with every classname that's been hashed across my app.
Another use case: We are implementing cypress testing against production builds and it would be extremely helpful to use classnames as selectors instead of adding additional attributes everywhere to select by.
@jcmcneal Consider your tone. The maintainers have already said 'PR welcome', so "It's surprising this feature doesn't exist already" sounds a little entitled.
This package is used in 2.4M public repos and when I searched to find out how to get the mappings it did surprise me that there isn't a way yet. However, I'm glad you requested the feature and I only commented to show support that it's wanted by more than just one person.
Yeah, I figured you didn't mean it that way - just pointing out that it's worth making it clear, especially when dealing with people who don't know you.
Hey, everyone! I know I'm super late to the party, but I need this functionality for a project I'm working on so I've opened up a pull request here: https://github.com/webpack-contrib/css-loader/pull/1577. Feel free to take a look--happy to update and correct issues as needed. Thanks in advance!
(Also, it's my first time working in this repository so please let me know if I missed something in the contribution guidelines!)
