{"record":{"id":"14f5c8214836ab53","repo":"tailwindlabs/tailwindcss","slug":"layer-in-an-import-should-come-before-any","errorCode":null,"errorMessage":"`layer(…)` in an `@import` should come before any other functions or conditions","messagePattern":"`layer\\(…\\)` in an `@import` should come before any other functions or conditions","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/tailwindcss/src/at-import.ts","lineNumber":125,"sourceCode":"      // `@import` with `url(…)` functions are not inlined but skipped and kept\n      // in the final CSS instead.\n      // E.g.: `@import url(\"https://fonts.google.com\")`\n      return null\n    }\n\n    if (!uri) return null\n\n    if (\n      (node.kind === 'word' || node.kind === 'function') &&\n      node.value.toLowerCase() === 'layer'\n    ) {\n      if (layer) return null\n      if (supports) {\n        throw new Error(\n          '`layer(…)` in an `@import` should come before any other functions or conditions',\n        )\n      }\n\n      if ('nodes' in node) {\n        layer = ValueParser.toCss(node.nodes)\n      } else {\n        layer = ''\n      }\n\n      continue\n    }\n\n    if (node.kind === 'function' && node.value.toLowerCase() === 'supports') {\n      if (supports) return null\n      supports = ValueParser.toCss(node.nodes)\n      continue\n    }\n\n    media = ValueParser.toCss(params.slice(i))\n    break\n  }","sourceCodeStart":107,"sourceCodeEnd":143,"githubUrl":"https://github.com/tailwindlabs/tailwindcss/blob/16e94cbf7f965c5ad697e90e940b5e178efad67c/packages/tailwindcss/src/at-import.ts#L107-L143","documentation":"Thrown while parsing the conditional tokens of an `@import` statement. The `layer(...)` function must appear before `supports(...)` (and before media queries); if a `layer(...)` token is encountered after `supports` is already set, the parser rejects it. This enforces the CSS-import grammar ordering.","triggerScenarios":"Writing `@import \"x.css\" supports(display: grid) layer(base);` — the `layer(...)` comes after `supports(...)`. The check fires when `node.value.toLowerCase() === 'layer'` is hit while `supports` is already truthy.","commonSituations":"Hand-writing complex `@import` conditions and ordering them by mistake; tooling/templating that concatenates conditions in the wrong sequence.","solutions":["Move `layer(...)` before `supports(...)`: `@import \"x.css\" layer(base) supports(display: grid);`.","If you do not need explicit layering, drop the `layer(...)` clause entirely.","Validate import statements against the spec order: `<uri> layer(...) supports(...) <media>`."],"exampleFix":"// before\n@import \"x.css\" supports(display: grid) layer(base);\n// after\n@import \"x.css\" layer(base) supports(display: grid);","handlingStrategy":"validation","validationCode":"function validateImportOrder(stmt) {\n  const layerIdx = stmt.search(/layer\\(/i);\n  const supportsIdx = stmt.search(/supports\\(/i);\n  if (layerIdx !== -1 && supportsIdx !== -1 && layerIdx > supportsIdx) {\n    throw new Error('layer() must precede supports() in @import');\n  }\n}\n// validateImportOrder('@import \"x.css\" supports(...) layer(...)');","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Follow the spec ordering when writing complex `@import` conditions.","Add a Stylelint rule for `@import` token order."],"tags":["tailwind","at-import","layer","syntax"],"backgroundTag":null,"analyzedSha":"16e94cbf7f965c5ad697e90e940b5e178efad67c","analyzedAt":"2026-08-12T06:02:42.469Z","schemaVersion":2},"datasetVersion":"2026-08-12T13:17:24.610Z"}