Skip to content

feat: Place color-scheme before CSS properties #586

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
drwpow merged 1 commit into from
Nov 28, 2025
Merged

feat: Place color-scheme before CSS properties #586

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions .changeset/modern-foxes-wave.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
"@terrazzo/plugin-css": patch
"@terrazzo/plugin-sass": patch
"@terrazzo/plugin-tailwind": patch
"@terrazzo/plugin-vanilla-extract": patch
---

Place `color-scheme` before CSS properties
23 changes: 13 additions & 10 deletions packages/plugin-css/src/build/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,12 @@ export default function buildFormat({
if (rootTokens.length) {
const rootRule: CSSRule = { selectors: [baseSelector], declarations: {} };

// add base color-scheme declaration first if configured
// (must be before other properties to ensure it appears first in output)
if (baseScheme) {
rootRule.declarations['color-scheme'] = { value: baseScheme };
}

// note: `nestedQuery` was designed specifically for higher-gamut colors to
// apply color-gamut media queries to existing selectors (i.e. keep the same
// targets, and apply another nested layer of media query filtering based on
Expand All @@ -43,11 +49,6 @@ export default function buildFormat({

const shouldExclude = wcmatch(exclude ?? []);

// add base color-scheme declaration if configured
if (baseScheme) {
rootRule.declarations['color-scheme'] = { value: baseScheme };
}

for (const token of rootTokens) {
// handle exclude (if any)
if (shouldExclude(token.token.id)) {
Expand Down Expand Up @@ -117,16 +118,18 @@ export default function buildFormat({
}

const selectorRule: CSSRule = { selectors, declarations: {} };
const selectorP3Rule: CSSRule = { selectors, nestedQuery: P3_MQ, declarations: {} };
const selectorRec2020Rule: CSSRule = { selectors, nestedQuery: REC2020_MQ, declarations: {} };
const selectorAliasDeclarations: CSSRule['declarations'] = {};
rules.push(selectorRule, selectorP3Rule, selectorRec2020Rule);

// add color-scheme declaration if configured for this mode
// add color-scheme declaration first if configured for this mode
// (must be before other properties to ensure it appears first in output)
if (scheme) {
selectorRule.declarations['color-scheme'] = { value: scheme };
}

const selectorP3Rule: CSSRule = { selectors, nestedQuery: P3_MQ, declarations: {} };
const selectorRec2020Rule: CSSRule = { selectors, nestedQuery: REC2020_MQ, declarations: {} };
const selectorAliasDeclarations: CSSRule['declarations'] = {};
rules.push(selectorRule, selectorP3Rule, selectorRec2020Rule);

for (const token of selectorTokens) {
const localID = token.localID ?? token.token.id;

Expand Down
Loading