Skip to content

WRQ-200: Apply own hash on css-module-ident.js #131

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

Merged
merged 9 commits into from
Feb 1, 2024
Merged

Conversation

hong6316
Copy link
Contributor

@hong6316 hong6316 commented Dec 5, 2023

Checklist

  • I have read and understand the contribution guide
  • A CHANGELOG entry is included
  • At least one test case is included for this feature or bug fix
  • Documentation was added or is not needed
  • This is an API breaking change

Issue Resolved / Feature Added

-Cause: When generating css, react-dev-utils generates hash.
However, when creating a hash, + is not excluded.
This may cause unexpected behavior when using moduled CSS class names in querySelector.
Other developers also had the same problem, so they requested a react-dev-utils PR as shown below, but it has not been merged for over a year, so it is difficult to expect anything.

-Solution: We had previously implemented a getLocalIdent in @enact/dev-utils that does not add a hash, called getSimpleCSSModuleLocalIdent, for internal development.
We can solve this issue by stopping using react-dev-utils and adding an option to @enact/dev-utils to add hashes without +
image

Using base62 for generating hashes.
base64 is base62 with +(62nd) and /(63rd) added.
In other words, the cause of the problem (+) does not exist in base62.
Of course, it is provided in loader-utils.
( https://github.com/webpack/loader-utils/blob/50890cd3b8592a6785306b17b82b5f31449561ef/README.md?plain=1#L79 )

Resolution

Apply own hash on css-module-ident.js
(this code is from webpack/loader-utils)

Additional Considerations

  • Fixing lint errors
  • Move SIMPLE_CSS_IDENT statement from cli to dev-utils. (check WRQ-200: Remove getCSSModuleLocalIdent and use cssModuleIdent only cli#336)
    Previously, SIMPLE_CSS_IDENT was checked in the cli to determine whether to use react-dev-utils (hash generation) or @enact/dev-utils (not hash generation).
    However, starting from this PR, react-dev-utils has been removed and integrated into @enact/dev-utils, so the SIMPLE_CSS_IDENT check is moved inside @enact/dev-utils.
    Other than that, there is no difference in operation (similar to before, check SIMPLE_CSS_IDENT and decide whether to generate a hash or not.)

Links

WRQ-200

Comments

Enact-DCO-1.0-Signed-off-by: Taeyoung Hong ([email protected])

@hong6316 hong6316 changed the title WRQ-200: Apply own hash on css-module-ident.js WRQ-200: Apply own hash constructor function on css-module-ident.js Dec 5, 2023
@hong6316 hong6316 changed the title WRQ-200: Apply own hash constructor function on css-module-ident.js WRQ-200: Apply own hash on css-module-ident.js Dec 5, 2023
@SkylerBaek SkylerBaek merged commit 21afbba into develop Feb 1, 2024
@SkylerBaek SkylerBaek deleted the feature/WRQ-200 branch February 1, 2024 01:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants