diff --git a/lib/css/CssModulesPlugin.js b/lib/css/CssModulesPlugin.js index bbb506f0c..390cda815 100644 --- a/lib/css/CssModulesPlugin.js +++ b/lib/css/CssModulesPlugin.js @@ -27,6 +27,7 @@ const SelfModuleFactory = require("../SelfModuleFactory"); const WebpackError = require("../WebpackError"); const CssIcssExportDependency = require("../dependencies/CssIcssExportDependency"); const CssIcssImportDependency = require("../dependencies/CssIcssImportDependency"); +const CssIcssSymbolDependency = require("../dependencies/CssIcssSymbolDependency"); const CssImportDependency = require("../dependencies/CssImportDependency"); const CssLocalIdentifierDependency = require("../dependencies/CssLocalIdentifierDependency"); const CssSelfLocalIdentifierDependency = require("../dependencies/CssSelfLocalIdentifierDependency"); @@ -248,6 +249,14 @@ class CssModulesPlugin { (compilation, { normalModuleFactory }) => { const hooks = CssModulesPlugin.getCompilationHooks(compilation); const selfFactory = new SelfModuleFactory(compilation.moduleGraph); + compilation.dependencyFactories.set( + CssImportDependency, + normalModuleFactory + ); + compilation.dependencyTemplates.set( + CssImportDependency, + new CssImportDependency.Template() + ); compilation.dependencyFactories.set( CssUrlDependency, normalModuleFactory @@ -280,13 +289,9 @@ class CssModulesPlugin { CssIcssExportDependency, new CssIcssExportDependency.Template() ); - compilation.dependencyFactories.set( - CssImportDependency, - normalModuleFactory - ); compilation.dependencyTemplates.set( - CssImportDependency, - new CssImportDependency.Template() + CssIcssSymbolDependency, + new CssIcssSymbolDependency.Template() ); compilation.dependencyTemplates.set( StaticExportsDependency, diff --git a/lib/css/CssParser.js b/lib/css/CssParser.js index e0880aa33..d241fcf91 100644 --- a/lib/css/CssParser.js +++ b/lib/css/CssParser.js @@ -15,6 +15,7 @@ const WebpackError = require("../WebpackError"); const ConstDependency = require("../dependencies/ConstDependency"); const CssIcssExportDependency = require("../dependencies/CssIcssExportDependency"); const CssIcssImportDependency = require("../dependencies/CssIcssImportDependency"); +const CssIcssSymbolDependency = require("../dependencies/CssIcssSymbolDependency"); const CssImportDependency = require("../dependencies/CssImportDependency"); const CssLocalIdentifierDependency = require("../dependencies/CssLocalIdentifierDependency"); const CssSelfLocalIdentifierDependency = require("../dependencies/CssSelfLocalIdentifierDependency"); @@ -245,8 +246,8 @@ class CssParser extends Parser { let lastIdentifier; /** @type {Set} */ const declaredCssVariables = new Set(); - /** @type {Map} */ - const icssImportMap = new Map(); + /** @type {Map} */ + const icssDefinitions = new Map(); /** * @param {string} input input @@ -365,9 +366,9 @@ class CssParser extends Parser { */ const createDep = (name, value, start, end) => { if (type === 0) { - icssImportMap.set(name, { + icssDefinitions.set(name, { path: /** @type {string} */ (importPath), - name: value + value }); } else if (type === 1) { const dep = new CssIcssExportDependency(name, value); @@ -785,7 +786,61 @@ class CssParser extends Parser { } default: { if (isModules) { - if (OPTIONALLY_VENDOR_PREFIXED_KEYFRAMES_AT_RULE.test(name)) { + if (name === "@value") { + const semi = eatUntilSemi(input, end); + const atRuleEnd = semi + 1; + const params = input.slice(end, semi); + let [tokens, from] = params.split(/\s*from\s*/); + + if (from) { + const aliases = tokens + .replace(/\/\*((?!\*\/).*?)\*\//g, " ") + .trim() + .replace(/^\(|\)$/g, "") + .split(/\s*,\s*/); + + from = from.replace(/\/\*((?!\*\/).*?)\*\//g, ""); + + for (const alias of aliases) { + const [name, aliasName] = alias.split(/\s*as\s*/); + + const isExplicitImport = from[0] === "'" || from[0] === '"'; + + if (!isExplicitImport) { + return atRuleEnd; + } + + icssDefinitions.set(aliasName || name, { + value: name, + path: from.slice(1, -1) + }); + } + } else { + const alias = tokens.trim(); + let [name, value] = alias.includes(":") + ? alias.split(":") + : alias.split(" "); + + if (value && !/^\s+$/.test(value)) { + value = value.trim(); + } + + icssDefinitions.set(name, { value }); + + const dep = new CssIcssExportDependency(name, value); + const { line: sl, column: sc } = locConverter.get(start); + const { line: el, column: ec } = locConverter.get(end); + dep.setLoc(sl, sc, el, ec); + module.addDependency(dep); + } + + const dep = new ConstDependency("", [start, atRuleEnd]); + module.addPresentationalDependency(dep); + return atRuleEnd; + } else if ( + OPTIONALLY_VENDOR_PREFIXED_KEYFRAMES_AT_RULE.test(name) && + isLocalMode() + ) { const ident = walkCssTokens.eatIdentSequenceOrString( input, end @@ -795,38 +850,33 @@ class CssParser extends Parser { ident[2] === true ? input.slice(ident[0], ident[1]) : input.slice(ident[0] + 1, ident[1] - 1); - if (isLocalMode()) { - const { line: sl, column: sc } = locConverter.get(ident[0]); - const { line: el, column: ec } = locConverter.get(ident[1]); - const dep = new CssLocalIdentifierDependency(name, [ - ident[0], - ident[1] - ]); - dep.setLoc(sl, sc, el, ec); - module.addDependency(dep); - } + const { line: sl, column: sc } = locConverter.get(ident[0]); + const { line: el, column: ec } = locConverter.get(ident[1]); + const dep = new CssLocalIdentifierDependency(name, [ + ident[0], + ident[1] + ]); + dep.setLoc(sl, sc, el, ec); + module.addDependency(dep); return ident[1]; - } else if (name === "@property") { + } else if (name === "@property" && isLocalMode()) { const ident = walkCssTokens.eatIdentSequence(input, end); if (!ident) return end; let name = input.slice(ident[0], ident[1]); if (!name.startsWith("--")) return end; name = name.slice(2); declaredCssVariables.add(name); - if (isLocalMode()) { - const { line: sl, column: sc } = locConverter.get(ident[0]); - const { line: el, column: ec } = locConverter.get(ident[1]); - const dep = new CssLocalIdentifierDependency( - name, - [ident[0], ident[1]], - "--" - ); - dep.setLoc(sl, sc, el, ec); - module.addDependency(dep); - } + const { line: sl, column: sc } = locConverter.get(ident[0]); + const { line: el, column: ec } = locConverter.get(ident[1]); + const dep = new CssLocalIdentifierDependency( + name, + [ident[0], ident[1]], + "--" + ); + dep.setLoc(sl, sc, el, ec); + module.addDependency(dep); return ident[1]; - } else if (isModules && name === "@scope") { - modeData = isLocalMode() ? "local" : "global"; + } else if (name === "@scope") { isNextRulePrelude = true; return end; } @@ -851,25 +901,35 @@ class CssParser extends Parser { }, identifier: (input, start, end) => { if (isModules) { + if (icssDefinitions.has(input.slice(start, end))) { + const name = input.slice(start, end); + const { path, value } = icssDefinitions.get(name); + + if (path) { + const dep = new CssIcssImportDependency(path, value, [ + start, + end - 1 + ]); + const { line: sl, column: sc } = locConverter.get(start); + const { line: el, column: ec } = locConverter.get(end - 1); + dep.setLoc(sl, sc, el, ec); + module.addDependency(dep); + } else { + const { line: sl, column: sc } = locConverter.get(start); + const { line: el, column: ec } = locConverter.get(end); + const dep = new CssIcssSymbolDependency(name, value, [ + start, + end + ]); + dep.setLoc(sl, sc, el, ec); + module.addDependency(dep); + } + + return end; + } + switch (scope) { case CSS_MODE_IN_BLOCK: { - if (icssImportMap.has(input.slice(start, end))) { - const { path, name } = icssImportMap.get( - input.slice(start, end) - ); - - const dep = new CssIcssImportDependency(path, name, [ - start, - end - 1 - ]); - const { line: sl, column: sc } = locConverter.get(start); - const { line: el, column: ec } = locConverter.get(end - 1); - dep.setLoc(sl, sc, el, ec); - module.addDependency(dep); - - return end; - } - if (isLocalMode()) { // Handle only top level values and not inside functions if (inAnimationProperty && balanced.length === 0) { diff --git a/lib/dependencies/CssIcssExportDependency.js b/lib/dependencies/CssIcssExportDependency.js index deff51372..97d7fc0df 100644 --- a/lib/dependencies/CssIcssExportDependency.js +++ b/lib/dependencies/CssIcssExportDependency.js @@ -32,6 +32,7 @@ class CssIcssExportDependency extends NullDependency { super(); this.name = name; this.value = value; + this._hashUpdate = undefined; } get type() { @@ -78,18 +79,21 @@ class CssIcssExportDependency extends NullDependency { * @returns {void} */ updateHash(hash, { chunkGraph }) { - const module = - /** @type {CssModule} */ - (chunkGraph.moduleGraph.getParentModule(this)); - const generator = - /** @type {CssGenerator | CssExportsGenerator} */ - (module.generator); - const names = this.getExportsConventionNames( - this.name, - generator.convention - ); + if (this._hashUpdate === undefined) { + const module = + /** @type {CssModule} */ + (chunkGraph.moduleGraph.getParentModule(this)); + const generator = + /** @type {CssGenerator | CssExportsGenerator} */ + (module.generator); + const names = this.getExportsConventionNames( + this.name, + generator.convention + ); + this._hashUpdate = JSON.stringify(names); + } hash.update("exportsConvention"); - hash.update(JSON.stringify(names)); + hash.update(this._hashUpdate); } /** diff --git a/lib/dependencies/CssIcssSymbolDependency.js b/lib/dependencies/CssIcssSymbolDependency.js new file mode 100644 index 000000000..c46b39851 --- /dev/null +++ b/lib/dependencies/CssIcssSymbolDependency.js @@ -0,0 +1,131 @@ +/* + MIT License http://www.opensource.org/licenses/mit-license.php + Author Alexander Akait @alexander-akait +*/ + +"use strict"; + +const makeSerializable = require("../util/makeSerializable"); +const NullDependency = require("./NullDependency"); + +/** @typedef {import("webpack-sources").ReplaceSource} ReplaceSource */ +/** @typedef {import("../Dependency")} Dependency */ +/** @typedef {import("../Dependency").ExportsSpec} ExportsSpec */ +/** @typedef {import("../Dependency").ReferencedExport} ReferencedExport */ +/** @typedef {import("../Dependency").UpdateHashContext} UpdateHashContext */ +/** @typedef {import("../DependencyTemplate").CssDependencyTemplateContext} DependencyTemplateContext */ +/** @typedef {import("../ModuleGraph")} ModuleGraph */ +/** @typedef {import("../css/CssParser").Range} Range */ +/** @typedef {import("../serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */ +/** @typedef {import("../serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */ +/** @typedef {import("../util/Hash")} Hash */ +/** @typedef {import("../util/runtime").RuntimeSpec} RuntimeSpec */ + +class CssIcssSymbolDependency extends NullDependency { + /** + * @param {string} name name + * @param {string} value value + * @param {Range} range range + */ + constructor(name, value, range) { + super(); + this.name = name; + this.value = value; + this.range = range; + this._hashUpdate = undefined; + } + + get type() { + return "css @value identifier"; + } + + get category() { + return "self"; + } + + /** + * Update the hash + * @param {Hash} hash hash to be updated + * @param {UpdateHashContext} context context + * @returns {void} + */ + updateHash(hash, context) { + if (this._hashUpdate === undefined) { + const hashUpdate = `${this.range}|${this.name}|${this.value}`; + this._hashUpdate = hashUpdate; + } + hash.update(this._hashUpdate); + } + + /** + * Returns the exported names + * @param {ModuleGraph} moduleGraph module graph + * @returns {ExportsSpec | undefined} export names + */ + getExports(moduleGraph) { + return { + exports: [ + { + name: this.name, + canMangle: true + } + ], + dependencies: undefined + }; + } + + /** + * Returns list of exports referenced by this dependency + * @param {ModuleGraph} moduleGraph module graph + * @param {RuntimeSpec} runtime the runtime for which the module is analysed + * @returns {(string[] | ReferencedExport)[]} referenced exports + */ + getReferencedExports(moduleGraph, runtime) { + return [[this.name]]; + } + + /** + * @param {ObjectSerializerContext} context context + */ + serialize(context) { + const { write } = context; + write(this.name); + write(this.range); + super.serialize(context); + } + + /** + * @param {ObjectDeserializerContext} context context + */ + deserialize(context) { + const { read } = context; + this.name = read(); + this.range = read(); + super.deserialize(context); + } +} + +CssIcssSymbolDependency.Template = class CssValueAtRuleDependencyTemplate extends ( + NullDependency.Template +) { + /** + * @param {Dependency} dependency the dependency for which the template should be applied + * @param {ReplaceSource} source the current replace source which can be modified + * @param {DependencyTemplateContext} templateContext the context object + * @returns {void} + */ + apply(dependency, source, { cssExportsData }) { + const dep = /** @type {CssIcssSymbolDependency} */ (dependency); + + source.replace(dep.range[0], dep.range[1] - 1, dep.value); + + cssExportsData.exports.set(dep.name, dep.value); + } +}; + +makeSerializable( + CssIcssSymbolDependency, + "webpack/lib/dependencies/CssIcssSymbolDependency" +); + +module.exports = CssIcssSymbolDependency; diff --git a/lib/util/internalSerializables.js b/lib/util/internalSerializables.js index 76301c4a6..3ca8f2b91 100644 --- a/lib/util/internalSerializables.js +++ b/lib/util/internalSerializables.js @@ -83,6 +83,8 @@ module.exports = { require("../dependencies/CssIcssExportDependency"), "dependencies/CssUrlDependency": () => require("../dependencies/CssUrlDependency"), + "dependencies/CssIcssSymbolDependency": () => + require("../dependencies/CssIcssSymbolDependency"), "dependencies/DelegatedSourceDependency": () => require("../dependencies/DelegatedSourceDependency"), "dependencies/DllEntryDependency": () => diff --git a/test/__snapshots__/ConfigTestCases.basictest.js.snap b/test/__snapshots__/ConfigTestCases.basictest.js.snap index baf4a2607..11fb8fdcf 100644 --- a/test/__snapshots__/ConfigTestCases.basictest.js.snap +++ b/test/__snapshots__/ConfigTestCases.basictest.js.snap @@ -70,9 +70,250 @@ Object { `; exports[`ConfigTestCases css css-modules exported tests should allow to create css modules: dev 2`] = ` -"/*!******************************!*\\\\ +"/*!*******************************!*\\\\ + !*** css ./colors.module.css ***! + \\\\*******************************/ + + + + + + + + + + + + +/*!**************************************!*\\\\ + !*** css ./at-rule-value.module.css ***! + \\\\**************************************/ + + +._at-rule-value_module_css-value-in-class { + color: blue; +} + + + + + + +@media (max-width { + abbr:hover { + color: limegreen; + transition-duration: 1s; + } +} + + + +._at-rule-value_module_css-foo { color: red; } + + + +._at-rule-value_module_css-foo { + &._at-rule-value_module_css-bar { color: red; } +} + + + +._at-rule-value_module_css-foo { + @media (min-width: 1024px) { + &._at-rule-value_module_css-bar { color: red; } + } +} + + + +._at-rule-value_module_css-foo { + @media (min-width: 1024px) { + &._at-rule-value_module_css-bar { + @media (min-width: 1024px) { + color: red; + } + } + } +} + + + + +._at-rule-value_module_css-foo { height: 40px; height: 36px; } + + + +._at-rule-value_module_css-colorValue { + color: red; +} + + + +#_at-rule-value_module_css-colorValue-v1 { + color: red; +} + + + +._at-rule-value_module_css-colorValue-v2 > ._at-rule-value_module_css-colorValue-v2 { + color: red; +} + + + +.red { + color: .red; +} + + + +._at-rule-value_module_css-export { + color: blue; +} + + + +._at-rule-value_module_css-foo { color: red; } + + + +._at-rule-value_module_css-foo { color: blue; } +._at-rule-value_module_css-bar { color: yellow } + +@value red-v3 from colors; + + +._at-rule-value_module_css-foo { color: red-v3; } + + +@value red-v4 from colors; + +._at-rule-value_module_css-foo { color: red-v4; } + + + + +._at-rule-value_module_css-a { color: aaa; } + + + + +._at-rule-value_module_css-a { margin: calc(base * 2); } + + + + +._at-rule-value_module_css-a { content: \\"test-a\\" \\"test-b\\"; } + + + +._at-rule-value_module_css-foo { color: var(--color); } + + + + + + + +._at-rule-value_module_css-foo { + color: red; + background-color: 3char; + border-top-color: 6char; + border-bottom-color: rgba(34,; + outline-color: hsla(220,; +} + + + +._at-rule-value_module_css-foo { color: blue; } +._at-rule-value_module_css-bar { color: red } + + + +._at-rule-value_module_css-foo { box-shadow: 0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14); } + + + +._at-rule-value_module_css-foo { color: color(red lightness(50%)); } + + + +:root { --_at-rule-value_module_css-color: red; } + + + +:root { --_at-rule-value_module_css-color:; } + + + +:root { --_at-rule-value_module_css-color:; } + + + +:root { --_at-rule-value_module_css-color:/* comment */; } + + + + +._at-rule-value_module_css-override { + color: red; +} + + + + +._at-rule-value_module_css-class { + color: red; + color: red; + color: blue; +} + + + +._at-rule-value_module_css-color { + color: red; +} + + + +._at-rule-value_module_css-foo { box-shadow: coolShadow-v2; } + + + +._at-rule-value_module_css-foo { box-shadow: coolShadow-v3; } + + + +._at-rule-value_module_css-foo { box-shadow: coolShadow-v4; } + + + +._at-rule-value_module_css-foo { box-shadow: coolShadow-v5; } + + + +._at-rule-value_module_css-foo { box-shadow: coolShadow-v6; } + + + +._at-rule-value_module_css-foo { box-shadow: coolShadow-v7; } + +@value /* test */ test-v1 /* test */ from /* test */ \\"./colors.module.css\\" /* test */; + +._at-rule-value_module_css-foo { color: test-v1; } + + + +._at-rule-value_module_css-foo { color: blue; } + + + +._at-rule-value_module_css-foo { color: my-name-q; } + +/*!******************************!*\\\\ !*** css ./style.module.css ***! \\\\******************************/ + ._style_module_css-class { color: red; } @@ -1235,7 +1476,7 @@ div { --_identifiers_module_css-variable-used-class: 10px; } -head{--webpack-use-style_js:class:__style_module_css-class/local1:__style_module_css-local1/local2:__style_module_css-local2/local3:__style_module_css-local3/local4:__style_module_css-local4/local5:__style_module_css-local5/local6:__style_module_css-local6/local7:__style_module_css-local7/disabled:__style_module_css-disabled/mButtonDisabled:__style_module_css-mButtonDisabled/tipOnly:__style_module_css-tipOnly/local8:__style_module_css-local8/parent1:__style_module_css-parent1/child1:__style_module_css-child1/vertical-tiny:__style_module_css-vertical-tiny/vertical-small:__style_module_css-vertical-small/otherDiv:__style_module_css-otherDiv/horizontal-tiny:__style_module_css-horizontal-tiny/horizontal-small:__style_module_css-horizontal-small/description:__style_module_css-description/local9:__style_module_css-local9/local10:__style_module_css-local10/local11:__style_module_css-local11/local12:__style_module_css-local12/local13:__style_module_css-local13/local14:__style_module_css-local14/local15:__style_module_css-local15/local16:__style_module_css-local16/nested1:__style_module_css-nested1/nested3:__style_module_css-nested3/ident:__style_module_css-ident/localkeyframes:__style_module_css-localkeyframes/pos1x:--_style_module_css-pos1x/pos1y:--_style_module_css-pos1y/pos2x:--_style_module_css-pos2x/pos2y:--_style_module_css-pos2y/localkeyframes2:__style_module_css-localkeyframes2/animation:__style_module_css-animation/vars:__style_module_css-vars/local-color:--_style_module_css-local-color/globalVars:__style_module_css-globalVars/wideScreenClass:__style_module_css-wideScreenClass/narrowScreenClass:__style_module_css-narrowScreenClass/displayGridInSupports:__style_module_css-displayGridInSupports/floatRightInNegativeSupports:__style_module_css-floatRightInNegativeSupports/displayFlexInMediaInSupports:__style_module_css-displayFlexInMediaInSupports/displayFlexInSupportsInMedia:__style_module_css-displayFlexInSupportsInMedia/displayFlexInSupportsInMediaUpperCase:__style_module_css-displayFlexInSupportsInMediaUpperCase/animationUpperCase:__style_module_css-animationUpperCase/localkeyframesUPPERCASE:__style_module_css-localkeyframesUPPERCASE/localkeyframes2UPPPERCASE:__style_module_css-localkeyframes2UPPPERCASE/localUpperCase:__style_module_css-localUpperCase/VARS:__style_module_css-VARS/LOCAL-COLOR:--_style_module_css-LOCAL-COLOR/globalVarsUpperCase:__style_module_css-globalVarsUpperCase/inSupportScope:__style_module_css-inSupportScope/a:__style_module_css-a/animationName:__style_module_css-animationName/b:__style_module_css-b/c:__style_module_css-c/d:__style_module_css-d/animation-name:--_style_module_css-animation-name/mozAnimationName:__style_module_css-mozAnimationName/my-color:--_style_module_css-my-color/my-color-1:--_style_module_css-my-color-1/my-color-2:--_style_module_css-my-color-2/padding-sm:__style_module_css-padding-sm/padding-lg:__style_module_css-padding-lg/nested-pure:__style_module_css-nested-pure/nested-media:__style_module_css-nested-media/nested-supports:__style_module_css-nested-supports/nested-layer:__style_module_css-nested-layer/not-selector-inside:__style_module_css-not-selector-inside/nested-var:__style_module_css-nested-var/again:__style_module_css-again/nested-with-local-pseudo:__style_module_css-nested-with-local-pseudo/local-nested:__style_module_css-local-nested/bar:--_style_module_css-bar/id-foo:__style_module_css-id-foo/id-bar:__style_module_css-id-bar/nested-parens:__style_module_css-nested-parens/local-in-global:__style_module_css-local-in-global/in-local-global-scope:__style_module_css-in-local-global-scope/class-local-scope:__style_module_css-class-local-scope/class-in-container:__style_module_css-class-in-container/deep-class-in-container:__style_module_css-deep-class-in-container/placeholder-gray-700:__style_module_css-placeholder-gray-700/placeholder-opacity:--_style_module_css-placeholder-opacity/test:--_style_module_css-test/baz:__style_module_css-baz/slidein:__style_module_css-slidein/my-global-class-again:__style_module_css-my-global-class-again/first-nested:__style_module_css-first-nested/first-nested-nested:__style_module_css-first-nested-nested/first-nested-at-rule:__style_module_css-first-nested-at-rule/first-nested-nested-at-rule-deep:__style_module_css-first-nested-nested-at-rule-deep/foo:--_style_module_css-foo/broken:__style_module_css-broken/comments:__style_module_css-comments/error:__style_module_css-error/err-404:__style_module_css-err-404/qqq:__style_module_css-qqq/parent:__style_module_css-parent/scope:__style_module_css-scope/limit:__style_module_css-limit/content:__style_module_css-content/card:__style_module_css-card/baz-1:__style_module_css-baz-1/baz-2:__style_module_css-baz-2/my-class:__style_module_css-my-class/feature:__style_module_css-feature/class-1:__style_module_css-class-1/infobox:__style_module_css-infobox/header:__style_module_css-header/item-size:--_style_module_css-item-size/container:__style_module_css-container/item-color:--_style_module_css-item-color/item:__style_module_css-item/two:__style_module_css-two/three:__style_module_css-three/initial:__style_module_css-initial/None:__style_module_css-None/item-1:__style_module_css-item-1/var:__style_module_css-var/main-color:--_style_module_css-main-color/FOO:--_style_module_css-FOO/accent-background:--_style_module_css-accent-background/external-link:--_style_module_css-external-link/custom-prop:--_style_module_css-custom-prop/default-value:--_style_module_css-default-value/main-bg-color:--_style_module_css-main-bg-color/backup-bg-color:--_style_module_css-backup-bg-color/var-order:__style_module_css-var-order/&\\\\.\\\\/style\\\\.module\\\\.css,myCssClass:__style_module_my-css-myCssClass/&\\\\.\\\\/style\\\\.module\\\\.my-css,&\\\\.\\\\/style\\\\.module\\\\.css\\\\.invalid,UnusedClassName:__identifiers_module_css-UnusedClassName/variable-unused-class:--_identifiers_module_css-variable-unused-class/UsedClassName:__identifiers_module_css-UsedClassName/variable-used-class:--_identifiers_module_css-variable-used-class/&\\\\.\\\\/identifiers\\\\.module\\\\.css;}" +head{--webpack-use-style_js:red:blue/red-i:blue/blue:red/blue-i:red/a:\\\\\\"test-a\\\\\\"/b:\\\\\\"test-b\\\\\\"/--red:var\\\\(--color\\\\)/test-v1:blue/test-v2:blue/red-v2:blue/green-v2:yellow/&\\\\.\\\\/colors\\\\.module\\\\.css,red:blue/value-in-class:__at-rule-value_module_css-value-in-class/v-comment-broken:/v-comment:\\\\/\\\\*\\\\ comment\\\\ \\\\*\\\\//small:\\\\(max-width/blue-v1:red/foo:__at-rule-value_module_css-foo/blue-v2:red/bar:__at-rule-value_module_css-bar/blue-v3:red/blue-v4:red/test-t:_40px/test_q:_36px/colorValue:red/colorValue-v1:red/colorValue-v2:red/colorValue-v3:\\\\.red/export:__at-rule-value_module_css-export/colors:\\\\\\"\\\\.\\\\/colors\\\\.module\\\\.css\\\\\\"/aaa:red/bbb:aaa/a:__at-rule-value_module_css-a/base:_10px/large:calc\\\\(base\\\\ \\\\*\\\\ 2\\\\)/named:red/_3char:\\\\#0f0/_6char:\\\\#00ff00/rgba:rgba\\\\(34\\\\,/hsla:hsla\\\\(220\\\\,/coolShadow:_0\\\\ 11px\\\\ 15px\\\\ -7px\\\\ rgba\\\\(0\\\\,0\\\\,0\\\\,\\\\.2\\\\)\\\\,0\\\\ 24px\\\\ 38px\\\\ 3px\\\\ rgba\\\\(0\\\\,0\\\\,0\\\\,\\\\.14\\\\)/func:color\\\\(red\\\\ lightness\\\\(50\\\\%\\\\)\\\\)/v-color:red/color:__at-rule-value_module_css-color/v-empty:/v-empty-v2:/v-empty-v3:\\\\/\\\\*\\\\ comment\\\\ \\\\*\\\\//override:red/class:__at-rule-value_module_css-class/\\\\/\\\\*\\\\ test\\\\ \\\\*\\\\/blue-v1\\\\/\\\\*\\\\ test\\\\ \\\\*\\\\/:\\\\/\\\\*\\\\ test\\\\ \\\\*\\\\/red\\\\/\\\\*\\\\ test\\\\ \\\\*\\\\//coolShadow-v2\\\\ \\\\ \\\\ :_0\\\\ 11px\\\\ 15px\\\\ -7px\\\\ rgba\\\\(0\\\\,0\\\\,0\\\\,\\\\.2\\\\)\\\\,0\\\\ 24px\\\\ 38px\\\\ 3px\\\\ rgba\\\\(0\\\\,0\\\\,0\\\\,\\\\.14\\\\)/\\\\/\\\\*\\\\ test\\\\ \\\\*\\\\/\\\\ \\\\ \\\\ coolShadow-v3\\\\ \\\\ \\\\ \\\\/\\\\*\\\\ test\\\\ \\\\*\\\\/\\\\ \\\\ \\\\ :_0\\\\ 11px\\\\ 15px\\\\ -7px\\\\ rgba\\\\(0\\\\,0\\\\,0\\\\,\\\\.2\\\\)\\\\,0\\\\ 24px\\\\ 38px\\\\ 3px\\\\ rgba\\\\(0\\\\,0\\\\,0\\\\,\\\\.14\\\\)/\\\\/\\\\*:test/\\\\/\\\\*\\\\ test\\\\ \\\\*\\\\/coolShadow-v6\\\\/\\\\*\\\\ test\\\\ \\\\*\\\\/:_0\\\\ 11px\\\\ 15px\\\\ -7px\\\\ rgba\\\\(0\\\\,0\\\\,0\\\\,\\\\.2\\\\)\\\\,0\\\\ 24px\\\\ 38px\\\\ 3px\\\\ rgba\\\\(0\\\\,0\\\\,0\\\\,\\\\.14\\\\)/\\\\/\\\\*\\\\ test\\\\ \\\\*\\\\/coolShadow-v7\\\\/\\\\*\\\\ test\\\\ \\\\*\\\\/:\\\\/\\\\*\\\\ test\\\\ \\\\*\\\\/0\\\\ 11px\\\\ 15px\\\\ -7px\\\\ rgba\\\\(0\\\\,0\\\\,0\\\\,\\\\.2\\\\)\\\\,0\\\\ 24px\\\\ 38px\\\\ 3px\\\\ rgba\\\\(0\\\\,0\\\\,0\\\\,\\\\.14\\\\)/&\\\\.\\\\/at-rule-value\\\\.module\\\\.css,class:__style_module_css-class/local1:__style_module_css-local1/local2:__style_module_css-local2/local3:__style_module_css-local3/local4:__style_module_css-local4/local5:__style_module_css-local5/local6:__style_module_css-local6/local7:__style_module_css-local7/disabled:__style_module_css-disabled/mButtonDisabled:__style_module_css-mButtonDisabled/tipOnly:__style_module_css-tipOnly/local8:__style_module_css-local8/parent1:__style_module_css-parent1/child1:__style_module_css-child1/vertical-tiny:__style_module_css-vertical-tiny/vertical-small:__style_module_css-vertical-small/otherDiv:__style_module_css-otherDiv/horizontal-tiny:__style_module_css-horizontal-tiny/horizontal-small:__style_module_css-horizontal-small/description:__style_module_css-description/local9:__style_module_css-local9/local10:__style_module_css-local10/local11:__style_module_css-local11/local12:__style_module_css-local12/local13:__style_module_css-local13/local14:__style_module_css-local14/local15:__style_module_css-local15/local16:__style_module_css-local16/nested1:__style_module_css-nested1/nested3:__style_module_css-nested3/ident:__style_module_css-ident/localkeyframes:__style_module_css-localkeyframes/pos1x:--_style_module_css-pos1x/pos1y:--_style_module_css-pos1y/pos2x:--_style_module_css-pos2x/pos2y:--_style_module_css-pos2y/localkeyframes2:__style_module_css-localkeyframes2/animation:__style_module_css-animation/vars:__style_module_css-vars/local-color:--_style_module_css-local-color/globalVars:__style_module_css-globalVars/wideScreenClass:__style_module_css-wideScreenClass/narrowScreenClass:__style_module_css-narrowScreenClass/displayGridInSupports:__style_module_css-displayGridInSupports/floatRightInNegativeSupports:__style_module_css-floatRightInNegativeSupports/displayFlexInMediaInSupports:__style_module_css-displayFlexInMediaInSupports/displayFlexInSupportsInMedia:__style_module_css-displayFlexInSupportsInMedia/displayFlexInSupportsInMediaUpperCase:__style_module_css-displayFlexInSupportsInMediaUpperCase/animationUpperCase:__style_module_css-animationUpperCase/localkeyframesUPPERCASE:__style_module_css-localkeyframesUPPERCASE/localkeyframes2UPPPERCASE:__style_module_css-localkeyframes2UPPPERCASE/localUpperCase:__style_module_css-localUpperCase/VARS:__style_module_css-VARS/LOCAL-COLOR:--_style_module_css-LOCAL-COLOR/globalVarsUpperCase:__style_module_css-globalVarsUpperCase/inSupportScope:__style_module_css-inSupportScope/a:__style_module_css-a/animationName:__style_module_css-animationName/b:__style_module_css-b/c:__style_module_css-c/d:__style_module_css-d/animation-name:--_style_module_css-animation-name/mozAnimationName:__style_module_css-mozAnimationName/my-color:--_style_module_css-my-color/my-color-1:--_style_module_css-my-color-1/my-color-2:--_style_module_css-my-color-2/padding-sm:__style_module_css-padding-sm/padding-lg:__style_module_css-padding-lg/nested-pure:__style_module_css-nested-pure/nested-media:__style_module_css-nested-media/nested-supports:__style_module_css-nested-supports/nested-layer:__style_module_css-nested-layer/not-selector-inside:__style_module_css-not-selector-inside/nested-var:__style_module_css-nested-var/again:__style_module_css-again/nested-with-local-pseudo:__style_module_css-nested-with-local-pseudo/local-nested:__style_module_css-local-nested/bar:--_style_module_css-bar/id-foo:__style_module_css-id-foo/id-bar:__style_module_css-id-bar/nested-parens:__style_module_css-nested-parens/local-in-global:__style_module_css-local-in-global/in-local-global-scope:__style_module_css-in-local-global-scope/class-local-scope:__style_module_css-class-local-scope/class-in-container:__style_module_css-class-in-container/deep-class-in-container:__style_module_css-deep-class-in-container/placeholder-gray-700:__style_module_css-placeholder-gray-700/placeholder-opacity:--_style_module_css-placeholder-opacity/test:--_style_module_css-test/baz:__style_module_css-baz/slidein:__style_module_css-slidein/my-global-class-again:__style_module_css-my-global-class-again/first-nested:__style_module_css-first-nested/first-nested-nested:__style_module_css-first-nested-nested/first-nested-at-rule:__style_module_css-first-nested-at-rule/first-nested-nested-at-rule-deep:__style_module_css-first-nested-nested-at-rule-deep/foo:--_style_module_css-foo/broken:__style_module_css-broken/comments:__style_module_css-comments/error:__style_module_css-error/err-404:__style_module_css-err-404/qqq:__style_module_css-qqq/parent:__style_module_css-parent/scope:__style_module_css-scope/limit:__style_module_css-limit/content:__style_module_css-content/card:__style_module_css-card/baz-1:__style_module_css-baz-1/baz-2:__style_module_css-baz-2/my-class:__style_module_css-my-class/feature:__style_module_css-feature/class-1:__style_module_css-class-1/infobox:__style_module_css-infobox/header:__style_module_css-header/item-size:--_style_module_css-item-size/container:__style_module_css-container/item-color:--_style_module_css-item-color/item:__style_module_css-item/two:__style_module_css-two/three:__style_module_css-three/initial:__style_module_css-initial/None:__style_module_css-None/item-1:__style_module_css-item-1/var:__style_module_css-var/main-color:--_style_module_css-main-color/FOO:--_style_module_css-FOO/accent-background:--_style_module_css-accent-background/external-link:--_style_module_css-external-link/custom-prop:--_style_module_css-custom-prop/default-value:--_style_module_css-default-value/main-bg-color:--_style_module_css-main-bg-color/backup-bg-color:--_style_module_css-backup-bg-color/var-order:__style_module_css-var-order/&\\\\.\\\\/style\\\\.module\\\\.css,myCssClass:__style_module_my-css-myCssClass/&\\\\.\\\\/style\\\\.module\\\\.my-css,&\\\\.\\\\/style\\\\.module\\\\.css\\\\.invalid,UnusedClassName:__identifiers_module_css-UnusedClassName/variable-unused-class:--_identifiers_module_css-variable-unused-class/UsedClassName:__identifiers_module_css-UsedClassName/variable-used-class:--_identifiers_module_css-variable-used-class/&\\\\.\\\\/identifiers\\\\.module\\\\.css;}" `; exports[`ConfigTestCases css css-modules exported tests should allow to create css modules: prod 1`] = ` @@ -1287,9 +1528,250 @@ Object { `; exports[`ConfigTestCases css css-modules exported tests should allow to create css modules: prod 2`] = ` -"/*!******************************!*\\\\ +"/*!*******************************!*\\\\ + !*** css ./colors.module.css ***! + \\\\*******************************/ + + + + + + + + + + + + +/*!**************************************!*\\\\ + !*** css ./at-rule-value.module.css ***! + \\\\**************************************/ + + +.my-app-744-value-in-class { + color: blue; +} + + + + + + +@media (max-width { + abbr:hover { + color: limegreen; + transition-duration: 1s; + } +} + + + +.my-app-744-foo { color: red; } + + + +.my-app-744-foo { + &.my-app-744-bar { color: red; } +} + + + +.my-app-744-foo { + @media (min-width: 1024px) { + &.my-app-744-bar { color: red; } + } +} + + + +.my-app-744-foo { + @media (min-width: 1024px) { + &.my-app-744-bar { + @media (min-width: 1024px) { + color: red; + } + } + } +} + + + + +.my-app-744-foo { height: 40px; height: 36px; } + + + +.my-app-744-colorValue { + color: red; +} + + + +#my-app-744-colorValue-v1 { + color: red; +} + + + +.my-app-744-colorValue-v2 > .my-app-744-colorValue-v2 { + color: red; +} + + + +.red { + color: .red; +} + + + +.my-app-744-export { + color: blue; +} + + + +.my-app-744-foo { color: red; } + + + +.my-app-744-foo { color: blue; } +.my-app-744-bar { color: yellow } + +@value red-v3 from colors; + + +.my-app-744-foo { color: red-v3; } + + +@value red-v4 from colors; + +.my-app-744-foo { color: red-v4; } + + + + +.my-app-744-a { color: aaa; } + + + + +.my-app-744-a { margin: calc(base * 2); } + + + + +.my-app-744-a { content: \\"test-a\\" \\"test-b\\"; } + + + +.my-app-744-foo { color: var(--color); } + + + + + + + +.my-app-744-foo { + color: red; + background-color: 3char; + border-top-color: 6char; + border-bottom-color: rgba(34,; + outline-color: hsla(220,; +} + + + +.my-app-744-foo { color: blue; } +.my-app-744-bar { color: red } + + + +.my-app-744-foo { box-shadow: 0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14); } + + + +.my-app-744-foo { color: color(red lightness(50%)); } + + + +:root { --my-app-744-color: red; } + + + +:root { --my-app-744-color:; } + + + +:root { --my-app-744-color:; } + + + +:root { --my-app-744-color:/* comment */; } + + + + +.my-app-744-override { + color: red; +} + + + + +.my-app-744-class { + color: red; + color: red; + color: blue; +} + + + +.my-app-744-color { + color: red; +} + + + +.my-app-744-foo { box-shadow: coolShadow-v2; } + + + +.my-app-744-foo { box-shadow: coolShadow-v3; } + + + +.my-app-744-foo { box-shadow: coolShadow-v4; } + + + +.my-app-744-foo { box-shadow: coolShadow-v5; } + + + +.my-app-744-foo { box-shadow: coolShadow-v6; } + + + +.my-app-744-foo { box-shadow: coolShadow-v7; } + +@value /* test */ test-v1 /* test */ from /* test */ \\"./colors.module.css\\" /* test */; + +.my-app-744-foo { color: test-v1; } + + + +.my-app-744-foo { color: blue; } + + + +.my-app-744-foo { color: my-name-q; } + +/*!******************************!*\\\\ !*** css ./style.module.css ***! \\\\******************************/ + .my-app-235-zg { color: red; } @@ -2452,7 +2934,7 @@ div { --my-app-194-c5: 10px; } -head{--webpack-my-app-226:zg:my-app-235-Ā/HiĂĄĆĈĊČĐ/OBĒąćĉċ-Ě/VEĜĔğČĤę2ĦĞĖġ2ģjĭĕĠVjęHĴĨġHď5ĻįH5/aqŁĠņģNňĩNģMō-VM/AOŒŗďŇăĝĵėqę4ŒO4ďbŒHbęPŤPďwũw/nŨŝħįŵ/\\\\$QŒżQ/bDŒƃŻ$tſƈ/qđ--ŷĮĠƍ/xěƏƑş-ƖƇ6:ƘēƒČż6/gJƟƐơƚƧƕŒx/lYŒƲ/fŒf/uzƩƙļƻŅKŒaKŅ7ǃ7ƺƷƾįuƹsWŒǐ/TZŒǕŅƳnjʼnY/IIŒǟ/iijǛČǤ/zGŒǪ/DkŒǯ/XĥǦ-ǴǞ0ƽƫļI0/wƉǶȁŴcŒncǣǖǶiZ/ZŭƠŞļȐ/MƞǶȗ/rXǻȓįȜ/dǑǶȣ/cƄǶȨȖǺȒŸĠMǿVǺǶȳ/CđǶȸƂǂǶbDžY1ŒɁ/ƳȮƢ-ǝtƞɇƚɋ/KRŒɑ/FǰǶɖ/prȞȯČɛ/sƄɍļɢƦƼɤįgzģhŒVh/veɝɈɳƂāɩĠbg/BǑɺČɿ/WǠʁ-ʅȷɜʇCrǣ3ɵƚi3/tvʑļʖ/&_Ė,ɗǼ6ʢ-kʛ_ʢ6,ʜ81ʩRƨɤ194-ʯȏLĻʲʴZLȧŀʱʳ-cńʜʺ;}" +head{--webpack-my-app-226:red:blue/Ād-iăąćĄĆ:ĉ/ĐeċĒā/a:\\\\\\"test-aĝĔĜĞĠĢbĥ--ĉ:var\\\\(ĭcoloij)/ğġ-v1čĆĽĩŀ2ŃćĉŇʼn/gĀenŌyelĹw/&_220,įĕ/ıĎċŒclass:myģpp-744ŀaŤiŦŨŪŢ-ķmmőĪrokő:ŽſƁntĜ/\\\\*\\\\ ƊƂƒƐ\\\\//smŷlĜ(Ɯx-widthĔŤŁĘd/fooŬŮaŰŲŴ-ƯoƩĆŌēbIJƲůűųŵƿrƻĖv3ƬLjŀ4njľĢƍ_40pxŅġ_q:_36Ǘ/ķĹrVŷđēǣĺǦƪłǩĸǫǧljňǯǤǬƼNJĜ.ēexpĺƍŭǂƶŵǽǿrtǢǰrūĝ\\\\.ƘǪȌȏmoduleȏcŪĥaȟnjbȢ:ȟaĚǁƴǃƷȦƿseǝ1ǖǘŨrgȯcŷcĴȭȚ Ɨ 2\\\\ļnaƁĂēǞchǀ\\\\#0f0/_6ɊɌɎɏɐɑȵƿĒgƿĴ34\\\\,/hsŨ:ɦŨĴŜ0ɣȊĸSɋdowǝɮ 11Ǘƒ15ɼ ŲʀɛĤ(ɮ,ʇʇȏɁ)ɣɸ24ʀ38ʒʃɞʅʉʎɣȏ1ɢļfunc:ȒĴĉƒlightnĠsĴ5ɮ%ɂɂƉȋnjȒȨƵDŽžȋŽemptyƈv-ˁ˃Ůvňˀ˂˄ŀNjƘȿƔƌƖƑƙoverrƥȯǩŻūȂȩȄžˢƏƏƑ Ǒ˗Ƙĕŀ1˓˫˭Ⱦ˘Ǝȿ˵ƗĈā˳ƒ˺˘ɰlɲaɴwŇƖȾ ɷɽɻxɽɿ̏ʁ7ʖɟʆʚʈʛ.ʌʚɀʑ̒ʓʕ̒ʄĴʙ̙,ʜʞ˩˹ĩˮƏ̊ƒķɱɳɵˑ̉Ɩ˪˿̭˶˓̰̋_ɸɺʀɾʀʂ̣ʗ̥̘ʊ̛ʵ̙̞ʒʔ̠̕ʘ͊̚ʝʶ˳:Ǒ̫˴̻˻̴̲̃̇v6˾ˬ͞˷̀̍̓̑ƒ͆ƒ̧̤̗̜͎͋ʐ̢͐Ͱ͈Ͳ̦̩̹ͧ͘ġ̮̄̆͠ŀ7ͦ̀Ƙ˸͝΂̼/͇̖̦́̎̐̔ͅʹ͍ʏ̟ƒ̡͒Ζ͔ͳ͖̪ŚDŽ,zgʻű235-Ψ/HČˤƵάήβ/OBΪ-ζ-κ/VEμξςιňδΫέο2ρjτϋVjιHϐήOHα5ϖ-H5ĚǜωνϋaqρNϜVNρMϩM/AOϜϱαϡƳεϋHϦOǏϢξϼαbϜHbιPϜOPαɶϾϹŘnЂЍήАƏ$QϜ\\\\ЖĔDϜbDЕȁϷϊήЙȉqČĭВ-Ч/xλЩТϣήЮЕ6:аȃξЙ6ŎJз-ЪgJЭϜȳYϜlYƮϜf/uzпЪяĚKϜaKĚ7і7юfϜuэsWϜѢ/TZϜѧĚчЪaъIIϜѰ/iϏЪѵ/zGϜѺ/DkϜѿ/XσЪ҄/I0ёбξ҉/wСйϋҐ/ʢϜʢѴѨѷZ/ZЇи˥ξҞ/MжЪҥĈXҋҒήrX/dѣЪұǢМЪcПMҊҠϸήҺρҊЪVɑCγҌϋӅĔѕЪbјYłЪӏ/чҼУ-ъtжӕв-ә/KRϜӠ/FҀЪӥ/prҫҡϋӪƚМӛξsПgѐӲϋӶρhϩƨ˛ӬҽŀďΩӸήbg/Bѣԅ-Ԋ/WѱԌԐ/CӫԌԕѴNjԌi3ĽvԀӖtvřśέ,Ӧб6Ԫ-kԤԪ6,Ś81԰Rоӛ19ŵԶҝLμԹŵZLǢϛԸԺžϟŚՀ;}" `; exports[`ConfigTestCases css css-modules-broken-keyframes exported tests should allow to create css modules: prod 1`] = ` @@ -5425,9 +5907,250 @@ head{--webpack-main:primary-color:red/&\\\\.\\\\/export\\\\.modules\\\\.css,a:re exports[`ConfigTestCases css pure-css exported tests should compile 1`] = ` Array [ - "/*!*******************************************!*\\\\ + "/*!********************************************!*\\\\ + !*** css ../css-modules/colors.module.css ***! + \\\\********************************************/ + + + + + + + + + + + + +/*!***************************************************!*\\\\ + !*** css ../css-modules/at-rule-value.module.css ***! + \\\\***************************************************/ + + +.value-in-class { + color: blue; +} + + + + + + +@media (max-width { + abbr:hover { + color: limegreen; + transition-duration: 1s; + } +} + + + +.foo { color: red; } + + + +.foo { + &.bar { color: red; } +} + + + +.foo { + @media (min-width: 1024px) { + &.bar { color: red; } + } +} + + + +.foo { + @media (min-width: 1024px) { + &.bar { + @media (min-width: 1024px) { + color: red; + } + } + } +} + + + + +.foo { height: 40px; height: 36px; } + + + +.red { + color: red; +} + + + +#colorValue-v1 { + color: red; +} + + + +.red > .red { + color: red; +} + + + +.red { + color: .red; +} + + + +.export { + color: blue; +} + + + +.foo { color: red; } + + + +.foo { color: blue; } +.bar { color: yellow } + +@value red-v3 from colors; + + +.foo { color: red-v3; } + + +@value red-v4 from colors; + +.foo { color: red-v4; } + + + + +.a { color: aaa; } + + + + +.a { margin: calc(base * 2); } + + + + +.\\"test-a\\" { content: \\"test-a\\" \\"test-b\\"; } + + + +.foo { color: var(--color); } + + + + + + + +.foo { + color: red; + background-color: 3char; + border-top-color: 6char; + border-bottom-color: rgba(34,; + outline-color: hsla(220,; +} + + + +.foo { color: blue; } +.bar { color: red } + + + +.foo { box-shadow: 0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14); } + + + +.foo { color: color(red lightness(50%)); } + + + +:root { --color: red; } + + + +:root { --color:; } + + + +:root { --color:; } + + + +:root { --color:/* comment */; } + + + + +.red { + color: red; +} + + + + +.class { + color: red; + color: red; + color: blue; +} + + + +.color { + color: red; +} + + + +.foo { box-shadow: coolShadow-v2; } + + + +.foo { box-shadow: coolShadow-v3; } + + + +.foo { box-shadow: coolShadow-v4; } + + + +.foo { box-shadow: coolShadow-v5; } + + + +.foo { box-shadow: coolShadow-v6; } + + + +.foo { box-shadow: coolShadow-v7; } + +@value /* test */ test-v1 /* test */ from /* test */ \\"./colors.module.css\\" /* test */; + +.foo { color: test-v1; } + + + +.foo { color: blue; } + + + +.foo { color: my-name-q; } + +/*!*******************************************!*\\\\ !*** css ../css-modules/style.module.css ***! \\\\*******************************************/ + .class { color: red; } @@ -6600,7 +7323,7 @@ div { animation: test 1s, test; } -head{--webpack-main:local4:__css-modules_style_module_css-local4/nested1:__css-modules_style_module_css-nested1/localUpperCase:__css-modules_style_module_css-localUpperCase/local-nested:__css-modules_style_module_css-local-nested/local-in-global:__css-modules_style_module_css-local-in-global/in-local-global-scope:__css-modules_style_module_css-in-local-global-scope/class-local-scope:__css-modules_style_module_css-class-local-scope/bar:__css-modules_style_module_css-bar/my-global-class-again:__css-modules_style_module_css-my-global-class-again/class:__css-modules_style_module_css-class/&\\\\.\\\\.\\\\/css-modules\\\\/style\\\\.module\\\\.css,class:__style_css-class/foo:bar/&\\\\.\\\\/style\\\\.css;}", +head{--webpack-main:red:blue/red-i:blue/blue:red/blue-i:red/a:\\\\\\"test-a\\\\\\"/b:\\\\\\"test-b\\\\\\"/--red:var\\\\(--color\\\\)/test-v1:blue/test-v2:blue/red-v2:blue/green-v2:yellow/&\\\\.\\\\.\\\\/css-modules\\\\/colors\\\\.module\\\\.css,red:blue/v-comment-broken:/v-comment:\\\\/\\\\*\\\\ comment\\\\ \\\\*\\\\//small:\\\\(max-width/blue-v1:red/blue-v2:red/blue-v3:red/blue-v4:red/test-t:_40px/test_q:_36px/colorValue:red/colorValue-v1:red/colorValue-v2:red/colorValue-v3:\\\\.red/colors:\\\\\\"\\\\.\\\\/colors\\\\.module\\\\.css\\\\\\"/aaa:red/bbb:aaa/base:_10px/large:calc\\\\(base\\\\ \\\\*\\\\ 2\\\\)/named:red/_3char:\\\\#0f0/_6char:\\\\#00ff00/rgba:rgba\\\\(34\\\\,/hsla:hsla\\\\(220\\\\,/coolShadow:_0\\\\ 11px\\\\ 15px\\\\ -7px\\\\ rgba\\\\(0\\\\,0\\\\,0\\\\,\\\\.2\\\\)\\\\,0\\\\ 24px\\\\ 38px\\\\ 3px\\\\ rgba\\\\(0\\\\,0\\\\,0\\\\,\\\\.14\\\\)/func:color\\\\(red\\\\ lightness\\\\(50\\\\%\\\\)\\\\)/v-color:red/v-empty:/v-empty-v2:/v-empty-v3:\\\\/\\\\*\\\\ comment\\\\ \\\\*\\\\//override:red/\\\\/\\\\*\\\\ test\\\\ \\\\*\\\\/blue-v1\\\\/\\\\*\\\\ test\\\\ \\\\*\\\\/:\\\\/\\\\*\\\\ test\\\\ \\\\*\\\\/red\\\\/\\\\*\\\\ test\\\\ \\\\*\\\\//coolShadow-v2\\\\ \\\\ \\\\ :_0\\\\ 11px\\\\ 15px\\\\ -7px\\\\ rgba\\\\(0\\\\,0\\\\,0\\\\,\\\\.2\\\\)\\\\,0\\\\ 24px\\\\ 38px\\\\ 3px\\\\ rgba\\\\(0\\\\,0\\\\,0\\\\,\\\\.14\\\\)/\\\\/\\\\*\\\\ test\\\\ \\\\*\\\\/\\\\ \\\\ \\\\ coolShadow-v3\\\\ \\\\ \\\\ \\\\/\\\\*\\\\ test\\\\ \\\\*\\\\/\\\\ \\\\ \\\\ :_0\\\\ 11px\\\\ 15px\\\\ -7px\\\\ rgba\\\\(0\\\\,0\\\\,0\\\\,\\\\.2\\\\)\\\\,0\\\\ 24px\\\\ 38px\\\\ 3px\\\\ rgba\\\\(0\\\\,0\\\\,0\\\\,\\\\.14\\\\)/\\\\/\\\\*:test/\\\\/\\\\*\\\\ test\\\\ \\\\*\\\\/coolShadow-v6\\\\/\\\\*\\\\ test\\\\ \\\\*\\\\/:_0\\\\ 11px\\\\ 15px\\\\ -7px\\\\ rgba\\\\(0\\\\,0\\\\,0\\\\,\\\\.2\\\\)\\\\,0\\\\ 24px\\\\ 38px\\\\ 3px\\\\ rgba\\\\(0\\\\,0\\\\,0\\\\,\\\\.14\\\\)/\\\\/\\\\*\\\\ test\\\\ \\\\*\\\\/coolShadow-v7\\\\/\\\\*\\\\ test\\\\ \\\\*\\\\/:\\\\/\\\\*\\\\ test\\\\ \\\\*\\\\/0\\\\ 11px\\\\ 15px\\\\ -7px\\\\ rgba\\\\(0\\\\,0\\\\,0\\\\,\\\\.2\\\\)\\\\,0\\\\ 24px\\\\ 38px\\\\ 3px\\\\ rgba\\\\(0\\\\,0\\\\,0\\\\,\\\\.14\\\\)/&\\\\.\\\\.\\\\/css-modules\\\\/at-rule-value\\\\.module\\\\.css,local4:__css-modules_style_module_css-local4/nested1:__css-modules_style_module_css-nested1/localUpperCase:__css-modules_style_module_css-localUpperCase/local-nested:__css-modules_style_module_css-local-nested/local-in-global:__css-modules_style_module_css-local-in-global/in-local-global-scope:__css-modules_style_module_css-in-local-global-scope/class-local-scope:__css-modules_style_module_css-class-local-scope/bar:__css-modules_style_module_css-bar/my-global-class-again:__css-modules_style_module_css-my-global-class-again/class:__css-modules_style_module_css-class/&\\\\.\\\\.\\\\/css-modules\\\\/style\\\\.module\\\\.css,class:__style_css-class/foo:bar/&\\\\.\\\\/style\\\\.css;}", ] `; diff --git a/test/configCases/css/css-modules/at-rule-value.module.css b/test/configCases/css/css-modules/at-rule-value.module.css new file mode 100644 index 000000000..e84d1e97c --- /dev/null +++ b/test/configCases/css/css-modules/at-rule-value.module.css @@ -0,0 +1,221 @@ +@value red blue; + +.value-in-class { + color: red; +} + +@value v-comment-broken:; +@value v-comment:/* comment */; + +@value small: (max-width: 599px); + +@media small { + abbr:hover { + color: limegreen; + transition-duration: 1s; + } +} + +@value blue-v1: red; + +.foo { color: blue-v1; } + +@value blue-v2: red; + +.foo { + &.bar { color: blue-v2; } +} + +@value blue-v3: red; + +.foo { + @media (min-width: 1024px) { + &.bar { color: blue-v3; } + } +} + +@value blue-v4: red; + +.foo { + @media (min-width: 1024px) { + &.bar { + @media (min-width: 1024px) { + color: blue-v4; + } + } + } +} + +@value test-t: 40px; +@value test_q: 36px; + +.foo { height: test-t; height: test_q; } + +@value colorValue: red; + +.colorValue { + color: colorValue; +} + +@value colorValue-v1: red; + +#colorValue-v1 { + color: colorValue-v1; +} + +@value colorValue-v2: red; + +.colorValue-v2 > .colorValue-v2 { + color: colorValue-v2; +} + +@value colorValue-v3: .red; + +colorValue-v3 { + color: colorValue-v3; +} + +@value red-v2 from "./colors.module.css"; + +.export { + color: red-v2; +} + +@value blue as green from "./colors.module.css"; + +.foo { color: green; } + +@value blue, green-v2 from "./colors.module.css"; + +.foo { color: red; } +.bar { color: green-v2 } + +@value red-v3 from colors; +@value colors: "./colors.module.css"; + +.foo { color: red-v3; } + +@value colors: "./colors.module.css"; +@value red-v4 from colors; + +.foo { color: red-v4; } + +@value aaa: red; +@value bbb: aaa; + +.a { color: bbb; } + +@value base: 10px; +@value large: calc(base * 2); + +.a { margin: large; } + +@value a from "./colors.module.css"; +@value b from "./colors.module.css"; + +.a { content: a b; } + +@value --red from "./colors.module.css"; + +.foo { color: --red; } + +@value named: red; +@value 3char #0f0; +@value 6char #00ff00; +@value rgba rgba(34, 12, 64, 0.3); +@value hsla hsla(220, 13.0%, 18.0%, 1); + +.foo { + color: named; + background-color: 3char; + border-top-color: 6char; + border-bottom-color: rgba; + outline-color: hsla; +} + +@value (blue-i, red-i) from "./colors.module.css"; + +.foo { color: red-i; } +.bar { color: blue-i } + +@value coolShadow: 0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14) ; + +.foo { box-shadow: coolShadow; } + +@value func: color(red lightness(50%)); + +.foo { color: func; } + +@value v-color: red; + +:root { --color: v-color; } + +@value v-empty: ; + +:root { --color:v-empty; } + +@value v-empty-v2: ; + +:root { --color:v-empty-v2; } + +@value v-empty-v3: /* comment */; + +:root { --color:v-empty-v3; } + +@value override: blue; +@value override: red; + +.override { + color: override; +} + +@value (blue as my-name) from "./colors.module.css"; +@value (blue as my-name-again, red) from "./colors.module.css"; + +.class { + color: my-name; + color: my-name-again; + color: red; +} + +@value/* test */blue-v1/* test */:/* test */red/* test */; + +.color { + color: blue-v1; +} + +@value coolShadow-v2 : 0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14) ; + +.foo { box-shadow: coolShadow-v2; } + +@value /* test */ coolShadow-v3 /* test */ : 0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14) ; + +.foo { box-shadow: coolShadow-v3; } + +@value /* test */ coolShadow-v4 /* test */ 0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14) ; + +.foo { box-shadow: coolShadow-v4; } + +@value/* test */coolShadow-v5/* test */0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14); + +.foo { box-shadow: coolShadow-v5; } + +@value/* test */coolShadow-v6/* test */:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14); + +.foo { box-shadow: coolShadow-v6; } + +@value/* test */coolShadow-v7/* test */:/* test */0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14); + +.foo { box-shadow: coolShadow-v7; } + +@value /* test */ test-v1 /* test */ from /* test */ "./colors.module.css" /* test */; + +.foo { color: test-v1; } + +@value/* test */test-v2/* test */from/* test */"./colors.module.css"/* test */; + +.foo { color: test-v2; } + +@value/* test */(/* test */blue/* test */as/* test */my-name-q/* test */)/* test */from/* test */"./colors.module.css"/* test */; + +.foo { color: my-name-q; } diff --git a/test/configCases/css/css-modules/colors.module.css b/test/configCases/css/css-modules/colors.module.css new file mode 100644 index 000000000..07da3aa65 --- /dev/null +++ b/test/configCases/css/css-modules/colors.module.css @@ -0,0 +1,11 @@ +@value red blue; +@value red-i: blue; +@value blue red; +@value blue-i: red; +@value a: "test-a"; +@value b: "test-b"; +@value --red: var(--color); +@value test-v1: blue; +@value test-v2: blue; +@value red-v2: blue; +@value green-v2: yellow; diff --git a/test/configCases/css/css-modules/style.module.css b/test/configCases/css/css-modules/style.module.css index 8a530b1fd..73f633796 100644 --- a/test/configCases/css/css-modules/style.module.css +++ b/test/configCases/css/css-modules/style.module.css @@ -1,3 +1,5 @@ +@import "at-rule-value.module.css"; + .class { color: red; } diff --git a/test/configCases/css/css-modules/use-style.js b/test/configCases/css/css-modules/use-style.js index abed76c79..ca4617758 100644 --- a/test/configCases/css/css-modules/use-style.js +++ b/test/configCases/css/css-modules/use-style.js @@ -6,7 +6,7 @@ import { UsedClassName } from "./identifiers.module.css"; // To prevent analysis export const isNotACSSModule = typeof notACssModule["c" + "lass"] === "undefined"; -const hasOwnProperty = (obj, p) => Object.hasOwnProperty.call(obj, p) +const hasOwnProperty = (obj, p) => Object.hasOwnProperty.call(obj, p); export default { global: style.global,