fix: improve esMododule exports by jantimon · Pull Request #1084 · webpack/mini-css-extract-plugin

jantimon · 2024-02-28T16:00:38Z

This PR contains a:

Motivation / Use-Case

With esModule: false the mini-css-extract-plugin generates JS modules like this:

module.exports = {
  foo: "src-styles-foo",
  bar: "src-styles-bar",
};

This allows the following import:

import * as styles from "./styles.css";
import styles from "./styles.css";
import { foo } from "./styles.css";

With esModule: true the mini-css-extract-plugin generates JS modules like this:

export {
  "foo": "src-styles-foo",
  "bar": "src-styles-bar"
};

As there is no default export, the following import will not work:

import styles from "./styles.css"; // Fails

Interestingly the test case es-named-export tests for it:

https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/test/cases/es-named-export/index.js

import css, { aClass, bClass, cClass } from "./style.css";

However when tested manually, the test case fails:

export 'default' (imported as 'css') was not found in './style.css'

This PR adds the defaultExport option to the mini-css-extract-plugin which will allow the user to write the import exactly as in the es-named-exports test case

Breaking Changes

This feature is introduces behind an option.
Therefore this is a non-breaking change.
However changing the named export would probably also be not a breaking change)

need to check behaviour webpack/webpack#18271 (comment)

linux-foundation-easycla · 2024-02-28T16:00:42Z

The committers listed above are authorized under a signed CLA.

✅ login: jantimon / name: Jan Nicklas (1787dab, 023d85c, 9e1c005)
✅ login: alexander-akait / name: Alexander Akait (657af90, fe1faa3, ddb84c6)

alexander-akait

Let's use namedExport, like we have in css-loader

jantimon · 2024-02-29T08:53:29Z

@alexander-akait - I added it to the namedExport case - is it okay like this?

sokra · 2024-03-01T07:02:46Z

src/loader.js

+          const exportDefaultString = `export default ${JSON.stringify(
+            locals
+          )}`;


Suggested change

const exportDefaultString = `export default ${JSON.stringify(

locals

)}`;

const exportDefaultString = `export default { ${identifiers

.map(([id, key]) => `${JSON.stringify(key)}: ${id}`)

.join(", ")} }`;

That would be a bit more efficient

done:

--- a/test/cases/es-named-export-as-is/expected/main.js +++ b/test/cases/es-named-export-as-is/expected/main.js @@ -17,7 +17,7 @@ var _1 = "Xh041yLR4iCP4RGjge50"; var _2 = "NMuRsxoDwvW8BhSXhFAY"; var _3 = "ayWIv09rPsAqE2JznIsI"; -/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"a-class":"Xh041yLR4iCP4RGjge50","b__class":"NMuRsxoDwvW8BhSXhFAY","cClass":"ayWIv09rPsAqE2JznIsI"}); +/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({ "a-class": _1, "b__class": _2, "cClass": _3 });

could this somehow prevent the minifier from optimizing?

alexander-akait · 2024-03-04T17:20:14Z

test/cases/custom-loader-with-functional-exports/expected/main.js

 /* harmony export */   cnA: () => (/* binding */ _1),
-/* harmony export */   cnB: () => (/* binding */ _2)
+/* harmony export */   cnB: () => (/* binding */ _2),
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)


We still need an option for this, otherwise we generate extra content, it is bad for a size

/cc @jantimon

alexander-akait · 2024-03-04T17:22:18Z

@jantimon Just want to clarify, do you want to use and default and named export together?

jantimon · 2024-03-05T02:17:23Z

yes for backwards compatibility - right now nextjs allows both

nextjs uses mini-css-extract-plugin but is explicitly setting esModule: false

unfortunately esModule: false has the drawback that it prevents webpacks esmodule optimizations

so my idea was to switch to esModule but also allow named and default exports just like esModule: false

mini-extract-plugin has also a (currently broken) test on master which mixes default and named imports with esModules:

https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/test/cases/es-named-export/index.js

alexander-akait · 2024-03-07T14:35:57Z

@jantimon I see, we need to verify webpack (experimental.css) work the same (or provide an option to do it) and align with this plugin, I will investigate it tomorrow

alexander-akait · 2024-04-02T14:00:52Z

Sorry for delay, I done the same for built-in CSS support - webpack/webpack#18271 but want some dicussion with trspack team to align behaviour, then it will be merged I will do the same here

alexander-akait · 2024-04-02T18:00:33Z

@jantimon I put it under the option, because we still recommend to use only a named export to be better compatibility with future https://web.dev/articles/css-module-scripts

ahabhgk · 2024-04-03T05:28:18Z

README.md

+By default, `mini-css-extract-plugin` generates JS modules based on the `esModule` and `namedExport` options in `css-loader`.
+Using the `esModule` and `namedExport` options will allow you to better optimize your code.
+If you set `esModule: true` and `namedExport: true` for `css-loader` `mini-css-extract-plugin` will generate **only** a named export.
+Our official recommendation is to use only named export for better future compatibility.


