Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support css esModule generator options #18357

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

ahabhgk
Copy link
Contributor

@ahabhgk ahabhgk commented Apr 26, 2024

What kind of change does this PR introduce?

feature, introduce esModule: false for css generator options

Did you add tests for your changes?

Added

Does this PR introduce a breaking change?

No

What needs to be documented once your changes are merged?

esModule css generator options

@webpack-bot
Copy link
Contributor

For maintainers only:

  • This needs to be documented (issue in webpack/webpack.js.org will be filed when merged)
  • This needs to be backported to webpack 4 (issue will be created when merged)

// TODO webpack 6: remove /\[moduleid\]/.test
if (
/\[id\]/.test(this.localIdentName) ||
/\[moduleid\]/.test(this.localIdentName)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can improve it in future PRs

Copy link
Member

@alexander-akait alexander-akait left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we really need the esModule option here, let's do it always, because we already return reasons in getConcatenationBailoutReason

@ahabhgk
Copy link
Contributor Author

ahabhgk commented May 9, 2024

I don't think we really need the esModule option here, let's do it always, because we already return reasons in getConcatenationBailoutReason

Could you elaborate? Actually I didn't understand what you mean. Did you mean we don't need the generator.css.esModule: false options? or there is something we can improve in the PR?

@alexander-akait
Copy link
Member

alexander-akait commented May 29, 2024

Sorry for delay, I mean we will work like esModule: true always, because it will allow to concate modules, I don't think somebody really needs esModule: false, what do you think?

@ahabhgk
Copy link
Contributor Author

ahabhgk commented May 30, 2024

This is derived from an Rspack issue (sorry it is in Chinese), the component library in the user-imported node_modules uses the following code:

var _style = _interopRequireDefault(require("./style.less"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
_style["default"].foo;

Transformed by Babel from the following code:

import style from "./style.less";
style.foo;

So if __esModule is always true, _style["default"].foo will be undefined.

This case should be relatively rare because most packages on npm generally handle CSS Modules and Less themselves, rather than leaving it to users to handle as in this case. However, there are still some packages that do this, particularly those published on the company's intranet. (Some companies may have a unified framework that handles this on the user side instead of on the library side)

@alexander-akait
Copy link
Member

@ahabhgk thank you, got it, let's remove console.log from test to avoid spam in console when we run tests

@webpack-bot
Copy link
Contributor

@ahabhgk Thanks for your update.

I labeled the Pull Request so reviewers will review it again.

@alexander-akait Please review the new changes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Ready for Merge
Development

Successfully merging this pull request may close these issues.

None yet

3 participants