@lwc/style-compiler 2.45.1 → 2.45.3

package/dist/index.js

@@ -0,0 +1,906 @@
+/**
+ * Copyright (C) 2023 salesforce.com, inc.
+ */
+import postcss from 'postcss';
+import postcssValueParser from 'postcss-value-parser';
+import matchAll from 'string.prototype.matchall';
+import { LWC_VERSION_COMMENT, KEY__SCOPED_CSS } from '@lwc/shared';
+import postCssSelector, { isPseudoClass, isCombinator, isPseudoElement, attribute, combinator } from 'postcss-selector-parser';
+
+const PLUGIN_NAME = '@lwc/style-compiler';
+const IMPORT_TYPE = 'import';
+const VAR_FUNCTION_TYPE = 'var-function';
+function importMessage(id) {
+    return {
+        plugin: PLUGIN_NAME,
+        type: IMPORT_TYPE,
+        id,
+    };
+}
+function isImportMessage(message) {
+    return message.type === IMPORT_TYPE && message.id;
+}
+function varFunctionMessage(original) {
+    return {
+        plugin: PLUGIN_NAME,
+        type: VAR_FUNCTION_TYPE,
+        original,
+    };
+}
+function isVarFunctionMessage(message) {
+    return message.type === VAR_FUNCTION_TYPE && message.original;
+}
+
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+const HOST_ATTRIBUTE = '__hostAttribute__';
+const SHADOW_ATTRIBUTE = '__shadowAttribute__';
+
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+const DIR_ATTRIBUTE_NATIVE_LTR = `__dirAttributeNativeLtr__`;
+const DIR_ATTRIBUTE_NATIVE_RTL = `__dirAttributeNativeRtl__`;
+const DIR_ATTRIBUTE_SYNTHETIC_LTR = `__dirAttributeSyntheticLtr__`;
+const DIR_ATTRIBUTE_SYNTHETIC_RTL = `__dirAttributeSyntheticRtl__`;
+
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+var TokenType;
+(function (TokenType) {
+    TokenType["text"] = "text";
+    TokenType["expression"] = "expression";
+    TokenType["identifier"] = "identifier";
+    TokenType["divider"] = "divider";
+})(TokenType || (TokenType = {}));
+// "1400 binary expressions are enough to reach Node.js maximum call stack size"
+// https://github.com/salesforce/lwc/issues/1726
+// The vast majority of stylesheet functions are much less than this, so we can set the limit lower
+// to play it safe.
+const BINARY_EXPRESSION_LIMIT = 100;
+// Javascript identifiers used for the generation of the style module
+const HOST_SELECTOR_IDENTIFIER = 'hostSelector';
+const SHADOW_SELECTOR_IDENTIFIER = 'shadowSelector';
+const SUFFIX_TOKEN_IDENTIFIER = 'suffixToken';
+const USE_ACTUAL_HOST_SELECTOR = 'useActualHostSelector';
+const USE_NATIVE_DIR_PSEUDOCLASS = 'useNativeDirPseudoclass';
+const TOKEN = 'token';
+const STYLESHEET_IDENTIFIER = 'stylesheet';
+const VAR_RESOLVER_IDENTIFIER = 'varResolver';
+function serialize(result, config) {
+    const { messages } = result;
+    const collectVarFunctions = Boolean(config.customProperties && config.customProperties.resolverModule);
+    const useVarResolver = messages.some(isVarFunctionMessage);
+    const importedStylesheets = messages.filter(isImportMessage).map((message) => message.id);
+    const disableSyntheticShadow = Boolean(config.disableSyntheticShadowSupport);
+    const scoped = Boolean(config.scoped);
+    let buffer = '';
+    if (collectVarFunctions && useVarResolver) {
+        buffer += `import ${VAR_RESOLVER_IDENTIFIER} from "${config.customProperties
+            .resolverModule}";\n`;
+    }
+    for (let i = 0; i < importedStylesheets.length; i++) {
+        buffer += `import ${STYLESHEET_IDENTIFIER + i} from "${importedStylesheets[i]}";\n`;
+    }
+    if (importedStylesheets.length) {
+        buffer += '\n';
+    }
+    const stylesheetList = importedStylesheets.map((_str, i) => `${STYLESHEET_IDENTIFIER + i}`);
+    const serializedStyle = serializeCss(result, collectVarFunctions).trim();
+    if (serializedStyle) {
+        // inline function
+        if (disableSyntheticShadow && !scoped) {
+            // If synthetic shadow DOM support is disabled and this is not a scoped stylesheet, then the
+            // function signature will always be:
+            //   stylesheet(token = undefined, useActualHostSelector = true, useNativeDirPseudoclass = true)
+            // This means that we can just have a function that takes no arguments and returns a string,
+            // reducing the bundle size when minified.
+            buffer += `function ${STYLESHEET_IDENTIFIER}() {\n`;
+            buffer += `  var ${TOKEN};\n`; // undefined
+            buffer += `  var ${USE_ACTUAL_HOST_SELECTOR} = true;\n`;
+            buffer += `  var ${USE_NATIVE_DIR_PSEUDOCLASS} = true;\n`;
+        }
+        else {
+            buffer += `function ${STYLESHEET_IDENTIFIER}(${TOKEN}, ${USE_ACTUAL_HOST_SELECTOR}, ${USE_NATIVE_DIR_PSEUDOCLASS}) {\n`;
+        }
+        // For scoped stylesheets, we use classes, but for synthetic shadow DOM, we use attributes
+        if (scoped) {
+            buffer += `  var ${SHADOW_SELECTOR_IDENTIFIER} = ${TOKEN} ? ("." + ${TOKEN}) : "";\n`;
+            buffer += `  var ${HOST_SELECTOR_IDENTIFIER} = ${TOKEN} ? ("." + ${TOKEN} + "-host") : "";\n`;
+        }
+        else {
+            buffer += `  var ${SHADOW_SELECTOR_IDENTIFIER} = ${TOKEN} ? ("[" + ${TOKEN} + "]") : "";\n`;
+            buffer += `  var ${HOST_SELECTOR_IDENTIFIER} = ${TOKEN} ? ("[" + ${TOKEN} + "-host]") : "";\n`;
+        }
+        // Used for keyframes
+        buffer += `  var ${SUFFIX_TOKEN_IDENTIFIER} = ${TOKEN} ? ("-" + ${TOKEN}) : "";\n`;
+        buffer += `  return ${serializedStyle};\n`;
+        buffer += `  /*${LWC_VERSION_COMMENT}*/\n`;
+        buffer += `}\n`;
+        if (scoped) {
+            // Mark the stylesheet as scoped so that we can distinguish it later at runtime
+            buffer += `${STYLESHEET_IDENTIFIER}.${KEY__SCOPED_CSS} = true;\n`;
+        }
+        // add import at the end
+        stylesheetList.push(STYLESHEET_IDENTIFIER);
+    }
+    // exports
+    if (stylesheetList.length) {
+        buffer += `export default [${stylesheetList.join(', ')}];`;
+    }
+    else {
+        buffer += `export default undefined;`;
+    }
+    return buffer;
+}
+function reduceTokens(tokens) {
+    return [{ type: TokenType.text, value: '' }, ...tokens, { type: TokenType.text, value: '' }]
+        .reduce((acc, token) => {
+        const prev = acc[acc.length - 1];
+        if (token.type === TokenType.text && prev && prev.type === TokenType.text) {
+            // clone the previous token to avoid mutating it in-place
+            acc[acc.length - 1] = {
+                type: prev.type,
+                value: prev.value + token.value,
+            };
+            return acc;
+        }
+        else {
+            return [...acc, token];
+        }
+    }, [])
+        .filter((t) => t.value !== '');
+}
+function normalizeString(str) {
+    return str.replace(/(\r\n\t|\n|\r\t)/gm, '').trim();
+}
+function generateExpressionFromTokens(tokens) {
+    const serializedTokens = reduceTokens(tokens).map(({ type, value }) => {
+        switch (type) {
+            // Note that we don't expect to get a TokenType.divider here. It should be converted into an
+            // expression elsewhere.
+            case TokenType.text:
+                return JSON.stringify(value);
+            // Expressions may be concatenated with " + ", in which case we must remove ambiguity
+            case TokenType.expression:
+                return `(${value})`;
+            default:
+                return value;
+        }
+    });
+    if (serializedTokens.length === 0) {
+        return '';
+    }
+    else if (serializedTokens.length === 1) {
+        return serializedTokens[0];
+    }
+    else if (serializedTokens.length < BINARY_EXPRESSION_LIMIT) {
+        return serializedTokens.join(' + ');
+    }
+    else {
+        // #1726 Using Array.prototype.join() instead of a standard "+" operator to concatenate the
+        // string to avoid running into a maximum call stack error when the stylesheet is parsed
+        // again by the bundler.
+        return `[${serializedTokens.join(', ')}].join('')`;
+    }
+}
+function areTokensEqual(left, right) {
+    return left.type === right.type && left.value === right.value;
+}
+function calculateNumDuplicatedTokens(left, right) {
+    // Walk backwards until we find a token that is different between left and right
+    let i = 0;
+    for (; i < left.length && i < right.length; i++) {
+        const currentLeft = left[left.length - 1 - i];
+        const currentRight = right[right.length - 1 - i];
+        if (!areTokensEqual(currentLeft, currentRight)) {
+            break;
+        }
+    }
+    return i;
+}
+// For `:host` selectors, the token lists for native vs synthetic will be identical at the end of
+// each list. So as an optimization, we can de-dup these tokens.
+// See: https://github.com/salesforce/lwc/issues/3224#issuecomment-1353520052
+function deduplicateHostTokens(nativeHostTokens, syntheticHostTokens) {
+    const numDuplicatedTokens = calculateNumDuplicatedTokens(nativeHostTokens, syntheticHostTokens);
+    const numUniqueNativeTokens = nativeHostTokens.length - numDuplicatedTokens;
+    const numUniqueSyntheticTokens = syntheticHostTokens.length - numDuplicatedTokens;
+    const uniqueNativeTokens = nativeHostTokens.slice(0, numUniqueNativeTokens);
+    const uniqueSyntheticTokens = syntheticHostTokens.slice(0, numUniqueSyntheticTokens);
+    const nativeExpression = generateExpressionFromTokens(uniqueNativeTokens);
+    const syntheticExpression = generateExpressionFromTokens(uniqueSyntheticTokens);
+    // Generate a conditional ternary to switch between native vs synthetic for the unique tokens
+    const conditionalToken = {
+        type: TokenType.expression,
+        value: `(${USE_ACTUAL_HOST_SELECTOR} ? ${nativeExpression} : ${syntheticExpression})`,
+    };
+    return [
+        conditionalToken,
+        // The remaining tokens are the same between native and synthetic
+        ...syntheticHostTokens.slice(numUniqueSyntheticTokens),
+    ];
+}
+function serializeCss(result, collectVarFunctions) {
+    const tokens = [];
+    let currentRuleTokens = [];
+    let nativeHostTokens;
+    // Walk though all nodes in the CSS...
+    postcss.stringify(result.root, (part, node, nodePosition) => {
+        // When consuming the beginning of a rule, first we tokenize the selector
+        if (node && node.type === 'rule' && nodePosition === 'start') {
+            currentRuleTokens.push(...tokenizeCss(normalizeString(part)));
+            // When consuming the end of a rule we normalize it and produce a new one
+        }
+        else if (node && node.type === 'rule' && nodePosition === 'end') {
+            currentRuleTokens.push({ type: TokenType.text, value: part });
+            // If we are in synthetic shadow or scoped light DOM, we don't want to have native :host selectors
+            // Note that postcss-lwc-plugin should ensure that _isNativeHost appears before _isSyntheticHost
+            if (node._isNativeHost) {
+                // Save native tokens so in the next rule we can apply a conditional ternary
+                nativeHostTokens = [...currentRuleTokens];
+            }
+            else if (node._isSyntheticHost) {
+                /* istanbul ignore if */
+                if (!nativeHostTokens) {
+                    throw new Error('Unexpected host rules ordering');
+                }
+                const hostTokens = deduplicateHostTokens(nativeHostTokens, currentRuleTokens);
+                tokens.push(...hostTokens);
+                nativeHostTokens = undefined;
+            }
+            else {
+                /* istanbul ignore if */
+                if (nativeHostTokens) {
+                    throw new Error('Unexpected host rules ordering');
+                }
+                tokens.push(...currentRuleTokens);
+            }
+            // Reset rule
+            currentRuleTokens = [];
+            // When inside a declaration, tokenize it and push it to the current token list
+        }
+        else if (node && node.type === 'decl') {
+            if (collectVarFunctions) {
+                const declTokens = tokenizeCssDeclaration(node);
+                currentRuleTokens.push(...declTokens);
+                currentRuleTokens.push({ type: TokenType.text, value: ';' });
+            }
+            else {
+                currentRuleTokens.push(...tokenizeCss(part));
+            }
+        }
+        else if (node && node.type === 'atrule') {
+            // Certain atrules have declaration associated with for example @font-face. We need to add the rules tokens
+            // when it's the case.
+            if (currentRuleTokens.length) {
+                tokens.push(...currentRuleTokens);
+                currentRuleTokens = [];
+            }
+            tokens.push(...tokenizeCss(normalizeString(part)));
+        }
+        else {
+            // When inside anything else but a comment just push it
+            if (!node || node.type !== 'comment') {
+                currentRuleTokens.push({ type: TokenType.text, value: normalizeString(part) });
+            }
+        }
+    });
+    return generateExpressionFromTokens(tokens);
+}
+// Given any CSS string, replace the scope tokens from the CSS with code to properly
+// replace it in the stylesheet function.
+function tokenizeCss(data) {
+    data = data.replace(/( {2,})/gm, ' '); // remove when there are more than two spaces
+    const tokens = [];
+    const attributes = [
+        SHADOW_ATTRIBUTE,
+        HOST_ATTRIBUTE,
+        DIR_ATTRIBUTE_NATIVE_LTR,
+        DIR_ATTRIBUTE_NATIVE_RTL,
+        DIR_ATTRIBUTE_SYNTHETIC_LTR,
+        DIR_ATTRIBUTE_SYNTHETIC_RTL,
+    ];
+    const regex = new RegExp(`[[-](${attributes.join('|')})]?`, 'g');
+    let lastIndex = 0;
+    for (const match of matchAll(data, regex)) {
+        const index = match.index;
+        const [matchString, substring] = match;
+        if (index > lastIndex) {
+            tokens.push({ type: TokenType.text, value: data.substring(lastIndex, index) });
+        }
+        const identifier = substring === SHADOW_ATTRIBUTE ? SHADOW_SELECTOR_IDENTIFIER : HOST_SELECTOR_IDENTIFIER;
+        if (matchString.startsWith('[')) {
+            if (substring === SHADOW_ATTRIBUTE || substring === HOST_ATTRIBUTE) {
+                // attribute in a selector, e.g. `[__shadowAttribute__]` or `[__hostAttribute__]`
+                tokens.push({
+                    type: TokenType.identifier,
+                    value: identifier,
+                });
+            }
+            else {
+                // :dir pseudoclass placeholder, e.g. `[__dirAttributeNativeLtr__]` or `[__dirAttributeSyntheticRtl__]`
+                const native = substring === DIR_ATTRIBUTE_NATIVE_LTR ||
+                    substring === DIR_ATTRIBUTE_NATIVE_RTL;
+                const dirValue = substring === DIR_ATTRIBUTE_NATIVE_LTR ||
+                    substring === DIR_ATTRIBUTE_SYNTHETIC_LTR
+                    ? 'ltr'
+                    : 'rtl';
+                tokens.push({
+                    type: TokenType.expression,
+                    // use the native :dir() pseudoclass for native shadow, the [dir] attribute otherwise
+                    value: native
+                        ? `${USE_NATIVE_DIR_PSEUDOCLASS} ? ':dir(${dirValue})' : ''`
+                        : `${USE_NATIVE_DIR_PSEUDOCLASS} ? '' : '[dir="${dirValue}"]'`,
+                });
+            }
+        }
+        else {
+            // suffix for an at-rule, e.g. `@keyframes spin-__shadowAttribute__`
+            tokens.push({
+                type: TokenType.identifier,
+                // Suffix the keyframe (i.e. "-" plus the token)
+                value: SUFFIX_TOKEN_IDENTIFIER,
+            });
+        }
+        lastIndex = index + matchString.length;
+    }
+    if (lastIndex < data.length) {
+        tokens.push({ type: TokenType.text, value: data.substring(lastIndex, data.length) });
+    }
+    return tokens;
+}
+function isTextOrExpression(token) {
+    return token.type === TokenType.text || token.type == TokenType.expression;
+}
+/*
+ * This method takes a tokenized CSS property value `1px solid var(--foo , bar)`
+ * and transforms its custom variables in function calls
+ */
+function recursiveValueParse(node, inVarExpression = false) {
+    const { type, nodes, value } = node;
+    // If it has not type it means is the root, process its children
+    if (!type && nodes) {
+        return nodes.reduce((acc, n) => {
+            acc.push(...recursiveValueParse(n, inVarExpression));
+            return acc;
+        }, []);
+    }
+    if (type === 'comment') {
+        return [];
+    }
+    if (type === 'div') {
+        return [
+            {
+                type: inVarExpression ? TokenType.divider : TokenType.text,
+                value,
+            },
+        ];
+    }
+    if (type === 'string') {
+        const { quote } = node;
+        return [
+            {
+                type: TokenType.text,
+                value: quote ? quote + value + quote : value,
+            },
+        ];
+    }
+    // If we are inside a var() expression use need to stringify since we are converting it into a function
+    if (type === 'word') {
+        const convertIdentifier = value.startsWith('--');
+        if (convertIdentifier) {
+            return [{ type: TokenType.identifier, value: `"${value}"` }];
+        }
+        // For animation properties, the shadow/host attributes may be in this text
+        return tokenizeCss(value);
+    }
+    // If we inside a var() function we need to prepend and append to generate an expression
+    if (type === 'function') {
+        if (value === 'var') {
+            // `tokens` may include tokens of type `divider`, `expression`, `identifier`,
+            // and `text`. However, an identifier will only ever be adjacent to a divider,
+            // whereas text and expression tokens may be adjacent to one another. This is
+            // important below when inserting concatenetors.
+            //
+            // For fuller context, see the following conversation:
+            //   https://github.com/salesforce/lwc/pull/2902#discussion_r904626421
+            let tokens = recursiveValueParse({ nodes }, true);
+            tokens = reduceTokens(tokens);
+            const exprToken = tokens.reduce((buffer, token, index) => {
+                const isTextToken = token.type === TokenType.text;
+                const normalizedToken = isTextToken ? JSON.stringify(token.value) : token.value;
+                const nextToken = tokens[index + 1];
+                // If we have a token sequence of text + expression or expression + text,
+                // we need to add the concatenation operator. Examples:
+                //
+                //   Input:  var(--x, 0 0 2px var(--y, #fff))
+                //   Output: varResolver("--x", "0 0 2px " + varResolver("--y", "#fff"))
+                //
+                //   Input:  var(--x, var(--y, #fff) 0 0 2px)
+                //   Output: varResolver("--x", varResolver("--y", "#fff") + " 0 0 2px"))
+                //
+                // Since identifier tokens will never be adjacent to text or expression
+                // tokens (see above comment), a concatenator will never be required if
+                // `token` or `nextToken` is an identifier.
+                const shouldAddConcatenator = isTextOrExpression(token) && nextToken && isTextOrExpression(nextToken);
+                const concatOperator = shouldAddConcatenator ? ' + ' : '';
+                return buffer + normalizedToken + concatOperator;
+            }, '');
+            // Generate the function call for runtime evaluation
+            return [
+                {
+                    type: TokenType.expression,
+                    value: `${VAR_RESOLVER_IDENTIFIER}(${exprToken})`,
+                },
+            ];
+            // for any other function just do the equivalent string concatenation (no need for expressions)
+        }
+        else {
+            const tokens = nodes.reduce((acc, n) => {
+                acc.push(...recursiveValueParse(n, false));
+                return acc;
+            }, []);
+            return [
+                { type: TokenType.text, value: `${value}(` },
+                ...reduceTokens(tokens),
+                { type: TokenType.text, value: ')' },
+            ];
+        }
+    }
+    // For any other token types we just need to return text
+    return [{ type: TokenType.text, value }];
+}
+function tokenizeCssDeclaration(node) {
+    const valueRoot = postcssValueParser(node.value);
+    const parsed = recursiveValueParse(valueRoot);
+    return [{ type: TokenType.text, value: `${node.prop.trim()}: ` }, ...parsed];
+}
+
+function validateIdSelectors (root) {
+    root.walkIds((node) => {
+        const message = `Invalid usage of id selector '#${node.value}'. Try using a class selector or some other selector.`;
+        throw root.error(message, {
+            index: node.sourceIndex,
+            word: node.value,
+        });
+    });
+}
+
+function process$2(root, result, isScoped) {
+    root.walkAtRules('import', (node) => {
+        if (isScoped) {
+            throw node.error(`Invalid import statement, imports are not allowed in *.scoped.css files.`);
+        }
+        // Ensure @import are at the top of the file
+        let prev = node.prev();
+        while (prev) {
+            if (prev.type === 'comment' || (prev.type === 'atrule' && prev.name === 'import')) {
+                prev = prev.prev();
+            }
+            else {
+                throw prev.error('@import must precede all other statements');
+            }
+        }
+        const { nodes: params } = postcssValueParser(node.params);
+        // Ensure import match the following syntax:
+        //     @import "foo";
+        //     @import "./foo.css";
+        if (!params.length || params[0].type !== 'string' || !params[0].value) {
+            throw node.error(`Invalid import statement, unable to find imported module.`);
+        }
+        if (params.length > 1) {
+            throw node.error(`Invalid import statement, import statement only support a single parameter.`);
+        }
+        // Add the imported to results messages
+        const message = importMessage(params[0].value);
+        result.messages.push(message);
+        // Remove the import from the generated css
+        node.remove();
+    });
+}
+
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+function isDirPseudoClass(node) {
+    return isPseudoClass(node) && node.value === ':dir';
+}
+
+function findNode(container, predicate) {
+    return container && container.nodes && container.nodes.find(predicate);
+}
+function replaceNodeWith(oldNode, ...newNodes) {
+    if (newNodes.length) {
+        const { parent } = oldNode;
+        if (!parent) {
+            throw new Error(`Impossible to replace root node.`);
+        }
+        newNodes.forEach((node) => {
+            parent.insertBefore(oldNode, node);
+        });
+        oldNode.remove();
+    }
+}
+function trimNodeWhitespaces(node) {
+    if (node && node.spaces) {
+        node.spaces.before = '';
+        node.spaces.after = '';
+    }
+}
+
+const DEPRECATED_SELECTORS = new Set(['/deep/', '::shadow', '>>>']);
+const UNSUPPORTED_SELECTORS = new Set([':root', ':host-context']);
+const TEMPLATE_DIRECTIVES = [/^key$/, /^lwc:*/, /^if:*/, /^for:*/, /^iterator:*/];
+function validateSelectors(root) {
+    root.walk((node) => {
+        const { value, sourceIndex } = node;
+        if (value) {
+            // Ensure the selector doesn't use a deprecated CSS selector.
+            if (DEPRECATED_SELECTORS.has(value)) {
+                throw root.error(`Invalid usage of deprecated selector "${value}".`, {
+                    index: sourceIndex,
+                    word: value,
+                });
+            }
+            // Ensure the selector doesn't use an unsupported selector.
+            if (UNSUPPORTED_SELECTORS.has(value)) {
+                throw root.error(`Invalid usage of unsupported selector "${value}".`, {
+                    index: sourceIndex,
+                    word: value,
+                });
+            }
+        }
+    });
+}
+function validateAttribute(root) {
+    root.walkAttributes((node) => {
+        const { attribute: attributeName, sourceIndex } = node;
+        const isTemplateDirective = TEMPLATE_DIRECTIVES.some((directive) => {
+            return directive.test(attributeName);
+        });
+        if (isTemplateDirective) {
+            const message = [
+                `Invalid usage of attribute selector "${attributeName}". `,
+                `"${attributeName}" is a template directive and therefore not supported in css rules.`,
+            ];
+            throw root.error(message.join(''), {
+                index: sourceIndex,
+                word: attributeName,
+            });
+        }
+    });
+}
+function validate(root) {
+    validateSelectors(root);
+    validateAttribute(root);
+}
+
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+function isHostPseudoClass(node) {
+    return isPseudoClass(node) && node.value === ':host';
+}
+/**
+ * Add scoping attributes to all the matching selectors:
+ *   h1 -> h1[x-foo_tmpl]
+ *   p a -> p[x-foo_tmpl] a[x-foo_tmpl]
+ */
+function scopeSelector(selector) {
+    const compoundSelectors = [[]];
+    // Split the selector per compound selector. Compound selectors are interleaved with combinator nodes.
+    // https://drafts.csswg.org/selectors-4/#typedef-complex-selector
+    selector.each((node) => {
+        if (isCombinator(node)) {
+            compoundSelectors.push([]);
+        }
+        else {
+            const current = compoundSelectors[compoundSelectors.length - 1];
+            current.push(node);
+        }
+    });
+    for (const compoundSelector of compoundSelectors) {
+        // Compound selectors with only a single :dir pseudo class should be scoped, the dir pseudo
+        // class transform will take care of transforming it properly.
+        const containsSingleDirSelector = compoundSelector.length === 1 && isDirPseudoClass(compoundSelector[0]);
+        // Compound selectors containing :host have a special treatment and should not be scoped
+        // like the rest of the complex selectors.
+        const containsHost = compoundSelector.some(isHostPseudoClass);
+        if (!containsSingleDirSelector && !containsHost) {
+            let nodeToScope;
+            // In each compound selector we need to locate the last selector to scope.
+            for (const node of compoundSelector) {
+                if (!isPseudoElement(node)) {
+                    nodeToScope = node;
+                }
+            }
+            const shadowAttribute = attribute({
+                attribute: SHADOW_ATTRIBUTE,
+                value: undefined,
+                raws: {},
+            });
+            if (nodeToScope) {
+                // Add the scoping attribute right after the node scope
+                selector.insertAfter(nodeToScope, shadowAttribute);
+            }
+            else {
+                // Add the scoping token in the first position of the compound selector as a fallback
+                // when there is no node to scope. For example: ::after {}
+                const [firstSelector] = compoundSelector;
+                selector.insertBefore(firstSelector, shadowAttribute);
+                // Move any whitespace before the selector (e.g. "  ::after") to before the shadow attribute,
+                // so that the resulting selector is correct (e.g. "  [attr]::after", not "[attr]  ::after")
+                if (firstSelector && firstSelector.spaces.before) {
+                    shadowAttribute.spaces.before = firstSelector.spaces.before;
+                    const clonedFirstSelector = firstSelector.clone({});
+                    clonedFirstSelector.spaces.before = '';
+                    firstSelector.replaceWith(clonedFirstSelector);
+                }
+            }
+        }
+    }
+}
+/**
+ * Mark the :host selector with a placeholder. If the selector has a list of
+ * contextual selector it will generate a rule for each of them.
+ *   :host -> [x-foo_tmpl-host]
+ *   :host(.foo, .bar) -> [x-foo_tmpl-host].foo, [x-foo_tmpl-host].bar
+ */
+function transformHost(selector) {
+    // Locate the first :host pseudo-class
+    const hostNode = findNode(selector, isHostPseudoClass);
+    if (hostNode) {
+        // Store the original location of the :host in the selector
+        const hostIndex = selector.index(hostNode);
+        // Swap the :host pseudo-class with the host scoping token
+        const hostAttribute = attribute({
+            attribute: HOST_ATTRIBUTE,
+            value: undefined,
+            raws: {},
+        });
+        hostNode.replaceWith(hostAttribute);
+        // Generate a unique contextualized version of the selector for each selector pass as argument
+        // to the :host
+        const contextualSelectors = hostNode.nodes.map((contextSelectors) => {
+            const clonedSelector = selector.clone({});
+            const clonedHostNode = clonedSelector.at(hostIndex);
+            // Add to the compound selector previously containing the :host pseudo class
+            // the contextual selectors.
+            contextSelectors.each((node) => {
+                trimNodeWhitespaces(node);
+                clonedSelector.insertAfter(clonedHostNode, node);
+            });
+            return clonedSelector;
+        });
+        // Replace the current selector with the different variants
+        replaceNodeWith(selector, ...contextualSelectors);
+    }
+}
+function transformSelector(root, transformConfig) {
+    validate(root);
+    root.each(scopeSelector);
+    if (transformConfig.transformHost) {
+        root.each(transformHost);
+    }
+}
+
+function process$1(root, result) {
+    root.walkDecls((decl) => {
+        const valueRoot = postcssValueParser(decl.value);
+        let varFound = false;
+        valueRoot.walk(({ type, value }) => {
+            if (!varFound && type === 'function' && value === 'var') {
+                // Add the imported to results messages
+                const message = varFunctionMessage(value);
+                result.messages.push(message);
+                varFound = true;
+            }
+        });
+    });
+}
+
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+function isValidDirValue(value) {
+    return value === 'ltr' || value === 'rtl';
+}
+function transformDirPseudoClass (root) {
+    root.nodes.forEach((selector) => {
+        selector.nodes.forEach((node) => {
+            if (!isDirPseudoClass(node)) {
+                return;
+            }
+            const value = node.nodes.toString().trim();
+            if (!isValidDirValue(value)) {
+                throw root.error(`:dir() pseudo class expects "ltr" or "rtl" for value, but received "${value}".`, {
+                    index: node.sourceIndex,
+                    word: node.value,
+                });
+            }
+            // Set placeholders for `:dir()` so we can keep it for native shadow and
+            // replace it with a polyfill for synthetic shadow.
+            //
+            // Native:    `:dir(ltr)`
+            // Synthetic: `[dir="ltr"]`
+            //
+            // The placeholders look like this: `[__dirAttributeNativeLtr__]`
+            // The attribute has no value because it's simpler during serialization, and there
+            // are only two valid values: "ltr" and "rtl".
+            //
+            // Now consider a more complex selector: `.foo:dir(ltr):not(.bar)`.
+            // For native shadow, we need to leave it as-is. Whereas for synthetic shadow, we need
+            // to convert it to: `[dir="ltr"] .foo:not(.bar)`.
+            // I.e. we need to use a descendant selector (' ' combinator) relying on a `dir`
+            // attribute added to the host element. So we need two placeholders:
+            // `<synthetic_placeholder> .foo<native_placeholder>:not(.bar)`
+            const nativeAttribute = attribute({
+                attribute: value === 'ltr' ? DIR_ATTRIBUTE_NATIVE_LTR : DIR_ATTRIBUTE_NATIVE_RTL,
+                value: undefined,
+                raws: {},
+            });
+            const syntheticAttribute = attribute({
+                attribute: value === 'ltr' ? DIR_ATTRIBUTE_SYNTHETIC_LTR : DIR_ATTRIBUTE_SYNTHETIC_RTL,
+                value: undefined,
+                raws: {},
+            });
+            node.replaceWith(nativeAttribute);
+            // If the selector is not empty and if the first node in the selector is not already a
+            // " " combinator, we need to use the descendant selector format
+            const shouldAddDescendantCombinator = selector.first && !isCombinator(selector.first) && selector.first.value !== ' ';
+            if (shouldAddDescendantCombinator) {
+                selector.insertBefore(selector.first, combinator({
+                    value: ' ',
+                }));
+                // Add the [dir] attribute in front of the " " combinator, i.e. as an ancestor
+                selector.insertBefore(selector.first, syntheticAttribute);
+            }
+            else {
+                // Otherwise there's no need for the descendant selector, so we can skip adding the
+                // space combinator and just put the synthetic placeholder next to the native one
+                selector.insertBefore(nativeAttribute, syntheticAttribute);
+            }
+        });
+    });
+}
+
+// Subset of prefixes for animation-related names that we expect people might be using.
+// The most important is -webkit, which is actually part of the spec now. All -webkit prefixes
+// are listed here: https://developer.mozilla.org/en-US/docs/Web/CSS/Webkit_Extensions
+// -moz is also still supported as of Firefox 95.
+// We could probably get away with just doing -webkit and -moz (since -ms never seems
+// to have existed for keyframes/animations, and Opera has used Blink since 2013), but
+// covering all the popular ones will at least make the compiled code more consistent
+// for developers who are using all the variants.
+// List based on a subset from https://github.com/wooorm/vendors/blob/2f489ad/index.js
+const VENDOR_PREFIXES = ['moz', 'ms', 'o', 'webkit'];
+// create a list like ['animation', '-webkit-animation', ...]
+function getAllNames(name) {
+    return new Set([name, ...VENDOR_PREFIXES.map((prefix) => `-${prefix}-${name}`)]);
+}
+const ANIMATION = getAllNames('animation');
+const ANIMATION_NAME = getAllNames('animation-name');
+function process(root) {
+    const knownNames = new Set();
+    root.walkAtRules((atRule) => {
+        // Note that @-webkit-keyframes, @-moz-keyframes, etc. are not actually a thing supported
+        // in any browser, even though you'll see it on some StackOverflow answers.
+        if (atRule.name === 'keyframes') {
+            const { params } = atRule;
+            knownNames.add(params);
+            atRule.params = `${params}-${SHADOW_ATTRIBUTE}`;
+        }
+    });
+    root.walkRules((rule) => {
+        rule.walkDecls((decl) => {
+            if (ANIMATION.has(decl.prop)) {
+                // Use a simple heuristic of breaking up the tokens by whitespace. We could use
+                // a dedicated animation prop parser (e.g.
+                // https://github.com/hookhookun/parse-animation-shorthand) but it's
+                // probably overkill.
+                const tokens = decl.value
+                    .trim()
+                    .split(/\s+/g)
+                    .map((token) => knownNames.has(token) ? `${token}-${SHADOW_ATTRIBUTE}` : token);
+                decl.value = tokens.join(' ');
+            }
+            else if (ANIMATION_NAME.has(decl.prop)) {
+                if (knownNames.has(decl.value)) {
+                    decl.value = `${decl.value}-${SHADOW_ATTRIBUTE}`;
+                }
+            }
+        });
+    });
+}
+
+function shouldTransformSelector(rule) {
+    var _a;
+    // @keyframe at-rules are special, rules inside are not standard selectors and should not be
+    // scoped like any other rules.
+    return ((_a = rule.parent) === null || _a === void 0 ? void 0 : _a.type) !== 'atrule' || rule.parent.name !== 'keyframes';
+}
+function selectorProcessorFactory(transformConfig) {
+    return postCssSelector((root) => {
+        validateIdSelectors(root);
+        transformSelector(root, transformConfig);
+        transformDirPseudoClass(root);
+    });
+}
+function postCssLwcPlugin(options) {
+    // We need 2 types of selectors processors, since transforming the :host selector make the selector
+    // unusable when used in the context of the native shadow and vice-versa.
+    // This distinction also applies to light DOM in scoped (synthetic-like) vs unscoped (native-like) mode.
+    const nativeShadowSelectorProcessor = selectorProcessorFactory({
+        transformHost: false,
+    });
+    const syntheticShadowSelectorProcessor = selectorProcessorFactory({
+        transformHost: true,
+    });
+    return (root, result) => {
+        process$2(root, result, options.scoped);
+        process$1(root, result);
+        process(root);
+        root.walkRules((rule) => {
+            if (!shouldTransformSelector(rule)) {
+                return;
+            }
+            // Let transform the selector with the 2 processors.
+            const syntheticSelector = syntheticShadowSelectorProcessor.processSync(rule);
+            const nativeSelector = nativeShadowSelectorProcessor.processSync(rule);
+            rule.selector = syntheticSelector;
+            // If the resulting selector are different it means that the selector use the :host selector. In
+            // this case we need to duplicate the CSS rule and assign the other selector.
+            if (syntheticSelector !== nativeSelector) {
+                // The cloned selector is inserted before the currently processed selector to avoid processing
+                // again the cloned selector.
+                const currentRule = rule;
+                const clonedRule = rule.cloneBefore();
+                clonedRule.selector = nativeSelector;
+                // Safe a reference to each other
+                clonedRule._isNativeHost = true;
+                currentRule._isSyntheticHost = true;
+            }
+        });
+    };
+}
+
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+function transform(src, id, config = {}) {
+    if (src === '') {
+        return { code: 'export default undefined' };
+    }
+    const scoped = !!config.scoped;
+    const plugins = [postCssLwcPlugin({ scoped })];
+    const result = postcss(plugins).process(src, { from: id }).sync();
+    return { code: serialize(result, config) };
+}
+
+export { transform };
+/** version: 2.45.3 */
+//# sourceMappingURL=index.js.map