{"record":{"id":"d2bba9013037c4d0","repo":"withastro/astro","slug":"csstransformerrors-0-message","errorCode":null,"errorMessage":"${cssTransformErrors[0].message}","messagePattern":"\\$\\{cssTransformErrors\\[0\\]\\.message\\}","errorType":"exception","errorClass":"AggregateError","httpStatus":null,"severity":"error","filePath":"packages/astro/src/core/compile/compile.ts","lineNumber":119,"sourceCode":"\t\t\tname: 'CompilerError',\n\t\t\tmessage: compilerError.text,\n\t\t\tlocation: {\n\t\t\t\tline: compilerError.labels[0].line,\n\t\t\t\tcolumn: compilerError.labels[0].column,\n\t\t\t\tfile: filename,\n\t\t\t},\n\t\t\thint: compilerError.hint,\n\t\t});\n\t}\n\n\tswitch (cssTransformErrors.length) {\n\t\tcase 0:\n\t\t\tbreak;\n\t\tcase 1: {\n\t\t\tthrow cssTransformErrors[0];\n\t\t}\n\t\tdefault: {\n\t\t\tthrow new AggregateError({\n\t\t\t\t...cssTransformErrors[0],\n\t\t\t\terrors: cssTransformErrors,\n\t\t\t});\n\t\t}\n\t}\n}\n\nfunction normalizeFilename(filename: string, root: URL) {\n\tconst normalizedFilename = normalizePath(filename);\n\tconst normalizedRoot = normalizePath(fileURLToPath(root));\n\tif (normalizedFilename.startsWith(normalizedRoot)) {\n\t\treturn normalizedFilename.slice(normalizedRoot.length - 1);\n\t} else {\n\t\treturn normalizedFilename;\n\t}\n}\n","sourceCodeStart":101,"sourceCodeEnd":136,"githubUrl":"https://github.com/withastro/astro/blob/3578d45d34226d63cff3d261c971c221de6794d2/packages/astro/src/core/compile/compile.ts#L101-L136","documentation":"After compiling a component, Astro re-throws CSS transform errors collected while preprocessing `<style>` blocks: a single failure is rethrown as-is, while two or more are wrapped in an `AggregateError` carrying every error in `.errors`. The message shown is the first error's message.","triggerScenarios":"A Sass/Less/PostCSS transform failing on a component's style block — invalid SCSS syntax, missing `sass` package for `lang=\"scss\"`, or a broken postcss config. Multiple failing `<style>` blocks in one component produce the `AggregateError` path.","commonSituations":"Adding `<style lang=\"scss\">` without `sass` installed; a typo in nested SCSS; postcss.config referencing a plugin that is not installed; several styles failing at once after a syntax-affecting change.","solutions":["Read the first error's message and file/line — it identifies the exact style block.","Fix the preprocessor syntax (nesting braces, semicolons, variable syntax).","Install the preprocessor dependency: `npm install -D sass` for `lang=\"scss\"`.","Validate postcss.config / tailwind config referenced by the style pipeline."],"exampleFix":"<!-- before -->\n<style lang=\"scss\">\n  .card { color: red;\n</style>\n\n<!-- after -->\n<style lang=\"scss\">\n  .card { color: red; }\n</style>","handlingStrategy":"try-catch","validationCode":"// For style pipelines you control: compile styles in isolation first\nimport { compileString } from 'sass';\ncompileString(scssSource, { style: 'expanded' }); // throws with line info before Astro does","typeGuard":null,"tryCatchPattern":"try {\n  await buildComponent(file);\n} catch (err) {\n  // one failing style rethrows the error; several arrive as AggregateError\n  const errors = err instanceof AggregateError ? err.errors : [err];\n  for (const e of errors) console.error(e.message);\n  process.exitCode = 1;\n}","preventionTips":["Install the preprocessor you opt into (`sass` for lang=\"scss\", `less` for lang=\"less\").","Keep postcss.config valid and its plugins installed.","Enable editor linting for the style language used in `<style>` blocks."],"tags":["css","sass","postcss","aggregate-error"],"backgroundTag":"css-preprocessor-error","analyzedSha":"3578d45d34226d63cff3d261c971c221de6794d2","analyzedAt":"2026-08-18T18:48:03.901Z","contentChangedAt":"2026-08-18T18:48:03.901Z","schemaVersion":2},"datasetVersion":"2026-09-23T08:17:48.524Z"}