2021-11-30 19:55:51 +08:00
|
|
|
/*
|
|
|
|
MIT License http://www.opensource.org/licenses/mit-license.php
|
|
|
|
Author Tobias Koppers @sokra
|
|
|
|
*/
|
|
|
|
|
|
|
|
"use strict";
|
|
|
|
|
|
|
|
const Parser = require("../Parser");
|
2021-12-14 23:02:26 +08:00
|
|
|
const ConstDependency = require("../dependencies/ConstDependency");
|
|
|
|
const CssExportDependency = require("../dependencies/CssExportDependency");
|
2021-12-01 20:27:00 +08:00
|
|
|
const CssImportDependency = require("../dependencies/CssImportDependency");
|
2021-12-15 15:34:31 +08:00
|
|
|
const CssLocalIdentifierDependency = require("../dependencies/CssLocalIdentifierDependency");
|
2021-12-17 03:42:44 +08:00
|
|
|
const CssSelfLocalIdentifierDependency = require("../dependencies/CssSelfLocalIdentifierDependency");
|
2021-12-01 21:15:19 +08:00
|
|
|
const CssUrlDependency = require("../dependencies/CssUrlDependency");
|
2021-11-30 19:55:51 +08:00
|
|
|
const StaticExportsDependency = require("../dependencies/StaticExportsDependency");
|
|
|
|
const walkCssTokens = require("./walkCssTokens");
|
|
|
|
|
|
|
|
/** @typedef {import("../Parser").ParserState} ParserState */
|
|
|
|
/** @typedef {import("../Parser").PreparsedAst} PreparsedAst */
|
2021-12-14 23:02:26 +08:00
|
|
|
const CC_LEFT_CURLY = "{".charCodeAt(0);
|
|
|
|
const CC_RIGHT_CURLY = "}".charCodeAt(0);
|
|
|
|
const CC_COLON = ":".charCodeAt(0);
|
|
|
|
const CC_SLASH = "/".charCodeAt(0);
|
|
|
|
const CC_SEMICOLON = ";".charCodeAt(0);
|
|
|
|
|
2023-04-15 00:19:27 +08:00
|
|
|
// https://www.w3.org/TR/css-syntax-3/#newline
|
|
|
|
// We don't have `preprocessing` stage, so we need specify all of them
|
|
|
|
const STRING_MULTILINE = /\\[\n\r\f]/g;
|
|
|
|
// https://www.w3.org/TR/css-syntax-3/#whitespace
|
|
|
|
const TRIM_WHITE_SPACES = /(^[ \t\n\r\f]*|[ \t\n\r\f]*$)/g;
|
2023-04-13 07:27:04 +08:00
|
|
|
const UNESCAPE = /\\([0-9a-fA-F]{1,6}[ \t\n\r\f]?|[\s\S])/g;
|
2023-04-15 00:19:27 +08:00
|
|
|
const IMAGE_SET_FUNCTION = /^(-\w+-)?image-set$/i;
|
2023-04-17 00:43:06 +08:00
|
|
|
const OPTIONALLY_VENDOR_PREFIXED_KEYFRAMES_AT_RULE = /^@(-\w+-)?keyframes$/;
|
|
|
|
const OPTIONALLY_VENDOR_PREFIXED_ANIMATION_PROPERTY =
|
|
|
|
/^(-\w+-)?animation(-name)?$/i;
|
2023-04-13 07:27:04 +08:00
|
|
|
|
|
|
|
const normalizeUrl = (str, isString) => {
|
2023-04-13 07:36:01 +08:00
|
|
|
// Remove extra spaces and newlines:
|
2023-04-13 07:27:04 +08:00
|
|
|
// `url("im\
|
|
|
|
// g.png")`
|
|
|
|
if (isString) {
|
|
|
|
str = str.replace(STRING_MULTILINE, "");
|
|
|
|
}
|
|
|
|
|
2023-04-13 07:36:01 +08:00
|
|
|
str = str
|
|
|
|
// Remove unnecessary spaces from `url(" img.png ")`
|
|
|
|
.replace(TRIM_WHITE_SPACES, "")
|
|
|
|
// Unescape
|
|
|
|
.replace(UNESCAPE, match => {
|
|
|
|
if (match.length > 2) {
|
|
|
|
return String.fromCharCode(parseInt(match.slice(1).trim(), 16));
|
|
|
|
} else {
|
|
|
|
return match[1];
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
if (/^data:/i.test(str)) {
|
|
|
|
return str;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (str.includes("%")) {
|
2023-04-13 09:08:07 +08:00
|
|
|
// Convert `url('%2E/img.png')` -> `url('./img.png')`
|
2023-04-13 07:36:01 +08:00
|
|
|
try {
|
|
|
|
str = decodeURIComponent(str);
|
|
|
|
} catch (error) {
|
|
|
|
// Ignore
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return str;
|
2021-11-30 19:55:51 +08:00
|
|
|
};
|
|
|
|
|
2021-12-01 21:15:19 +08:00
|
|
|
class LocConverter {
|
|
|
|
constructor(input) {
|
|
|
|
this._input = input;
|
|
|
|
this.line = 1;
|
|
|
|
this.column = 0;
|
|
|
|
this.pos = 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
get(pos) {
|
|
|
|
if (this.pos !== pos) {
|
|
|
|
if (this.pos < pos) {
|
|
|
|
const str = this._input.slice(this.pos, pos);
|
|
|
|
let i = str.lastIndexOf("\n");
|
|
|
|
if (i === -1) {
|
|
|
|
this.column += str.length;
|
|
|
|
} else {
|
|
|
|
this.column = str.length - i - 1;
|
|
|
|
this.line++;
|
2021-12-03 02:29:55 +08:00
|
|
|
while (i > 0 && (i = str.lastIndexOf("\n", i - 1)) !== -1)
|
|
|
|
this.line++;
|
2021-12-01 21:15:19 +08:00
|
|
|
}
|
|
|
|
} else {
|
|
|
|
let i = this._input.lastIndexOf("\n", this.pos);
|
|
|
|
while (i >= pos) {
|
|
|
|
this.line--;
|
2021-12-03 02:29:55 +08:00
|
|
|
i = i > 0 ? this._input.lastIndexOf("\n", i - 1) : -1;
|
2021-12-01 21:15:19 +08:00
|
|
|
}
|
|
|
|
this.column = pos - i;
|
|
|
|
}
|
|
|
|
this.pos = pos;
|
|
|
|
}
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-12-01 20:27:00 +08:00
|
|
|
const CSS_MODE_TOP_LEVEL = 0;
|
|
|
|
const CSS_MODE_IN_RULE = 1;
|
2021-12-17 03:42:44 +08:00
|
|
|
const CSS_MODE_IN_LOCAL_RULE = 2;
|
|
|
|
const CSS_MODE_AT_IMPORT_EXPECT_URL = 3;
|
2023-04-25 09:17:51 +08:00
|
|
|
const CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA = 4;
|
|
|
|
const CSS_MODE_AT_OTHER = 5;
|
2021-12-01 20:27:00 +08:00
|
|
|
|
|
|
|
const explainMode = mode => {
|
|
|
|
switch (mode) {
|
|
|
|
case CSS_MODE_TOP_LEVEL:
|
|
|
|
return "parsing top level css";
|
|
|
|
case CSS_MODE_IN_RULE:
|
2021-12-17 03:42:44 +08:00
|
|
|
return "parsing css rule content (global)";
|
|
|
|
case CSS_MODE_IN_LOCAL_RULE:
|
|
|
|
return "parsing css rule content (local)";
|
2021-12-01 20:27:00 +08:00
|
|
|
case CSS_MODE_AT_IMPORT_EXPECT_URL:
|
|
|
|
return "parsing @import (expecting url)";
|
2023-04-25 09:17:51 +08:00
|
|
|
case CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA:
|
|
|
|
return "parsing @import (expecting optionally layer, supports or media query)";
|
2021-12-01 20:27:00 +08:00
|
|
|
case CSS_MODE_AT_OTHER:
|
|
|
|
return "parsing at-rule";
|
2021-12-03 02:29:55 +08:00
|
|
|
default:
|
|
|
|
return mode;
|
2021-12-01 20:27:00 +08:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2021-11-30 19:55:51 +08:00
|
|
|
class CssParser extends Parser {
|
2021-12-15 15:34:31 +08:00
|
|
|
constructor({
|
|
|
|
allowPseudoBlocks = true,
|
|
|
|
allowModeSwitch = true,
|
|
|
|
defaultMode = "global"
|
|
|
|
} = {}) {
|
2021-11-30 19:55:51 +08:00
|
|
|
super();
|
2021-12-14 23:02:26 +08:00
|
|
|
this.allowPseudoBlocks = allowPseudoBlocks;
|
2021-12-15 15:34:31 +08:00
|
|
|
this.allowModeSwitch = allowModeSwitch;
|
|
|
|
this.defaultMode = defaultMode;
|
2021-11-30 19:55:51 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @param {string | Buffer | PreparsedAst} source the source to parse
|
|
|
|
* @param {ParserState} state the parser state
|
|
|
|
* @returns {ParserState} the parser state
|
|
|
|
*/
|
|
|
|
parse(source, state) {
|
|
|
|
if (Buffer.isBuffer(source)) {
|
|
|
|
source = source.toString("utf-8");
|
|
|
|
} else if (typeof source === "object") {
|
|
|
|
throw new Error("webpackAst is unexpected for the CssParser");
|
|
|
|
}
|
|
|
|
if (source[0] === "\ufeff") {
|
|
|
|
source = source.slice(1);
|
|
|
|
}
|
|
|
|
|
|
|
|
const module = state.module;
|
|
|
|
|
2021-12-17 03:42:44 +08:00
|
|
|
const declaredCssVariables = new Set();
|
|
|
|
|
2021-12-01 21:15:19 +08:00
|
|
|
const locConverter = new LocConverter(source);
|
2021-12-01 20:27:00 +08:00
|
|
|
let mode = CSS_MODE_TOP_LEVEL;
|
2021-12-14 23:02:26 +08:00
|
|
|
let modeNestingLevel = 0;
|
2021-12-01 20:27:00 +08:00
|
|
|
let modeData = undefined;
|
2021-12-17 03:42:44 +08:00
|
|
|
let singleClassSelector = undefined;
|
|
|
|
let lastIdentifier = undefined;
|
2023-03-27 01:31:57 +08:00
|
|
|
let awaitRightParenthesis = false;
|
2023-04-14 06:52:50 +08:00
|
|
|
/** @type [string, number, number][] */
|
2023-04-14 04:25:46 +08:00
|
|
|
const functionStack = [];
|
|
|
|
const modeStack = [];
|
|
|
|
|
2021-12-17 03:42:44 +08:00
|
|
|
const isTopLevelLocal = () =>
|
|
|
|
modeData === "local" ||
|
|
|
|
(this.defaultMode === "local" && modeData === undefined);
|
2021-12-03 02:29:55 +08:00
|
|
|
const eatWhiteLine = (input, pos) => {
|
|
|
|
for (;;) {
|
|
|
|
const cc = input.charCodeAt(pos);
|
|
|
|
if (cc === 32 || cc === 9) {
|
|
|
|
pos++;
|
|
|
|
continue;
|
|
|
|
}
|
|
|
|
if (cc === 10) pos++;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
return pos;
|
|
|
|
};
|
2021-12-14 23:02:26 +08:00
|
|
|
const eatUntil = chars => {
|
|
|
|
const charCodes = Array.from({ length: chars.length }, (_, i) =>
|
|
|
|
chars.charCodeAt(i)
|
|
|
|
);
|
|
|
|
const arr = Array.from(
|
|
|
|
{ length: charCodes.reduce((a, b) => Math.max(a, b), 0) + 1 },
|
|
|
|
() => false
|
|
|
|
);
|
|
|
|
charCodes.forEach(cc => (arr[cc] = true));
|
|
|
|
return (input, pos) => {
|
|
|
|
for (;;) {
|
|
|
|
const cc = input.charCodeAt(pos);
|
|
|
|
if (cc < arr.length && arr[cc]) {
|
|
|
|
return pos;
|
|
|
|
}
|
|
|
|
pos++;
|
|
|
|
if (pos === input.length) return pos;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
const eatText = (input, pos, eater) => {
|
|
|
|
let text = "";
|
|
|
|
for (;;) {
|
|
|
|
if (input.charCodeAt(pos) === CC_SLASH) {
|
|
|
|
const newPos = walkCssTokens.eatComments(input, pos);
|
|
|
|
if (pos !== newPos) {
|
|
|
|
pos = newPos;
|
|
|
|
if (pos === input.length) break;
|
|
|
|
} else {
|
|
|
|
text += "/";
|
|
|
|
pos++;
|
|
|
|
if (pos === input.length) break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const newPos = eater(input, pos);
|
|
|
|
if (pos !== newPos) {
|
|
|
|
text += input.slice(pos, newPos);
|
|
|
|
pos = newPos;
|
|
|
|
} else {
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
if (pos === input.length) break;
|
|
|
|
}
|
2022-08-31 17:56:03 +08:00
|
|
|
return [pos, text.trimEnd()];
|
2021-12-14 23:02:26 +08:00
|
|
|
};
|
|
|
|
const eatExportName = eatUntil(":};/");
|
|
|
|
const eatExportValue = eatUntil("};/");
|
|
|
|
const parseExports = (input, pos) => {
|
|
|
|
pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
|
|
|
|
const cc = input.charCodeAt(pos);
|
|
|
|
if (cc !== CC_LEFT_CURLY)
|
|
|
|
throw new Error(
|
|
|
|
`Unexpected ${input[pos]} at ${pos} during parsing of ':export' (expected '{')`
|
|
|
|
);
|
|
|
|
pos++;
|
|
|
|
pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
|
|
|
|
for (;;) {
|
|
|
|
if (input.charCodeAt(pos) === CC_RIGHT_CURLY) break;
|
|
|
|
pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
|
|
|
|
if (pos === input.length) return pos;
|
|
|
|
let start = pos;
|
|
|
|
let name;
|
|
|
|
[pos, name] = eatText(input, pos, eatExportName);
|
|
|
|
if (pos === input.length) return pos;
|
|
|
|
if (input.charCodeAt(pos) !== CC_COLON) {
|
|
|
|
throw new Error(
|
|
|
|
`Unexpected ${input[pos]} at ${pos} during parsing of export name in ':export' (expected ':')`
|
|
|
|
);
|
|
|
|
}
|
|
|
|
pos++;
|
|
|
|
if (pos === input.length) return pos;
|
|
|
|
pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
|
|
|
|
if (pos === input.length) return pos;
|
|
|
|
let value;
|
|
|
|
[pos, value] = eatText(input, pos, eatExportValue);
|
|
|
|
if (pos === input.length) return pos;
|
|
|
|
const cc = input.charCodeAt(pos);
|
|
|
|
if (cc === CC_SEMICOLON) {
|
|
|
|
pos++;
|
|
|
|
if (pos === input.length) return pos;
|
|
|
|
pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
|
|
|
|
if (pos === input.length) return pos;
|
|
|
|
} else if (cc !== CC_RIGHT_CURLY) {
|
|
|
|
throw new Error(
|
|
|
|
`Unexpected ${input[pos]} at ${pos} during parsing of export value in ':export' (expected ';' or '}')`
|
|
|
|
);
|
|
|
|
}
|
|
|
|
const dep = new CssExportDependency(name, value);
|
|
|
|
const { line: sl, column: sc } = locConverter.get(start);
|
|
|
|
const { line: el, column: ec } = locConverter.get(pos);
|
|
|
|
dep.setLoc(sl, sc, el, ec);
|
|
|
|
module.addDependency(dep);
|
|
|
|
}
|
|
|
|
pos++;
|
|
|
|
if (pos === input.length) return pos;
|
|
|
|
pos = eatWhiteLine(input, pos);
|
|
|
|
return pos;
|
|
|
|
};
|
2021-12-17 03:42:44 +08:00
|
|
|
const eatPropertyName = eatUntil(":{};");
|
|
|
|
const processLocalDeclaration = (input, pos) => {
|
|
|
|
modeData = undefined;
|
|
|
|
const start = pos;
|
|
|
|
pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
|
|
|
|
const propertyNameStart = pos;
|
|
|
|
const [propertyNameEnd, propertyName] = eatText(
|
|
|
|
input,
|
|
|
|
pos,
|
|
|
|
eatPropertyName
|
|
|
|
);
|
|
|
|
if (input.charCodeAt(propertyNameEnd) !== CC_COLON) return start;
|
|
|
|
pos = propertyNameEnd + 1;
|
|
|
|
if (propertyName.startsWith("--")) {
|
|
|
|
// CSS Variable
|
|
|
|
const { line: sl, column: sc } = locConverter.get(propertyNameStart);
|
|
|
|
const { line: el, column: ec } = locConverter.get(propertyNameEnd);
|
|
|
|
const name = propertyName.slice(2);
|
|
|
|
const dep = new CssLocalIdentifierDependency(
|
|
|
|
name,
|
|
|
|
[propertyNameStart, propertyNameEnd],
|
|
|
|
"--"
|
|
|
|
);
|
|
|
|
dep.setLoc(sl, sc, el, ec);
|
|
|
|
module.addDependency(dep);
|
|
|
|
declaredCssVariables.add(name);
|
2023-04-17 00:43:06 +08:00
|
|
|
} else if (
|
|
|
|
OPTIONALLY_VENDOR_PREFIXED_ANIMATION_PROPERTY.test(propertyName)
|
|
|
|
) {
|
2021-12-17 03:42:44 +08:00
|
|
|
modeData = "animation";
|
|
|
|
lastIdentifier = undefined;
|
|
|
|
}
|
|
|
|
return pos;
|
|
|
|
};
|
|
|
|
const processDeclarationValueDone = (input, pos) => {
|
|
|
|
if (modeData === "animation" && lastIdentifier) {
|
|
|
|
const { line: sl, column: sc } = locConverter.get(lastIdentifier[0]);
|
|
|
|
const { line: el, column: ec } = locConverter.get(lastIdentifier[1]);
|
|
|
|
const name = input.slice(lastIdentifier[0], lastIdentifier[1]);
|
|
|
|
const dep = new CssSelfLocalIdentifierDependency(name, lastIdentifier);
|
|
|
|
dep.setLoc(sl, sc, el, ec);
|
|
|
|
module.addDependency(dep);
|
|
|
|
}
|
|
|
|
};
|
2022-04-14 23:33:00 +08:00
|
|
|
const eatAtRuleNested = eatUntil("{};/");
|
2021-12-17 03:42:44 +08:00
|
|
|
const eatKeyframes = eatUntil("{};/");
|
|
|
|
const eatNameInVar = eatUntil(",)};/");
|
2021-11-30 19:55:51 +08:00
|
|
|
walkCssTokens(source, {
|
2021-12-17 03:42:44 +08:00
|
|
|
isSelector: () => {
|
2023-04-25 09:17:51 +08:00
|
|
|
return (
|
|
|
|
mode !== CSS_MODE_IN_RULE &&
|
|
|
|
mode !== CSS_MODE_IN_LOCAL_RULE &&
|
|
|
|
mode !== CSS_MODE_AT_IMPORT_EXPECT_URL &&
|
|
|
|
mode !== CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA
|
|
|
|
);
|
2021-12-17 03:42:44 +08:00
|
|
|
},
|
2023-04-13 07:27:04 +08:00
|
|
|
url: (input, start, end, contentStart, contentEnd, isString) => {
|
|
|
|
let value = normalizeUrl(
|
|
|
|
input.slice(contentStart, contentEnd),
|
|
|
|
isString
|
|
|
|
);
|
2021-12-01 20:27:00 +08:00
|
|
|
switch (mode) {
|
|
|
|
case CSS_MODE_AT_IMPORT_EXPECT_URL: {
|
|
|
|
modeData.url = value;
|
2023-04-25 09:17:51 +08:00
|
|
|
modeData.lastPos = end;
|
|
|
|
mode = CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
// Do not parse URLs in `supports(...)`
|
|
|
|
case CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA: {
|
2021-12-01 20:27:00 +08:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
default: {
|
2023-04-13 06:23:57 +08:00
|
|
|
if (
|
|
|
|
// Ignore `url(#highlight)` URLs
|
|
|
|
/^#/.test(value) ||
|
|
|
|
// Ignore `url()`, `url('')` and `url("")`, they are valid by spec
|
2023-04-14 06:52:50 +08:00
|
|
|
value.length === 0
|
2023-04-13 06:23:57 +08:00
|
|
|
) {
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
2021-12-03 23:23:09 +08:00
|
|
|
const dep = new CssUrlDependency(value, [start, end], "url");
|
2021-12-01 21:15:19 +08:00
|
|
|
const { line: sl, column: sc } = locConverter.get(start);
|
|
|
|
const { line: el, column: ec } = locConverter.get(end);
|
|
|
|
dep.setLoc(sl, sc, el, ec);
|
2021-12-01 20:27:00 +08:00
|
|
|
module.addDependency(dep);
|
|
|
|
module.addCodeGenerationDependency(dep);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return end;
|
|
|
|
},
|
|
|
|
string: (input, start, end) => {
|
|
|
|
switch (mode) {
|
|
|
|
case CSS_MODE_AT_IMPORT_EXPECT_URL: {
|
2023-04-13 07:27:04 +08:00
|
|
|
modeData.url = normalizeUrl(input.slice(start + 1, end - 1), true);
|
2023-04-25 09:17:51 +08:00
|
|
|
modeData.lastPos = end;
|
|
|
|
const insideURLFunction =
|
|
|
|
functionStack[functionStack.length - 1] &&
|
|
|
|
functionStack[functionStack.length - 1][0] === "url";
|
|
|
|
|
|
|
|
if (!insideURLFunction) {
|
|
|
|
mode = CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA;
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
// Do not parse URLs in `supports(...)`
|
|
|
|
case CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA: {
|
2021-12-01 20:27:00 +08:00
|
|
|
break;
|
|
|
|
}
|
2023-04-14 06:52:50 +08:00
|
|
|
default: {
|
2023-04-14 07:35:53 +08:00
|
|
|
// TODO move escaped parsing to tokenizer
|
2023-04-14 06:52:50 +08:00
|
|
|
const lastFunction = functionStack[functionStack.length - 1];
|
|
|
|
|
2023-04-14 04:25:46 +08:00
|
|
|
if (
|
2023-04-14 06:52:50 +08:00
|
|
|
lastFunction &&
|
2023-04-14 07:35:53 +08:00
|
|
|
(lastFunction[0].replace(/\\/g, "").toLowerCase() === "url" ||
|
2023-04-15 00:19:27 +08:00
|
|
|
IMAGE_SET_FUNCTION.test(lastFunction[0].replace(/\\/g, "")))
|
2023-04-14 04:25:46 +08:00
|
|
|
) {
|
|
|
|
let value = normalizeUrl(input.slice(start + 1, end - 1), true);
|
|
|
|
|
|
|
|
if (
|
|
|
|
// Ignore `url(#highlight)` URLs
|
|
|
|
/^#/.test(value) ||
|
|
|
|
// Ignore `url()`, `url('')` and `url("")`, they are valid by spec
|
2023-04-14 06:52:50 +08:00
|
|
|
value.length === 0
|
2023-04-14 04:25:46 +08:00
|
|
|
) {
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
2023-04-14 07:35:53 +08:00
|
|
|
const isUrl =
|
|
|
|
lastFunction[0].replace(/\\/g, "").toLowerCase() === "url";
|
2023-04-14 06:52:50 +08:00
|
|
|
const dep = new CssUrlDependency(
|
|
|
|
value,
|
|
|
|
[start, end],
|
|
|
|
isUrl ? "string" : "url"
|
|
|
|
);
|
2023-04-14 04:25:46 +08:00
|
|
|
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);
|
|
|
|
}
|
|
|
|
}
|
2021-12-01 20:27:00 +08:00
|
|
|
}
|
|
|
|
return end;
|
|
|
|
},
|
|
|
|
atKeyword: (input, start, end) => {
|
2023-04-06 04:06:29 +08:00
|
|
|
const name = input.slice(start, end).toLowerCase();
|
2021-12-01 20:27:00 +08:00
|
|
|
if (name === "@namespace") {
|
|
|
|
throw new Error("@namespace is not supported in bundled CSS");
|
|
|
|
}
|
|
|
|
if (name === "@import") {
|
2021-12-17 04:07:22 +08:00
|
|
|
if (mode !== CSS_MODE_TOP_LEVEL) {
|
|
|
|
throw new Error(
|
|
|
|
`Unexpected @import at ${start} during ${explainMode(mode)}`
|
|
|
|
);
|
|
|
|
}
|
2021-12-01 20:27:00 +08:00
|
|
|
mode = CSS_MODE_AT_IMPORT_EXPECT_URL;
|
|
|
|
modeData = {
|
2023-04-25 09:17:51 +08:00
|
|
|
atRuleStart: start,
|
|
|
|
lastPos: end,
|
2021-12-01 20:27:00 +08:00
|
|
|
url: undefined,
|
2023-04-25 09:17:51 +08:00
|
|
|
layer: undefined,
|
|
|
|
supports: undefined,
|
|
|
|
media: undefined
|
2021-12-01 20:27:00 +08:00
|
|
|
};
|
|
|
|
}
|
2023-04-17 00:43:06 +08:00
|
|
|
if (OPTIONALLY_VENDOR_PREFIXED_KEYFRAMES_AT_RULE.test(name)) {
|
2021-12-17 03:42:44 +08:00
|
|
|
let pos = end;
|
|
|
|
pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
|
|
|
|
if (pos === input.length) return pos;
|
|
|
|
const [newPos, name] = eatText(input, pos, eatKeyframes);
|
|
|
|
const { line: sl, column: sc } = locConverter.get(pos);
|
|
|
|
const { line: el, column: ec } = locConverter.get(newPos);
|
|
|
|
const dep = new CssLocalIdentifierDependency(name, [pos, newPos]);
|
|
|
|
dep.setLoc(sl, sc, el, ec);
|
|
|
|
module.addDependency(dep);
|
|
|
|
pos = newPos;
|
|
|
|
if (pos === input.length) return pos;
|
|
|
|
if (input.charCodeAt(pos) !== CC_LEFT_CURLY) {
|
|
|
|
throw new Error(
|
|
|
|
`Unexpected ${input[pos]} at ${pos} during parsing of @keyframes (expected '{')`
|
|
|
|
);
|
|
|
|
}
|
|
|
|
mode = CSS_MODE_IN_LOCAL_RULE;
|
|
|
|
modeNestingLevel = 1;
|
|
|
|
return pos + 1;
|
|
|
|
}
|
2022-04-14 23:33:00 +08:00
|
|
|
if (name === "@media" || name === "@supports") {
|
|
|
|
let pos = end;
|
|
|
|
const [newPos] = eatText(input, pos, eatAtRuleNested);
|
|
|
|
pos = newPos;
|
|
|
|
if (pos === input.length) return pos;
|
|
|
|
if (input.charCodeAt(pos) !== CC_LEFT_CURLY) {
|
|
|
|
throw new Error(
|
|
|
|
`Unexpected ${input[pos]} at ${pos} during parsing of @media or @supports (expected '{')`
|
|
|
|
);
|
|
|
|
}
|
|
|
|
return pos + 1;
|
|
|
|
}
|
2021-12-01 20:27:00 +08:00
|
|
|
return end;
|
|
|
|
},
|
|
|
|
semicolon: (input, start, end) => {
|
|
|
|
switch (mode) {
|
|
|
|
case CSS_MODE_AT_IMPORT_EXPECT_URL:
|
|
|
|
throw new Error(`Expected URL for @import at ${start}`);
|
2023-04-25 09:17:51 +08:00
|
|
|
case CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA: {
|
2023-04-26 04:31:35 +08:00
|
|
|
if (modeData.url === undefined) {
|
|
|
|
throw new Error(
|
|
|
|
`Expected URL for @import at ${modeData.atRuleStart}`
|
|
|
|
);
|
|
|
|
}
|
2023-04-25 09:17:51 +08:00
|
|
|
const semicolonPos = end;
|
|
|
|
const { line: sl, column: sc } = locConverter.get(
|
|
|
|
modeData.atRuleStart
|
|
|
|
);
|
2021-12-03 02:29:55 +08:00
|
|
|
const { line: el, column: ec } = locConverter.get(end);
|
2023-04-25 09:17:51 +08:00
|
|
|
// Consume extra line to avoid multiple `\n` in the middle of the file
|
2021-12-03 02:29:55 +08:00
|
|
|
end = eatWhiteLine(input, end);
|
2023-04-25 09:17:51 +08:00
|
|
|
modeData.media = input
|
|
|
|
.slice(modeData.lastPos, semicolonPos - 1)
|
|
|
|
.trim();
|
2021-12-01 20:27:00 +08:00
|
|
|
const dep = new CssImportDependency(
|
2023-04-26 04:31:35 +08:00
|
|
|
modeData.url.trim(),
|
2021-12-01 20:27:00 +08:00
|
|
|
[modeData.start, end],
|
2023-04-25 09:17:51 +08:00
|
|
|
modeData.layer,
|
2021-12-01 20:27:00 +08:00
|
|
|
modeData.supports,
|
2023-04-25 20:49:16 +08:00
|
|
|
modeData.media.length > 0 ? modeData.media : undefined
|
2021-12-01 20:27:00 +08:00
|
|
|
);
|
2021-12-01 21:15:19 +08:00
|
|
|
dep.setLoc(sl, sc, el, ec);
|
2021-12-01 20:27:00 +08:00
|
|
|
module.addDependency(dep);
|
2023-04-26 04:31:35 +08:00
|
|
|
modeData = undefined;
|
2023-04-25 09:17:51 +08:00
|
|
|
mode = CSS_MODE_TOP_LEVEL;
|
2021-12-01 20:27:00 +08:00
|
|
|
break;
|
|
|
|
}
|
2021-12-17 03:42:44 +08:00
|
|
|
case CSS_MODE_IN_LOCAL_RULE: {
|
|
|
|
processDeclarationValueDone(input, start);
|
|
|
|
return processLocalDeclaration(input, end);
|
|
|
|
}
|
|
|
|
case CSS_MODE_IN_RULE: {
|
|
|
|
return end;
|
|
|
|
}
|
2021-12-01 20:27:00 +08:00
|
|
|
}
|
2021-12-03 02:29:55 +08:00
|
|
|
mode = CSS_MODE_TOP_LEVEL;
|
2021-12-01 20:27:00 +08:00
|
|
|
modeData = undefined;
|
2021-12-17 03:42:44 +08:00
|
|
|
singleClassSelector = undefined;
|
2021-11-30 19:55:51 +08:00
|
|
|
return end;
|
2021-12-14 23:02:26 +08:00
|
|
|
},
|
|
|
|
leftCurlyBracket: (input, start, end) => {
|
|
|
|
switch (mode) {
|
|
|
|
case CSS_MODE_TOP_LEVEL:
|
2021-12-17 03:42:44 +08:00
|
|
|
mode = isTopLevelLocal()
|
|
|
|
? CSS_MODE_IN_LOCAL_RULE
|
|
|
|
: CSS_MODE_IN_RULE;
|
2021-12-14 23:02:26 +08:00
|
|
|
modeNestingLevel = 1;
|
2021-12-17 03:42:44 +08:00
|
|
|
if (mode === CSS_MODE_IN_LOCAL_RULE)
|
|
|
|
return processLocalDeclaration(input, end);
|
2021-12-14 23:02:26 +08:00
|
|
|
break;
|
|
|
|
case CSS_MODE_IN_RULE:
|
2021-12-17 03:42:44 +08:00
|
|
|
case CSS_MODE_IN_LOCAL_RULE:
|
2021-12-14 23:02:26 +08:00
|
|
|
modeNestingLevel++;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
return end;
|
|
|
|
},
|
|
|
|
rightCurlyBracket: (input, start, end) => {
|
|
|
|
switch (mode) {
|
2021-12-17 03:42:44 +08:00
|
|
|
case CSS_MODE_IN_LOCAL_RULE:
|
|
|
|
processDeclarationValueDone(input, start);
|
|
|
|
/* falls through */
|
2021-12-14 23:02:26 +08:00
|
|
|
case CSS_MODE_IN_RULE:
|
|
|
|
if (--modeNestingLevel === 0) {
|
|
|
|
mode = CSS_MODE_TOP_LEVEL;
|
2021-12-17 03:42:44 +08:00
|
|
|
modeData = undefined;
|
|
|
|
singleClassSelector = undefined;
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
return end;
|
|
|
|
},
|
|
|
|
id: (input, start, end) => {
|
|
|
|
singleClassSelector = false;
|
|
|
|
switch (mode) {
|
|
|
|
case CSS_MODE_TOP_LEVEL:
|
|
|
|
if (isTopLevelLocal()) {
|
|
|
|
const name = input.slice(start + 1, end);
|
|
|
|
const dep = new CssLocalIdentifierDependency(name, [
|
|
|
|
start + 1,
|
|
|
|
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);
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
return end;
|
|
|
|
},
|
|
|
|
identifier: (input, start, end) => {
|
|
|
|
singleClassSelector = false;
|
|
|
|
switch (mode) {
|
|
|
|
case CSS_MODE_IN_LOCAL_RULE:
|
|
|
|
if (modeData === "animation") {
|
|
|
|
lastIdentifier = [start, end];
|
2021-12-14 23:02:26 +08:00
|
|
|
}
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
return end;
|
|
|
|
},
|
2021-12-15 15:34:31 +08:00
|
|
|
class: (input, start, end) => {
|
|
|
|
switch (mode) {
|
|
|
|
case CSS_MODE_TOP_LEVEL: {
|
2021-12-17 03:42:44 +08:00
|
|
|
if (isTopLevelLocal()) {
|
|
|
|
const name = input.slice(start + 1, end);
|
|
|
|
const dep = new CssLocalIdentifierDependency(name, [
|
|
|
|
start + 1,
|
|
|
|
end
|
|
|
|
]);
|
2021-12-15 15:34:31 +08:00
|
|
|
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);
|
2021-12-17 03:42:44 +08:00
|
|
|
if (singleClassSelector === undefined) singleClassSelector = name;
|
|
|
|
} else {
|
|
|
|
singleClassSelector = false;
|
2021-12-15 15:34:31 +08:00
|
|
|
}
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return end;
|
|
|
|
},
|
2023-04-25 09:17:51 +08:00
|
|
|
function: (input, start, end) => {
|
|
|
|
let name = input.slice(start, end - 1);
|
|
|
|
|
|
|
|
functionStack.push([name, start, end]);
|
|
|
|
|
|
|
|
switch (mode) {
|
|
|
|
case CSS_MODE_IN_LOCAL_RULE: {
|
|
|
|
name = name.toLowerCase();
|
|
|
|
|
|
|
|
if (name === "var") {
|
|
|
|
let pos = walkCssTokens.eatWhitespaceAndComments(input, end);
|
|
|
|
if (pos === input.length) return pos;
|
|
|
|
const [newPos, name] = eatText(input, pos, eatNameInVar);
|
|
|
|
if (!name.startsWith("--")) return end;
|
|
|
|
const { line: sl, column: sc } = locConverter.get(pos);
|
|
|
|
const { line: el, column: ec } = locConverter.get(newPos);
|
|
|
|
const dep = new CssSelfLocalIdentifierDependency(
|
|
|
|
name.slice(2),
|
|
|
|
[pos, newPos],
|
|
|
|
"--",
|
|
|
|
declaredCssVariables
|
|
|
|
);
|
|
|
|
dep.setLoc(sl, sc, el, ec);
|
|
|
|
module.addDependency(dep);
|
|
|
|
return newPos;
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return end;
|
|
|
|
},
|
2021-12-14 23:02:26 +08:00
|
|
|
leftParenthesis: (input, start, end) => {
|
2021-12-15 16:03:06 +08:00
|
|
|
switch (mode) {
|
|
|
|
case CSS_MODE_TOP_LEVEL: {
|
|
|
|
modeStack.push(false);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
2021-12-14 23:02:26 +08:00
|
|
|
return end;
|
|
|
|
},
|
|
|
|
rightParenthesis: (input, start, end) => {
|
2023-04-25 09:17:51 +08:00
|
|
|
const lastFunction = functionStack[functionStack.length - 1];
|
|
|
|
|
2023-04-14 06:52:50 +08:00
|
|
|
functionStack.pop();
|
|
|
|
|
2021-12-15 16:03:06 +08:00
|
|
|
switch (mode) {
|
|
|
|
case CSS_MODE_TOP_LEVEL: {
|
2023-03-27 01:31:57 +08:00
|
|
|
if (awaitRightParenthesis) {
|
|
|
|
awaitRightParenthesis = false;
|
|
|
|
}
|
2021-12-15 16:03:06 +08:00
|
|
|
const newModeData = modeStack.pop();
|
|
|
|
if (newModeData !== false) {
|
|
|
|
modeData = newModeData;
|
|
|
|
const dep = new ConstDependency("", [start, end]);
|
|
|
|
module.addPresentationalDependency(dep);
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
}
|
2023-04-25 09:17:51 +08:00
|
|
|
case CSS_MODE_AT_IMPORT_EXPECT_URL: {
|
|
|
|
if (lastFunction && lastFunction[0] === "url") {
|
|
|
|
modeData.lastPos = end;
|
|
|
|
mode = CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA;
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
case CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA: {
|
|
|
|
if (lastFunction && lastFunction[0] === "layer") {
|
|
|
|
modeData.layer = input.slice(lastFunction[2], end - 1).trim();
|
|
|
|
modeData.lastPos = end;
|
|
|
|
} else if (lastFunction && lastFunction[0] === "supports") {
|
|
|
|
modeData.supports = input.slice(lastFunction[2], end - 1).trim();
|
|
|
|
modeData.lastPos = end;
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
}
|
2021-12-15 16:03:06 +08:00
|
|
|
}
|
2023-04-14 04:25:46 +08:00
|
|
|
|
2021-12-14 23:02:26 +08:00
|
|
|
return end;
|
|
|
|
},
|
|
|
|
pseudoClass: (input, start, end) => {
|
2021-12-17 03:42:44 +08:00
|
|
|
singleClassSelector = false;
|
2021-12-14 23:02:26 +08:00
|
|
|
switch (mode) {
|
|
|
|
case CSS_MODE_TOP_LEVEL: {
|
2023-04-06 07:09:08 +08:00
|
|
|
const name = input.slice(start, end).toLowerCase();
|
2021-12-15 15:34:31 +08:00
|
|
|
if (this.allowModeSwitch && name === ":global") {
|
|
|
|
modeData = "global";
|
2021-12-15 16:03:06 +08:00
|
|
|
const dep = new ConstDependency("", [start, end]);
|
|
|
|
module.addPresentationalDependency(dep);
|
2021-12-15 15:34:31 +08:00
|
|
|
} else if (this.allowModeSwitch && name === ":local") {
|
|
|
|
modeData = "local";
|
2021-12-15 16:03:06 +08:00
|
|
|
const dep = new ConstDependency("", [start, end]);
|
|
|
|
module.addPresentationalDependency(dep);
|
2021-12-15 15:34:31 +08:00
|
|
|
} else if (this.allowPseudoBlocks && name === ":export") {
|
|
|
|
const pos = parseExports(input, end);
|
|
|
|
const dep = new ConstDependency("", [start, pos]);
|
|
|
|
module.addPresentationalDependency(dep);
|
|
|
|
return pos;
|
2021-12-14 23:02:26 +08:00
|
|
|
}
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return end;
|
|
|
|
},
|
2021-12-15 15:34:31 +08:00
|
|
|
pseudoFunction: (input, start, end) => {
|
2023-04-14 06:52:50 +08:00
|
|
|
let name = input.slice(start, end - 1);
|
|
|
|
|
|
|
|
functionStack.push([name, start, end]);
|
|
|
|
|
2021-12-15 15:34:31 +08:00
|
|
|
switch (mode) {
|
|
|
|
case CSS_MODE_TOP_LEVEL: {
|
2023-04-14 06:52:50 +08:00
|
|
|
name = name.toLowerCase();
|
|
|
|
|
2021-12-15 16:03:06 +08:00
|
|
|
if (this.allowModeSwitch && name === ":global") {
|
|
|
|
modeStack.push(modeData);
|
|
|
|
modeData = "global";
|
|
|
|
const dep = new ConstDependency("", [start, end]);
|
|
|
|
module.addPresentationalDependency(dep);
|
|
|
|
} else if (this.allowModeSwitch && name === ":local") {
|
|
|
|
modeStack.push(modeData);
|
|
|
|
modeData = "local";
|
|
|
|
const dep = new ConstDependency("", [start, end]);
|
|
|
|
module.addPresentationalDependency(dep);
|
|
|
|
} else {
|
2023-04-01 19:44:24 +08:00
|
|
|
awaitRightParenthesis = true;
|
2021-12-15 16:03:06 +08:00
|
|
|
modeStack.push(false);
|
|
|
|
}
|
2021-12-15 15:34:31 +08:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return end;
|
|
|
|
},
|
2021-12-14 23:02:26 +08:00
|
|
|
comma: (input, start, end) => {
|
|
|
|
switch (mode) {
|
|
|
|
case CSS_MODE_TOP_LEVEL:
|
2023-03-27 01:31:57 +08:00
|
|
|
if (!awaitRightParenthesis) {
|
|
|
|
modeData = undefined;
|
|
|
|
modeStack.length = 0;
|
|
|
|
}
|
2021-12-14 23:02:26 +08:00
|
|
|
break;
|
2021-12-17 03:42:44 +08:00
|
|
|
case CSS_MODE_IN_LOCAL_RULE:
|
|
|
|
processDeclarationValueDone(input, start);
|
|
|
|
break;
|
2021-12-14 23:02:26 +08:00
|
|
|
}
|
|
|
|
return end;
|
2021-11-30 19:55:51 +08:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
module.buildInfo.strict = true;
|
2021-12-01 16:50:13 +08:00
|
|
|
module.buildMeta.exportsType = "namespace";
|
|
|
|
module.addDependency(new StaticExportsDependency([], true));
|
2021-11-30 19:55:51 +08:00
|
|
|
return state;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
module.exports = CssParser;
|