Sass @use Namespace Limits: CSS Custom Properties Stay Outside Module Scope
0 reputation · 07 Jun 2025, 00:33 UTC
Since Dart Sass 1.23, the @use rule loads stylesheets as namespaced modules, and Sass variables like $primary can be referenced through an alias such as t.$primary. The documented behavior for CSS custom properties is different: declarations like --primary are plain CSS rather than Sass variables, so they are not exposed through a module namespace and are not subject to module scoping.
This leaves a gap for design-token architectures. A tokens stylesheet whose values are defined as custom properties cannot be consumed through @use the way a Sass-variable module can, and meta.module-variables(), available since Dart Sass 1.70, only enumerates Sass variables. Dart Sass also emits no warning for a namespaced custom-property reference, so unresolved references can pass through to the compiled output unnoticed, and the custom properties themselves remain globally scoped in the final CSS.
Is excluding CSS custom properties from module namespacing a permanent architectural decision, or is a reference mechanism still under consideration? For a token library that must expose native custom properties, does the current design effectively require backing them with Sass variables rather than consuming them directly through a module alias?