Import CSS modules as global to prevent rewriting classnames#10026
Merged
dennisoelkers merged 2 commits intomasterfrom Feb 8, 2021
Merged
Import CSS modules as global to prevent rewriting classnames#10026dennisoelkers merged 2 commits intomasterfrom
dennisoelkers merged 2 commits intomasterfrom
Conversation
9 tasks
kyleknighted
approved these changes
Feb 8, 2021
Contributor
kyleknighted
left a comment
kyleknighted
left a comment
There was a problem hiding this comment.
this is working good for me
dennisoelkers
requested changes
Feb 8, 2021
| // eslint-disable-next-line import/no-dynamic-require | ||
| const BOOTSTRAPVARS = require(path.resolve(ROOT_PATH, 'public', 'stylesheets', 'bootstrap-config.json')).vars; | ||
|
|
||
| const getCssLoaderOptions = () => { |
Member
There was a problem hiding this comment.
I think we could keep this function. The culprit seems to be css-loader defaulting to mode: 'local', that is why the modules: 'global' (which is an abbreviation for modules: { mode: 'global' } fixes it. Maybe we can keep localIdentName for dev and just return mode: 'global' for all modes?
Contributor
Author
There was a problem hiding this comment.
Picked it up in the last commit. I agree with the solution 😊
dennisoelkers
approved these changes
Feb 8, 2021
Member
dennisoelkers
left a comment
dennisoelkers
left a comment
There was a problem hiding this comment.
Looks good, works well! Thanks a lot! 🎉
dennisoelkers
added a commit
that referenced
this pull request
Feb 8, 2021
* Use jest plugin for ESLint. (#10018) * Improving typing of field type properties. (#10015) * Update css-loader, less-loader, style-loader dependencies and configuration (#8875) * updated dependencies * fix import style * fix less and style loader options * remove icon font path * ability to load eot * add lazy loading capability * support leaflet lazy * use new style of importing lazy * fix insertAt definitions * add comment why * ignore lazy loading files for normal css * update how to import modules * update importstyle leaflet * update import style editwidget * updated lock file * fix webpack config for leaflet * fix lazy loading in jest * fix linting * add no-alert exception to ignore * fix flow module mapping * update style-loader to latest * update css-loader * fix lazy loading jest module * update requires to import * set css module class transformation to be global * Fixing loading spinner gap between icon and text (#10025) * Fixing linter hints related to importing `URLUtils`/`FormsUtils`. (#10021) * Import `URLUtils` properly. * Using correct ESLint rule to disable for TS. * Avoid calling hook conditionally. * Avoid calling hook conditionally. * Fixing linter hints. * Removing unused import. * Fixing default import of `FormsUtils`. * Making `no-unused-vars` consistent for TS. * Import CSS modules as global to prevent rewriting classnames (#10026) * import css modules as global * revert to using css options generate * Add highlight creation form * Add highlighting condition * Implement conditional highlighting rules * Move Highlighting Form to a modal * Add validation for required fields * Add condition to the backend * Make rule editiable and fix some styling issues * Fix test and create a new one * Add minimal tests for HighlightForm * Fix linter warning * Introduce a enum for the condition * Add missing license * Fix highlighting aggregation fields (count()) * Make the tests better than before - sort our fields - use update action from store - make update action usable * Fix typescript and linter * Fix test fallout after updateing update store function * Add expect as expected from lint * Add description about rule order * Fix wrong initize value * Choose random color when creating new HighlightingRule Co-authored-by: Dennis Oelkers <dennis@graylog.com> Co-authored-by: Gaya Kessler <gaya@theclevernode.com> Co-authored-by: Linus Pahl <linus@graylog.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This will address the issue raised by @kyleknighted in #10023
Like before, some modules where being imported with generated classnames in develop target. I disabled it here and it solved the issue.
@dennisoelkers I am not totally sure why the options were different for develop, but maybe you know more about this and how this solution might be wrong.
Fixes #10023
Motivation and Context
CSS modules were imported incorrectly and got generated classnames
How Has This Been Tested?
By looking up the DatePicker and fixing the imported CSS classes.
Screenshots (if appropriate):
Types of changes
Checklist: