From 3cd6b975c9b34883fc331ae06d91b399538627eb Mon Sep 17 00:00:00 2001 From: Alexander Akait <4567934+alexander-akait@users.noreply.github.com> Date: Wed, 12 Nov 2025 09:03:39 +0300 Subject: [PATCH] fix: css modules bugs (#20116) --- lib/css/CssParser.js | 1180 +++++++++-------- lib/css/walkCssTokens.js | 84 ++ .../ConfigCacheTestCases.longtest.js.snap | 299 ++--- .../ConfigTestCases.basictest.js.snap | 299 ++--- ...ostcss-modules-extract-imports.modules.css | 25 +- ...odules-local-by-default.global.modules.css | 7 + ...modules-local-by-default.local.modules.css | 23 +- 7 files changed, 1007 insertions(+), 910 deletions(-) diff --git a/lib/css/CssParser.js b/lib/css/CssParser.js index a6c42d9eb..8f3b32b3c 100644 --- a/lib/css/CssParser.js +++ b/lib/css/CssParser.js @@ -51,6 +51,7 @@ const CC_LEFT_PARENTHESIS = "(".charCodeAt(0); const CC_RIGHT_PARENTHESIS = ")".charCodeAt(0); const CC_LOWER_F = "f".charCodeAt(0); const CC_UPPER_F = "F".charCodeAt(0); +const CC_RIGHT_CURLY = "}".charCodeAt(0); // https://www.w3.org/TR/css-syntax-3/#newline // We don't have `preprocessing` stage, so we need specify all of them @@ -237,6 +238,40 @@ const unescapeIdentifier = (str) => { return ret; }; +/** @type {Record} */ +const ANIMATION_KEYWORDS = { + // animation-direction + normal: 1, + reverse: 1, + alternate: 1, + "alternate-reverse": 1, + // animation-fill-mode + forwards: 1, + backwards: 1, + both: 1, + // animation-iteration-count + infinite: 1, + // animation-play-state + paused: 1, + running: 1, + // animation-timing-function + ease: 1, + "ease-in": 1, + "ease-out": 1, + "ease-in-out": 1, + linear: 1, + "step-end": 1, + "step-start": 1, + // Special + none: Infinity, // No matter how many times you write none, it will never be an animation name + // Global values + initial: Infinity, + inherit: Infinity, + unset: Infinity, + revert: Infinity, + "revert-layer": Infinity +}; + class LocConverter { /** * @param {string} input input @@ -392,10 +427,6 @@ class CssParser extends Parser { let blockNestingLevel = 0; /** @type {"local" | "global" | undefined} */ let modeData; - /** @type {boolean} */ - let inAnimationProperty = false; - /** @type {[number, number, boolean] | undefined} */ - let lastIdentifier; /** @type {Set} */ const declaredCssVariables = new Set(); @@ -469,7 +500,7 @@ class CssParser extends Parser { * @param {number} pos start position * @returns {number} position after parse */ - const parseImportOrExport = (type, input, pos) => { + const processImportOrExport = (type, input, pos) => { pos = walkCssTokens.eatWhitespaceAndComments(input, pos); /** @type {string | undefined} */ let importPath; @@ -620,6 +651,316 @@ class CssParser extends Parser { return pos; }; const eatPropertyName = walkCssTokens.eatUntil(":{};"); + /** + * @param {string} input input + * @param {number} start name start position + * @param {number} end name end position + * @returns {number} position after handling + */ + const processAtValue = (input, start, end) => { + const semi = eatUntilSemi(input, end); + const atRuleEnd = semi + 1; + const params = input.slice(end, semi); + let [alias, from] = params.split(/\s*from\s*/); + + if (from) { + const aliases = alias + .replace(CSS_COMMENT, " ") + .trim() + .replace(/^\(|\)$/g, "") + .split(/\s*,\s*/); + + from = from.replace(CSS_COMMENT, "").trim(); + + const isExplicitImport = from[0] === "'" || from[0] === '"'; + + if (isExplicitImport) { + from = from.slice(1, -1); + } + + for (const alias of aliases) { + const [name, aliasName] = alias.split(/\s*as\s*/); + + icssDefinitions.set(aliasName || name, { + value: name, + path: from + }); + } + } else { + const ident = walkCssTokens.eatIdentSequence(alias, 0); + + if (!ident) { + this._emitWarning( + state, + `Broken '@value' at-rule: ${input.slice(start, atRuleEnd)}'`, + locConverter, + start, + atRuleEnd + ); + + const dep = new ConstDependency("", [start, atRuleEnd]); + module.addPresentationalDependency(dep); + return atRuleEnd; + } + + const pos = walkCssTokens.eatWhitespaceAndComments(alias, ident[1]); + + const name = alias.slice(ident[0], ident[1]); + let value = + alias.charCodeAt(pos) === CC_COLON + ? alias.slice(pos + 1) + : alias.slice(ident[1]); + + if (value && !/^\s+$/.test(value)) { + value = value.trim(); + } + + if (icssDefinitions.has(value)) { + const def = + /** @type {IcssDefinition} */ + (icssDefinitions.get(value)); + + value = def.value; + } + + 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; + }; + + /** + * @param {string} input input + * @param {number} start name start position + * @param {number} end name end position + * @returns {number} position after handling + */ + const processAtImport = (input, start, end) => { + const tokens = walkCssTokens.eatImportTokens(input, end, { + comment + }); + if (!tokens[3]) return end; + const semi = tokens[3][1]; + if (!tokens[0]) { + this._emitWarning( + state, + `Expected URL in '${input.slice(start, semi)}'`, + locConverter, + start, + semi + ); + return end; + } + + const urlToken = tokens[0]; + const url = normalizeUrl(input.slice(urlToken[2], urlToken[3]), true); + const newline = walkCssTokens.eatWhiteLine(input, semi); + const { options, errors: commentErrors } = this.parseCommentOptions([ + end, + urlToken[1] + ]); + if (commentErrors) { + for (const e of commentErrors) { + const { comment } = e; + state.module.addWarning( + new CommentCompilationWarning( + `Compilation error while processing magic comment(-s): /*${comment.value}*/: ${e.message}`, + comment.loc + ) + ); + } + } + if (options && options.webpackIgnore !== undefined) { + if (typeof options.webpackIgnore !== "boolean") { + const { line: sl, column: sc } = locConverter.get(start); + const { line: el, column: ec } = locConverter.get(newline); + + state.module.addWarning( + new UnsupportedFeatureWarning( + `\`webpackIgnore\` expected a boolean, but received: ${options.webpackIgnore}.`, + { + start: { line: sl, column: sc }, + end: { line: el, column: ec } + } + ) + ); + } else if (options.webpackIgnore) { + return newline; + } + } + if (url.length === 0) { + const { line: sl, column: sc } = locConverter.get(start); + const { line: el, column: ec } = locConverter.get(newline); + const dep = new ConstDependency("", [start, newline]); + module.addPresentationalDependency(dep); + dep.setLoc(sl, sc, el, ec); + + return newline; + } + + let layer; + + if (tokens[1]) { + layer = input.slice(tokens[1][0] + 6, tokens[1][1] - 1).trim(); + } + + let supports; + + if (tokens[2]) { + supports = input.slice(tokens[2][0] + 9, tokens[2][1] - 1).trim(); + } + + const last = tokens[2] || tokens[1] || tokens[0]; + const mediaStart = walkCssTokens.eatWhitespaceAndComments(input, last[1]); + + let media; + + if (mediaStart !== semi - 1) { + media = input.slice(mediaStart, semi - 1).trim(); + } + + const { line: sl, column: sc } = locConverter.get(start); + const { line: el, column: ec } = locConverter.get(newline); + const dep = new CssImportDependency( + url, + [start, newline], + mode === "local" || mode === "global" ? mode : undefined, + layer, + supports && supports.length > 0 ? supports : undefined, + media && media.length > 0 ? media : undefined + ); + dep.setLoc(sl, sc, el, ec); + module.addDependency(dep); + + return newline; + }; + /** + * @param {string} input input + * @param {number} end name end position + * @returns {number} position after handling + */ + const processAtKeyword = (input, end) => { + const ident = walkCssTokens.eatIdentSequenceOrString(input, end); + if (!ident) return end; + const name = unescapeIdentifier( + ident[2] === true + ? input.slice(ident[0], ident[1]) + : input.slice(ident[0] + 1, ident[1] - 1) + ); + 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]; + }; + /** + * @param {string} input input + * @param {number} end name end position + * @returns {number} position after handling + */ + const processAtProperty = (input, end) => { + const ident = walkCssTokens.eatIdentSequence(input, end); + if (!ident) return end; + let name = input.slice(ident[0], ident[1]); + if (!name.startsWith("--") || name.length < 3) return end; + name = unescapeIdentifier(name.slice(2)); + declaredCssVariables.add(name); + 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]; + }; + /** + * @param {string} input input + * @param {number} end end position + * @returns {number} position after handling + */ + const processLocalVarFunction = (input, end) => { + const customIdent = walkCssTokens.eatIdentSequence(input, end); + if (!customIdent) return end; + let name = input.slice(customIdent[0], customIdent[1]); + // A custom property is any property whose name starts with two dashes (U+002D HYPHEN-MINUS), like --foo. + // The production corresponds to this: + // it’s defined as any (a valid identifier that starts with two dashes), + // except -- itself, which is reserved for future use by CSS. + if (!name.startsWith("--") || name.length < 3) return end; + name = unescapeIdentifier( + input.slice(customIdent[0] + 2, customIdent[1]) + ); + const afterCustomIdent = walkCssTokens.eatWhitespaceAndComments( + input, + customIdent[1] + ); + if ( + input.charCodeAt(afterCustomIdent) === CC_LOWER_F || + input.charCodeAt(afterCustomIdent) === CC_UPPER_F + ) { + const fromWord = walkCssTokens.eatIdentSequence( + input, + afterCustomIdent + ); + if ( + !fromWord || + input.slice(fromWord[0], fromWord[1]).toLowerCase() !== "from" + ) { + return end; + } + const from = walkCssTokens.eatIdentSequenceOrString( + input, + walkCssTokens.eatWhitespaceAndComments(input, fromWord[1]) + ); + if (!from) { + return end; + } + const path = input.slice(from[0], from[1]); + if (from[2] === true && path === "global") { + const dep = new ConstDependency("", [customIdent[1], from[1]]); + module.addPresentationalDependency(dep); + return end; + } else if (from[2] === false) { + const dep = new CssIcssImportDependency( + path.slice(1, -1), + [customIdent[0], from[1] - 1], + /** @type {"local" | "global"} */ + (mode), + name + ); + const { line: sl, column: sc } = locConverter.get(customIdent[0]); + const { line: el, column: ec } = locConverter.get(from[1] - 1); + dep.setLoc(sl, sc, el, ec); + module.addDependency(dep); + } + } else { + const { line: sl, column: sc } = locConverter.get(customIdent[0]); + const { line: el, column: ec } = locConverter.get(customIdent[1]); + const dep = new CssSelfLocalIdentifierDependency( + name, + [customIdent[0], customIdent[1]], + "--", + declaredCssVariables + ); + dep.setLoc(sl, sc, el, ec); + module.addDependency(dep); + return end; + } + + return end; + }; /** * @param {string} input input * @param {number} pos name start position @@ -653,7 +994,81 @@ class CssParser extends Parser { } else if ( OPTIONALLY_VENDOR_PREFIXED_ANIMATION_PROPERTY.test(propertyName) ) { - inAnimationProperty = true; + /** @type {[number, number, boolean][]} */ + const animationNames = []; + /** @type {Record} */ + let parsedAnimationKeywords = Object.create(null); + + const end = walkCssTokens.consumeUntil( + input, + pos, + { + string(_input, start, end) { + animationNames.push([start, end, true]); + + return end; + }, + identifier(input, start, end) { + const keyword = input.slice(start, end).toLowerCase(); + + parsedAnimationKeywords[keyword] = + typeof parsedAnimationKeywords[keyword] !== "undefined" + ? parsedAnimationKeywords[keyword] + 1 + : 0; + + if ( + ANIMATION_KEYWORDS[keyword] && + parsedAnimationKeywords[keyword] < ANIMATION_KEYWORDS[keyword] + ) { + return end; + } + + animationNames.push([start, end, false]); + return end; + }, + comma(_input, _start, end) { + parsedAnimationKeywords = {}; + + return end; + } + }, + { + function(input, start, end) { + const name = input + .slice(start, end - 1) + .replace(/\\/g, "") + .toLowerCase(); + + if (isLocalMode() && name === "var") { + return processLocalVarFunction(input, end); + } + + return end; + } + }, + { onlyTopLevel: true, declarationValue: true } + ); + + if (animationNames.length > 0) { + for (const animationName of animationNames) { + const { line: sl, column: sc } = locConverter.get(animationName[0]); + const { line: el, column: ec } = locConverter.get(animationName[1]); + const [start, end, isString] = animationName; + const name = unescapeIdentifier( + isString + ? input.slice(start + 1, end - 1) + : input.slice(start, end) + ); + const dep = new CssSelfLocalIdentifierDependency(name, [ + start, + end + ]); + dep.setLoc(sl, sc, el, ec); + module.addDependency(dep); + } + } + + return end; } else if (COMPOSES_PROPERTY.test(propertyName)) { if (lastLocalIdentifiers.length > 1) { const end = eatUntilSemi(input, pos); @@ -669,6 +1084,7 @@ class CssParser extends Parser { } const lastLocalIdentifier = lastLocalIdentifiers[0]; + let end = pos; /** @type {Set<[number, number]>} */ const classNames = new Set(); @@ -685,16 +1101,18 @@ class CssParser extends Parser { // True when we have multiple values const isComma = input.charCodeAt(pos) === CC_COMMA; const isSemicolon = input.charCodeAt(pos) === CC_SEMICOLON; + const isRightCurly = input.charCodeAt(pos) === CC_RIGHT_CURLY; - if (isComma || isSemicolon) { + if (isComma || isSemicolon || isRightCurly) { if (className) { classNames.add(className); } for (const className of classNames) { const [start, end] = className; + const identifier = unescapeIdentifier(input.slice(start, end)); const dep = new CssIcssComposesSelfDependency( - unescapeIdentifier(input.slice(start, end)), + identifier, lastLocalIdentifier, [start, end] ); @@ -704,12 +1122,16 @@ class CssParser extends Parser { module.addDependency(dep); } - pos += 1; classNames.clear(); - if (isSemicolon) { + if (isSemicolon || isRightCurly) { + end = isSemicolon + ? walkCssTokens.eatWhitespace(input, pos + 1) + : pos; break; } + + pos += 1; } else if ( classNames.size > 0 && className && @@ -788,31 +1210,213 @@ class CssParser extends Parser { } // Remove `composes` from source code - const dep = new ConstDependency("", [propertyNameStart, pos]); + const dep = new ConstDependency("", [propertyNameStart, end]); module.addPresentationalDependency(dep); } return pos; }; + /** * @param {string} input input + * @param {number} start start position + * @param {number} end end position + * @param {number} contentStart start position + * @param {number} contentEnd end position + * @returns {number} position after handling */ - const processDeclarationValueDone = (input) => { - if (inAnimationProperty && lastIdentifier) { - const { line: sl, column: sc } = locConverter.get(lastIdentifier[0]); - const { line: el, column: ec } = locConverter.get(lastIdentifier[1]); - const name = unescapeIdentifier( - lastIdentifier[2] - ? input.slice(lastIdentifier[0], lastIdentifier[1]) - : input.slice(lastIdentifier[0] + 1, lastIdentifier[1] - 1) + const processOldURLFunction = ( + input, + start, + end, + contentStart, + contentEnd + ) => { + const { options, errors: commentErrors } = this.parseCommentOptions([ + lastTokenEndForComments, + end + ]); + if (commentErrors) { + for (const e of commentErrors) { + const { comment } = e; + state.module.addWarning( + new CommentCompilationWarning( + `Compilation error while processing magic comment(-s): /*${comment.value}*/: ${e.message}`, + comment.loc + ) + ); + } + } + if (options && options.webpackIgnore !== undefined) { + if (typeof options.webpackIgnore !== "boolean") { + const { line: sl, column: sc } = locConverter.get( + lastTokenEndForComments + ); + const { line: el, column: ec } = locConverter.get(end); + + state.module.addWarning( + new UnsupportedFeatureWarning( + `\`webpackIgnore\` expected a boolean, but received: ${options.webpackIgnore}.`, + { + start: { line: sl, column: sc }, + end: { line: el, column: ec } + } + ) + ); + } else if (options.webpackIgnore) { + return end; + } + } + const value = normalizeUrl(input.slice(contentStart, contentEnd), false); + // Ignore `url()`, `url('')` and `url("")`, they are valid by spec + if (value.length === 0) return end; + const dep = new CssUrlDependency(value, [start, end], "url"); + 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); + module.addCodeGenerationDependency(dep); + return end; + }; + + /** + * @param {string} input input + * @param {number} end end position + * @param {string} name the name of function + * @returns {number} position after handling + */ + const processURLFunction = (input, end, name) => { + const string = walkCssTokens.eatString(input, end); + if (!string) return end; + const { options, errors: commentErrors } = this.parseCommentOptions([ + lastTokenEndForComments, + end + ]); + if (commentErrors) { + for (const e of commentErrors) { + const { comment } = e; + state.module.addWarning( + new CommentCompilationWarning( + `Compilation error while processing magic comment(-s): /*${comment.value}*/: ${e.message}`, + comment.loc + ) + ); + } + } + if (options && options.webpackIgnore !== undefined) { + if (typeof options.webpackIgnore !== "boolean") { + const { line: sl, column: sc } = locConverter.get(string[0]); + const { line: el, column: ec } = locConverter.get(string[1]); + + state.module.addWarning( + new UnsupportedFeatureWarning( + `\`webpackIgnore\` expected a boolean, but received: ${options.webpackIgnore}.`, + { + start: { line: sl, column: sc }, + end: { line: el, column: ec } + } + ) + ); + } else if (options.webpackIgnore) { + return end; + } + } + const value = normalizeUrl( + input.slice(string[0] + 1, string[1] - 1), + true + ); + // Ignore `url()`, `url('')` and `url("")`, they are valid by spec + if (value.length === 0) return end; + const isUrl = name === "url" || name === "src"; + const dep = new CssUrlDependency( + value, + [string[0], string[1]], + isUrl ? "string" : "url" + ); + const { line: sl, column: sc } = locConverter.get(string[0]); + const { line: el, column: ec } = locConverter.get(string[1]); + dep.setLoc(sl, sc, el, ec); + module.addDependency(dep); + module.addCodeGenerationDependency(dep); + return string[1]; + }; + + /** + * @param {string} input input + * @param {number} start start position + * @param {number} end end position + * @returns {number} position after handling + */ + const processImageSetFunction = (input, start, end) => { + lastTokenEndForComments = end; + const values = walkCssTokens.eatImageSetStrings(input, end, { + comment + }); + if (values.length === 0) return end; + for (const [index, string] of values.entries()) { + const value = normalizeUrl( + input.slice(string[0] + 1, string[1] - 1), + true ); - const dep = new CssSelfLocalIdentifierDependency(name, [ - lastIdentifier[0], - lastIdentifier[1] + if (value.length === 0) return end; + const { options, errors: commentErrors } = this.parseCommentOptions([ + index === 0 ? start : values[index - 1][1], + string[1] ]); + if (commentErrors) { + for (const e of commentErrors) { + const { comment } = e; + state.module.addWarning( + new CommentCompilationWarning( + `Compilation error while processing magic comment(-s): /*${comment.value}*/: ${e.message}`, + comment.loc + ) + ); + } + } + if (options && options.webpackIgnore !== undefined) { + if (typeof options.webpackIgnore !== "boolean") { + const { line: sl, column: sc } = locConverter.get(string[0]); + const { line: el, column: ec } = locConverter.get(string[1]); + + state.module.addWarning( + new UnsupportedFeatureWarning( + `\`webpackIgnore\` expected a boolean, but received: ${options.webpackIgnore}.`, + { + start: { line: sl, column: sc }, + end: { line: el, column: ec } + } + ) + ); + } else if (options.webpackIgnore) { + continue; + } + } + const dep = new CssUrlDependency(value, [string[0], string[1]], "url"); + const { line: sl, column: sc } = locConverter.get(string[0]); + const { line: el, column: ec } = locConverter.get(string[1]); dep.setLoc(sl, sc, el, ec); module.addDependency(dep); - lastIdentifier = undefined; + module.addCodeGenerationDependency(dep); } + // Can contain `url()` inside, so let's return end to allow parse them + return end; + }; + + /** + * @param {string} input input + * @param {number} start start position + * @param {number} end end position + * @returns {number} position after handling + */ + const processHashID = (input, start, end) => { + const valueStart = start + 1; + const name = unescapeIdentifier(input.slice(valueStart, end)); + const dep = new CssLocalIdentifierDependency(name, [valueStart, end]); + 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); + return end; }; /** @@ -876,11 +1480,6 @@ class CssParser extends Parser { lastLocalIdentifiers = []; } } else if (isModules) { - if (isLocalMode()) { - processDeclarationValueDone(input); - inAnimationProperty = false; - } - isNextRulePrelude = isNextNestedSyntax(input, end); } break; @@ -893,64 +1492,13 @@ class CssParser extends Parser { return end; } - const { options, errors: commentErrors } = this.parseCommentOptions([ - lastTokenEndForComments, - end - ]); - if (commentErrors) { - for (const e of commentErrors) { - const { comment } = e; - state.module.addWarning( - new CommentCompilationWarning( - `Compilation error while processing magic comment(-s): /*${comment.value}*/: ${e.message}`, - comment.loc - ) - ); - } - } - if (options && options.webpackIgnore !== undefined) { - if (typeof options.webpackIgnore !== "boolean") { - const { line: sl, column: sc } = locConverter.get( - lastTokenEndForComments - ); - const { line: el, column: ec } = locConverter.get(end); - - state.module.addWarning( - new UnsupportedFeatureWarning( - `\`webpackIgnore\` expected a boolean, but received: ${options.webpackIgnore}.`, - { - start: { line: sl, column: sc }, - end: { line: el, column: ec } - } - ) - ); - } else if (options.webpackIgnore) { - return end; - } - } - const value = normalizeUrl( - input.slice(contentStart, contentEnd), - false + return processOldURLFunction( + input, + start, + end, + contentStart, + contentEnd ); - // Ignore `url()`, `url('')` and `url("")`, they are valid by spec - if (value.length === 0) return end; - const dep = new CssUrlDependency(value, [start, end], "url"); - 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); - module.addCodeGenerationDependency(dep); - return end; - }, - string: (_input, start, end) => { - switch (scope) { - case CSS_MODE_IN_BLOCK: { - if (inAnimationProperty && balanced.length === 0) { - lastIdentifier = [start, end, false]; - } - } - } - return end; }, atKeyword: (input, start, end) => { const name = input.slice(start, end).toLowerCase(); @@ -983,235 +1531,19 @@ class CssParser extends Parser { return end; } - const tokens = walkCssTokens.eatImportTokens(input, end, { - comment - }); - if (!tokens[3]) return end; - const semi = tokens[3][1]; - if (!tokens[0]) { - this._emitWarning( - state, - `Expected URL in '${input.slice(start, semi)}'`, - locConverter, - start, - semi - ); - return end; - } - - const urlToken = tokens[0]; - const url = normalizeUrl( - input.slice(urlToken[2], urlToken[3]), - true - ); - const newline = walkCssTokens.eatWhiteLine(input, semi); - const { options, errors: commentErrors } = this.parseCommentOptions( - [end, urlToken[1]] - ); - if (commentErrors) { - for (const e of commentErrors) { - const { comment } = e; - state.module.addWarning( - new CommentCompilationWarning( - `Compilation error while processing magic comment(-s): /*${comment.value}*/: ${e.message}`, - comment.loc - ) - ); - } - } - if (options && options.webpackIgnore !== undefined) { - if (typeof options.webpackIgnore !== "boolean") { - const { line: sl, column: sc } = locConverter.get(start); - const { line: el, column: ec } = locConverter.get(newline); - - state.module.addWarning( - new UnsupportedFeatureWarning( - `\`webpackIgnore\` expected a boolean, but received: ${options.webpackIgnore}.`, - { - start: { line: sl, column: sc }, - end: { line: el, column: ec } - } - ) - ); - } else if (options.webpackIgnore) { - return newline; - } - } - if (url.length === 0) { - const { line: sl, column: sc } = locConverter.get(start); - const { line: el, column: ec } = locConverter.get(newline); - const dep = new ConstDependency("", [start, newline]); - module.addPresentationalDependency(dep); - dep.setLoc(sl, sc, el, ec); - - return newline; - } - - let layer; - - if (tokens[1]) { - layer = input.slice(tokens[1][0] + 6, tokens[1][1] - 1).trim(); - } - - let supports; - - if (tokens[2]) { - supports = input.slice(tokens[2][0] + 9, tokens[2][1] - 1).trim(); - } - - const last = tokens[2] || tokens[1] || tokens[0]; - const mediaStart = walkCssTokens.eatWhitespaceAndComments( - input, - last[1] - ); - - let media; - - if (mediaStart !== semi - 1) { - media = input.slice(mediaStart, semi - 1).trim(); - } - - const { line: sl, column: sc } = locConverter.get(start); - const { line: el, column: ec } = locConverter.get(newline); - const dep = new CssImportDependency( - url, - [start, newline], - mode === "local" || mode === "global" ? mode : undefined, - layer, - supports && supports.length > 0 ? supports : undefined, - media && media.length > 0 ? media : undefined - ); - dep.setLoc(sl, sc, el, ec); - module.addDependency(dep); - - return newline; + return processAtImport(input, start, end); } default: { if (isModules) { if (name === "@value") { - const semi = eatUntilSemi(input, end); - const atRuleEnd = semi + 1; - const params = input.slice(end, semi); - let [alias, from] = params.split(/\s*from\s*/); - - if (from) { - const aliases = alias - .replace(CSS_COMMENT, " ") - .trim() - .replace(/^\(|\)$/g, "") - .split(/\s*,\s*/); - - from = from.replace(CSS_COMMENT, "").trim(); - - const isExplicitImport = from[0] === "'" || from[0] === '"'; - - if (isExplicitImport) { - from = from.slice(1, -1); - } - - for (const alias of aliases) { - const [name, aliasName] = alias.split(/\s*as\s*/); - - icssDefinitions.set(aliasName || name, { - value: name, - path: from - }); - } - } else { - const ident = walkCssTokens.eatIdentSequence(alias, 0); - - if (!ident) { - this._emitWarning( - state, - `Broken '@value' at-rule: ${input.slice( - start, - atRuleEnd - )}'`, - locConverter, - start, - atRuleEnd - ); - - const dep = new ConstDependency("", [start, atRuleEnd]); - module.addPresentationalDependency(dep); - return atRuleEnd; - } - - const pos = walkCssTokens.eatWhitespaceAndComments( - alias, - ident[1] - ); - - const name = alias.slice(ident[0], ident[1]); - let value = - alias.charCodeAt(pos) === CC_COLON - ? alias.slice(pos + 1) - : alias.slice(ident[1]); - - if (value && !/^\s+$/.test(value)) { - value = value.trim(); - } - - if (icssDefinitions.has(value)) { - const def = - /** @type {IcssDefinition} */ - (icssDefinitions.get(value)); - - value = def.value; - } - - 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; + return processAtValue(input, start, end); } else if ( OPTIONALLY_VENDOR_PREFIXED_KEYFRAMES_AT_RULE.test(name) && isLocalMode() ) { - const ident = walkCssTokens.eatIdentSequenceOrString( - input, - end - ); - if (!ident) return end; - const name = unescapeIdentifier( - ident[2] === true - ? input.slice(ident[0], ident[1]) - : input.slice(ident[0] + 1, ident[1] - 1) - ); - 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]; + return processAtKeyword(input, end); } 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("--") || name.length < 3) return end; - name = unescapeIdentifier(name.slice(2)); - declaredCssVariables.add(name); - 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]; + return processAtProperty(input, end); } else if (name === "@scope") { isNextRulePrelude = true; return end; @@ -1226,11 +1558,6 @@ class CssParser extends Parser { }, semicolon: (input, start, end) => { if (isModules && scope === CSS_MODE_IN_BLOCK) { - if (isLocalMode()) { - processDeclarationValueDone(input); - inAnimationProperty = false; - } - isNextRulePrelude = isNextNestedSyntax(input, end); } return end; @@ -1285,11 +1612,7 @@ class CssParser extends Parser { case CSS_MODE_IN_BLOCK: { if (isLocalMode()) { // Handle only top level values and not inside functions - if (inAnimationProperty && balanced.length === 0) { - lastIdentifier = [start, end, true]; - } else { - return processLocalDeclaration(input, start, end); - } + return processLocalDeclaration(input, start, end); } break; } @@ -1322,13 +1645,7 @@ class CssParser extends Parser { }, hash: (input, start, end, isID) => { if (isNextRulePrelude && isLocalMode() && isID) { - const valueStart = start + 1; - const name = unescapeIdentifier(input.slice(valueStart, end)); - const dep = new CssLocalIdentifierDependency(name, [valueStart, end]); - 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); + return processHashID(input, start, end); } return end; @@ -1345,12 +1662,12 @@ class CssParser extends Parser { switch (scope) { case CSS_MODE_TOP_LEVEL: { if (name === "import") { - const pos = parseImportOrExport(0, input, ident[1]); + const pos = processImportOrExport(0, input, ident[1]); const dep = new ConstDependency("", [start, pos]); module.addPresentationalDependency(dep); return pos; } else if (name === "export") { - const pos = parseImportOrExport(1, input, ident[1]); + const pos = processImportOrExport(1, input, ident[1]); const dep = new ConstDependency("", [start, pos]); module.addPresentationalDependency(dep); return pos; @@ -1362,7 +1679,8 @@ class CssParser extends Parser { const isFn = input.charCodeAt(ident[1]) === CC_LEFT_PARENTHESIS; if (isFn && name === "local") { - const end = ident[1] + 1; + // Eat extra whitespace + const end = walkCssTokens.eatWhitespace(input, ident[1] + 1); modeData = "local"; const dep = new ConstDependency("", [start, end]); module.addPresentationalDependency(dep); @@ -1390,7 +1708,8 @@ class CssParser extends Parser { module.addPresentationalDependency(dep); return end; } else if (isFn && name === "global") { - const end = ident[1] + 1; + // Eat extra whitespace + const end = walkCssTokens.eatWhitespace(input, ident[1] + 1); modeData = "global"; const dep = new ConstDependency("", [start, end]); module.addPresentationalDependency(dep); @@ -1442,210 +1761,13 @@ class CssParser extends Parser { return end; } - const string = walkCssTokens.eatString(input, end); - if (!string) return end; - const { options, errors: commentErrors } = this.parseCommentOptions( - [lastTokenEndForComments, end] - ); - if (commentErrors) { - for (const e of commentErrors) { - const { comment } = e; - state.module.addWarning( - new CommentCompilationWarning( - `Compilation error while processing magic comment(-s): /*${comment.value}*/: ${e.message}`, - comment.loc - ) - ); - } - } - if (options && options.webpackIgnore !== undefined) { - if (typeof options.webpackIgnore !== "boolean") { - const { line: sl, column: sc } = locConverter.get(string[0]); - const { line: el, column: ec } = locConverter.get(string[1]); - - state.module.addWarning( - new UnsupportedFeatureWarning( - `\`webpackIgnore\` expected a boolean, but received: ${options.webpackIgnore}.`, - { - start: { line: sl, column: sc }, - end: { line: el, column: ec } - } - ) - ); - } else if (options.webpackIgnore) { - return end; - } - } - const value = normalizeUrl( - input.slice(string[0] + 1, string[1] - 1), - true - ); - // Ignore `url()`, `url('')` and `url("")`, they are valid by spec - if (value.length === 0) return end; - const isUrl = name === "url" || name === "src"; - const dep = new CssUrlDependency( - value, - [string[0], string[1]], - isUrl ? "string" : "url" - ); - const { line: sl, column: sc } = locConverter.get(string[0]); - const { line: el, column: ec } = locConverter.get(string[1]); - dep.setLoc(sl, sc, el, ec); - module.addDependency(dep); - module.addCodeGenerationDependency(dep); - return string[1]; + return processURLFunction(input, end, name); } default: { if (this.url && IMAGE_SET_FUNCTION.test(name)) { - lastTokenEndForComments = end; - const values = walkCssTokens.eatImageSetStrings(input, end, { - comment - }); - if (values.length === 0) return end; - for (const [index, string] of values.entries()) { - const value = normalizeUrl( - input.slice(string[0] + 1, string[1] - 1), - true - ); - if (value.length === 0) return end; - const { options, errors: commentErrors } = - this.parseCommentOptions([ - index === 0 ? start : values[index - 1][1], - string[1] - ]); - if (commentErrors) { - for (const e of commentErrors) { - const { comment } = e; - state.module.addWarning( - new CommentCompilationWarning( - `Compilation error while processing magic comment(-s): /*${comment.value}*/: ${e.message}`, - comment.loc - ) - ); - } - } - if (options && options.webpackIgnore !== undefined) { - if (typeof options.webpackIgnore !== "boolean") { - const { line: sl, column: sc } = locConverter.get( - string[0] - ); - const { line: el, column: ec } = locConverter.get( - string[1] - ); - - state.module.addWarning( - new UnsupportedFeatureWarning( - `\`webpackIgnore\` expected a boolean, but received: ${options.webpackIgnore}.`, - { - start: { line: sl, column: sc }, - end: { line: el, column: ec } - } - ) - ); - } else if (options.webpackIgnore) { - continue; - } - } - const dep = new CssUrlDependency( - value, - [string[0], string[1]], - "url" - ); - const { line: sl, column: sc } = locConverter.get(string[0]); - const { line: el, column: ec } = locConverter.get(string[1]); - dep.setLoc(sl, sc, el, ec); - module.addDependency(dep); - module.addCodeGenerationDependency(dep); - } - // Can contain `url()` inside, so let's return end to allow parse them - return end; - } else if (isLocalMode()) { - // Don't rename animation name when we have `var()` function - if (inAnimationProperty && balanced.length === 1) { - lastIdentifier = undefined; - } - - if (name === "var") { - const customIdent = walkCssTokens.eatIdentSequence(input, end); - if (!customIdent) return end; - let name = input.slice(customIdent[0], customIdent[1]); - // A custom property is any property whose name starts with two dashes (U+002D HYPHEN-MINUS), like --foo. - // The production corresponds to this: - // it’s defined as any (a valid identifier that starts with two dashes), - // except -- itself, which is reserved for future use by CSS. - if (!name.startsWith("--") || name.length < 3) return end; - name = unescapeIdentifier( - input.slice(customIdent[0] + 2, customIdent[1]) - ); - const afterCustomIdent = walkCssTokens.eatWhitespaceAndComments( - input, - customIdent[1] - ); - if ( - input.charCodeAt(afterCustomIdent) === CC_LOWER_F || - input.charCodeAt(afterCustomIdent) === CC_UPPER_F - ) { - const fromWord = walkCssTokens.eatIdentSequence( - input, - afterCustomIdent - ); - if ( - !fromWord || - input.slice(fromWord[0], fromWord[1]).toLowerCase() !== - "from" - ) { - return end; - } - const from = walkCssTokens.eatIdentSequenceOrString( - input, - walkCssTokens.eatWhitespaceAndComments(input, fromWord[1]) - ); - if (!from) { - return end; - } - const path = input.slice(from[0], from[1]); - if (from[2] === true && path === "global") { - const dep = new ConstDependency("", [ - customIdent[1], - from[1] - ]); - module.addPresentationalDependency(dep); - return end; - } else if (from[2] === false) { - const dep = new CssIcssImportDependency( - path.slice(1, -1), - [customIdent[0], from[1] - 1], - /** @type {"local" | "global"} */ - (mode), - name - ); - const { line: sl, column: sc } = locConverter.get( - customIdent[0] - ); - const { line: el, column: ec } = locConverter.get( - from[1] - 1 - ); - dep.setLoc(sl, sc, el, ec); - module.addDependency(dep); - } - } else { - const { line: sl, column: sc } = locConverter.get( - customIdent[0] - ); - const { line: el, column: ec } = locConverter.get( - customIdent[1] - ); - const dep = new CssSelfLocalIdentifierDependency( - name, - [customIdent[0], customIdent[1]], - "--", - declaredCssVariables - ); - dep.setLoc(sl, sc, el, ec); - module.addDependency(dep); - return end; - } - } + return processImageSetFunction(input, start, end); + } else if (isLocalMode() && name === "var") { + return processLocalVarFunction(input, end); } } } @@ -1679,10 +1801,6 @@ class CssParser extends Parser { if (isModules) { // Reset stack for `:global .class :local .class-other` selector after modeData = undefined; - - if (scope === CSS_MODE_IN_BLOCK && isLocalMode()) { - processDeclarationValueDone(input); - } } lastTokenEndForComments = start; diff --git a/lib/css/walkCssTokens.js b/lib/css/walkCssTokens.js index d2bd70f16..1faba0d10 100644 --- a/lib/css/walkCssTokens.js +++ b/lib/css/walkCssTokens.js @@ -1197,6 +1197,89 @@ module.exports = (input, pos = 0, callbacks = {}) => { return pos; }; +/** + * @param {string} input input css + * @param {number} pos pos + * @param {CssTokenCallbacks} callbacks callbacks + * @param {CssTokenCallbacks} additional additional callbacks + * @param {{ onlyTopLevel: boolean, declarationValue: true }=} options options + * @returns {number} pos + */ +const consumeUntil = (input, pos, callbacks, additional, options) => { + let needHandle = true; + let needTerminate = false; + + /** @type {CssTokenCallbacks} */ + const servicedCallbacks = {}; + + if (options) { + let balanced = 0; + + if (options.onlyTopLevel) { + servicedCallbacks.function = (input, start, end) => { + balanced++; + needHandle = false; + + if (additional.function !== undefined) { + return additional.function(input, start, end); + } + + return end; + }; + + servicedCallbacks.leftParenthesis = (_input, _start, end) => { + balanced++; + needHandle = false; + return end; + }; + servicedCallbacks.rightParenthesis = (_input, _start, end) => { + balanced--; + if (balanced === 0) { + needHandle = true; + } + return end; + }; + } + + if (options.declarationValue) { + servicedCallbacks.semicolon = (_input, _start, end) => { + needTerminate = true; + return end; + }; + + servicedCallbacks.rightCurlyBracket = (_input, _start, end) => { + needTerminate = true; + return end; + }; + } + } + + while (pos < input.length) { + // Consume comments. + pos = consumeComments( + input, + pos, + needHandle ? { ...servicedCallbacks, ...callbacks } : servicedCallbacks + ); + + const start = pos; + + // Consume the next input code point. + pos++; + pos = consumeAToken( + input, + pos, + needHandle ? { ...servicedCallbacks, ...callbacks } : servicedCallbacks + ); + + if (needTerminate) { + return start; + } + } + + return pos; +}; + /** * @param {string} input input * @param {number} pos position @@ -1608,6 +1691,7 @@ const eatUntil = (chars) => { }; }; +module.exports.consumeUntil = consumeUntil; module.exports.eatComments = eatComments; module.exports.eatIdentSequence = eatIdentSequence; module.exports.eatIdentSequenceOrString = eatIdentSequenceOrString; diff --git a/test/__snapshots__/ConfigCacheTestCases.longtest.js.snap b/test/__snapshots__/ConfigCacheTestCases.longtest.js.snap index efb7b394c..32e97d43f 100644 --- a/test/__snapshots__/ConfigCacheTestCases.longtest.js.snap +++ b/test/__snapshots__/ConfigCacheTestCases.longtest.js.snap @@ -1171,7 +1171,7 @@ div { ._style_module_css-class { animation: - foo var(--_style_module_css-animation-name) 3s, + _style_module_css-foo var(--_style_module_css-animation-name) 3s, var(--_style_module_css-animation-name) 3s, 3s linear 1s infinite running _style_module_css-slidein, 3s linear env(foo, var(--_style_module_css-baz)) infinite running _style_module_css-slidein; @@ -1787,42 +1787,27 @@ div { } ._style_module_css-exportName { - - - - - - - - - - border: red; } ._style_module_css-exportNameOtherNoSpaces { - -} + } ._style_module_css-from { color: red; } ._style_module_css-exportNameOtherFromKeyword { - -} + } ._style_module_css-exportNameOtherFromKeywordWithFrom1 { - -} + } ._style_module_css-exportNameOtherFromKeywordWithFrom2 { - -} + } ._style_module_css-exportNameWeirdCharacters { - -} + } /*!*********************************!*\\\\ !*** css ./style.module.my-css ***! @@ -2896,7 +2881,7 @@ div { .my-app-235-zg { animation: - foo var(--my-app-235-ZP) 3s, + my-app-235-pr var(--my-app-235-ZP) 3s, var(--my-app-235-ZP) 3s, 3s linear 1s infinite running my-app-235-Fk, 3s linear env(foo, var(--my-app-235-KR)) infinite running my-app-235-Fk; @@ -3512,42 +3497,27 @@ div { } .my-app-235-au { - - - - - - - - - - border: red; } .my-app-235-M2 { - -} + } .my-app-235-HT { color: red; } .my-app-235-jL { - -} + } .my-app-235-Qf { - -} + } .my-app-235-Hl { - -} + } .my-app-235-Xp { - -} + } /*!*********************************!*\\\\ !*** css ./style.module.my-css ***! @@ -7501,8 +7471,15 @@ Object { "exportName34": "_postcss-modules-extract-imports_modules_css-exportName34 _a_modules_css-a _b_modules_css-b", "exportName35": "_postcss-modules-extract-imports_modules_css-exportName35 _other_css-className", "exportName36": "_postcss-modules-extract-imports_modules_css-exportName36", - "exportName37": "_postcss-modules-extract-imports_modules_css-exportName37", + "exportName37": "_postcss-modules-extract-imports_modules_css-exportName37 _postcss-modules-extract-imports_modules_css-localName", + "exportName38": "_postcss-modules-extract-imports_modules_css-exportName38 _postcss-modules-extract-imports_modules_css-localName", + "exportName39": "_postcss-modules-extract-imports_modules_css-exportName39 _postcss-modules-extract-imports_modules_css-localName", "exportName4": "_postcss-modules-extract-imports_modules_css-exportName4 _postcss-modules-extract-imports_modules_css-localName", + "exportName40": "_postcss-modules-extract-imports_modules_css-exportName40 _postcss-modules-extract-imports_modules_css-localName", + "exportName41": "_postcss-modules-extract-imports_modules_css-exportName41 _postcss-modules-extract-imports_modules_css-localName", + "exportName42": "_postcss-modules-extract-imports_modules_css-exportName42 _postcss-modules-extract-imports_modules_css-localName", + "exportName43": "_postcss-modules-extract-imports_modules_css-exportName43 _postcss-modules-extract-imports_modules_css-localName", + "exportName44": "_postcss-modules-extract-imports_modules_css-exportName44", "exportName5": "_postcss-modules-extract-imports_modules_css-exportName5 _library_modules_css-importName _library_modules_css-importName2", "exportName6": "_postcss-modules-extract-imports_modules_css-exportName6 _library_modules_css-importName", "exportName7": "_postcss-modules-extract-imports_modules_css-exportName7 _library_modules_css-importName _library_modules_css-secondImport", @@ -7534,9 +7511,9 @@ Object { ":)": "_postcss-modules-local-by-default_local_modules_css-:)", "@bounce": "_postcss-modules-local-by-default_local_modules_css-@bounce", "@foo": "_postcss-modules-local-by-default_local_modules_css-@foo", + "BAR": "_postcss-modules-local-by-default_local_modules_css-BAR", "a": "_postcss-modules-local-by-default_local_modules_css-a", "a_value": "_postcss-modules-local-by-default_local_modules_css-a_value", - "alternate": "_postcss-modules-local-by-default_local_modules_css-alternate", "article-body": "_postcss-modules-local-by-default_local_modules_css-article-body", "article-footer": "_postcss-modules-local-by-default_local_modules_css-article-footer", "article-header": "_postcss-modules-local-by-default_local_modules_css-article-header", @@ -7551,22 +7528,23 @@ Object { "constructor": "_postcss-modules-local-by-default_local_modules_css-constructor", "duplicate-name": "_postcss-modules-local-by-default_local_modules_css-duplicate-name", "ease": "_postcss-modules-local-by-default_local_modules_css-ease", + "ease-in": "_postcss-modules-local-by-default_local_modules_css-ease-in", "ease-out": "_postcss-modules-local-by-default_local_modules_css-ease-out", "f@oo": "_postcss-modules-local-by-default_local_modules_css-f@oo", + "fade": "_postcss-modules-local-by-default_local_modules_css-fade", + "fade-in": "_postcss-modules-local-by-default_local_modules_css-fade-in", "fadeInOut": "_postcss-modules-local-by-default_local_modules_css-fadeInOut", "foo": "__foo", "foobar": "_postcss-modules-local-by-default_local_modules_css-foobar", - "forwards": "_postcss-modules-local-by-default_local_modules_css-forwards", "infinite": "_postcss-modules-local-by-default_local_modules_css-infinite", - "inherit": "_postcss-modules-local-by-default_local_modules_css-inherit", + "my-custom-var": "--_postcss-modules-local-by-default_local_modules_css-my-custom-var", "name": "_postcss-modules-local-by-default_local_modules_css-name", - "none": "_postcss-modules-local-by-default_local_modules_css-none", - "revert": "_postcss-modules-local-by-default_local_modules_css-revert", - "revert-layer": "_postcss-modules-local-by-default_local_modules_css-revert-layer", "rotate": "_postcss-modules-local-by-default_local_modules_css-rotate", - "running": "_postcss-modules-local-by-default_local_modules_css-running", + "slide-right": "_postcss-modules-local-by-default_local_modules_css-slide-right", + "spin": "_postcss-modules-local-by-default_local_modules_css-spin", "sr-only": "--_postcss-modules-local-by-default_local_modules_css-sr-only", "t t": "_postcss-modules-local-by-default_local_modules_css-t t", + "test": "_postcss-modules-local-by-default_local_modules_css-test", "title-align": "--_postcss-modules-local-by-default_local_modules_css-title-align", "u-m+ ": "_postcss-modules-local-by-default_local_modules_css-u-m+ ", "😃bounce😃": "_postcss-modules-local-by-default_local_modules_css-😃bounce😃", @@ -7597,7 +7575,6 @@ Object { "class-1": "_postcss-modules-local-by-default_pure_modules_css-class-1", "class-2": "_postcss-modules-local-by-default_pure_modules_css-class-2", "fadeInOut": "_postcss-modules-local-by-default_pure_modules_css-fadeInOut", - "fixed": "_postcss-modules-local-by-default_pure_modules_css-fixed", "foo": "__foo", "label": "_postcss-modules-local-by-default_pure_modules_css-label", "local": "_postcss-modules-local-by-default_pure_modules_css-local", @@ -7892,13 +7869,12 @@ Array [ /* composing-globals */ -._postcss-modules-extract-imports_modules_css-exportName1 { other: rule; } +._postcss-modules-extract-imports_modules_css-exportName1 { other: rule; } /* existing-import */ ._postcss-modules-extract-imports_modules_css-exportName2 { - -} + } /* import-comment */ /* @@ -7910,108 +7886,83 @@ Array [ /* import-consolidate */ ._postcss-modules-extract-imports_modules_css-exportName3 { - other: rule; } ._postcss-modules-extract-imports_modules_css-otherExport { - - -} + } /* import-local-extends */ ._postcss-modules-extract-imports_modules_css-localName { color: red; } ._postcss-modules-extract-imports_modules_css-exportName4 { - other: rule; } /* import-media */ @media screen { ._postcss-modules-extract-imports_modules_css-exportName5 { - - other: rule2; } } ._postcss-modules-extract-imports_modules_css-exportName6 { - other: rule; } /* import-multiple-classes */ -._postcss-modules-extract-imports_modules_css-exportName7 { other: rule; } +._postcss-modules-extract-imports_modules_css-exportName7 { other: rule; } /* import-multiple-references */ ._postcss-modules-extract-imports_modules_css-exportName8 { - - - -} + } ._postcss-modules-extract-imports_modules_css-exportName9 { - - - -} + } /* import-only-whitelist */ ._postcss-modules-extract-imports_modules_css-exportName10 { imports: importName from \\"path/library.css\\"; something-else: otherLibImport from \\"path/other-lib.css\\"; } /* import-preserving-order */ ._postcss-modules-extract-imports_modules_css-exportName11 { - - color: #aaa; } /* import-single-quotes */ ._postcss-modules-extract-imports_modules_css-exportName12 { - other: rule; } /* import-double-quotes */ ._postcss-modules-extract-imports_modules_css-exportName13 { - other: rule; } /* import-spacing */ ._postcss-modules-extract-imports_modules_css-exportName14 { - - - other: rule; } /* import-within */ ._postcss-modules-extract-imports_modules_css-exportName15 { - other: rule; } /* multiple-composes */ ._postcss-modules-extract-imports_modules_css-exportName16 { - other: rule; } ._postcss-modules-extract-imports_modules_css-exportName17 { - -} + } ._postcss-modules-extract-imports_modules_css-exportName18 { - -} + } ._postcss-modules-extract-imports_modules_css-foo { color: red } ._postcss-modules-extract-imports_modules_css-bar { color: blue } ._postcss-modules-extract-imports_modules_css-baz { color: green } ._postcss-modules-extract-imports_modules_css-exportName19 { - -} + } /* nesting */ ._postcss-modules-extract-imports_modules_css-exportName19 { @@ -8033,78 +7984,54 @@ Array [ /* TODO bug - need port https://github.com/css-modules/postcss-modules-extract-imports/pull/138 */ /* resolve-composes-order */ ._postcss-modules-extract-imports_modules_css-exportName20 { - color: #bebebe; } ._postcss-modules-extract-imports_modules_css-exportName21 { /* \`b\` should be after \`c\` */ - - color: #aaa; } /* resolve-duplicates */ ._postcss-modules-extract-imports_modules_css-exportName22 { - - - - - -} + } /* resolve-imports-order */ ._postcss-modules-extract-imports_modules_css-exportName23 { - -} + } ._postcss-modules-extract-imports_modules_css-exportName24 { - - -} + } ._postcss-modules-extract-imports_modules_css-exportName25 { - - -} + } ._postcss-modules-extract-imports_modules_css-exportName26 { - - - -} + } /* valid-characters */ ._postcss-modules-extract-imports_modules_css-exportName27 { - - -} + } /* We pass this test */ /* check-import-order */ ._postcss-modules-extract-imports_modules_css-exportName28 { - - -} + } ._postcss-modules-extract-imports_modules_css-exportName29 { - - -} + } /* empty-composes */ ._postcss-modules-extract-imports_modules_css-exportName30 { - -} + } /* weird-composes */ ._postcss-modules-extract-imports_modules_css-from { color: red; } ._postcss-modules-extract-imports_modules_css-exportName31 { - -} + } /* broken-composes */ ._postcss-modules-extract-imports_modules_css-exportName32 { @@ -8118,28 +8045,43 @@ Array [ /* composes-multiple-declarations */ ._postcss-modules-extract-imports_modules_css-exportName34 { - -} + } ._postcss-modules-extract-imports_modules_css-exportName34 { - -} + } /* inherit-module-type */ ._postcss-modules-extract-imports_modules_css-exportName35 { - -} + } /* TODO bug */ /* composes from-import */ ._postcss-modules-extract-imports_modules_css-exportName36 { - + } + +._postcss-modules-extract-imports_modules_css-exportName37 {} + +._postcss-modules-extract-imports_modules_css-exportName38 { + } + +._postcss-modules-extract-imports_modules_css-exportName39 { + } + +._postcss-modules-extract-imports_modules_css-exportName40 {color:red;} + +._postcss-modules-extract-imports_modules_css-exportName41 {color:red;} + +._postcss-modules-extract-imports_modules_css-exportName42 {color:red} + +._postcss-modules-extract-imports_modules_css-exportName43 { + + color:red; } /* TODO bug */ -._postcss-modules-extract-imports_modules_css-exportName37 { color: unknown; } +._postcss-modules-extract-imports_modules_css-exportName44 { color: unknown; } /*!********************************!*\\\\ !*** css ./import.modules.css ***! @@ -8273,6 +8215,9 @@ Array [ /* passed because \`--bar\` not found */ /* not localize animation-name in a var function #2 */ ._postcss-modules-local-by-default_local_modules_css-foo { animation-name: vAr(--bar); } +/* Work, because found */ +:root { --_postcss-modules-local-by-default_local_modules_css-my-custom-var: name; } +._postcss-modules-local-by-default_local_modules_css-foo { animation-name: vAr(--_postcss-modules-local-by-default_local_modules_css-my-custom-var); } /* not localize animation-name in an env function */ ._postcss-modules-local-by-default_local_modules_css-foo { animation-name: env(bar); } @@ -8306,25 +8251,20 @@ Array [ /* localize multiple animation-names */ ._postcss-modules-local-by-default_local_modules_css-foo { animation-name: _postcss-modules-local-by-default_local_modules_css-bar, _postcss-modules-local-by-default_local_modules_css-foobar; } -/* TODO bug */ /* not localize revert */ -._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-revert; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: revert; } -/* TODO bug */ /* not localize revert #2 */ -._postcss-modules-local-by-default_local_modules_css-foo { animation-name: _postcss-modules-local-by-default_local_modules_css-revert; } +._postcss-modules-local-by-default_local_modules_css-foo { animation-name: revert; } -/* TODO bug */ /* not localize revert #3 */ -._postcss-modules-local-by-default_local_modules_css-foo { animation-name: _postcss-modules-local-by-default_local_modules_css-revert, _postcss-modules-local-by-default_local_modules_css-foo, _postcss-modules-local-by-default_local_modules_css-none; } +._postcss-modules-local-by-default_local_modules_css-foo { animation-name: revert, _postcss-modules-local-by-default_local_modules_css-foo, none; } -/* TODO bug */ /* not localize revert-layer */ -._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-revert-layer; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: revert-layer; } -/* TODO bug */ /* not localize revert */ -._postcss-modules-local-by-default_local_modules_css-foo { animation-name: _postcss-modules-local-by-default_local_modules_css-revert-layer; } +._postcss-modules-local-by-default_local_modules_css-foo { animation-name: revert-layer; } /* localize animation using special characters */ ._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-\\\\@bounce; } @@ -8353,26 +8293,23 @@ Array [ /* localize animation using special characters */ ._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css---; } -/* TODO test me in real browser */ /* localize animation using special characters */ ._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-😃bounce😃; } -/* TODO test me in real browser */ /* not localize custom property */ ._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css---foo; } /* not localize name in nested function */ -._postcss-modules-local-by-default_local_modules_css-foo { animation: fade .2s var(--easeOutQuart) .1s forwards } +._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-fade .2s var(--easeOutQuart) .1s forwards } -/* TODO bug */ /* not localize name in nested function #2 */ -._postcss-modules-local-by-default_local_modules_css-foo { animation: fade .2s env(FOO_BAR) .1s _postcss-modules-local-by-default_local_modules_css-forwards, name } +._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-fade .2s env(FOO_BAR) .1s forwards, _postcss-modules-local-by-default_local_modules_css-name } /* not localize name in nested function #3 */ -._postcss-modules-local-by-default_local_modules_css-foo { animation: var(--foo-bar) .1s _postcss-modules-local-by-default_local_modules_css-forwards, name } +._postcss-modules-local-by-default_local_modules_css-foo { animation: var(--foo-bar) .1s forwards, _postcss-modules-local-by-default_local_modules_css-name } /* not localize name in nested function #4 */ -._postcss-modules-local-by-default_local_modules_css-foo { animation: var(--foo-bar) .1s forwards _postcss-modules-local-by-default_local_modules_css-name, name } +._postcss-modules-local-by-default_local_modules_css-foo { animation: var(--foo-bar) .1s forwards _postcss-modules-local-by-default_local_modules_css-name, _postcss-modules-local-by-default_local_modules_css-name } /* localize animation */ ._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-a; } @@ -8382,10 +8319,11 @@ Array [ /* localize animation #3 */ ._postcss-modules-local-by-default_local_modules_css-foo { animation: ease _postcss-modules-local-by-default_local_modules_css-ease; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: ease _postcss-modules-local-by-default_local_modules_css-ease; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: ease _postcss-modules-local-by-default_local_modules_css-ease, ease-in _postcss-modules-local-by-default_local_modules_css-ease-in, ease-out _postcss-modules-local-by-default_local_modules_css-ease-out; } -/* TODO bug */ /* localize animation #4 */ -._postcss-modules-local-by-default_local_modules_css-foo { animation: 0s ease 0s 1 normal none test _postcss-modules-local-by-default_local_modules_css-running; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: 0s ease 0s 1 normal none _postcss-modules-local-by-default_local_modules_css-test running; } /* localize animation with vendor prefix */ ._postcss-modules-local-by-default_local_modules_css-foo { -webkit-animation: _postcss-modules-local-by-default_local_modules_css-bar; animation: _postcss-modules-local-by-default_local_modules_css-bar; } @@ -8424,9 +8362,9 @@ Array [ /* handle nested global #8 */ .a:not(._postcss-modules-local-by-default_local_modules_css-b, ._postcss-modules-local-by-default_local_modules_css-c) { a_value: some-value; } -/* TODO bug */ /* handle a complex animation rule */ -._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-foo, bar 5s linear 2s infinite _postcss-modules-local-by-default_local_modules_css-alternate, _postcss-modules-local-by-default_local_modules_css-barfoo 1s; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-foo, _postcss-modules-local-by-default_local_modules_css-bar 5s linear 2s infinite alternate, _postcss-modules-local-by-default_local_modules_css-barfoo 1s; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-foo, _postcss-modules-local-by-default_local_modules_css-BAR 5s LINEAR 2s INFINITE ALTERNATE, _postcss-modules-local-by-default_local_modules_css-barfoo 1s; } /* handle animations where the first value is not the animation name */ ._postcss-modules-local-by-default_local_modules_css-foo { animation: 1s _postcss-modules-local-by-default_local_modules_css-foo; } @@ -8434,16 +8372,17 @@ Array [ /* handle animations where the first value is not the animation name whilst also using keywords */ ._postcss-modules-local-by-default_local_modules_css-foo { animation: 1s normal ease-out infinite _postcss-modules-local-by-default_local_modules_css-foo; } -/* TODO bug */ /* not treat animation curve as identifier of animation name even if it separated by comma */ -._postcss-modules-local-by-default_local_modules_css-foo { animation: slide-right 300ms forwards _postcss-modules-local-by-default_local_modules_css-ease-out, fade-in 300ms forwards _postcss-modules-local-by-default_local_modules_css-ease-out; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-slide-right 300ms forwards ease-out, _postcss-modules-local-by-default_local_modules_css-fade-in 300ms forwards ease-out; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-slide-right 300ms forwards ease-out } +._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-slide-right 300ms forwards ease-out; @media screen { animation: _postcss-modules-local-by-default_local_modules_css-slide-right 300ms forwards ease-out; } } +._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-slide-right 300ms forwards ease-out; ._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-slide-right 300ms forwards ease-out; } } -/* TODO bug */ /* not treat \\"start\\" and \\"end\\" keywords in steps() function as identifiers */ -._postcss-modules-local-by-default_local_modules_css-foo { animation: spin 1s steps(12, end) _postcss-modules-local-by-default_local_modules_css-infinite; } -._postcss-modules-local-by-default_local_modules_css-foo { animation: spin 1s STEPS(12, start) _postcss-modules-local-by-default_local_modules_css-infinite; } -._postcss-modules-local-by-default_local_modules_css-foo { animation: spin 1s steps(12, END) _postcss-modules-local-by-default_local_modules_css-infinite; } -._postcss-modules-local-by-default_local_modules_css-foo { animation: spin 1s steps(12, START) _postcss-modules-local-by-default_local_modules_css-infinite; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-spin 1s steps(12, end) infinite; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-spin 1s STEPS(12, start) infinite; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-spin 1s steps(12, END) infinite; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-spin 1s steps(12, START) infinite; } /* handle animations with custom timing functions */ ._postcss-modules-local-by-default_local_modules_css-foo { animation: 1s normal cubic-bezier(0.25, 0.5, 0.5. 0.75) _postcss-modules-local-by-default_local_modules_css-foo; } @@ -8451,13 +8390,11 @@ Array [ /* handle animations whose names are keywords */ ._postcss-modules-local-by-default_local_modules_css-foo { animation: 1s infinite _postcss-modules-local-by-default_local_modules_css-infinite; } -/* TODO bug */ /* handle not localize an animation shorthand value of \\"inherit\\" */ -._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-inherit; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: inherit; } -/* TODO test me in browser */ /* handle \\"constructor\\" as animation name */ -._postcss-modules-local-by-default_local_modules_css-foo { animation: constructor _postcss-modules-local-by-default_local_modules_css-constructor; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-constructor _postcss-modules-local-by-default_local_modules_css-constructor; } /* default to local when mode provided */ ._postcss-modules-local-by-default_local_modules_css-foo { a_value: some-value; } @@ -8757,13 +8694,20 @@ input { a_value: some-value; } .a ._postcss-modules-local-by-default_global_modules_css-b {} .a._postcss-modules-local-by-default_global_modules_css-b {} .a._postcss-modules-local-by-default_global_modules_css-b {} -.a ._postcss-modules-local-by-default_global_modules_css-b {} +.a._postcss-modules-local-by-default_global_modules_css-b {} .a ._postcss-modules-local-by-default_global_modules_css-b {} -.a ._postcss-modules-local-by-default_global_modules_css-b {} +.a ._postcss-modules-local-by-default_global_modules_css-b {} ._postcss-modules-local-by-default_global_modules_css-a.b {} - ._postcss-modules-local-by-default_global_modules_css-a .b {} ._postcss-modules-local-by-default_global_modules_css-a .b {} - ._postcss-modules-local-by-default_global_modules_css-a .b {} +._postcss-modules-local-by-default_global_modules_css-a .b {} +._postcss-modules-local-by-default_global_modules_css-a .b {} +.a /* test */ /* test*/ ._postcss-modules-local-by-default_global_modules_css-b {} +/*.a !* test *!:local!* test*! .b {}*/ +.a/* test */ /* test*/._postcss-modules-local-by-default_global_modules_css-b {} +.a/* test */ ._postcss-modules-local-by-default_global_modules_css-b /* test */ {} +.a/* test */._postcss-modules-local-by-default_global_modules_css-b/* test */ {} +.a/* test */ ._postcss-modules-local-by-default_global_modules_css-b/* test */ {} +.a/* test */._postcss-modules-local-by-default_global_modules_css-b /* test */ {} /* localize keyframes in global default mode */ @keyframes foo { a_value: some-value; } @@ -9037,7 +8981,7 @@ to (.bar) { /* should work with media queries when no-check is enabled */ /* cssmodules-pure-no-check */ @media (max-width: 768px) { - .foo { position: _postcss-modules-local-by-default_pure_modules_css-fixed } + .foo { position: fixed } } /* css nesting #2 */ @@ -9327,8 +9271,6 @@ html { ._postcss-modules-scope_modules_css-exportName12 { display: grid; - - @media (orientation: landscape) { grid-auto-flow: column; } @@ -9417,8 +9359,7 @@ html { } to { - - } + } } /* TODO bug no report */ @@ -9426,8 +9367,7 @@ html { ._postcss-modules-scope_modules_css-exportName31 {} #_postcss-modules-scope_modules_css-idName { - -} + } /* error-composes-not-allowed-in-multiple */ ._postcss-modules-scope_modules_css-exportName32 {} @@ -9439,8 +9379,7 @@ html { /* error-composes-not-allowed-in-simple */ ._postcss-modules-scope_modules_css-exportName35 {} body { - -} + } /* error-composes-not-allowed-in-wrong-local */ ._postcss-modules-scope_modules_css-exportName36 {} @@ -9450,8 +9389,7 @@ body { /* error-composes-not-defined-class */ ._postcss-modules-scope_modules_css-exportName39 { - -} + } /* TODO bug no report */ /* error-multiple-nested-media */ @@ -9466,8 +9404,7 @@ body { grid-auto-flow: column; @media (min-width: 1024px) { - - } + } } } @@ -9709,8 +9646,8 @@ body { /* TODO bug */ /* export-with-composes */ ._postcss-modules-scope_modules_css-exportName57 { background: red; } -._postcss-modules-scope_modules_css-exportName58 { color: green; } -._postcss-modules-scope_modules_css-exportName59 { color: green; } +._postcss-modules-scope_modules_css-exportName58 { color: green; } +._postcss-modules-scope_modules_css-exportName59 { color: green; } /* TODO bug */ /* export-with-global-composes */ @@ -9723,7 +9660,7 @@ body { ._postcss-modules-scope_modules_css-exportName63 { background: red; } ._postcss-modules-scope_modules_css-exportName64 { font-size: 2em; } ._postcss-modules-scope_modules_css-exportName65 { color: red; } -._postcss-modules-scope_modules_css-exportName66 { color: green; } +._postcss-modules-scope_modules_css-exportName66 { color: green; } /* TODO bug */ /* export-with-transitive-composes */ @@ -9731,11 +9668,9 @@ body { font-size: 2em; } ._postcss-modules-scope_modules_css-exportName68 { - background: red; } ._postcss-modules-scope_modules_css-exportName69 { - color: green; } diff --git a/test/__snapshots__/ConfigTestCases.basictest.js.snap b/test/__snapshots__/ConfigTestCases.basictest.js.snap index 8043d3220..923bd8597 100644 --- a/test/__snapshots__/ConfigTestCases.basictest.js.snap +++ b/test/__snapshots__/ConfigTestCases.basictest.js.snap @@ -1171,7 +1171,7 @@ div { ._style_module_css-class { animation: - foo var(--_style_module_css-animation-name) 3s, + _style_module_css-foo var(--_style_module_css-animation-name) 3s, var(--_style_module_css-animation-name) 3s, 3s linear 1s infinite running _style_module_css-slidein, 3s linear env(foo, var(--_style_module_css-baz)) infinite running _style_module_css-slidein; @@ -1787,42 +1787,27 @@ div { } ._style_module_css-exportName { - - - - - - - - - - border: red; } ._style_module_css-exportNameOtherNoSpaces { - -} + } ._style_module_css-from { color: red; } ._style_module_css-exportNameOtherFromKeyword { - -} + } ._style_module_css-exportNameOtherFromKeywordWithFrom1 { - -} + } ._style_module_css-exportNameOtherFromKeywordWithFrom2 { - -} + } ._style_module_css-exportNameWeirdCharacters { - -} + } /*!*********************************!*\\\\ !*** css ./style.module.my-css ***! @@ -2896,7 +2881,7 @@ div { .my-app-235-zg { animation: - foo var(--my-app-235-ZP) 3s, + my-app-235-pr var(--my-app-235-ZP) 3s, var(--my-app-235-ZP) 3s, 3s linear 1s infinite running my-app-235-Fk, 3s linear env(foo, var(--my-app-235-KR)) infinite running my-app-235-Fk; @@ -3512,42 +3497,27 @@ div { } .my-app-235-au { - - - - - - - - - - border: red; } .my-app-235-M2 { - -} + } .my-app-235-HT { color: red; } .my-app-235-jL { - -} + } .my-app-235-Qf { - -} + } .my-app-235-Hl { - -} + } .my-app-235-Xp { - -} + } /*!*********************************!*\\\\ !*** css ./style.module.my-css ***! @@ -7501,8 +7471,15 @@ Object { "exportName34": "_postcss-modules-extract-imports_modules_css-exportName34 _a_modules_css-a _b_modules_css-b", "exportName35": "_postcss-modules-extract-imports_modules_css-exportName35 _other_css-className", "exportName36": "_postcss-modules-extract-imports_modules_css-exportName36", - "exportName37": "_postcss-modules-extract-imports_modules_css-exportName37", + "exportName37": "_postcss-modules-extract-imports_modules_css-exportName37 _postcss-modules-extract-imports_modules_css-localName", + "exportName38": "_postcss-modules-extract-imports_modules_css-exportName38 _postcss-modules-extract-imports_modules_css-localName", + "exportName39": "_postcss-modules-extract-imports_modules_css-exportName39 _postcss-modules-extract-imports_modules_css-localName", "exportName4": "_postcss-modules-extract-imports_modules_css-exportName4 _postcss-modules-extract-imports_modules_css-localName", + "exportName40": "_postcss-modules-extract-imports_modules_css-exportName40 _postcss-modules-extract-imports_modules_css-localName", + "exportName41": "_postcss-modules-extract-imports_modules_css-exportName41 _postcss-modules-extract-imports_modules_css-localName", + "exportName42": "_postcss-modules-extract-imports_modules_css-exportName42 _postcss-modules-extract-imports_modules_css-localName", + "exportName43": "_postcss-modules-extract-imports_modules_css-exportName43 _postcss-modules-extract-imports_modules_css-localName", + "exportName44": "_postcss-modules-extract-imports_modules_css-exportName44", "exportName5": "_postcss-modules-extract-imports_modules_css-exportName5 _library_modules_css-importName _library_modules_css-importName2", "exportName6": "_postcss-modules-extract-imports_modules_css-exportName6 _library_modules_css-importName", "exportName7": "_postcss-modules-extract-imports_modules_css-exportName7 _library_modules_css-importName _library_modules_css-secondImport", @@ -7534,9 +7511,9 @@ Object { ":)": "_postcss-modules-local-by-default_local_modules_css-:)", "@bounce": "_postcss-modules-local-by-default_local_modules_css-@bounce", "@foo": "_postcss-modules-local-by-default_local_modules_css-@foo", + "BAR": "_postcss-modules-local-by-default_local_modules_css-BAR", "a": "_postcss-modules-local-by-default_local_modules_css-a", "a_value": "_postcss-modules-local-by-default_local_modules_css-a_value", - "alternate": "_postcss-modules-local-by-default_local_modules_css-alternate", "article-body": "_postcss-modules-local-by-default_local_modules_css-article-body", "article-footer": "_postcss-modules-local-by-default_local_modules_css-article-footer", "article-header": "_postcss-modules-local-by-default_local_modules_css-article-header", @@ -7551,22 +7528,23 @@ Object { "constructor": "_postcss-modules-local-by-default_local_modules_css-constructor", "duplicate-name": "_postcss-modules-local-by-default_local_modules_css-duplicate-name", "ease": "_postcss-modules-local-by-default_local_modules_css-ease", + "ease-in": "_postcss-modules-local-by-default_local_modules_css-ease-in", "ease-out": "_postcss-modules-local-by-default_local_modules_css-ease-out", "f@oo": "_postcss-modules-local-by-default_local_modules_css-f@oo", + "fade": "_postcss-modules-local-by-default_local_modules_css-fade", + "fade-in": "_postcss-modules-local-by-default_local_modules_css-fade-in", "fadeInOut": "_postcss-modules-local-by-default_local_modules_css-fadeInOut", "foo": "__foo", "foobar": "_postcss-modules-local-by-default_local_modules_css-foobar", - "forwards": "_postcss-modules-local-by-default_local_modules_css-forwards", "infinite": "_postcss-modules-local-by-default_local_modules_css-infinite", - "inherit": "_postcss-modules-local-by-default_local_modules_css-inherit", + "my-custom-var": "--_postcss-modules-local-by-default_local_modules_css-my-custom-var", "name": "_postcss-modules-local-by-default_local_modules_css-name", - "none": "_postcss-modules-local-by-default_local_modules_css-none", - "revert": "_postcss-modules-local-by-default_local_modules_css-revert", - "revert-layer": "_postcss-modules-local-by-default_local_modules_css-revert-layer", "rotate": "_postcss-modules-local-by-default_local_modules_css-rotate", - "running": "_postcss-modules-local-by-default_local_modules_css-running", + "slide-right": "_postcss-modules-local-by-default_local_modules_css-slide-right", + "spin": "_postcss-modules-local-by-default_local_modules_css-spin", "sr-only": "--_postcss-modules-local-by-default_local_modules_css-sr-only", "t t": "_postcss-modules-local-by-default_local_modules_css-t t", + "test": "_postcss-modules-local-by-default_local_modules_css-test", "title-align": "--_postcss-modules-local-by-default_local_modules_css-title-align", "u-m+ ": "_postcss-modules-local-by-default_local_modules_css-u-m+ ", "😃bounce😃": "_postcss-modules-local-by-default_local_modules_css-😃bounce😃", @@ -7597,7 +7575,6 @@ Object { "class-1": "_postcss-modules-local-by-default_pure_modules_css-class-1", "class-2": "_postcss-modules-local-by-default_pure_modules_css-class-2", "fadeInOut": "_postcss-modules-local-by-default_pure_modules_css-fadeInOut", - "fixed": "_postcss-modules-local-by-default_pure_modules_css-fixed", "foo": "__foo", "label": "_postcss-modules-local-by-default_pure_modules_css-label", "local": "_postcss-modules-local-by-default_pure_modules_css-local", @@ -7892,13 +7869,12 @@ Array [ /* composing-globals */ -._postcss-modules-extract-imports_modules_css-exportName1 { other: rule; } +._postcss-modules-extract-imports_modules_css-exportName1 { other: rule; } /* existing-import */ ._postcss-modules-extract-imports_modules_css-exportName2 { - -} + } /* import-comment */ /* @@ -7910,108 +7886,83 @@ Array [ /* import-consolidate */ ._postcss-modules-extract-imports_modules_css-exportName3 { - other: rule; } ._postcss-modules-extract-imports_modules_css-otherExport { - - -} + } /* import-local-extends */ ._postcss-modules-extract-imports_modules_css-localName { color: red; } ._postcss-modules-extract-imports_modules_css-exportName4 { - other: rule; } /* import-media */ @media screen { ._postcss-modules-extract-imports_modules_css-exportName5 { - - other: rule2; } } ._postcss-modules-extract-imports_modules_css-exportName6 { - other: rule; } /* import-multiple-classes */ -._postcss-modules-extract-imports_modules_css-exportName7 { other: rule; } +._postcss-modules-extract-imports_modules_css-exportName7 { other: rule; } /* import-multiple-references */ ._postcss-modules-extract-imports_modules_css-exportName8 { - - - -} + } ._postcss-modules-extract-imports_modules_css-exportName9 { - - - -} + } /* import-only-whitelist */ ._postcss-modules-extract-imports_modules_css-exportName10 { imports: importName from \\"path/library.css\\"; something-else: otherLibImport from \\"path/other-lib.css\\"; } /* import-preserving-order */ ._postcss-modules-extract-imports_modules_css-exportName11 { - - color: #aaa; } /* import-single-quotes */ ._postcss-modules-extract-imports_modules_css-exportName12 { - other: rule; } /* import-double-quotes */ ._postcss-modules-extract-imports_modules_css-exportName13 { - other: rule; } /* import-spacing */ ._postcss-modules-extract-imports_modules_css-exportName14 { - - - other: rule; } /* import-within */ ._postcss-modules-extract-imports_modules_css-exportName15 { - other: rule; } /* multiple-composes */ ._postcss-modules-extract-imports_modules_css-exportName16 { - other: rule; } ._postcss-modules-extract-imports_modules_css-exportName17 { - -} + } ._postcss-modules-extract-imports_modules_css-exportName18 { - -} + } ._postcss-modules-extract-imports_modules_css-foo { color: red } ._postcss-modules-extract-imports_modules_css-bar { color: blue } ._postcss-modules-extract-imports_modules_css-baz { color: green } ._postcss-modules-extract-imports_modules_css-exportName19 { - -} + } /* nesting */ ._postcss-modules-extract-imports_modules_css-exportName19 { @@ -8033,78 +7984,54 @@ Array [ /* TODO bug - need port https://github.com/css-modules/postcss-modules-extract-imports/pull/138 */ /* resolve-composes-order */ ._postcss-modules-extract-imports_modules_css-exportName20 { - color: #bebebe; } ._postcss-modules-extract-imports_modules_css-exportName21 { /* \`b\` should be after \`c\` */ - - color: #aaa; } /* resolve-duplicates */ ._postcss-modules-extract-imports_modules_css-exportName22 { - - - - - -} + } /* resolve-imports-order */ ._postcss-modules-extract-imports_modules_css-exportName23 { - -} + } ._postcss-modules-extract-imports_modules_css-exportName24 { - - -} + } ._postcss-modules-extract-imports_modules_css-exportName25 { - - -} + } ._postcss-modules-extract-imports_modules_css-exportName26 { - - - -} + } /* valid-characters */ ._postcss-modules-extract-imports_modules_css-exportName27 { - - -} + } /* We pass this test */ /* check-import-order */ ._postcss-modules-extract-imports_modules_css-exportName28 { - - -} + } ._postcss-modules-extract-imports_modules_css-exportName29 { - - -} + } /* empty-composes */ ._postcss-modules-extract-imports_modules_css-exportName30 { - -} + } /* weird-composes */ ._postcss-modules-extract-imports_modules_css-from { color: red; } ._postcss-modules-extract-imports_modules_css-exportName31 { - -} + } /* broken-composes */ ._postcss-modules-extract-imports_modules_css-exportName32 { @@ -8118,28 +8045,43 @@ Array [ /* composes-multiple-declarations */ ._postcss-modules-extract-imports_modules_css-exportName34 { - -} + } ._postcss-modules-extract-imports_modules_css-exportName34 { - -} + } /* inherit-module-type */ ._postcss-modules-extract-imports_modules_css-exportName35 { - -} + } /* TODO bug */ /* composes from-import */ ._postcss-modules-extract-imports_modules_css-exportName36 { - + } + +._postcss-modules-extract-imports_modules_css-exportName37 {} + +._postcss-modules-extract-imports_modules_css-exportName38 { + } + +._postcss-modules-extract-imports_modules_css-exportName39 { + } + +._postcss-modules-extract-imports_modules_css-exportName40 {color:red;} + +._postcss-modules-extract-imports_modules_css-exportName41 {color:red;} + +._postcss-modules-extract-imports_modules_css-exportName42 {color:red} + +._postcss-modules-extract-imports_modules_css-exportName43 { + + color:red; } /* TODO bug */ -._postcss-modules-extract-imports_modules_css-exportName37 { color: unknown; } +._postcss-modules-extract-imports_modules_css-exportName44 { color: unknown; } /*!********************************!*\\\\ !*** css ./import.modules.css ***! @@ -8273,6 +8215,9 @@ Array [ /* passed because \`--bar\` not found */ /* not localize animation-name in a var function #2 */ ._postcss-modules-local-by-default_local_modules_css-foo { animation-name: vAr(--bar); } +/* Work, because found */ +:root { --_postcss-modules-local-by-default_local_modules_css-my-custom-var: name; } +._postcss-modules-local-by-default_local_modules_css-foo { animation-name: vAr(--_postcss-modules-local-by-default_local_modules_css-my-custom-var); } /* not localize animation-name in an env function */ ._postcss-modules-local-by-default_local_modules_css-foo { animation-name: env(bar); } @@ -8306,25 +8251,20 @@ Array [ /* localize multiple animation-names */ ._postcss-modules-local-by-default_local_modules_css-foo { animation-name: _postcss-modules-local-by-default_local_modules_css-bar, _postcss-modules-local-by-default_local_modules_css-foobar; } -/* TODO bug */ /* not localize revert */ -._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-revert; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: revert; } -/* TODO bug */ /* not localize revert #2 */ -._postcss-modules-local-by-default_local_modules_css-foo { animation-name: _postcss-modules-local-by-default_local_modules_css-revert; } +._postcss-modules-local-by-default_local_modules_css-foo { animation-name: revert; } -/* TODO bug */ /* not localize revert #3 */ -._postcss-modules-local-by-default_local_modules_css-foo { animation-name: _postcss-modules-local-by-default_local_modules_css-revert, _postcss-modules-local-by-default_local_modules_css-foo, _postcss-modules-local-by-default_local_modules_css-none; } +._postcss-modules-local-by-default_local_modules_css-foo { animation-name: revert, _postcss-modules-local-by-default_local_modules_css-foo, none; } -/* TODO bug */ /* not localize revert-layer */ -._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-revert-layer; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: revert-layer; } -/* TODO bug */ /* not localize revert */ -._postcss-modules-local-by-default_local_modules_css-foo { animation-name: _postcss-modules-local-by-default_local_modules_css-revert-layer; } +._postcss-modules-local-by-default_local_modules_css-foo { animation-name: revert-layer; } /* localize animation using special characters */ ._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-\\\\@bounce; } @@ -8353,26 +8293,23 @@ Array [ /* localize animation using special characters */ ._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css---; } -/* TODO test me in real browser */ /* localize animation using special characters */ ._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-😃bounce😃; } -/* TODO test me in real browser */ /* not localize custom property */ ._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css---foo; } /* not localize name in nested function */ -._postcss-modules-local-by-default_local_modules_css-foo { animation: fade .2s var(--easeOutQuart) .1s forwards } +._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-fade .2s var(--easeOutQuart) .1s forwards } -/* TODO bug */ /* not localize name in nested function #2 */ -._postcss-modules-local-by-default_local_modules_css-foo { animation: fade .2s env(FOO_BAR) .1s _postcss-modules-local-by-default_local_modules_css-forwards, name } +._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-fade .2s env(FOO_BAR) .1s forwards, _postcss-modules-local-by-default_local_modules_css-name } /* not localize name in nested function #3 */ -._postcss-modules-local-by-default_local_modules_css-foo { animation: var(--foo-bar) .1s _postcss-modules-local-by-default_local_modules_css-forwards, name } +._postcss-modules-local-by-default_local_modules_css-foo { animation: var(--foo-bar) .1s forwards, _postcss-modules-local-by-default_local_modules_css-name } /* not localize name in nested function #4 */ -._postcss-modules-local-by-default_local_modules_css-foo { animation: var(--foo-bar) .1s forwards _postcss-modules-local-by-default_local_modules_css-name, name } +._postcss-modules-local-by-default_local_modules_css-foo { animation: var(--foo-bar) .1s forwards _postcss-modules-local-by-default_local_modules_css-name, _postcss-modules-local-by-default_local_modules_css-name } /* localize animation */ ._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-a; } @@ -8382,10 +8319,11 @@ Array [ /* localize animation #3 */ ._postcss-modules-local-by-default_local_modules_css-foo { animation: ease _postcss-modules-local-by-default_local_modules_css-ease; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: ease _postcss-modules-local-by-default_local_modules_css-ease; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: ease _postcss-modules-local-by-default_local_modules_css-ease, ease-in _postcss-modules-local-by-default_local_modules_css-ease-in, ease-out _postcss-modules-local-by-default_local_modules_css-ease-out; } -/* TODO bug */ /* localize animation #4 */ -._postcss-modules-local-by-default_local_modules_css-foo { animation: 0s ease 0s 1 normal none test _postcss-modules-local-by-default_local_modules_css-running; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: 0s ease 0s 1 normal none _postcss-modules-local-by-default_local_modules_css-test running; } /* localize animation with vendor prefix */ ._postcss-modules-local-by-default_local_modules_css-foo { -webkit-animation: _postcss-modules-local-by-default_local_modules_css-bar; animation: _postcss-modules-local-by-default_local_modules_css-bar; } @@ -8424,9 +8362,9 @@ Array [ /* handle nested global #8 */ .a:not(._postcss-modules-local-by-default_local_modules_css-b, ._postcss-modules-local-by-default_local_modules_css-c) { a_value: some-value; } -/* TODO bug */ /* handle a complex animation rule */ -._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-foo, bar 5s linear 2s infinite _postcss-modules-local-by-default_local_modules_css-alternate, _postcss-modules-local-by-default_local_modules_css-barfoo 1s; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-foo, _postcss-modules-local-by-default_local_modules_css-bar 5s linear 2s infinite alternate, _postcss-modules-local-by-default_local_modules_css-barfoo 1s; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-foo, _postcss-modules-local-by-default_local_modules_css-BAR 5s LINEAR 2s INFINITE ALTERNATE, _postcss-modules-local-by-default_local_modules_css-barfoo 1s; } /* handle animations where the first value is not the animation name */ ._postcss-modules-local-by-default_local_modules_css-foo { animation: 1s _postcss-modules-local-by-default_local_modules_css-foo; } @@ -8434,16 +8372,17 @@ Array [ /* handle animations where the first value is not the animation name whilst also using keywords */ ._postcss-modules-local-by-default_local_modules_css-foo { animation: 1s normal ease-out infinite _postcss-modules-local-by-default_local_modules_css-foo; } -/* TODO bug */ /* not treat animation curve as identifier of animation name even if it separated by comma */ -._postcss-modules-local-by-default_local_modules_css-foo { animation: slide-right 300ms forwards _postcss-modules-local-by-default_local_modules_css-ease-out, fade-in 300ms forwards _postcss-modules-local-by-default_local_modules_css-ease-out; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-slide-right 300ms forwards ease-out, _postcss-modules-local-by-default_local_modules_css-fade-in 300ms forwards ease-out; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-slide-right 300ms forwards ease-out } +._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-slide-right 300ms forwards ease-out; @media screen { animation: _postcss-modules-local-by-default_local_modules_css-slide-right 300ms forwards ease-out; } } +._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-slide-right 300ms forwards ease-out; ._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-slide-right 300ms forwards ease-out; } } -/* TODO bug */ /* not treat \\"start\\" and \\"end\\" keywords in steps() function as identifiers */ -._postcss-modules-local-by-default_local_modules_css-foo { animation: spin 1s steps(12, end) _postcss-modules-local-by-default_local_modules_css-infinite; } -._postcss-modules-local-by-default_local_modules_css-foo { animation: spin 1s STEPS(12, start) _postcss-modules-local-by-default_local_modules_css-infinite; } -._postcss-modules-local-by-default_local_modules_css-foo { animation: spin 1s steps(12, END) _postcss-modules-local-by-default_local_modules_css-infinite; } -._postcss-modules-local-by-default_local_modules_css-foo { animation: spin 1s steps(12, START) _postcss-modules-local-by-default_local_modules_css-infinite; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-spin 1s steps(12, end) infinite; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-spin 1s STEPS(12, start) infinite; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-spin 1s steps(12, END) infinite; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-spin 1s steps(12, START) infinite; } /* handle animations with custom timing functions */ ._postcss-modules-local-by-default_local_modules_css-foo { animation: 1s normal cubic-bezier(0.25, 0.5, 0.5. 0.75) _postcss-modules-local-by-default_local_modules_css-foo; } @@ -8451,13 +8390,11 @@ Array [ /* handle animations whose names are keywords */ ._postcss-modules-local-by-default_local_modules_css-foo { animation: 1s infinite _postcss-modules-local-by-default_local_modules_css-infinite; } -/* TODO bug */ /* handle not localize an animation shorthand value of \\"inherit\\" */ -._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-inherit; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: inherit; } -/* TODO test me in browser */ /* handle \\"constructor\\" as animation name */ -._postcss-modules-local-by-default_local_modules_css-foo { animation: constructor _postcss-modules-local-by-default_local_modules_css-constructor; } +._postcss-modules-local-by-default_local_modules_css-foo { animation: _postcss-modules-local-by-default_local_modules_css-constructor _postcss-modules-local-by-default_local_modules_css-constructor; } /* default to local when mode provided */ ._postcss-modules-local-by-default_local_modules_css-foo { a_value: some-value; } @@ -8757,13 +8694,20 @@ input { a_value: some-value; } .a ._postcss-modules-local-by-default_global_modules_css-b {} .a._postcss-modules-local-by-default_global_modules_css-b {} .a._postcss-modules-local-by-default_global_modules_css-b {} -.a ._postcss-modules-local-by-default_global_modules_css-b {} +.a._postcss-modules-local-by-default_global_modules_css-b {} .a ._postcss-modules-local-by-default_global_modules_css-b {} -.a ._postcss-modules-local-by-default_global_modules_css-b {} +.a ._postcss-modules-local-by-default_global_modules_css-b {} ._postcss-modules-local-by-default_global_modules_css-a.b {} - ._postcss-modules-local-by-default_global_modules_css-a .b {} ._postcss-modules-local-by-default_global_modules_css-a .b {} - ._postcss-modules-local-by-default_global_modules_css-a .b {} +._postcss-modules-local-by-default_global_modules_css-a .b {} +._postcss-modules-local-by-default_global_modules_css-a .b {} +.a /* test */ /* test*/ ._postcss-modules-local-by-default_global_modules_css-b {} +/*.a !* test *!:local!* test*! .b {}*/ +.a/* test */ /* test*/._postcss-modules-local-by-default_global_modules_css-b {} +.a/* test */ ._postcss-modules-local-by-default_global_modules_css-b /* test */ {} +.a/* test */._postcss-modules-local-by-default_global_modules_css-b/* test */ {} +.a/* test */ ._postcss-modules-local-by-default_global_modules_css-b/* test */ {} +.a/* test */._postcss-modules-local-by-default_global_modules_css-b /* test */ {} /* localize keyframes in global default mode */ @keyframes foo { a_value: some-value; } @@ -9037,7 +8981,7 @@ to (.bar) { /* should work with media queries when no-check is enabled */ /* cssmodules-pure-no-check */ @media (max-width: 768px) { - .foo { position: _postcss-modules-local-by-default_pure_modules_css-fixed } + .foo { position: fixed } } /* css nesting #2 */ @@ -9327,8 +9271,6 @@ html { ._postcss-modules-scope_modules_css-exportName12 { display: grid; - - @media (orientation: landscape) { grid-auto-flow: column; } @@ -9417,8 +9359,7 @@ html { } to { - - } + } } /* TODO bug no report */ @@ -9426,8 +9367,7 @@ html { ._postcss-modules-scope_modules_css-exportName31 {} #_postcss-modules-scope_modules_css-idName { - -} + } /* error-composes-not-allowed-in-multiple */ ._postcss-modules-scope_modules_css-exportName32 {} @@ -9439,8 +9379,7 @@ html { /* error-composes-not-allowed-in-simple */ ._postcss-modules-scope_modules_css-exportName35 {} body { - -} + } /* error-composes-not-allowed-in-wrong-local */ ._postcss-modules-scope_modules_css-exportName36 {} @@ -9450,8 +9389,7 @@ body { /* error-composes-not-defined-class */ ._postcss-modules-scope_modules_css-exportName39 { - -} + } /* TODO bug no report */ /* error-multiple-nested-media */ @@ -9466,8 +9404,7 @@ body { grid-auto-flow: column; @media (min-width: 1024px) { - - } + } } } @@ -9709,8 +9646,8 @@ body { /* TODO bug */ /* export-with-composes */ ._postcss-modules-scope_modules_css-exportName57 { background: red; } -._postcss-modules-scope_modules_css-exportName58 { color: green; } -._postcss-modules-scope_modules_css-exportName59 { color: green; } +._postcss-modules-scope_modules_css-exportName58 { color: green; } +._postcss-modules-scope_modules_css-exportName59 { color: green; } /* TODO bug */ /* export-with-global-composes */ @@ -9723,7 +9660,7 @@ body { ._postcss-modules-scope_modules_css-exportName63 { background: red; } ._postcss-modules-scope_modules_css-exportName64 { font-size: 2em; } ._postcss-modules-scope_modules_css-exportName65 { color: red; } -._postcss-modules-scope_modules_css-exportName66 { color: green; } +._postcss-modules-scope_modules_css-exportName66 { color: green; } /* TODO bug */ /* export-with-transitive-composes */ @@ -9731,11 +9668,9 @@ body { font-size: 2em; } ._postcss-modules-scope_modules_css-exportName68 { - background: red; } ._postcss-modules-scope_modules_css-exportName69 { - color: green; } diff --git a/test/configCases/css/postcss-modules-plugins/postcss-modules-extract-imports.modules.css b/test/configCases/css/postcss-modules-plugins/postcss-modules-extract-imports.modules.css index 79d54fb8d..ae0db74d4 100644 --- a/test/configCases/css/postcss-modules-plugins/postcss-modules-extract-imports.modules.css +++ b/test/configCases/css/postcss-modules-plugins/postcss-modules-extract-imports.modules.css @@ -260,9 +260,32 @@ composes: abc-from-def; } +:local(.exportName37) {composes: localName} + +:local(.exportName38) { + composes: localName +} + +:local(.exportName39) { + composes: localName; +} + +:local(.exportName40) {color:red;composes:localName} + +:local(.exportName41) {composes:localName;color:red;} + +:local(.exportName42) {composes:localName;color:red} + +:local(.exportName43) { + + composes:localName; + + color:red; +} + /* TODO bug */ :import("foo") { foo: other; } -.exportName37 { color: unknown; } +.exportName44 { color: unknown; } diff --git a/test/configCases/css/postcss-modules-plugins/postcss-modules-local-by-default.global.modules.css b/test/configCases/css/postcss-modules-plugins/postcss-modules-local-by-default.global.modules.css index f662fd94b..e4834ca9f 100644 --- a/test/configCases/css/postcss-modules-plugins/postcss-modules-local-by-default.global.modules.css +++ b/test/configCases/css/postcss-modules-plugins/postcss-modules-local-by-default.global.modules.css @@ -22,6 +22,13 @@ :local( .a ).b {} :local(.a) .b {} :local( .a ) .b {} +.a /* test */ :local /* test*/ .b {} +/*.a !* test *!:local!* test*! .b {}*/ +.a/* test */ :local /* test*/.b {} +.a:local(/* test */ .b /* test */) {} +.a:local(/* test */.b/* test */) {} +.a:local(/* test */ .b/* test */) {} +.a:local(/* test */.b /* test */) {} /* localize keyframes in global default mode */ @keyframes foo { a_value: some-value; } diff --git a/test/configCases/css/postcss-modules-plugins/postcss-modules-local-by-default.local.modules.css b/test/configCases/css/postcss-modules-plugins/postcss-modules-local-by-default.local.modules.css index 947d4452f..3325507d5 100644 --- a/test/configCases/css/postcss-modules-plugins/postcss-modules-local-by-default.local.modules.css +++ b/test/configCases/css/postcss-modules-plugins/postcss-modules-local-by-default.local.modules.css @@ -106,6 +106,9 @@ /* passed because `--bar` not found */ /* not localize animation-name in a var function #2 */ .foo { animation-name: vAr(--bar); } +/* Work, because found */ +:root { --my-custom-var: name; } +.foo { animation-name: vAr(--my-custom-var); } /* not localize animation-name in an env function */ .foo { animation-name: env(bar); } @@ -139,23 +142,18 @@ /* localize multiple animation-names */ .foo { animation-name: bar, foobar; } -/* TODO bug */ /* not localize revert */ .foo { animation: revert; } -/* TODO bug */ /* not localize revert #2 */ .foo { animation-name: revert; } -/* TODO bug */ /* not localize revert #3 */ .foo { animation-name: revert, foo, none; } -/* TODO bug */ /* not localize revert-layer */ .foo { animation: revert-layer; } -/* TODO bug */ /* not localize revert */ .foo { animation-name: revert-layer; } @@ -186,18 +184,15 @@ /* localize animation using special characters */ .foo { animation: --; } -/* TODO test me in real browser */ /* localize animation using special characters */ .foo { animation: 😃bounce😃; } -/* TODO test me in real browser */ /* not localize custom property */ .foo { animation: --foo; } /* not localize name in nested function */ .foo { animation: fade .2s var(--easeOutQuart) .1s forwards } -/* TODO bug */ /* not localize name in nested function #2 */ .foo { animation: fade .2s env(FOO_BAR) .1s forwards, name } @@ -215,8 +210,9 @@ /* localize animation #3 */ .foo { animation: ease ease; } +.foo { animation: ease ease; } +.foo { animation: ease ease, ease-in ease-in, ease-out ease-out; } -/* TODO bug */ /* localize animation #4 */ .foo { animation: 0s ease 0s 1 normal none test running; } @@ -257,9 +253,9 @@ /* handle nested global #8 */ :global .a:not(:local .b, .c) { a_value: some-value; } -/* TODO bug */ /* handle a complex animation rule */ .foo { animation: foo, bar 5s linear 2s infinite alternate, barfoo 1s; } +.foo { animation: foo, BAR 5s LINEAR 2s INFINITE ALTERNATE, barfoo 1s; } /* handle animations where the first value is not the animation name */ .foo { animation: 1s foo; } @@ -267,11 +263,12 @@ /* handle animations where the first value is not the animation name whilst also using keywords */ .foo { animation: 1s normal ease-out infinite foo; } -/* TODO bug */ /* not treat animation curve as identifier of animation name even if it separated by comma */ .foo { animation: slide-right 300ms forwards ease-out, fade-in 300ms forwards ease-out; } +.foo { animation: slide-right 300ms forwards ease-out } +.foo { animation: slide-right 300ms forwards ease-out; @media screen { animation: slide-right 300ms forwards ease-out; } } +.foo { animation: slide-right 300ms forwards ease-out; .foo { animation: slide-right 300ms forwards ease-out; } } -/* TODO bug */ /* not treat "start" and "end" keywords in steps() function as identifiers */ .foo { animation: spin 1s steps(12, end) infinite; } .foo { animation: spin 1s STEPS(12, start) infinite; } @@ -284,11 +281,9 @@ /* handle animations whose names are keywords */ .foo { animation: 1s infinite infinite; } -/* TODO bug */ /* handle not localize an animation shorthand value of "inherit" */ .foo { animation: inherit; } -/* TODO test me in browser */ /* handle "constructor" as animation name */ .foo { animation: constructor constructor; }