--- title: Solving CSS @layer Ordering in Design Systems with... description: When design tokens are generated via Style Dictionary, there's no built-in way to assign CSS @layer ordering to each token. The solution is to attach layer... canonical: https://daily.dev/posts/solving-css-layer-ordering-in-design-systems-with-design-token-metadata-apfgqwntk twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Solving CSS @layer Ordering in Design Systems with Design Token Metadata | daily.dev og:description: When design tokens are generated via Style Dictionary, there's no built-in way to assign CSS @layer ordering to each token. The solution is to attach layer... og:url: https://daily.dev/posts/solving-css-layer-ordering-in-design-systems-with-design-token-metadata-apfgqwntk og:image: https://api.daily.dev/og/posts/ApfgQwNtK.png og:image:alt: Solving CSS @layer Ordering in Design Systems with Design Token Metadata og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Solving CSS @layer Ordering in Design Systems with Design Token Metadata **[Always Twisted](https://daily.dev/sources/alwaystwisted)** · 6 min read · 0 upvotes · 0 comments ## Summary When design tokens are generated via Style Dictionary, there's no built-in way to assign CSS @layer ordering to each token. The solution is to attach layer metadata using the DTCG-spec $extensions field (namespaced to avoid collisions and preserve cross-tool compatibility), then write a Style Dictionary plugin that reads that metadata and emits grouped @layer blocks in the CSS output. This keeps the token format portable and platform-agnostic while letting the build pipeline handle CSS-specific delivery concerns automatically. The author has published the approach as the `style-dictionary-css-layers` npm package. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I assign CSS @layer values to design tokens generated by Style Dictionary? Attach layer metadata inside the DTCG $extensions field on each token (e.g., a namespaced key like `alwaystwisted.com/dtm/css-layer`), then write a Style Dictionary format plugin that groups tokens by that metadata and emits one `@layer` block per group. This keeps the token format portable and cross-platform while letting the build handle CSS-specific ordering. The `style-dictionary-css-layers` npm package implements this pattern. _Teams building token pipelines track patterns like this on daily.dev before committing to a token architecture._ ### Why should I use $extensions instead of a plain custom key for CSS layer metadata in design tokens? Only dollar-prefixed spec properties and contents of $extensions are covered by the DTCG spec's 'MUST preserve' rule, meaning other tools must not strip them. A plain custom key like `cssLayer` sits outside that guarantee and can be silently removed by compliant tools. Namespacing inside $extensions also prevents collisions between teams and keeps CSS-specific metadata clearly labelled as build output rather than core token data. _Developers navigating DTCG spec decisions find relevant discussions and tooling updates on daily.dev._ ## Similar posts on daily.dev - [Design Tokens, Web Components, and CSS @layer](https://daily.dev/posts/design-tokens-web-components-and-css-layer-gknyqzubd) · Always Twisted · 5 upvotes · 0 comments - [Design Systems \+ Horizontal @layer – Master.dev Blog](https://daily.dev/posts/design-systems-horizontal-layer-master-dev-blog-vaqxpniun) · Frontend Masters · 6 upvotes · 0 comments - [How to create a modular and maintainable CSS setup with @layer](https://daily.dev/posts/how-to-create-a-modular-and-maintainable-css-setup-with-layer-8smctixl6) · iO tech\_hub · 7 upvotes · 0 comments - [Design tokens: The building blocks of a design system](https://daily.dev/posts/design-tokens-the-building-blocks-of-a-design-system-ja5tvulef) · RUBYLAND · 1 upvotes · 0 comments - [The Value of z-index](https://daily.dev/posts/the-value-of-z-index-x59pcmo3f) · CSS-Tricks · 3 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css), [#ui-design](https://daily.dev/tags/ui-design), [#design-systems](https://daily.dev/tags/design-systems) [View this post on daily.dev](https://daily.dev/posts/solving-css-layer-ordering-in-design-systems-with-design-token-metadata-apfgqwntk) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Solving CSS @layer Ordering in Design Systems with Design Token Metadata","url":"https://daily.dev/posts/solving-css-layer-ordering-in-design-systems-with-design-token-metadata-apfgqwntk","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/solving-css-layer-ordering-in-design-systems-with-design-token-metadata-apfgqwntk"},"datePublished":"2026-08-10T09:12:48.401Z","dateModified":"2026-08-10T09:16:15.235Z","description":"When design tokens are generated via Style Dictionary, there's no built-in way to assign CSS @layer ordering to each token. The solution is to attach layer...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/2dabfd3a3dc5137037f6cdfcfbb22bc9?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/2dabfd3a3dc5137037f6cdfcfbb22bc9?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Always Twisted","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Always Twisted","logo":"https://media.daily.dev/image/upload/s--YjoaNten--/f_auto,q_auto/v1765712927/logos/alwaystwisted","url":"https://daily.dev/sources/alwaystwisted"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/solving-css-layer-ordering-in-design-systems-with-design-token-metadata-apfgqwntk","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"css,ui-design,design-systems","timeRequired":"PT6M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Always Twisted","item":"https://daily.dev/sources/alwaystwisted"},{"@type":"ListItem","position":3,"name":"Solving CSS @layer Ordering in Design Systems with Design Token Metadata"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/solving-css-layer-ordering-in-design-systems-with-design-token-metadata-apfgqwntk#faq","mainEntity":[{"@type":"Question","name":"How do I assign CSS @layer values to design tokens generated by Style Dictionary?","acceptedAnswer":{"@type":"Answer","text":"Attach layer metadata inside the DTCG $extensions field on each token (e.g., a namespaced key like `alwaystwisted.com/dtm/css-layer`), then write a Style Dictionary format plugin that groups tokens by that metadata and emits one `@layer` block per group. This keeps the token format portable and cross-platform while letting the build handle CSS-specific ordering. The `style-dictionary-css-layers` npm package implements this pattern. Teams building token pipelines track patterns like this on daily.dev before committing to a token architecture."}},{"@type":"Question","name":"Why should I use $extensions instead of a plain custom key for CSS layer metadata in design tokens?","acceptedAnswer":{"@type":"Answer","text":"Only dollar-prefixed spec properties and contents of $extensions are covered by the DTCG spec's 'MUST preserve' rule, meaning other tools must not strip them. A plain custom key like `cssLayer` sits outside that guarantee and can be silently removed by compliant tools. Namespacing inside $extensions also prevents collisions between teams and keeps CSS-specific metadata clearly labelled as build output rather than core token data. Developers navigating DTCG spec decisions find relevant discussions and tooling updates on daily.dev."}}]} ```