@lwc/style-compiler 8.24.0 → 8.26.0

package/dist/css-import/transform.d.ts

@@ -1,3 +1,4 @@
 import type { Root, Result } from 'postcss';
-export default function process(root: Root, result: Result, isScoped: boolean): void;
+import type { StyleCompilerCtx } from '../utils/error-recovery';
+export default function process(root: Root, result: Result, isScoped: boolean, ctx: StyleCompilerCtx): void;
 //# sourceMappingURL=transform.d.ts.map

package/dist/dir-pseudo-class/transform.d.ts

@@ -1,3 +1,4 @@
 import type { Root } from 'postcss-selector-parser';
-export default function (root: Root): void;
+import type { StyleCompilerCtx } from '../utils/error-recovery';
+export default function (root: Root, ctx: StyleCompilerCtx): void;
 //# sourceMappingURL=transform.d.ts.map

package/dist/index.cjs.js

@@ -344,12 +344,14 @@ function tokenizeCss(data) {
     return tokens;
 }
 
-function validateIdSelectors (root) {
+function validateIdSelectors (root, ctx) {
     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,
+        ctx.withErrorRecovery(() => {
+            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,
+            });
         });
     });
 }
@@ -360,36 +362,38 @@ function validateIdSelectors (root) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-function process$1(root, result, isScoped) {
+function process$1(root, result, isScoped, ctx) {
     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();
+        ctx.withErrorRecovery(() => {
+            if (isScoped) {
+                throw node.error(`Invalid import statement, imports are not allowed in *.scoped.css files.`);
             }
-            else {
-                throw prev.error('@import must precede all other statements');
+            // 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 } = valueParser(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();
+            const { nodes: params } = valueParser(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();
+        });
     });
 }
 
@@ -428,48 +432,52 @@ function trimNodeWhitespaces(node) {
 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, native) {
+function validateSelectors(root, native, ctx) {
     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 (!native && UNSUPPORTED_SELECTORS.has(value)) {
-                throw root.error(`Invalid usage of unsupported selector "${value}". This selector is only supported in non-scoped CSS where the \`disableSyntheticShadowSupport\` flag is set to true.`, {
-                    index: sourceIndex,
-                    word: value,
-                });
+        ctx.withErrorRecovery(() => {
+            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 (!native && UNSUPPORTED_SELECTORS.has(value)) {
+                    throw root.error(`Invalid usage of unsupported selector "${value}". This selector is only supported in non-scoped CSS where the \`disableSyntheticShadowSupport\` flag is set to true.`, {
+                        index: sourceIndex,
+                        word: value,
+                    });
+                }
             }
-        }
+        });
     });
 }
