Feature Proposal
For context: an application written in React with this structure (simplified): src/ComponentName/index.jsx, src/ComponentName/index.css.
I'm talking about dev mode.
In PR #1333, [folder] and [emoji] templates were removed. I agree that [emoji] should have been removed because naming css classes with emoji only makes sense for pet projects just for fun.
But you can't say that about removing [folder] and that's why
Feature Use Case
Usabilty
In my projects I use the [folder]-[local] template and it gives this result:
This approach to css class naming allows you to immediately see the structure of application components without having to constantly switch between React devtools and the Elements tab to understand which React component the
element corresponds to. This is especially useful when css edits are made first in devtools and then copied into the code.
Why not [path] or [path][name]__[local] as the docs say?
[path]
[path][name]__[local]
In the screenshots, you can see that the src-components- pattern is repeated. It doesn't make any sense (as a developer I already know that components are in src/components and all style files are named index.css), but it just creates visual noise that prevents you from understanding the components structure and css classnames.
Why not getLocalIdent()?
Using getLocalIdent() may solve this problem. Since developers have different levels of experience, this approach can cause both build errors and performance degradation due to poorly written code. Therefore, this should only be used if the developer really knows what he is doing.
Since deleted code is simple, does not perform heavy calculations and does not require constant attention in terms of bug fixes, possible vulnerabilities or any refactoring, its return will not degrade the developer's experience in any way and will not lead to degradation of css-loader and webpack performance.
@alexander-akait on Twitter told me that this template was removed because it wasn't used much. I think the reason is that most developers simply copied the recommended settings from the documentation (which is generally a good thing) due to lack of awareness or interest. They didn't try to figure out what features they had and what benefits it could give them, not because no one needed the template.
Please paste the results of npx webpack-cli info here, and mention other relevant information
System:
OS: Windows 10 10.0.19043
CPU: (8) x64 Intel(R) Core(TM) i5-8365U CPU @ 1.60GHz
Memory: 12.42 GB / 23.72 GB
Binaries:
Node: 14.17.6 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD
npm: 7.21.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.1023.0), Chromium (93.0.961.47)
Internet Explorer: 11.0.19041.906
Packages:
copy-webpack-plugin: ^9.0.0 => 9.0.1
dotenv-flow-webpack: ^1.1.0 => 1.1.0
dotenv-webpack: ^7.0.2 => 7.0.3
html-webpack-plugin: ^5.2.0 => 5.3.2
nodemon-webpack-plugin: ^4.4.4 => 4.5.2
webpack: ^5.24.3 => 5.52.1
webpack-cli: ^4.4.0 => 4.8.0
webpack-notifier-2: ^2.3.2 => 2.3.2
Feature Proposal
For context: an application written in React with this structure (simplified):
src/ComponentName/index.jsx,src/ComponentName/index.css.I'm talking about dev mode.
In PR #1333,
[folder]and[emoji]templates were removed. I agree that [emoji] should have been removed because naming css classes with emoji only makes sense for pet projects just for fun.But you can't say that about removing [folder] and that's why
Feature Use Case
Usabilty
In my projects I use the [folder]-[local] template and it gives this result:
This approach to css class naming allows you to immediately see the structure of application components without having to constantly switch between React devtools and the Elements tab to understand which React component the
Why not [path] or [path][name]__[local] as the docs say?
[path]
[path][name]__[local]
In the screenshots, you can see that the src-components- pattern is repeated. It doesn't make any sense (as a developer I already know that components are in src/components and all style files are named index.css), but it just creates visual noise that prevents you from understanding the components structure and css classnames.
Why not getLocalIdent()?
Using getLocalIdent() may solve this problem. Since developers have different levels of experience, this approach can cause both build errors and performance degradation due to poorly written code. Therefore, this should only be used if the developer really knows what he is doing.
Since deleted code is simple, does not perform heavy calculations and does not require constant attention in terms of bug fixes, possible vulnerabilities or any refactoring, its return will not degrade the developer's experience in any way and will not lead to degradation of css-loader and webpack performance.
@alexander-akait on Twitter told me that this template was removed because it wasn't used much. I think the reason is that most developers simply copied the recommended settings from the documentation (which is generally a good thing) due to lack of awareness or interest. They didn't try to figure out what features they had and what benefits it could give them, not because no one needed the template.
Please paste the results of
npx webpack-cli infohere, and mention other relevant information