Just for curious, what does "better future compatibility" refer to here? If it's about native CSS modules (https://web.dev/articles/css-module-scripts), it should be distinguishable because of the need for the import-attributes/import-assertions syntax (assert { type: 'css' }).

jantimon · 2024-04-03T07:07:07Z

@alexander-akait thanks for merging 🎉

Initially I added the default export also behind a feature flag so it's totally fine for me that you brought that back..

However I have one question - should the following css module code cause a warning for better future compatibility?

example.module.css

.default {
  color: red
}

alexander-akait · 2024-04-03T10:03:55Z

@jantimon make sense, but I think better to make it in css-loader

feat: add defaultExport option

1787dab

jantimon mentioned this pull request Feb 28, 2024

enable esmodule optimizations for css modules vercel/next.js#62639

Open

alexander-akait requested changes Feb 29, 2024

View reviewed changes

jantimon changed the title ~~feat: add defaultExport option~~ fix: improve esMododule exports Feb 29, 2024

jantimon force-pushed the hybrid-es-module-export branch from d14131a to ae3f41f Compare February 29, 2024 08:27

fix: improve esMododule exports

023d85c

jantimon force-pushed the hybrid-es-module-export branch from ae3f41f to 023d85c Compare February 29, 2024 08:28

jantimon requested a review from alexander-akait February 29, 2024 08:52

sokra reviewed Mar 1, 2024

View reviewed changes

refactor: reuse export string

9e1c005

jantimon requested a review from sokra March 1, 2024 12:04

alexander-akait reviewed Mar 4, 2024

View reviewed changes

alexander-akait mentioned this pull request Apr 2, 2024

feat(css): allow to use default and named export webpack/webpack#18271

Merged

webpack-bot mentioned this pull request Apr 2, 2024

Document webpack change: feat(css): allow to use default and named export webpack/webpack.js.org#7222

Closed

alexander-akait added 2 commits April 2, 2024 20:24

refactor: code

fe1faa3

test: fix

657af90

test: added

ddb84c6

alexander-akait merged commit 74ae781 into webpack:master Apr 2, 2024

ahabhgk reviewed Apr 3, 2024

View reviewed changes

jantimon deleted the hybrid-es-module-export branch April 3, 2024 06:59

JSerFeng mentioned this pull request May 29, 2024

feat(css-extract): add defaultExport and namedExport support web-infra-dev/rspack#6657

Merged

2 tasks

Mykhailo-Sichkaruk mentioned this pull request Jun 13, 2024

[Snyk] Upgrade mini-css-extract-plugin from 2.7.5 to 2.9.0 Mykhailo-Sichkaruk/Browser-Glow-Football#45

Closed

vsn4ik mentioned this pull request Jun 15, 2024

fix: README.md namedExport example fix #1103

Merged

6 tasks

INexizI mentioned this pull request Aug 1, 2024

[Snyk] Upgrade mini-css-extract-plugin from 2.8.1 to 2.9.0 INexizI/KR-DB#376

Merged

INexizI mentioned this pull request Sep 10, 2024

[Snyk] Upgrade mini-css-extract-plugin from 2.9.0 to 2.9.1 INexizI/KR-DB#395

Merged

This was referenced Sep 25, 2024

[Snyk] Upgrade mini-css-extract-plugin from 2.4.5 to 2.9.1 gowthamp10/Online_Bank_Application#2

Open

[Snyk] Upgrade mini-css-extract-plugin from 2.4.5 to 2.9.1 gowthamp10/react-amplify#2

Open

-          const exportDefaultString = `export default ${JSON.stringify(
-            locals
-          )}`;
+          const exportDefaultString = `export default { ${identifiers
+            .map(([id, key]) => `${JSON.stringify(key)}: ${id}`)
+            .join(", ")} }`;

Uh oh!

Conversation

jantimon commented Feb 28, 2024 • edited by alexander-akait Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Motivation / Use-Case

Breaking Changes

Uh oh!

linux-foundation-easycla bot commented Feb 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alexander-akait left a comment

Choose a reason for hiding this comment

Uh oh!

jantimon commented Feb 29, 2024

Uh oh!

sokra Mar 1, 2024

Choose a reason for hiding this comment

Uh oh!

jantimon Mar 1, 2024

Choose a reason for hiding this comment

Uh oh!

alexander-akait Mar 4, 2024

Choose a reason for hiding this comment

Uh oh!

alexander-akait Mar 4, 2024

Choose a reason for hiding this comment

Uh oh!

alexander-akait commented Mar 4, 2024

Uh oh!

jantimon commented Mar 5, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alexander-akait commented Mar 7, 2024

Uh oh!

alexander-akait commented Apr 2, 2024

Uh oh!

alexander-akait commented Apr 2, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ahabhgk Apr 3, 2024

Choose a reason for hiding this comment

Uh oh!

jantimon commented Apr 3, 2024

Uh oh!

alexander-akait commented Apr 3, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jantimon commented Feb 28, 2024 •

edited by alexander-akait

Loading

linux-foundation-easycla bot commented Feb 28, 2024 •

edited

Loading

jantimon commented Mar 5, 2024 •

edited

Loading

alexander-akait commented Apr 2, 2024 •

edited

Loading