-function validateAttribute(root) {
+function validateAttribute(root, ctx) {
     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,
+        ctx.withErrorRecovery(() => {
+            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, native) {
-    validateSelectors(root, native);
-    validateAttribute(root);
+function validate(root, native, ctx) {
+    validateSelectors(root, native, ctx);
+    validateAttribute(root, ctx);
 }
 
 /*
@@ -578,8 +586,8 @@ function transformHost(selector) {
         replaceNodeWith(selector, ...contextualSelectors);
     }
 }
-function transformSelector(root, transformConfig) {
-    validate(root, transformConfig.disableSyntheticShadowSupport && !transformConfig.scoped);
+function transformSelector(root, transformConfig, ctx) {
+    validate(root, transformConfig.disableSyntheticShadowSupport && !transformConfig.scoped, ctx);
     root.each(scopeSelector);
     if (transformConfig.transformHost) {
         root.each(transformHost);
@@ -595,61 +603,63 @@ function transformSelector(root, transformConfig) {
 function isValidDirValue(value) {
     return value === 'ltr' || value === 'rtl';
 }
-function transformDirPseudoClass (root) {
+function transformDirPseudoClass (root, ctx) {
     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,
+            ctx.withErrorRecovery(() => {
+                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 = postCssSelector.attribute({
+                    attribute: value === 'ltr' ? DIR_ATTRIBUTE_NATIVE_LTR : DIR_ATTRIBUTE_NATIVE_RTL,
+                    value: undefined,
+                    raws: {},
                 });
-            }
-            // 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 = postCssSelector.attribute({
-                attribute: value === 'ltr' ? DIR_ATTRIBUTE_NATIVE_LTR : DIR_ATTRIBUTE_NATIVE_RTL,
-                value: undefined,
-                raws: {},
-            });
-            const syntheticAttribute = postCssSelector.attribute({
-                attribute: value === 'ltr' ? DIR_ATTRIBUTE_SYNTHETIC_LTR : DIR_ATTRIBUTE_SYNTHETIC_RTL,
-                value: undefined,
-                raws: {},
+                const syntheticAttribute = postCssSelector.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 && !postCssSelector.isCombinator(selector.first) && selector.first.value !== ' ';
+                if (shouldAddDescendantCombinator) {
+                    selector.insertBefore(selector.first, postCssSelector.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);
+                }
             });
-            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 && !postCssSelector.isCombinator(selector.first) && selector.first.value !== ' ';
-            if (shouldAddDescendantCombinator) {
-                selector.insertBefore(selector.first, postCssSelector.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);
-            }
         });
     });
 }
@@ -676,35 +686,39 @@ function getAllNames(name) {
 }
 const ANIMATION = getAllNames('animation');
 const ANIMATION_NAME = getAllNames('animation-name');
-function process(root) {
+function process(root, ctx) {
     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}`;
-        }
+        ctx.withErrorRecovery(() => {
+            // 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}`;
+            ctx.withErrorRecovery(() => {
+                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}`;
+                    }
+                }
+            });
         });
     });
 }
@@ -720,14 +734,15 @@ function shouldTransformSelector(rule) {
     // scoped like any other rules.
     return rule.parent?.type !== 'atrule' || rule.parent.name !== 'keyframes';
 }
-function selectorProcessorFactory(transformConfig) {
+function selectorProcessorFactory(transformConfig, ctx) {
     return postCssSelector((root) => {
-        validateIdSelectors(root);
-        transformSelector(root, transformConfig);
-        transformDirPseudoClass(root);
+        validateIdSelectors(root, ctx);
+        transformSelector(root, transformConfig, ctx);
+        transformDirPseudoClass(root, ctx);
     });
 }
 function postCssLwcPlugin(options) {
+    const { ctx } = 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.
@@ -735,39 +750,86 @@ function postCssLwcPlugin(options) {
         transformHost: false,
         disableSyntheticShadowSupport: options.disableSyntheticShadowSupport,
         scoped: options.scoped,
-    });
+    }, ctx);
     const syntheticShadowSelectorProcessor = selectorProcessorFactory({
         transformHost: true,
         disableSyntheticShadowSupport: options.disableSyntheticShadowSupport,
         scoped: options.scoped,
-    });
+    }, ctx);
     return (root, result) => {
-        process$1(root, result, options.scoped);
-        process(root);
+        process$1(root, result, options.scoped, ctx);
+        process(root, ctx);
+        // Wrap rule processing with error recovery
         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;
-            }
+            ctx.withErrorRecovery(() => {
+                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) 2025, Salesforce, 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
+ */
+class StyleCompilerCtx {
+    constructor(errorRecoveryMode, filename) {
+        this.errors = [];
+        this.seenErrorKeys = new Set();
+        this.errorRecoveryMode = errorRecoveryMode;
+        this.filename = filename;
+    }
+    /**
+     * This method recovers from CSS syntax errors that are encountered when fn is invoked.
+     * All other errors are considered compiler errors and can not be recovered from.
+     * @param fn method to be invoked.
+     */
+    withErrorRecovery(fn) {
+        if (!this.errorRecoveryMode) {
+            return fn();
+        }
+        try {
+            return fn();
+        }
+        catch (error) {
+            if (error instanceof postcss.CssSyntaxError) {
+                if (this.seenErrorKeys.has(error.message)) {
+                    return;
+                }
+                this.seenErrorKeys.add(error.message);
+                this.errors.push(error);
+            }
+            else {
+                // Non-CSS errors (compiler errors) should still throw
+                throw error;
+            }
+        }
+    }
+    hasErrors() {
+        return this.errors.length > 0;
+    }
+}
+
 /*
  * Copyright (c) 2024, Salesforce, Inc.
  * All rights reserved.
@@ -798,11 +860,36 @@ function transform(src, id, config = {}) {
     const scoped = !!config.scoped;
     shared.getAPIVersionFromNumber(config.apiVersion);
     const disableSyntheticShadowSupport = !!config.disableSyntheticShadowSupport;
-    const plugins = [postCssLwcPlugin({ scoped, disableSyntheticShadowSupport })];
-    const result = postcss(plugins).process(src, { from: id }).sync();
+    const errorRecoveryMode = !!config.experimentalErrorRecoveryMode;
+    // Create error recovery context
+    const ctx = new StyleCompilerCtx(errorRecoveryMode, id);
+    const plugins = [
+        postCssLwcPlugin({
+            scoped,
+            disableSyntheticShadowSupport,
+            ctx,
+        }),
+    ];
+    // Wrap PostCSS processing with error recovery for parsing errors
+    let result;
+    try {
+        result = postcss(plugins).process(src, { from: id }).sync();
+    }
+    catch (error) {
+        if (errorRecoveryMode && error instanceof postcss.CssSyntaxError) {
+            ctx.errors.push(error);
+            throw AggregateError(ctx.errors);
+        }
+        else {
+            throw error;
+        }
+    }
+    if (errorRecoveryMode && ctx.hasErrors()) {
+        throw AggregateError(ctx.errors);
+    }
     return { code: serialize(result, config) };
 }
 
 exports.transform = transform;
-/** version: 8.24.0 */
+/** version: 8.26.0 */
 //# sourceMappingURL=index.cjs.js.map

package/dist/index.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2025 Salesforce, Inc.
  */
-import postcss from 'postcss';
+import postcss, { CssSyntaxError } from 'postcss';
 import { LWC_VERSION_COMMENT, KEY__SCOPED_CSS, KEY__NATIVE_ONLY_CSS, getAPIVersionFromNumber } from '@lwc/shared';
 import postCssSelector, { isPseudoClass, isCombinator, isPseudoElement, attribute, combinator } from 'postcss-selector-parser';
 import valueParser from 'postcss-value-parser';
@@ -340,12 +340,14 @@ function tokenizeCss(data) {
     return tokens;
 }
 
-function validateIdSelectors (root) {
+function validateIdSelectors (root, ctx) {
     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,
+        ctx.withErrorRecovery(() => {
+            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,
+            });
         });
     });
 }
@@ -356,36 +358,38 @@ function validateIdSelectors (root) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-function process$1(root, result, isScoped) {
+function process$1(root, result, isScoped, ctx) {
     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();
+        ctx.withErrorRecovery(() => {
+            if (isScoped) {
+                throw node.error(`Invalid import statement, imports are not allowed in *.scoped.css files.`);
             }
-            else {
-                throw prev.error('@import must precede all other statements');
+            // 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 } = valueParser(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();
+            const { nodes: params } = valueParser(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();
+        });
     });
 }
 
@@ -424,48 +428,52 @@ function trimNodeWhitespaces(node) {
 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, native) {
+function validateSelectors(root, native, ctx) {
     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 (!native && UNSUPPORTED_SELECTORS.has(value)) {
-                throw root.error(`Invalid usage of unsupported selector "${value}". This selector is only supported in non-scoped CSS where the \`disableSyntheticShadowSupport\` flag is set to true.`, {
-                    index: sourceIndex,
-                    word: value,
-                });
+        ctx.withErrorRecovery(() => {
+            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 (!native && UNSUPPORTED_SELECTORS.has(value)) {
+                    throw root.error(`Invalid usage of unsupported selector "${value}". This selector is only supported in non-scoped CSS where the \`disableSyntheticShadowSupport\` flag is set to true.`, {
+                        index: sourceIndex,
+                        word: value,
+                    });
+                }
             }
-        }
+        });
     });
 }
