feat: support named exports with any characters #1549

laverdet · 2023-10-24T19:56:48Z

The limitation of only allowing camelCase named exports fails to take into account the full capabilities of module exports. In fact, you can export any name you want with export { local as "string literal" }.

This removes the limitation and allows you to set
exportLocalsConvention back to asIs when using the namedExports option.

Relevant syntax documentation can be found here:
https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export#syntax

This PR contains a:

Motivation / Use-Case

This allows you to set exportLocalsConvention back to any valid option when namedExports is set (which changes the option to "camelCase", and restricts you from changing it). Exported names do not have the same restrictions as source identifiers [since tc39/ecma262#2154] so there is no need for this restriction anymore.

Named exports resolve the Terser bailout condition described in webpack/webpack#17626 but reduce "grepability" of your code. By exporting them "as is" you can more easily find all places which reference a given class name in your project.

Breaking Changes

Requires support for export { local as "string literal" } syntax which is not supported until nodejs v16.x.

This breaks css-modules-typescript-loader since that module uses regular expressions to parse the intermediary generated modules. Any other projects with the same deranged behavior may also break, but by that logic any change is a breaking change.

Additional Info

linux-foundation-easycla · 2023-10-24T19:56:53Z

The committers listed above are authorized under a signed CLA.

✅ login: laverdet / name: Marcel Laverdet (90ef5df, bbf0e7b)

laverdet · 2023-10-24T20:03:28Z

This is part of a series of pull requests which adds better ecosystem support for exporting original, non-mangled, CSS names as named exports.

#1549
webpack-contrib/mini-css-extract-plugin#1057
seek-oss/css-modules-typescript-loader#50

Due to the optimization bailout condition [webpack/webpack#17626] with JSON default exports consumed by hoistable functions, original non-minified CSS module class names can be found in the minified source code.

alexander-akait · 2023-12-22T12:20:03Z

Can you accept CLA?

laverdet · 2023-12-26T22:25:30Z

@alexander-akait - thanks, CLA accepted

Also please note this change may require a semver major increment since it requires nodejs v16.x. Since a breaking semver increment is required anyway it may make sense to remove the behavior where exportLocalsConvention changes automatically if you set namedExports.

alexander-akait · 2023-12-27T13:52:29Z

Some developers wants to keep the old output due migration reasons, that is why we need an option for this, also please don't modify existing tests, please add a new

laverdet · 2023-12-27T17:06:11Z

I wasn't recommending removing the option entirely, I was recommending changing the default. Right now if you specify namedExports then exportLocalsConvention will be automatically set to "camelCase". This made sense in the past because some CSS names were not representable in ECMAScript modules. With the newer syntax the behavior where exportLocalsConvention is set automatically no longer makes sense, and only complicates configuration. If a user wants to set it back to "camelCase" then they can do that.

Also I didn't modify any tests, the snapshots were modified as a result of the new feature. The test snapshots will change if there is a modification to the generated JavaScript or CSS.

laverdet · 2024-01-02T21:41:22Z

@alexander-akait I pushed the proposed modifications. This drops support for nodejs v12 and v14 which do not export { foo as "string" }. Additionally exportLocalsConvention defaults to "asIs" but can be set back to "camelCaseOnly" for migration purposes. The documentation

Regarding the changed tests: the snapshots have changed because the raw string output has changed. I could add a case which detects if the class name is a valid JavaScript identifier and simply outputs a plain export const className = "..." in that case but I would strongly recommend against it. This will cause knock on effects down the ecosystem because there will be 2 ways in which class names might be exported. We can also now export class names which are reserved JavaScript words, so this detection logic would end up being complex.

Users who are using CommonJS exports, or are not using the namedExports feature could still use old versions of nodejs.

alexander-akait

Please avoid breaking changes, changelog and etc, just add the new value for the exportLocalsConvention, i.e. asIsUsingAs (maybe better name, feel free here) and add docs about it and test (skip them when Node.js doesn't support it)

We don't want to make the major release right now. In the next major release we will consider the new value.

alexander-akait · 2024-01-22T17:25:13Z

test/__snapshots__/exportType.test.js.snap

+var _2e = \`xajoqP1d3SwrjJ4WEM8g\`;
+export { _2e as \\"url\\" };
+var _2f = \`Ix5nEHiVOsWuWxdx0twz \${___CSS_LOADER_ICSS_IMPORT_7____NAMED___[\\"scssClass\\"]}\`;
+export { _2f as \\"main\\" };


Also please try to merge export into the one object to improve the parser perfomance

I ran some quick benchmarks and didn't see a noticeable impact between the two approaches. A project with 100,000 CSS class names will see an improvement of just 1ms by combining the export declarations. If you think that it's worth the increased complexity in css-loader, and the knock-on effects from increased complexity in plugins for this kind of performance gain then I will make the change though.

JavaScript, since 2021, can export any unicode name from modules. We can take advantage of this to remove the restrictions on `exportLocalsConvention` under `namedExports` mode.

laverdet · 2024-01-22T22:08:58Z

Rebased and caught up with the main branch. Notes:

A new option for exportLocalsConvention is not needed. { namedExports: true, exportLocalsConvention: "asIs" } was never valid, the previous restriction is simply lifted
{ exportLocalsConvention: "camelCaseOnly" } was added to the options for several unit tests in anticipation of the defaults changing in the future. This doesn't have any effect on the test results.

alexander-akait · 2024-01-23T13:18:16Z

test/modules-option.test.js

@@ -1566,6 +1566,7 @@ describe('"modules" option', () => {
  it('should work with the "namedExport" option', async () => {
    const compiler = getCompiler("./modules/namedExport/base/index.js", {
      modules: {
+        exportLocalsConvention: "camelCaseOnly",


Why it was added? Sounds like a breaking change

I mentioned this in the comment above. The changes didn't have any effect on the unit test. I will remove.

codecov · 2024-01-23T17:22:12Z

Codecov Report

Attention: 1 lines in your changes are missing coverage. Please review.

Comparison is base (f9192ee) 96.04% compared to head (bbf0e7b) 96.15%.

Files	Patch %	Lines
src/utils.js	92.30%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1549      +/-   ##
==========================================
+ Coverage   96.04%   96.15%   +0.10%     
==========================================
  Files          10       10              
  Lines        1188     1195       +7     
  Branches      459      461       +2     
==========================================
+ Hits         1141     1149       +8     
+ Misses         38       37       -1     
  Partials        9        9

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

alexander-akait · 2024-01-23T17:23:39Z

Let's finish webpack-contrib/mini-css-extract-plugin#1057, I want to make two releases together

Thank you

laverdet mentioned this pull request Oct 24, 2023

feat: support named exports with any characters webpack-contrib/mini-css-extract-plugin#1057

Closed

6 tasks

laverdet mentioned this pull request Oct 24, 2023

feat: Support named exports seek-oss/css-modules-typescript-loader#50

Open

alexander-akait requested changes Jan 22, 2024

View reviewed changes

alexander-akait reviewed Jan 22, 2024

View reviewed changes

feat: support named exports with any characters

90ef5df

JavaScript, since 2021, can export any unicode name from modules. We can take advantage of this to remove the restrictions on `exportLocalsConvention` under `namedExports` mode.

laverdet force-pushed the master branch from 992633b to 90ef5df Compare January 22, 2024 22:03

alexander-akait reviewed Jan 23, 2024

View reviewed changes

chore: remove unit test config defaults

bbf0e7b

alexander-akait approved these changes Jan 23, 2024

View reviewed changes

alexander-akait merged commit 6f43929 into webpack-contrib:master Jan 23, 2024
19 of 20 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: support named exports with any characters #1549

feat: support named exports with any characters #1549

laverdet commented Oct 24, 2023 •

edited

Loading

linux-foundation-easycla bot commented Oct 24, 2023 •

edited

Loading

laverdet commented Oct 24, 2023

alexander-akait commented Dec 22, 2023

laverdet commented Dec 26, 2023

alexander-akait commented Dec 27, 2023

laverdet commented Dec 27, 2023

laverdet commented Jan 2, 2024

alexander-akait left a comment

alexander-akait Jan 22, 2024

laverdet Jan 22, 2024

laverdet commented Jan 22, 2024

alexander-akait Jan 23, 2024

laverdet Jan 23, 2024

codecov bot commented Jan 23, 2024 •

edited

Loading

alexander-akait commented Jan 23, 2024

feat: support named exports with any characters #1549

feat: support named exports with any characters #1549

Conversation

laverdet commented Oct 24, 2023 • edited Loading

Motivation / Use-Case

Breaking Changes

Additional Info

linux-foundation-easycla bot commented Oct 24, 2023 • edited Loading

laverdet commented Oct 24, 2023

alexander-akait commented Dec 22, 2023

laverdet commented Dec 26, 2023

alexander-akait commented Dec 27, 2023

laverdet commented Dec 27, 2023

laverdet commented Jan 2, 2024

alexander-akait left a comment

Choose a reason for hiding this comment

alexander-akait Jan 22, 2024

Choose a reason for hiding this comment

laverdet Jan 22, 2024

Choose a reason for hiding this comment

laverdet commented Jan 22, 2024

alexander-akait Jan 23, 2024

Choose a reason for hiding this comment

laverdet Jan 23, 2024

Choose a reason for hiding this comment

codecov bot commented Jan 23, 2024 • edited Loading

Codecov Report

alexander-akait commented Jan 23, 2024

laverdet commented Oct 24, 2023 •

edited

Loading

linux-foundation-easycla bot commented Oct 24, 2023 •

edited

Loading

codecov bot commented Jan 23, 2024 •

edited

Loading