-function validateAttribute(root) {
+function validateAttribute(root, ctx) {
     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,
+        ctx.withErrorRecovery(() => {
+            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, native) {
-    validateSelectors(root, native);
-    validateAttribute(root);
+function validate(root, native, ctx) {
+    validateSelectors(root, native, ctx);
+    validateAttribute(root, ctx);
 }
 
 /*
@@ -574,8 +582,8 @@ function transformHost(selector) {
         replaceNodeWith(selector, ...contextualSelectors);
     }
 }
-function transformSelector(root, transformConfig) {
-    validate(root, transformConfig.disableSyntheticShadowSupport && !transformConfig.scoped);
+function transformSelector(root, transformConfig, ctx) {
+    validate(root, transformConfig.disableSyntheticShadowSupport && !transformConfig.scoped, ctx);
     root.each(scopeSelector);
     if (transformConfig.transformHost) {
         root.each(transformHost);
@@ -591,61 +599,63 @@ function transformSelector(root, transformConfig) {
 function isValidDirValue(value) {
     return value === 'ltr' || value === 'rtl';
 }
-function transformDirPseudoClass (root) {
+function transformDirPseudoClass (root, ctx) {
     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,
+            ctx.withErrorRecovery(() => {
+                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: {},
                 });
-            }
-            // 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: {},
+                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);
+                }
             });
-            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);
-            }
         });
     });
 }
@@ -672,35 +682,39 @@ function getAllNames(name) {
 }
 const ANIMATION = getAllNames('animation');
 const ANIMATION_NAME = getAllNames('animation-name');
-function process(root) {
+function process(root, ctx) {
     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}`;
-        }
+        ctx.withErrorRecovery(() => {
+            // 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}`;
+            ctx.withErrorRecovery(() => {
+                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}`;
+                    }
+                }
+            });
         });
     });
 }
@@ -716,14 +730,15 @@ function shouldTransformSelector(rule) {
     // scoped like any other rules.
     return rule.parent?.type !== 'atrule' || rule.parent.name !== 'keyframes';
 }
-function selectorProcessorFactory(transformConfig) {
+function selectorProcessorFactory(transformConfig, ctx) {
     return postCssSelector((root) => {
-        validateIdSelectors(root);
-        transformSelector(root, transformConfig);
-        transformDirPseudoClass(root);
+        validateIdSelectors(root, ctx);
+        transformSelector(root, transformConfig, ctx);
+        transformDirPseudoClass(root, ctx);
     });
 }
 function postCssLwcPlugin(options) {
+    const { ctx } = 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.
@@ -731,39 +746,86 @@ function postCssLwcPlugin(options) {
         transformHost: false,
         disableSyntheticShadowSupport: options.disableSyntheticShadowSupport,
         scoped: options.scoped,
-    });
+    }, ctx);
     const syntheticShadowSelectorProcessor = selectorProcessorFactory({
         transformHost: true,
         disableSyntheticShadowSupport: options.disableSyntheticShadowSupport,
         scoped: options.scoped,
-    });
+    }, ctx);
     return (root, result) => {
-        process$1(root, result, options.scoped);
-        process(root);
+        process$1(root, result, options.scoped, ctx);
+        process(root, ctx);
+        // Wrap rule processing with error recovery
         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;
-            }
+            ctx.withErrorRecovery(() => {
+                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) 2025, Salesforce, 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
+ */
+class StyleCompilerCtx {
+    constructor(errorRecoveryMode, filename) {
+        this.errors = [];
+        this.seenErrorKeys = new Set();
+        this.errorRecoveryMode = errorRecoveryMode;
+        this.filename = filename;
+    }
+    /**
+     * This method recovers from CSS syntax errors that are encountered when fn is invoked.
+     * All other errors are considered compiler errors and can not be recovered from.
+     * @param fn method to be invoked.
+     */
+    withErrorRecovery(fn) {
+        if (!this.errorRecoveryMode) {
+            return fn();
+        }
+        try {
+            return fn();
+        }
+        catch (error) {
+            if (error instanceof CssSyntaxError) {
+                if (this.seenErrorKeys.has(error.message)) {
+                    return;
+                }
+                this.seenErrorKeys.add(error.message);
+                this.errors.push(error);
+            }
+            else {
+                // Non-CSS errors (compiler errors) should still throw
+                throw error;
+            }
+        }
+    }
+    hasErrors() {
+        return this.errors.length > 0;
+    }
+}
+
 /*
  * Copyright (c) 2024, Salesforce, Inc.
  * All rights reserved.
@@ -794,11 +856,36 @@ function transform(src, id, config = {}) {
     const scoped = !!config.scoped;
     getAPIVersionFromNumber(config.apiVersion);
     const disableSyntheticShadowSupport = !!config.disableSyntheticShadowSupport;
-    const plugins = [postCssLwcPlugin({ scoped, disableSyntheticShadowSupport })];
-    const result = postcss(plugins).process(src, { from: id }).sync();
+    const errorRecoveryMode = !!config.experimentalErrorRecoveryMode;
+    // Create error recovery context
+    const ctx = new StyleCompilerCtx(errorRecoveryMode, id);
+    const plugins = [
+        postCssLwcPlugin({
+            scoped,
+            disableSyntheticShadowSupport,
+            ctx,
+        }),
+    ];
+    // Wrap PostCSS processing with error recovery for parsing errors
+    let result;
+    try {
+        result = postcss(plugins).process(src, { from: id }).sync();
+    }
+    catch (error) {
+        if (errorRecoveryMode && error instanceof postcss.CssSyntaxError) {
+            ctx.errors.push(error);
+            throw AggregateError(ctx.errors);
+        }
+        else {
+            throw error;
+        }
+    }
+    if (errorRecoveryMode && ctx.hasErrors()) {
+        throw AggregateError(ctx.errors);
+    }
     return { code: serialize(result, config) };
 }
 
 export { transform };
-/** version: 8.24.0 */
+/** version: 8.26.0 */
 //# sourceMappingURL=index.js.map

package/dist/no-id-selectors/validate.d.ts

@@ -1,3 +1,4 @@
 import type { Root } from 'postcss-selector-parser';
-export default function (root: Root): void;
+import type { StyleCompilerCtx } from '../utils/error-recovery';
+export default function (root: Root, ctx: StyleCompilerCtx): void;
 //# sourceMappingURL=validate.d.ts.map

package/dist/postcss-lwc-plugin.d.ts

@@ -1,8 +1,10 @@
 import type { APIVersion } from '@lwc/shared';
 import type { TransformCallback } from 'postcss';
+import type { StyleCompilerCtx } from './utils/error-recovery';
 export default function postCssLwcPlugin(options: {
     scoped: boolean;
     apiVersion: APIVersion;
     disableSyntheticShadowSupport: boolean;
+    ctx: StyleCompilerCtx;
 }): TransformCallback;
 //# sourceMappingURL=postcss-lwc-plugin.d.ts.map

package/dist/scope-at-rules/transform.d.ts

@@ -1,3 +1,4 @@
 import type { Root } from 'postcss';
-export default function process(root: Root): void;
+import type { StyleCompilerCtx } from '../utils/error-recovery';
+export default function process(root: Root, ctx: StyleCompilerCtx): void;
 //# sourceMappingURL=transform.d.ts.map

package/dist/selector-scoping/transform.d.ts

@@ -1,4 +1,5 @@
 import type { Root } from 'postcss-selector-parser';
+import type { StyleCompilerCtx } from '../utils/error-recovery';
 export interface SelectorScopingConfig {
     /** When set to true, the :host selector gets replace with the the scoping token. */
     transformHost: boolean;
@@ -7,5 +8,5 @@ export interface SelectorScopingConfig {
     /** When set to true, the selector is scoped. */
     scoped: boolean;
 }
-export default function transformSelector(root: Root, transformConfig: SelectorScopingConfig): void;
+export default function transformSelector(root: Root, transformConfig: SelectorScopingConfig, ctx: StyleCompilerCtx): void;
 //# sourceMappingURL=transform.d.ts.map

package/dist/selector-scoping/validate.d.ts

@@ -1,3 +1,4 @@
 import type { Root } from 'postcss-selector-parser';
-export default function validate(root: Root, native: boolean): void;
+import type { StyleCompilerCtx } from '../utils/error-recovery';
+export default function validate(root: Root, native: boolean, ctx: StyleCompilerCtx): void;
 //# sourceMappingURL=validate.d.ts.map

package/dist/transform.d.ts

@@ -14,6 +14,8 @@ export interface Config {
     disableSyntheticShadowSupport?: boolean;
     /** The API version to associate with the compiled stylesheet */
     apiVersion?: number;
+    /** When set to true, enables error recovery mode to collect multiple errors */
+    experimentalErrorRecoveryMode?: boolean;
 }
 /**
  * Transforms CSS for use with LWC components.
@@ -34,5 +36,6 @@ export interface Config {
  */
 export declare function transform(src: string, id: string, config?: Config): {
     code: string;
+    errors?: Error[];
 };
 //# sourceMappingURL=transform.d.ts.map

package/dist/utils/error-recovery.d.ts

@@ -0,0 +1,16 @@
+import { CssSyntaxError } from 'postcss';
+export declare class StyleCompilerCtx {
+    readonly errorRecoveryMode: boolean;
+    readonly errors: CssSyntaxError[];
+    readonly filename: string;
+    private readonly seenErrorKeys;
+    constructor(errorRecoveryMode: boolean, filename: string);
+    /**
+     * This method recovers from CSS syntax errors that are encountered when fn is invoked.
+     * All other errors are considered compiler errors and can not be recovered from.
+     * @param fn method to be invoked.
+     */
+    withErrorRecovery<T>(fn: () => T): T | undefined;
+    hasErrors(): boolean;
+}
+//# sourceMappingURL=error-recovery.d.ts.map

package/package.json

@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/style-compiler",
-    "version": "8.24.0",
+    "version": "8.26.0",
     "description": "Transform style sheet to be consumed by the LWC engine",
     "keywords": [
         "lwc"
@@ -46,7 +46,7 @@
         }
     },
     "dependencies": {
-        "@lwc/shared": "8.24.0",
+        "@lwc/shared": "8.26.0",
         "postcss": "~8.5.6",
         "postcss-selector-parser": "~7.1.0",
         "postcss-value-parser": "~4.2.0"