- /** Select native rules/compose and external imports; local links retain reachability. */
+ /** Select native rules/variants and external imports; local links retain reachability. */
nativeStylesheets?: string[]
pruneNativeStylesheets?: string[]
options?: MasterCSSDirectiveCompileOptions
diff --git a/examples/astro/README.md b/examples/astro/README.md
index 6510b639f..f92a4b09b 100644
--- a/examples/astro/README.md
+++ b/examples/astro/README.md
@@ -1,6 +1,6 @@
# Master CSS Astro example
-This example uses `@master/css-astro` with its default `progressive` mode.
+This example explicitly selects `progressive` mode in `@master/css-astro`. The integration's default is `static`.
The integration:
@@ -25,7 +25,7 @@ The integration:
└── package.json
```
-`astro.config.js` registers `masterCSS()` with no options because progressive rendering is the default.
+`astro.config.js` registers `masterCSS({ mode: 'progressive' })` to enable server rendering and browser hydration for this example.
`src/layouts/Layout.astro` imports the Master CSS default stylesheet globally:
diff --git a/examples/astro/astro.config.js b/examples/astro/astro.config.js
index 7717c647a..020606b95 100644
--- a/examples/astro/astro.config.js
+++ b/examples/astro/astro.config.js
@@ -8,6 +8,6 @@ export default defineConfig({
trailingSlash: 'never',
integrations: [
sitemap(),
- masterCSS() // progressive rendering by default
+ masterCSS({ mode: 'progressive' })
]
})
diff --git a/examples/astro/src/pages/index.astro b/examples/astro/src/pages/index.astro
index 9b36064f8..3346e2cb8 100644
--- a/examples/astro/src/pages/index.astro
+++ b/examples/astro/src/pages/index.astro
@@ -10,7 +10,7 @@ import Card from '../components/Card.astro';
Astro integration
- Progressive rendering by default
+ Explicit progressive rendering
The Astro integration pre-renders the CSS needed for the initial HTML and hydrates the Master CSS runtime for classes that appear later in the browser.
@@ -44,8 +44,8 @@ import Card from '../components/Card.astro';
/>
diff --git a/examples/lit/src/my-element.ts b/examples/lit/src/my-element.ts
index d75479928..2db6b2362 100644
--- a/examples/lit/src/my-element.ts
+++ b/examples/lit/src/my-element.ts
@@ -38,7 +38,7 @@ export class MyElement extends LitElement {
- 
+
diff --git a/examples/svelte/README.md b/examples/svelte/README.md
index 0cff1c5eb..b5f4597c3 100644
--- a/examples/svelte/README.md
+++ b/examples/svelte/README.md
@@ -16,4 +16,4 @@
## Documentation
Check out the official [documentation](https://rc.css.master.co/guide/installation/svelte).
-This example uses the default integration from `@master/css-svelte/vite` with the default `progressive` mode and re-exports the named SvelteKit server `handle` from `@master/css-svelte/hooks.server`.
+This example explicitly selects `masterCSS({ mode: 'progressive' })` from `@master/css-svelte/vite`, loads `virtual:master-css-runtime` in `src/hooks.client.ts`, and re-exports the named SvelteKit server `handle` from `@master/css-svelte/hooks.server`. The integration's default mode is `static`, which needs neither hook.
diff --git a/examples/svelte/package.json b/examples/svelte/package.json
index 21f453251..534960d84 100644
--- a/examples/svelte/package.json
+++ b/examples/svelte/package.json
@@ -26,7 +26,7 @@
"globals": "^17.12.0",
"svelte": "^5.57.0",
"svelte-check": "^4.7.6",
- "typescript": "^7.0.2",
+ "typescript": "^6.0.3",
"typescript-eslint": "^8.69.0",
"vite": "^8.2.2"
},
diff --git a/examples/svelte/src/hooks.client.ts b/examples/svelte/src/hooks.client.ts
new file mode 100644
index 000000000..a9a5cf794
--- /dev/null
+++ b/examples/svelte/src/hooks.client.ts
@@ -0,0 +1,3 @@
+///
+
+import 'virtual:master-css-runtime'
diff --git a/examples/svelte/vite.config.ts b/examples/svelte/vite.config.ts
index 4e8ee415c..fac626880 100644
--- a/examples/svelte/vite.config.ts
+++ b/examples/svelte/vite.config.ts
@@ -5,6 +5,6 @@ import masterCSS from '@master/css-svelte/vite'
export default defineConfig({
plugins: [
sveltekit(),
- masterCSS(),
+ masterCSS({ mode: 'progressive' }),
]
})
diff --git a/examples/vite/index.html b/examples/vite/index.html
index 96b4347d9..5ce1f2b3d 100644
--- a/examples/vite/index.html
+++ b/examples/vite/index.html
@@ -16,7 +16,7 @@
- 
+
diff --git a/package.json b/package.json
index 20317b967..befab006a 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
"build:rust:native": "cargo xtask build-native --release",
"build:rust:wasm": "cargo xtask build-wasm all",
"build:site": "pnpm build && pnpm --filter site build",
- "build:site:cloudflare-pages": "pnpm build && pnpm --filter site build:cloudflare-pages",
+ "build:site:cloudflare-pages": "bash scripts/build-site-hosted.sh",
"build:examples": "node scripts/with-typescript-tooling-compat.mjs turbo run build --filter=\"./examples/*\"",
"dev:site": "pnpm build && pnpm --filter site dev",
"dev:site:clean": "pnpm --filter site clean:next && pnpm dev:site",
diff --git a/packages/astro/README.md b/packages/astro/README.md
index 803d858ae..b50ea2c66 100644
--- a/packages/astro/README.md
+++ b/packages/astro/README.md
@@ -71,9 +71,9 @@ export default defineConfig({
})
```
-The integration uses `progressive` mode by default. It registers Astro middleware to pre-render initial CSS into ``,
- filename: 'test.vue',
- languageOptions: {
- parser: await import('vue-eslint-parser')
- }
- },
-{
- code: ``,
- filename: 'test.svelte',
- languageOptions: {
- parser: await import('svelte-eslint-parser')
- }
- },
-{
-code: `.btn { @compose w-md h-md mt-md mb-md; }`,
-filename: 'test.css',
-languageOptions: {
- parser: cssParser
- }
-},
-{
-code: ``,
-filename: 'test.svelte',
-languageOptions: {
- parser: await import('svelte-eslint-parser')
- }
-}
-],
- invalid: [
-{
- code: `.btn { @compose font-size:16px margin-md; }`,
- output: `.btn { @compose m-md; font-size: 16px; }`,
- filename: 'test.css',
- languageOptions: {
- parser: cssParser
- },
- errors: [
- { messageId: 'preferClass' },
- { messageId: 'preferClass' },
- ]
- },
-{
- code: `.btn { @compose block@dark@sm font-size:16px@dark@sm; }`,
- output: [".btn { @variant dark@sm { @compose block font-size:16px; } }",".btn { @variant dark@sm { @compose block; font-size: 16px; } }"],
- filename: 'test.css',
- languageOptions: {
- parser: cssParser
- },
- errors: [
- { messageId: 'preferClass' },
- { messageId: 'preferClass' },
- ]
- },
-{
- code: `.btn {
- @compose
- font-size:16px
- margin-md
- ;
-}`,
- output: ".btn {\n @compose m-md;\n font-size: 16px;\n}",
- filename: 'test.css',
- languageOptions: {
- parser: cssParser
- },
- errors: [
- { messageId: 'preferClass' },
- { messageId: 'preferClass' },
- ]
- },
-{
- code: ``,
- output: ``,
- filename: 'test.vue',
- languageOptions: {
- parser: await import('vue-eslint-parser')
- },
- errors: [
- { messageId: 'preferClass' },
- { messageId: 'preferClass' },
- ]
- }
-]
-})
diff --git a/packages/eslint-plugin/tests/schema.test.ts b/packages/eslint-plugin/tests/schema.test.ts
index 708ebed00..db20d20f6 100644
--- a/packages/eslint-plugin/tests/schema.test.ts
+++ b/packages/eslint-plugin/tests/schema.test.ts
@@ -71,18 +71,7 @@ test('rejects rule options for rules configured through settings only', async ()
.rejects.toThrow()
})
-test('provides an opt-in stylesheet config', async () => {
- const [diagnosticResult] = await new ESLint({
- overrideConfigFile: true,
- overrideConfig: [plugin.configs.stylesheet]
- }).lintText(`.btn { @compose contain:content; }`, { filePath: 'index.css' })
- const [fixResult] = await new ESLint({
- fix: true,
- overrideConfigFile: true,
- overrideConfig: [plugin.configs.stylesheet]
- }).lintText(`.btn { @compose contain:content; }`, { filePath: 'index.css' })
-
- expect(diagnosticResult.messages).toHaveLength(1)
- expect(diagnosticResult.messages[0].ruleId).toBe('@master/css/prefer-canonical-classes')
- expect(fixResult.output).toBe('.btn { contain: content; }')
+test('does not expose the removed compose stylesheet config', () => {
+ expect(plugin.configs).not.toHaveProperty('stylesheet')
+ expect(plugin.configs.recommended).toEqual([plugin.configs.source])
})
diff --git a/packages/language-server/README.md b/packages/language-server/README.md
index a550ab0ca..b6226173e 100644
--- a/packages/language-server/README.md
+++ b/packages/language-server/README.md
@@ -87,7 +87,7 @@ The language server supports full-document and active-position semantic tokens.
| `active` | Uses the VS Code extension request for active class-context highlighting. |
| `off` | Disables embedded utility highlighting. |
-CSS directive syntax is highlighted by the shared TextMate grammar. Server semantic tokens cover Master CSS class-list spans and directive class-list spans such as `@compose` and `@safelist`.
+CSS directive syntax is highlighted by the shared TextMate grammar. Server semantic tokens cover Master CSS class-list spans and directive class-list spans such as `@safelist`.
## Formatting
diff --git a/packages/language-server/src/core.ts b/packages/language-server/src/core.ts
index 13a53d224..a217c6035 100644
--- a/packages/language-server/src/core.ts
+++ b/packages/language-server/src/core.ts
@@ -453,7 +453,7 @@ export class MasterCSSLanguageServer implements Disposable {
async initWorkspaceLanguageService(workspace: MasterCSSWorkspace) {
workspace.baseManifest = await this.loadWorkspaceBaseManifest(workspace)
- let workspacePlan: MasterCSSManifest | undefined
+ let workspacePlan: Awaited>
workspace.manifestErrors = []
if (workspace !== this.globalWorkspace) {
try {
@@ -469,12 +469,12 @@ export class MasterCSSLanguageServer implements Disposable {
this.console.info(`Initialized workspace ${workspace.uri}`)
}
}
- const manifest = workspacePlan
+ const manifest = workspacePlan?.manifest
?? workspace.languageServiceSettings.manifest
?? workspace.baseManifest
workspace.languageService = new MasterCSSLanguageService(
{ ...workspace.languageServiceSettings, manifest },
- { session: await createToolingSession({ manifest }) }
+ { session: await createToolingSession({ manifest, nativeClassNames: workspacePlan?.nativeClassNames }) }
)
}
@@ -499,14 +499,14 @@ export class MasterCSSLanguageServer implements Disposable {
private async loadWorkspacePlan(workspace: MasterCSSWorkspace, baseManifest: MasterCSSManifest) {
const entries = workspace.planEntries ?? []
- if (!entries.length) return workspace.languageServiceSettings.manifest
+ if (!entries.length) return undefined
const cwd = workspace.uri ? URI.parse(workspace.uri).fsPath : process.cwd()
const result = await loadProjectManifest({
root: cwd,
entries,
baseManifest
})
- return result.manifest
+ return result
}
private async loadWorkspaceBaseManifest(workspace: MasterCSSWorkspace): Promise {
diff --git a/packages/language-server/tests/bug-hunt-manifest-diagnostic-contract.test.ts b/packages/language-server/tests/bug-hunt-manifest-diagnostic-contract.test.ts
index 3374c6746..66b3509e2 100644
--- a/packages/language-server/tests/bug-hunt-manifest-diagnostic-contract.test.ts
+++ b/packages/language-server/tests/bug-hunt-manifest-diagnostic-contract.test.ts
@@ -12,7 +12,7 @@ withFixture('invalid-manifest', context => {
const error = context.rootWorkspace?.manifestErrors?.[0]
expect(error).toMatchObject({ name: 'MasterCSSError' })
const original = getMasterCSSDiagnostics(error)?.[0]
- expect(original?.code).toBe('compose-quoted-syntax')
+ expect(original?.code).toBe('removed-compose-directive')
expect(original?.source).toMatch(/invalid-manifest[/\\]index\.css$/)
const diagnostics = sendDiagnostics.mock.calls.at(-1)?.[0].diagnostics
expect(diagnostics).toHaveLength(1)
diff --git a/packages/language-server/tests/diagnostics.test.ts b/packages/language-server/tests/diagnostics.test.ts
index 74b537389..c35ed00c0 100644
--- a/packages/language-server/tests/diagnostics.test.ts
+++ b/packages/language-server/tests/diagnostics.test.ts
@@ -16,9 +16,9 @@ withFixture('basic', async (context) => {
const diagnostics = sendDiagnostics.mock.calls.at(-1)?.[0].diagnostics || []
const diagnostic = diagnostics[0]
expect(diagnostics).toHaveLength(1)
- expect(diagnostic.code).toBe('invalid-compose-class')
- expect(document.offsetAt(diagnostic.range.start)).toBe(text.indexOf('not-a-real-class'))
- expect(document.offsetAt(diagnostic.range.end)).toBe(text.indexOf('not-a-real-class') + 'not-a-real-class'.length)
+ expect(diagnostic.code).toBe('removed-compose-directive')
+ expect(document.offsetAt(diagnostic.range.start)).toBe(text.indexOf('@compose'))
+ expect(document.offsetAt(diagnostic.range.end)).toBe(text.indexOf('@compose') + '@compose'.length)
await context.server.onDidClose({ document })
sendDiagnostics.mockRestore()
@@ -34,9 +34,9 @@ withFixture('basic', async (context) => {
const diagnostics = sendDiagnostics.mock.calls.at(-1)?.[0].diagnostics || []
const diagnostic = diagnostics[0]
expect(diagnostics).toHaveLength(1)
- expect(diagnostic.code).toBe('invalid-compose-class')
- expect(document.offsetAt(diagnostic.range.start)).toBe(text.indexOf('not-a-real-class'))
- expect(document.offsetAt(diagnostic.range.end)).toBe(text.indexOf('not-a-real-class') + 'not-a-real-class'.length)
+ expect(diagnostic.code).toBe('removed-compose-directive')
+ expect(document.offsetAt(diagnostic.range.start)).toBe(text.indexOf('@compose'))
+ expect(document.offsetAt(diagnostic.range.end)).toBe(text.indexOf('@compose') + '@compose'.length)
await context.server.onDidClose({ document })
sendDiagnostics.mockRestore()
@@ -53,8 +53,8 @@ withFixture('basic', async (context) => {
const diagnostic = sendDiagnostics.mock.calls.at(-1)?.[0].diagnostics[0]
expect(diagnostic).toBeDefined()
if (!diagnostic) throw new Error('Expected an SFC diagnostic.')
- expect(document.offsetAt(diagnostic.range.start)).toBe(text.lastIndexOf('not-a-real-class'))
- expect(document.offsetAt(diagnostic.range.end)).toBe(text.lastIndexOf('not-a-real-class') + 'not-a-real-class'.length)
+ expect(document.offsetAt(diagnostic.range.start)).toBe(text.lastIndexOf('@compose'))
+ expect(document.offsetAt(diagnostic.range.end)).toBe(text.lastIndexOf('@compose') + '@compose'.length)
await context.server.onDidClose({ document })
sendDiagnostics.mockRestore()
@@ -70,9 +70,9 @@ withFixture('basic', async (context) => {
const diagnostics = sendDiagnostics.mock.calls.at(-1)?.[0].diagnostics || []
const diagnostic = diagnostics[0]
expect(diagnostics).toHaveLength(1)
- expect(diagnostic.code).toBe('invalid-compose-class')
- expect(document.offsetAt(diagnostic.range.start)).toBe(text.indexOf('not-a-real-class'))
- expect(document.offsetAt(diagnostic.range.end)).toBe(text.indexOf('not-a-real-class') + 'not-a-real-class'.length)
+ expect(diagnostic.code).toBe('removed-compose-directive')
+ expect(document.offsetAt(diagnostic.range.start)).toBe(text.indexOf('@compose'))
+ expect(document.offsetAt(diagnostic.range.end)).toBe(text.indexOf('@compose') + '@compose'.length)
await context.server.onDidClose({ document })
sendDiagnostics.mockRestore()
@@ -88,9 +88,9 @@ withFixture('basic', async (context) => {
const diagnostics = sendDiagnostics.mock.calls.at(-1)?.[0].diagnostics || []
const diagnostic = diagnostics[0]
expect(diagnostics).toHaveLength(1)
- expect(diagnostic.code).toBe('compose-quoted-syntax')
- expect(document.offsetAt(diagnostic.range.start)).toBe(text.indexOf('"block"'))
- expect(document.offsetAt(diagnostic.range.end)).toBe(text.indexOf('"block"') + '"block"'.length)
+ expect(diagnostic.code).toBe('removed-compose-directive')
+ expect(document.offsetAt(diagnostic.range.start)).toBe(text.indexOf('@compose'))
+ expect(document.offsetAt(diagnostic.range.end)).toBe(text.indexOf('@compose') + '@compose'.length)
await context.server.onDidClose({ document })
sendDiagnostics.mockRestore()
@@ -106,9 +106,9 @@ withFixture('basic', async (context) => {
const diagnostics = sendDiagnostics.mock.calls.at(-1)?.[0].diagnostics || []
const diagnostic = diagnostics[0]
expect(diagnostics).toHaveLength(1)
- expect(diagnostic.code).toBe('compose-group-syntax')
- expect(document.offsetAt(diagnostic.range.start)).toBe(text.indexOf('{block}'))
- expect(document.offsetAt(diagnostic.range.end)).toBe(text.indexOf('{block}') + '{block}'.length)
+ expect(diagnostic.code).toBe('removed-compose-directive')
+ expect(document.offsetAt(diagnostic.range.start)).toBe(text.indexOf('@compose'))
+ expect(document.offsetAt(diagnostic.range.end)).toBe(text.indexOf('@compose') + '@compose'.length)
await context.server.onDidClose({ document })
sendDiagnostics.mockRestore()
@@ -127,7 +127,7 @@ withFixture('missing-workspace', async (context) => {
expect(context.rootWorkspace?.planEntries).toEqual([])
expect(context.rootWorkspace?.manifestErrors).toEqual([])
expect(diagnostics).toHaveLength(1)
- expect(diagnostics[0].code).toBe('invalid-compose-class')
+ expect(diagnostics[0].code).toBe('removed-compose-directive')
await context.server.onDidClose({ document })
sendDiagnostics.mockRestore()
@@ -143,7 +143,7 @@ withFixture('invalid-manifest', async (context) => {
const diagnostics = sendDiagnostics.mock.calls.at(-1)?.[0].diagnostics || []
expect(diagnostics).toHaveLength(1)
- expect(diagnostics[0].code).toBe('compose-quoted-syntax')
+ expect(diagnostics[0].code).toBe('removed-compose-directive')
expect(diagnostics[0].message).toContain('Failed to load Master CSS manifest')
await context.server.onDidClose({ document })
diff --git a/packages/language-server/tests/formatting.test.ts b/packages/language-server/tests/formatting.test.ts
index d88746fe9..ad327cbad 100644
--- a/packages/language-server/tests/formatting.test.ts
+++ b/packages/language-server/tests/formatting.test.ts
@@ -25,7 +25,7 @@ withFixture('basic', async (context) => {
})
test('returns document formatting edits for CSS directives', async ({ expect }) => {
- const textDocument = context.createDocument('.btn { @compose background-color:transparent ! fg-red !@sm; }', { lang: 'css' })
+ const textDocument = context.createDocument('@safelist "background-color:transparent ! fg-red !@sm";', { lang: 'css' })
await context.server.onDidOpen({ document: textDocument })
const edits = await context.clientConnection.sendRequest(DocumentFormattingRequest.method, {
textDocument: {
@@ -37,12 +37,12 @@ withFixture('basic', async (context) => {
}
})
- expect(applyTextEdits(textDocument, edits)).toBe('.btn { @compose background-color:transparent! fg-red!@sm; }')
+ expect(applyTextEdits(textDocument, edits)).toBe('@safelist "background-color:transparent! fg-red!@sm";')
await context.server.onDidClose({ document: textDocument })
})
test('returns range formatting edits for CSS directives', async ({ expect }) => {
- const source = '.a { @compose bg-red !; }\n.b { @compose bg-blue !; }'
+ const source = '@safelist "bg-red !";\n@safelist "bg-blue !";'
const textDocument = context.createDocument(source, { lang: 'css' })
await context.server.onDidOpen({ document: textDocument })
const edits = await context.clientConnection.sendRequest(DocumentRangeFormattingRequest.method, {
@@ -50,7 +50,7 @@ withFixture('basic', async (context) => {
uri: textDocument.uri
},
range: {
- start: textDocument.positionAt(source.indexOf('@compose bg-blue')),
+ start: textDocument.positionAt(source.indexOf('@safelist "bg-blue')),
end: textDocument.positionAt(source.length)
},
options: {
@@ -59,7 +59,7 @@ withFixture('basic', async (context) => {
}
})
- expect(applyTextEdits(textDocument, edits)).toBe('.a { @compose bg-red !; }\n.b { @compose bg-blue!; }')
+ expect(applyTextEdits(textDocument, edits)).toBe('@safelist "bg-red !";\n@safelist "bg-blue!";')
await context.server.onDidClose({ document: textDocument })
})
})
diff --git a/packages/language-server/tests/native-sizing.test.ts b/packages/language-server/tests/native-sizing.test.ts
new file mode 100644
index 000000000..a3e3d2101
--- /dev/null
+++ b/packages/language-server/tests/native-sizing.test.ts
@@ -0,0 +1,33 @@
+import { mkdtempSync, rmSync, writeFileSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import { expect, test } from 'vitest'
+import { URI } from 'vscode-uri'
+import type { MasterCSSWorkspace } from '../src'
+import { connect } from './connection'
+
+test('workspace reload updates native class registrations used by inspection', async () => {
+ const root = mkdtempSync(join(tmpdir(), 'master-native-sizing-'))
+ const entry = join(root, 'index.css')
+ const workspace: MasterCSSWorkspace = {
+ uri: URI.file(root).toString(), openedTextDocuments: [],
+ languageServiceSettings: {}, planEntries: [entry]
+ }
+ const { server, clientConnection } = connect()
+ try {
+ writeFileSync(entry, String.raw`@master entry; .size\:20px { color:red; }`)
+ await server.initWorkspaceLanguageService(workspace)
+ const inspect = (name: string) => workspace.languageService!.session.inspectClassName(name)
+ expect(inspect('size:20px').diagnostics?.some(d => d.code === 'REMOVED_PRESET_UTILITY')).toBe(false)
+ expect(inspect('size:30px').diagnostics?.some(d => d.code === 'REMOVED_PRESET_UTILITY')).toBe(true)
+ workspace.languageService?.dispose()
+ writeFileSync(entry, '@master entry;')
+ await server.initWorkspaceLanguageService(workspace)
+ expect(inspect('size:20px').diagnostics?.some(d => d.code === 'REMOVED_PRESET_UTILITY')).toBe(true)
+ } finally {
+ workspace.languageService?.dispose()
+ server.dispose()
+ clientConnection.dispose()
+ rmSync(root, { recursive: true, force: true })
+ }
+})
diff --git a/packages/language-server/tests/semantic-tokens.test.ts b/packages/language-server/tests/semantic-tokens.test.ts
index cf63b30ad..e098207f7 100644
--- a/packages/language-server/tests/semantic-tokens.test.ts
+++ b/packages/language-server/tests/semantic-tokens.test.ts
@@ -46,7 +46,7 @@ withFixture('basic', async (context) => {
})
test('returns CSS directive class-list semantic tokens in active mode', async ({ expect }) => {
- const textDocument = context.createDocument('@theme dark { --color-primary: --alpha(var(--color-blue-60) / 80%); }\n@utilities { btn { @compose fg-red block; } }', { lang: 'css' })
+ const textDocument = context.createDocument("@theme dark { --color-primary: --alpha(var(--color-blue-60) / 80%); }\n@safelist \"block fg-red\";", { lang: 'css' })
await context.server.onDidOpen({ document: textDocument })
const semanticTokens = await context.clientConnection.sendRequest<{ data: number[] }>(DOCUMENT_SEMANTIC_TOKENS_REQUEST, {
textDocument: {
@@ -119,7 +119,7 @@ withFixture('basic', async (context) => {
'}',
'@supports (container-type: inline-size) {',
' @container card (width > 30rem) {',
- ' @layer utilities {',
+ ' @layer components {',
' .btn:is(.active, #featured) { animation: fade 1s ease-in-out; }',
' }',
' }',
@@ -184,7 +184,7 @@ withFixture('basic', async (context) => {
})
test('returns CSS directive class-list semantic tokens when highlighting is off', async ({ expect }) => {
- const textDocument = context.createDocument('@theme dark { --color-primary: --alpha(var(--color-blue-60) / 80%); }\n@utilities { btn { @compose block; } }', { lang: 'css' })
+ const textDocument = context.createDocument("@theme dark { --color-primary: --alpha(var(--color-blue-60) / 80%); }\n@safelist \"block\";", { lang: 'css' })
await context.server.onDidOpen({ document: textDocument })
const semanticTokens = await context.clientConnection.sendRequest<{ data: number[] }>(DOCUMENT_SEMANTIC_TOKENS_REQUEST, {
textDocument: {
diff --git a/packages/language-service/README.md b/packages/language-service/README.md
index 16f2ee13a..3db2a0177 100644
--- a/packages/language-service/README.md
+++ b/packages/language-service/README.md
@@ -91,7 +91,7 @@ Use `renderSemanticTokensAtPosition()` when a client wants active-only highlight
const semanticTokens = languageService.renderSemanticTokensAtPosition(textDocument, position)
```
-CSS directive syntax in CSS-family documents is highlighted by the shared TextMate grammar. Semantic tokens are only added for directive class-list spans such as bare `@compose` preludes and quoted `@safelist` strings.
+CSS directive syntax in CSS-family documents is highlighted by the shared TextMate grammar. Semantic tokens are only added for directive class-list spans such as quoted `@safelist` strings.
### Directive formatting
diff --git a/packages/language-service/playground/has-check.html b/packages/language-service/playground/has-check.html
index 98f833ccc..7ba5de6ac 100644
--- a/packages/language-service/playground/has-check.html
+++ b/packages/language-service/playground/has-check.html
@@ -1,5 +1,5 @@
diff --git a/packages/language-service/src/shiki.ts b/packages/language-service/src/shiki.ts
index c5e34755f..e301d6553 100644
--- a/packages/language-service/src/shiki.ts
+++ b/packages/language-service/src/shiki.ts
@@ -379,7 +379,7 @@ const SEMANTIC_SCOPE_STYLE_PROBE = [
' --token: var(--value);',
'}',
'@utilities {',
- ' btn { @compose block fg-red:hover@md; }',
+ ' btn { display: block; &:hover { color: red; } }',
'}',
'.x, div > li:hover::before {',
' color: red !important;',
diff --git a/packages/language-service/syntaxes/master-css.tmLanguage.json b/packages/language-service/syntaxes/master-css.tmLanguage.json
index bf4e1010c..e90b42b95 100644
--- a/packages/language-service/syntaxes/master-css.tmLanguage.json
+++ b/packages/language-service/syntaxes/master-css.tmLanguage.json
@@ -193,25 +193,6 @@
}
]
},
- {
- "begin": "(@)(compose)\\b",
- "beginCaptures": {
- "0": {
- "name": "keyword.control.at-rule.master-css"
- }
- },
- "end": "(;)|$",
- "endCaptures": {
- "1": {
- "name": "punctuation.section.master-css"
- }
- },
- "patterns": [
- {
- "include": "#master-compose-prelude"
- }
- ]
- },
{
"begin": "(@)(variant|dark|light)\\b",
"beginCaptures": {
@@ -283,26 +264,6 @@
}
]
},
- "master-compose-prelude": {
- "patterns": [
- {
- "include": "#master-string"
- },
- {
- "include": "#master-query"
- },
- {
- "include": "#master-selector"
- },
- {
- "include": "#master-class-fragment"
- },
- {
- "match": "[;{}]",
- "name": "punctuation.section.master-css"
- }
- ]
- },
"master-custom-variant-prelude": {
"patterns": [
{
diff --git a/packages/language-service/tests/format-directives.test.ts b/packages/language-service/tests/format-directives.test.ts
index 117d8be07..bc075349b 100644
--- a/packages/language-service/tests/format-directives.test.ts
+++ b/packages/language-service/tests/format-directives.test.ts
@@ -19,48 +19,48 @@ function format(ext: Parameters[0], source: string, settings?:
return applyTextEdits(source, languageService.formatDirectives(doc) ?? [], doc)
}
-test.concurrent('formats CSS @compose important markers', () => {
- expect(format('css', '.btn { @compose background-color:transparent ! fg-red !@sm; }'))
- .toBe('.btn { @compose background-color:transparent! fg-red!@sm; }')
+test.concurrent('formats CSS @safelist important markers', () => {
+ expect(format('css', ".btn { @safelist \"background-color:transparent ! fg-red !@sm\"; }"))
+ .toBe(".btn { @safelist \"background-color:transparent! fg-red!@sm\"; }")
})
test.concurrent('formats SCSS and LESS directive class lists', () => {
- expect(format('scss', '.btn { @compose background-color:transparent !; }')).toBe('.btn { @compose background-color:transparent!; }')
- expect(format('less', '.btn { @compose background-color:transparent !; }')).toBe('.btn { @compose background-color:transparent!; }')
+ expect(format('scss', ".btn { @safelist \"background-color:transparent !\"; }")).toBe(".btn { @safelist \"background-color:transparent!\"; }")
+ expect(format('less', ".btn { @safelist \"background-color:transparent !\"; }")).toBe(".btn { @safelist \"background-color:transparent!\"; }")
})
test.concurrent('formats CSS-family SFC style blocks only', () => {
const source = [
'',
'',
'',
''
].join('\n')
expect(format('vue', source)).toBe([
'',
'',
'',
''
].join('\n'))
})
test.concurrent('locates SFC style content after matching attribute text', () => {
- const directive = '.btn { @compose background-color:transparent !; }'
- const source = ``
+ const directive = ".btn { @safelist \"background-color:transparent !\"; }"
+ const source = ``
expect(format('vue', source))
- .toBe(``)
+ .toBe(``)
})
test.concurrent('formats safelist quoted class lists', () => {
@@ -69,18 +69,18 @@ test.concurrent('formats safelist quoted class lists', () => {
})
test.concurrent('returns no edits when directive formatting is disabled', () => {
- expect(format('css', '.btn { @compose background-color:transparent !; }', { formatDirectives: false }))
- .toBe('.btn { @compose background-color:transparent !; }')
+ expect(format('css', ".btn { @safelist \"background-color:transparent !\"; }", { formatDirectives: false }))
+ .toBe(".btn { @safelist \"background-color:transparent !\"; }")
})
test.concurrent('respects range formatting', () => {
- const source = '.a { @compose bg-red !; }\n.b { @compose bg-blue !; }'
+ const source = ".a { @safelist \"bg-red !\"; }\n.b { @safelist \"bg-blue !\"; }"
const doc = createDoc('css', source)
const languageService = new CSSLanguageService()
- const start = doc.positionAt(source.indexOf('@compose bg-blue'))
+ const start = doc.positionAt(source.indexOf('@safelist "bg-blue'))
const edits = languageService.formatDirectives(doc, {
start,
end: doc.positionAt(source.length)
}) ?? []
- expect(applyTextEdits(source, edits, doc)).toBe('.a { @compose bg-red !; }\n.b { @compose bg-blue!; }')
+ expect(applyTextEdits(source, edits, doc)).toBe(".a { @safelist \"bg-red !\"; }\n.b { @safelist \"bg-blue!\"; }")
})
diff --git a/packages/language-service/tests/get-class-position/test.ts b/packages/language-service/tests/get-class-position/test.ts
index 87a0566ad..7da60e0a7 100644
--- a/packages/language-service/tests/get-class-position/test.ts
+++ b/packages/language-service/tests/get-class-position/test.ts
@@ -61,13 +61,13 @@ test.concurrent('valid classes', () => {
test.concurrent('class in CSS @compose', () => {
const target = 'bg-primary'
- const contents = ['.btn { @compose inline-flex ', target, '; }']
+ const contents = ['.btn { @safelist "inline-flex ', target, '"; }']
expectClassPosition(target, contents, 'css')
})
test.concurrent('class in Vue style @compose', () => {
const target = 'bg-primary'
- const contents = ['']
+ const contents = ['']
expectClassPosition(target, contents, 'vue')
})
diff --git a/packages/language-service/tests/rc87-browser.test.ts b/packages/language-service/tests/rc87-browser.test.ts
index 730769ff8..d344fdb6a 100644
--- a/packages/language-service/tests/rc87-browser.test.ts
+++ b/packages/language-service/tests/rc87-browser.test.ts
@@ -81,28 +81,7 @@ test.concurrent('encodes browser role-derived semantic token modifiers', () => {
})
test.concurrent('collects browser semantic tokens only for CSS directive class-list spans', () => {
- const source = `
- @safelist "hidden fg-red";
-
- @theme {
- --color-brand: var(--brand, #123);
-
- @keyframes fade {
- to {
- opacity: 1;
- }
- }
- }
-
- @utilities {
- btn {
- @compose block fg-brand;
- &:hover {
- color: var(--brand, red);
- }
- }
- }
- `
+ const source = "\n @safelist \"hidden fg-red\";\n\n @theme {\n --color-brand: var(--brand, #123);\n\n @keyframes fade {\n to {\n opacity: 1;\n }\n }\n }\n\n @utilities {\n btn {\n @safelist \"block fg-brand\";\n &:hover {\n color: var(--brand, red);\n }\n }\n }\n "
const tokens = collectBrowserSemanticTokenItems(source, 'css', { manifest })
const mapped = tokens.map((token) => ({
text: tokenText(source, token),
diff --git a/packages/language-service/tests/rc87-shiki.test.ts b/packages/language-service/tests/rc87-shiki.test.ts
index 6b6e4dd47..8ce709e77 100644
--- a/packages/language-service/tests/rc87-shiki.test.ts
+++ b/packages/language-service/tests/rc87-shiki.test.ts
@@ -125,14 +125,14 @@ test.concurrent('defines deterministic TextMate grammar scopes for CSS directive
const directive = grammarEntry('master-directive')
const themeDirective = findGrammarPattern(directive, (pattern) => pattern.begin === '(@)(theme)\\b')
const managedDirective = findGrammarPattern(directive, (pattern) => pattern.begin === '(@)(utilities)\\b')
- const composeDirective = findGrammarPattern(directive, (pattern) => pattern.begin === '(@)(compose)\\b')
+ const safelistDirective = findGrammarPattern(directive, (pattern) => pattern.begin === '(@)(safelist)\\b')
expect(themeDirective.beginCaptures?.['0']?.name).toBe('keyword.control.at-rule.master-css')
expect(managedDirective.beginCaptures?.['0']?.name).toBe('keyword.control.at-rule.master-css')
- expect(composeDirective.beginCaptures?.['0']?.name).toBe('keyword.control.at-rule.master-css')
+ expect(safelistDirective.beginCaptures?.['0']?.name).toBe('keyword.control.at-rule.master-css')
expectGrammarIncludes({ patterns: themeDirective.patterns ?? [] }, ['#master-theme-block', '#master-theme-prelude'])
expectGrammarIncludes({ patterns: managedDirective.patterns ?? [] }, ['#master-managed-block'])
- expectGrammarIncludes({ patterns: composeDirective.patterns ?? [] }, ['#master-compose-prelude'])
+ expectGrammarIncludes({ patterns: safelistDirective.patterns ?? [] }, ['#master-string'])
const themeBlock = grammarEntry('master-theme-block')
expectGrammarIncludes({ patterns: themeBlock.patterns[0]?.patterns ?? [] }, [
@@ -148,8 +148,7 @@ test.concurrent('defines deterministic TextMate grammar scopes for CSS directive
}))
expect(JSON.stringify(themeValue)).not.toContain('--alpha')
- const composePrelude = grammarEntry('master-compose-prelude')
- expectGrammarIncludes(composePrelude, ['#master-string', '#master-query', '#master-selector', '#master-class-fragment'])
+ expect(MASTER_CSS_TEXTMATE_GRAMMAR.repository).not.toHaveProperty('master-compose-prelude')
const classFragment = grammarEntry('master-class-fragment')
findGrammarPattern(classFragment, (pattern) => pattern.name === 'support.constant.property-value.master-css')
@@ -198,7 +197,7 @@ test('registers a real Shiki TextMate injection grammar for CSS directives', asy
'}',
'@utilities {',
' btn {',
- ' @compose inline-flex fg-primary:hover@md;',
+ " @safelist \"inline-flex fg-primary:hover@md\";",
' }',
'}',
'@keyframes fade {',
@@ -375,7 +374,7 @@ test.concurrent('creates Shiki decorations for CSS directive class-list spans',
'}',
'@utilities {',
' btn {',
- ' @compose inline-flex fg-brand:hover@sm;',
+ " @safelist \"inline-flex fg-brand:hover@sm\";",
' }',
'}'
].join('\n')
@@ -604,7 +603,7 @@ test.concurrent('uses semantic token scope styles for documentation Master CSS t
' --spacing-card: 24;',
'}',
'@utilities {',
- ' card { @compose bg-blue fg-brand:hover; }',
+ " card { @safelist \"bg-blue fg-brand:hover\"; }",
'}'
].join('\n')
const cssOptions = {
@@ -690,9 +689,9 @@ test.concurrent('uses semantic token scope styles for CSS directive class-list t
'@custom-variant motion-safe { @media (prefers-reduced-motion: no-preference) { @slot; } }',
'@utilities {',
' card {',
- ' @compose p-md r-xl;',
+ " @safelist \"p-md r-xl\";",
' @variant {',
- ' @compose block fg-red;',
+ " @safelist \"block fg-red\";",
' text-align: --value();',
' }',
'}'
@@ -253,17 +253,7 @@ test.concurrent('renders CSS document semantic tokens only inside directive clas
})
test.concurrent('renders CSS directives in SCSS-like sources', () => {
- const { tokens } = renderTokens(`
- $color: red;
-
- @theme {
- --color-primary: #123;
- }
-
- .btn {
- @compose block;
- }
- `, 'scss')
+ const { tokens } = renderTokens("\n $color: red;\n\n @theme {\n --color-primary: #123;\n }\n\n .btn {\n @safelist \"block\";\n }\n ", 'scss')
expectToken(tokens, 'block', 'enumMember')
expect(tokens).not.toContainEqual({ text: '@theme', type: 'keyword', modifiers: ['directive'] })
@@ -272,41 +262,7 @@ test.concurrent('renders CSS directives in SCSS-like sources', () => {
})
test.concurrent('renders detailed CSS directive semantic tokens only for class-list syntax', () => {
- const { tokens } = renderTokens(`
- @source not "src/**/*.{ts,tsx}";
- @reference "./tokens.css";
- @blocklist "debug-*";
- @safelist "block fg-red:hover@md";
-
- @theme static brand {
- --color-primary: --alpha(var(--color-blue-60) / 80%);
- --radius-card: 1rem;
- }
-
- @custom-variant headings { @media all { @slot; } }
-
- @utilities {
- btn {
- @compose inline-flex align-items:center fg-primary:hover@md;
-
- @variant h>=sm&h {
- text-decoration: --value();
- }
- }
- `, 'css', { manifest: createPresetManifest({ variables: [{ namespace: 'color', key: 'primary', value: '#4f46e5' }] }) })
+ const { tokens } = renderTokens("\n @source not \"src/**/*.{ts,tsx}\";\n @reference \"./tokens.css\";\n @blocklist \"debug-*\";\n @safelist \"block fg-red:hover@md\";\n\n @theme static brand {\n --color-primary: --alpha(var(--color-blue-60) / 80%);\n --radius-card: 1rem;\n }\n\n @custom-variant headings { @media all { @slot; } }\n\n @utilities {\n btn {\n @safelist \"inline-flex align-items:center fg-primary:hover@md\";\n\n @variant h>=sm&h {\n text-decoration: --value();\n }\n }\n ", 'css', { manifest: createPresetManifest({ variables: [{ namespace: 'color', key: 'primary', value: '#4f46e5' }] }) })
expectToken(tokens, 'block', 'enumMember')
expectToken(tokens, 'fg-red', 'enumMember')
@@ -441,7 +397,7 @@ test.concurrent('does not render active semantic tokens for CSS directive syntax
})
test.concurrent('renders active semantic tokens for CSS directive class-list spans', () => {
- const content = '@utilities { btn { @compose fg-red block:hover; } }'
+ const content = "@utilities { btn { @safelist \"fg-red block:hover\"; } }"
const doc = createDoc('css', content)
const languageService = new CSSLanguageService()
const semanticTokens = languageService.renderSemanticTokensAtPosition(doc, doc.positionAt(content.indexOf('block') + 1))
@@ -486,7 +442,7 @@ test.concurrent('skips embedded semantic tokens when syntax highlighting is off'
})
test.concurrent('renders CSS directive class-list semantic tokens when embedded highlighting is off', () => {
- const content = '@theme dark { --color-primary: --alpha(var(--color-blue-60) / 80%); }\n@utilities { btn { @compose block; } }'
+ const content = "@theme dark { --color-primary: --alpha(var(--color-blue-60) / 80%); }\n@utilities { btn { @safelist \"block\"; } }"
const doc = createDoc('css', content)
const languageService = new CSSLanguageService({ embeddedSyntaxHighlighting: 'off' })
const semanticTokens = languageService.renderSemanticTokens(doc)
diff --git a/packages/language-service/tests/render-semantic-tokens.test.ts b/packages/language-service/tests/render-semantic-tokens.test.ts
index 0b47fa636..2c35c8b7a 100644
--- a/packages/language-service/tests/render-semantic-tokens.test.ts
+++ b/packages/language-service/tests/render-semantic-tokens.test.ts
@@ -192,7 +192,7 @@ test.concurrent('renders semantic tokens for internal styles dogfood directives'
const { tokens } = renderTokens([
'@utilities {',
' monaco-editor {',
- ' @compose --vscode-editor-background:transparent! bg-blue filter:drop-shadow(0|2px|2px|rgba(0,0,0,.2px));',
+ " @safelist \"--vscode-editor-background:transparent! bg-blue filter:drop-shadow(0|2px|2px|rgba(0,0,0,.2px))\";",
' }',
'}'
].join('\n'), 'css')
@@ -259,90 +259,7 @@ test.concurrent('renders native-aligned semantic tokens for grouped classes with
})
test.concurrent('renders semantic tokens only for CSS directive class-list spans', () => {
- const { tokens } = renderTokens(`
- @master entry;
- @reference "./tokens.css";
- @safelist "block fg-red:hover@md";
-
- @settings {
- root-size: 16;
- }
-
- @theme dark {
- --color-primary: --alpha(var(--color-blue-60) / 80%);
- }
-
- @theme {
- @keyframes fade {
- to {
- opacity: 1;
- }
- }
- }
-
- @custom-variant motion-safe { @media (prefers-reduced-motion: no-preference) { @slot; } }
-
- @utilities {
- reset {
- @compose block;
- }
- }
-
- @utilities {
- btn {
- @compose inline-flex fg-primary:hover@md;
- @dark {
- @compose bg-blue;
- }
- @variant {
- text-align: --value();
- }
-
- font-<~font-size> {
- font-size: --value();
- }
-
- bg-<~color> {
- background-color: --value();
- }
-
- text-decoration-<~color> {
- text-decoration: --value();
- }
-
- user-select: {
- user-select: --value();
- }
-
- grid-cols:<*> {
- grid-template-columns: repeat(--value(), minmax(0, 1fr));
-
- @variant {\n text-align: --value();\n }\n\n font-<~font-size> {\n font-size: --value();\n }\n\n bg-<~color> {\n background-color: --value();\n }\n\n text-decoration-<~color> {\n text-decoration: --value();\n }\n\n user-select: {\n user-select: --value();\n }\n\n grid-cols:<*> {\n grid-template-columns: repeat(--value(), minmax(0, 1fr));\n\n @variant {
- const { tokens } = renderTokens(`
- @utilities {
- reset {
- @light {
- color: var(--text, black);
- }
- }
- }
-
- @utilities {
- btn {
- @compose inline-flex;
- @dark {
- background-color: oklch(20% 0.03 250);
- }
- @media (width >= 42rem) {
- .label:hover {
- transform: scale(1);
- }
- }
- }
-
- btn:hover {
- @compose block;
- }
- }
-
- @utilities {
- font:<~font-size|number> {
- font-size: --value();
- &:hover {
- text-align: var(--align, center);
- }
- }
-
- text- {
- text-align: --value();
- }
- }
- `, 'css')
+ const { tokens } = renderTokens("\n @utilities {\n reset {\n @light {\n color: var(--text, black);\n }\n }\n }\n\n @utilities {\n btn {\n @safelist \"inline-flex\";\n @dark {\n background-color: oklch(20% 0.03 250);\n }\n @media (width >= 42rem) {\n .label:hover {\n transform: scale(1);\n }\n }\n }\n\n btn:hover {\n @safelist \"block\";\n }\n }\n\n @utilities {\n font:<~font-size|number> {\n font-size: --value();\n &:hover {\n text-align: var(--align, center);\n }\n }\n\n text- {\n text-align: --value();\n }\n }\n ", 'css')
expectToken(tokens, 'inline-flex', 'enumMember')
expectToken(tokens, 'block', 'enumMember')
@@ -473,20 +351,7 @@ test.concurrent('renders semantic tokens only for compose class lists inside man
})
test.concurrent('renders CSS directive ranges with quoted semicolons', () => {
- const { tokens } = renderTokens(`
- @source not "a;b.css";
- @source "critical.tsx";
- @reference "./a;b.css";
- @safelist "block fg-red";
- @blocklist "debug-*";
- @preserve native;
-
- .btn {
- @compose fg-red;
- }
-
- @custom-variant quoted { @media (x: "a;b") { @slot; } }
- `, 'css')
+ const { tokens } = renderTokens("\n @source not \"a;b.css\";\n @source \"critical.tsx\";\n @reference \"./a;b.css\";\n @safelist \"block fg-red\";\n @blocklist \"debug-*\";\n @preserve native;\n\n .btn {\n @safelist \"fg-red\";\n }\n\n @custom-variant quoted { @media (x: \"a;b\") { @slot; } }\n ", 'css')
expectToken(tokens, 'block', 'enumMember')
expectToken(tokens, 'fg-red', 'enumMember')
diff --git a/packages/language-service/tests/shiki-grammar.test.ts b/packages/language-service/tests/shiki-grammar.test.ts
index 20c7d875b..525796dfe 100644
--- a/packages/language-service/tests/shiki-grammar.test.ts
+++ b/packages/language-service/tests/shiki-grammar.test.ts
@@ -54,15 +54,15 @@ test.concurrent('defines deterministic TextMate grammar scopes for CSS directive
const directive = grammarEntry('master-directive')
const themeDirective = findGrammarPattern(directive, (pattern) => pattern.begin === '(@)(theme)\\b')
const managedDirective = findGrammarPattern(directive, (pattern) => pattern.begin === '(@)(utilities)\\b')
- const composeDirective = findGrammarPattern(directive, (pattern) => pattern.begin === '(@)(compose)\\b')
+ const safelistDirective = findGrammarPattern(directive, (pattern) => pattern.begin === '(@)(safelist)\\b')
expect(themeDirective.beginCaptures?.['0']?.name).toBe('keyword.control.at-rule.master-css')
expect(managedDirective.beginCaptures?.['0']?.name).toBe('keyword.control.at-rule.master-css')
- expect(composeDirective.beginCaptures?.['0']?.name).toBe('keyword.control.at-rule.master-css')
+ expect(safelistDirective.beginCaptures?.['0']?.name).toBe('keyword.control.at-rule.master-css')
expect(directive.patterns.every((pattern) => pattern.beginCaptures?.['0']?.name === 'keyword.control.at-rule.master-css')).toBe(true)
expectGrammarIncludes({ patterns: themeDirective.patterns ?? [] }, ['#master-theme-block', '#master-theme-prelude'])
expectGrammarIncludes({ patterns: managedDirective.patterns ?? [] }, ['#master-managed-block'])
- expectGrammarIncludes({ patterns: composeDirective.patterns ?? [] }, ['#master-compose-prelude'])
+ expectGrammarIncludes({ patterns: safelistDirective.patterns ?? [] }, ['#master-string'])
const themeBlock = grammarEntry('master-theme-block')
expectGrammarIncludes({ patterns: themeBlock.patterns[0]?.patterns ?? [] }, [
@@ -78,8 +78,7 @@ test.concurrent('defines deterministic TextMate grammar scopes for CSS directive
}))
expect(JSON.stringify(themeValue)).not.toContain('--alpha')
- const composePrelude = grammarEntry('master-compose-prelude')
- expectGrammarIncludes(composePrelude, ['#master-string', '#master-query', '#master-selector', '#master-class-fragment'])
+ expect(MASTER_CSS_TEXTMATE_GRAMMAR.repository).not.toHaveProperty('master-compose-prelude')
const variantPrelude = grammarEntry('master-variant-prelude')
findGrammarPattern(variantPrelude, (pattern) => pattern.name === 'support.constant.property-value.master-css.query')
@@ -98,7 +97,7 @@ test.concurrent('defines deterministic TextMate grammar scopes for CSS directive
expect(propertyFragment.captures?.['2']?.name).toBe('keyword.operator.master-css')
})
-test('supports Shiki dynamic language imports', async () => {
+test('loads the grammar through a dynamic Shiki language import', async () => {
const masterCSSShikiLanguageImport = import('../src/shiki').then((module) => ({
default: [module.masterCSSShikiLanguage]
}))
@@ -137,7 +136,7 @@ test('registers a real Shiki TextMate injection grammar for CSS directives', asy
'}',
'@utilities {',
' btn {',
- ' @compose inline-flex fg-primary:hover@md;',
+ " @safelist \"inline-flex fg-primary:hover@md\";",
' }',
'}',
'@keyframes fade {',
@@ -156,7 +155,7 @@ test('registers a real Shiki TextMate injection grammar for CSS directives', asy
}
})
-test('keeps guide theme snippets correct with TextMate only', async () => {
+test('preserves guide theme source through TextMate tokenization', async () => {
const highlighter = await createHighlighter({
themes: [shikiSmokeTheme],
langs: ['css', masterCSSShikiLanguage]
diff --git a/packages/language-service/tests/shiki-readability.test.ts b/packages/language-service/tests/shiki-readability.test.ts
index bae0c156c..f717df9d4 100644
--- a/packages/language-service/tests/shiki-readability.test.ts
+++ b/packages/language-service/tests/shiki-readability.test.ts
@@ -51,7 +51,6 @@ test('colors every complete Master directive like a native CSS at-rule', async (
['theme', '@theme {}'],
['utilities', '@utilities {}'],
['custom-variant', '@custom-variant motion-safe {}'],
- ['compose', '@compose btn;'],
['variant', '@variant sm {}'],
['slot', '@slot;'],
['dark', '@dark {}'],
@@ -81,7 +80,7 @@ test('colors query names and keeps nested native at-rules in the CSS grammar', a
expect(nativeKeyword).toBeDefined()
expect(themeMode).toBeDefined()
- const compose = highlighter.codeToTokens('@utilities { btn { @compose fg-red:hover@md; } }', options).tokens[0]
+ const compose = highlighter.codeToTokens("@utilities { btn { @safelist \"fg-red:hover@md\"; } }", options).tokens[0]
const query = compose.find((token) => token.content === '@md')
expect(query).toBeDefined()
expect(hasScope(query, 'keyword.control.at-rule.master-css.query')).toBe(true)
@@ -115,9 +114,9 @@ test('colors query names and keeps nested native at-rules in the CSS grammar', a
expect(tokens.some((token) => token.content.includes('no-preference') && hasScope(token, 'entity.name.tag.master-css')), atRule).toBe(false)
}
- const managed = highlighter.codeToTokens('@utilities { btn { @media (width > 30rem) { @compose block; } } }', options).tokens[0]
+ const managed = highlighter.codeToTokens("@utilities { btn { @media (width > 30rem) { @safelist \"block\"; } } }", options).tokens[0]
expect(colors(managed.find((token) => token.content === '@media'))).toEqual(colors(nativeKeyword))
- expect(managed.some((token) => token.content === '@compose' && hasScope(token, 'keyword.control.at-rule.master-css'))).toBe(true)
+ expect(managed.some((token) => token.content === '@safelist' && hasScope(token, 'keyword.control.at-rule.master-css'))).toBe(true)
} finally {
await highlighter.dispose?.()
}
@@ -130,7 +129,7 @@ test('keeps semantic query colors aligned in CSS, HTML, and TSX', async () => {
try {
for (const [lang, source] of [
- ['css', '@utilities { btn { @compose fg-red@md; } }'],
+ ['css', "@utilities { btn { @safelist \"fg-red@md\"; } }"],
['html', ''],
['tsx', '']
] as const) {
diff --git a/packages/language-service/tests/shiki-session.test.ts b/packages/language-service/tests/shiki-session.test.ts
index 82bee26f9..e8c607e7e 100644
--- a/packages/language-service/tests/shiki-session.test.ts
+++ b/packages/language-service/tests/shiki-session.test.ts
@@ -54,7 +54,7 @@ it('preserves complete HAST across host languages compared with full inspection
['html', ''],
['tsx', ''],
['mdx', '# Example\n\n'],
- ['css', '.x { @compose brand block fg-red:hover; }'],
+ ['css', ".x { @safelist \"brand block fg-red:hover\"; }"],
['plaintext', 'brand block fg-red:hover invalid']
]
try {
diff --git a/packages/language-service/tests/shiki.test.ts b/packages/language-service/tests/shiki.test.ts
index b27acc280..6e1deff7a 100644
--- a/packages/language-service/tests/shiki.test.ts
+++ b/packages/language-service/tests/shiki.test.ts
@@ -274,7 +274,7 @@ test.concurrent('separates named opacity and native values without coloring unre
const samples = [
{ lang: 'html', code: '\n' },
{ lang: 'tsx', code: 'const label = "fg-blue";\n' },
- { lang: 'css', code: '@utilities { card { @compose fg-red/0.5 b:1px|solid|var(--color-line-base) unknown-widget; } }' },
+ { lang: 'css', code: "@utilities { card { @safelist \"fg-red/0.5 b:1px|solid|var(--color-line-base) unknown-widget\"; } }" },
{ lang: 'mcss', code: 'fg-red/0.5 block:hover@sm color:red unknown-widget' }
]
for (const { lang, code } of samples) {
@@ -352,7 +352,7 @@ test.concurrent('creates Shiki decorations for CSS directive class-list spans',
'}',
'@utilities {',
' btn {',
- ' @compose inline-flex fg-brand:hover@sm;',
+ " @safelist \"inline-flex fg-brand:hover@sm\";",
' }',
'}'
].join('\n')
@@ -811,7 +811,7 @@ test.concurrent('uses semantic token scope styles for documentation Master CSS t
' --spacing-card: 24;',
'}',
'@utilities {',
- ' card { @compose bg-blue fg-brand:hover; }',
+ " card { @safelist \"bg-blue fg-brand:hover\"; }",
'}'
].join('\n')
const cssOptions = {
@@ -897,9 +897,9 @@ test.concurrent('uses semantic token scope styles for CSS directive class-list t
'@custom-variant motion-safe { @media (prefers-reduced-motion: no-preference) { @slot; } }',
'@utilities {',
' card {',
- ' @compose p-md r-xl;',
+ " @safelist \"p-md r-xl\";",
' @variant {
test('types _ should hint', () => {
expect(hint('block_')?.map(({ label }) => label)).toContain(':active')
})
+
+it('reserves native colon entries and suggests display states through an explicit declaration', () => {
+ expect(hint('flex:')?.map(item => item.label)).not.toContain(':hover')
+ expect(hint('grid:')?.map(item => item.label)).not.toContain(':hover')
+ expect(hint('display:flex:')?.map(item => item.label)).toContain(':hover')
+})
diff --git a/packages/language-service/tests/suggest-syntax/values.test.ts b/packages/language-service/tests/suggest-syntax/values.test.ts
index 8d2963e39..2aafb01d2 100644
--- a/packages/language-service/tests/suggest-syntax/values.test.ts
+++ b/packages/language-service/tests/suggest-syntax/values.test.ts
@@ -46,10 +46,10 @@ describe('named token completion', () => {
expect(labels('bg:', settings)).not.toContain('accent')
expect(labels('bg:', settings)).toContain('cover')
})
- test('offers named colors inside compose', () => {
+ test('offers named colors inside safelist', () => {
const settings = { manifest: createPresetManifest({ variables: [{ namespace: 'color', key: 'accent', value: '#123456' }] }) }
- const prefix = '.btn { @compose bg-'
- const doc = createDoc('css', prefix + '; }')
+ const prefix = '@safelist "bg-'
+ const doc = createDoc('css', prefix + '";')
const service = new CSSLanguageService(settings)
const items = service.suggestSyntax(doc, doc.positionAt(prefix.length), { triggerKind: 1 })
expect(items?.map(({ label }) => label)).toContain('bg-accent')
diff --git a/packages/mcp/src/classes.ts b/packages/mcp/src/classes.ts
index c742cfcb9..5fb11d0ad 100644
--- a/packages/mcp/src/classes.ts
+++ b/packages/mcp/src/classes.ts
@@ -30,7 +30,7 @@ async function createClassInspectionState(context: MasterCSSMCPContext, options:
const activeManifest = requireWorkspaceManifest(manifest)
return {
manifest,
- session: await createMCPToolingSession(activeManifest)
+ session: await createMCPToolingSession(activeManifest, manifest.nativeClassNames)
}
}
diff --git a/packages/mcp/src/compare.ts b/packages/mcp/src/compare.ts
index bad4b42fa..1608ae593 100644
--- a/packages/mcp/src/compare.ts
+++ b/packages/mcp/src/compare.ts
@@ -100,7 +100,7 @@ export async function compareCSS(context: MasterCSSMCPContext, options: CompareC
const manifest = await loadWorkspaceManifest(context, options.context)
const filePath = context.resolveVirtualPath(options.filePath || 'index.html')
const activeManifest = requireWorkspaceManifest(manifest)
- const session = createMCPToolingSession(activeManifest)
+ const session = createMCPToolingSession(activeManifest, manifest.nativeClassNames)
try {
const beforeClasses = resolveClasses(options, 'before', filePath, session)
const afterClasses = resolveClasses(options, 'after', filePath, session)
diff --git a/packages/mcp/src/context.ts b/packages/mcp/src/context.ts
index 232e21246..17f9fce23 100644
--- a/packages/mcp/src/context.ts
+++ b/packages/mcp/src/context.ts
@@ -1,7 +1,7 @@
import { createHash, randomBytes } from 'node:crypto'
import { existsSync, realpathSync, statSync } from 'node:fs'
import { mkdir, readFile, realpath as realpathAsync, stat, writeFile } from 'node:fs/promises'
-import { dirname, isAbsolute, relative, resolve } from 'node:path'
+import { basename, dirname, isAbsolute, join, relative, resolve } from 'node:path'
import { withPreviewWriteLock } from './preview-write-lock'
export interface MasterCSSMCPContextOptions {
@@ -164,7 +164,7 @@ export default class MasterCSSMCPContext {
this.assertContained(resolved)
const parent = await realpath(dirname(resolved))
this.assertContained(parent)
- return resolved
+ return join(parent, basename(resolved))
}
validateGlobPatterns(patterns: readonly string[]) {
diff --git a/packages/mcp/src/directives.ts b/packages/mcp/src/directives.ts
index 4f288b7f4..8f5c3998b 100644
--- a/packages/mcp/src/directives.ts
+++ b/packages/mcp/src/directives.ts
@@ -11,7 +11,7 @@ import { createMCPTextDocument } from './document'
import { summarizeManifest } from './manifest-summary'
import { loadWorkspaceManifest, requireWorkspaceManifest, manifestMetadata, manifestFingerprint, type SemanticContext } from './project'
-const DIRECTIVE_INSPECTION_VERSION = 1
+const DIRECTIVE_INSPECTION_VERSION = 2
export interface InspectDirectivesOptions {
context?: SemanticContext
@@ -42,7 +42,6 @@ function summarizeCompileResult(result: MasterCSSCompileManifestResult) {
.map((diagnostic) => diagnostic.message)
return {
manifest: summarizeManifest(result.manifest),
- compositions: result.compositions ?? [],
directives: {
manifestInput: result.directiveSummary.manifestInput,
classNames: result.classNames,
diff --git a/packages/mcp/src/format.ts b/packages/mcp/src/format.ts
index 6cd681854..e83d24edb 100644
--- a/packages/mcp/src/format.ts
+++ b/packages/mcp/src/format.ts
@@ -36,7 +36,7 @@ function formatContent(service: MasterCSSLanguageService, filePath: string, cont
export async function previewDirectiveFormat(context: MasterCSSMCPContext, options: PreviewDirectiveFormatOptions = {}) {
const manifest = await loadWorkspaceManifest(context, options.context)
const service = new MasterCSSLanguageService(undefined, {
- session: createToolingSessionSync({ manifest: requireWorkspaceManifest(manifest) })
+ session: createToolingSessionSync({ manifest: requireWorkspaceManifest(manifest), nativeClassNames: manifest.nativeClassNames })
})
try {
if (options.content !== undefined) {
diff --git a/packages/mcp/src/language.ts b/packages/mcp/src/language.ts
index abe1615b0..26f46f0ca 100644
--- a/packages/mcp/src/language.ts
+++ b/packages/mcp/src/language.ts
@@ -22,7 +22,8 @@ export async function suggestSyntax(context: MasterCSSMCPContext, options: Sugge
const filePath = context.resolveVirtualPath(options.filePath)
const manifest = await loadWorkspaceManifest(context, options.context)
const session = createToolingSessionSync({
- manifest: requireWorkspaceManifest(manifest)
+ manifest: requireWorkspaceManifest(manifest),
+ nativeClassNames: manifest.nativeClassNames
})
const service = new MasterCSSLanguageService(
{ manifest: requireWorkspaceManifest(manifest) },
diff --git a/packages/mcp/src/lint.ts b/packages/mcp/src/lint.ts
index 79e97fe42..e2f2e9274 100644
--- a/packages/mcp/src/lint.ts
+++ b/packages/mcp/src/lint.ts
@@ -14,7 +14,7 @@ import { loadWorkspaceManifest, requireWorkspaceManifest, manifestMetadata, type
const DEFAULT_LINT_SOURCE_PATTERNS = ['**/*.{html,htm,js,jsx,cjs,ts,tsx,mts,cts,svelte,astro,vue,md,mdx,pug,php,css,scss,less}']
const DEFAULT_IGNORE_PATTERNS = ['**/node_modules/**', 'node_modules']
-const LINT_REPORT_VERSION = 3
+const LINT_REPORT_VERSION = 4
export interface LintProjectOptions {
context?: SemanticContext
@@ -30,14 +30,13 @@ export interface LintContentOptions {
}
export interface PreviewFixesOptions extends LintProjectOptions {
- includeDirectiveFixes?: boolean
ttlMs?: number
}
async function loadLintState(context: MasterCSSMCPContext, options: LintProjectOptions = {}) {
const rules = resolveMasterCSSLintRules(options.rules)
const manifest = await loadWorkspaceManifest(context, options.context)
- const lintSession = createToolingSessionSync({ manifest: requireWorkspaceManifest(manifest) })
+ const lintSession = createToolingSessionSync({ manifest: requireWorkspaceManifest(manifest), nativeClassNames: manifest.nativeClassNames })
const files = await resolveSourceFiles(
context,
options.patterns ?? DEFAULT_LINT_SOURCE_PATTERNS,
@@ -85,7 +84,7 @@ export async function lintContent(context: MasterCSSMCPContext, options: LintCon
const rules = resolveMasterCSSLintRules(options.rules)
const filePath = context.resolveVirtualPath(options.filePath)
const manifest = await loadWorkspaceManifest(context, options.context)
- const lintSession = createToolingSessionSync({ manifest: requireWorkspaceManifest(manifest) })
+ const lintSession = createToolingSessionSync({ manifest: requireWorkspaceManifest(manifest), nativeClassNames: manifest.nativeClassNames })
try {
const files = [lintMasterCSSContent({ content: options.content, filePath, rules, lintSession })]
@@ -112,7 +111,6 @@ export async function previewLintFixes(context: MasterCSSMCPContext, options: Pr
filePath: input.filePath,
rules: state.rules,
lintSession: state.lintSession,
- includeDirectiveFixes: Boolean(options.includeDirectiveFixes)
})
if (fixed !== input.content) {
changes.push({
diff --git a/packages/mcp/src/output-schema.ts b/packages/mcp/src/output-schema.ts
index d1dd31cf7..5f19ac23d 100644
--- a/packages/mcp/src/output-schema.ts
+++ b/packages/mcp/src/output-schema.ts
@@ -1,5 +1,5 @@
import * as z from 'zod/v4'
-import { compositionTrace, lintFile, lintSummary, formatFile, formatSummary, extractedFile, extractSummary, scannedFile, scanner, stylesheets, scanSummary, previewSummary } from './source-schema'
+import { lintFile, lintSummary, formatFile, formatSummary, extractedFile, extractSummary, scannedFile, scanner, stylesheets, scanSummary, previewSummary } from './source-schema'
import { strings, diagnostic, metadata, inspection, envelopeMetadata, manifestResults, change, completion, classDiff, ruleDiff, range } from './semantic-schema'
@@ -26,7 +26,7 @@ const fields: Record = {
mastercss_trace_class: { manifest: metadata, inspection, occurrences: z.array(z.object({ filePath: z.string(), source: z.string(), statuses: strings })), status: z.string(), css },
mastercss_extract_classes: { manifest: metadata, files: z.array(extractedFile), summary: extractSummary },
mastercss_scan_project: { manifest: metadata, files: z.array(scannedFile), scanner, stylesheets, css, summary: scanSummary },
- mastercss_inspect_directives: { compositions: z.array(compositionTrace), context: metadata, manifest: object, directiveEntries: z.array(z.object({ name: z.string(), range, prelude: z.string(), hasBlock: z.boolean(), quotedStrings: z.number() }).passthrough()), dependencies: strings, css, summary: object },
+ mastercss_inspect_directives: { context: metadata, manifest: object, directiveEntries: z.array(z.object({ name: z.string(), range, prelude: z.string(), hasBlock: z.boolean(), quotedStrings: z.number() }).passthrough()), dependencies: strings, css, summary: object },
mastercss_manifest_query: { manifest: metadata, results: manifestResults, summary: object },
mastercss_css_compare: { manifest: metadata, classes: classDiff, css: z.object({ changed: z.boolean(), before: css, after: css, bytesDelta: z.number(), diff: z.string() }), rules: ruleDiff, summary: object },
mastercss_suggest_syntax: { manifest: metadata, completions: z.array(completion), total: z.number() }
diff --git a/packages/mcp/src/project.ts b/packages/mcp/src/project.ts
index 62ed5890a..90d3bd35a 100644
--- a/packages/mcp/src/project.ts
+++ b/packages/mcp/src/project.ts
@@ -20,6 +20,7 @@ export type SemanticContext = 'project' | 'preset'
export async function loadWorkspaceManifest(context: MasterCSSMCPContext, requested: SemanticContext = 'project', explicitEntries?: readonly string[]) {
let entries: readonly string[] = []
+ const nativeClassNames: readonly string[] = []
let versions: ReturnType | undefined
try {
versions = getToolingBindingInfo()
@@ -27,19 +28,20 @@ export async function loadWorkspaceManifest(context: MasterCSSMCPContext, reques
entries = explicitEntries ?? await discoverManifestEntries({ root: context.root })
if (!entries.length) return {
status: 'error' as const, reason: 'entry-not-found' as const,
- entries, dependencies: [], warnings: [], diagnostics: [],
+ entries, nativeClassNames, dependencies: [], warnings: [], diagnostics: [],
context: requested, versions, fingerprint: null,
error: 'No project CSS entry was found. Add a project entry or explicitly select context: "preset".'
}
}
const result = requested === 'preset'
- ? { manifest: defaultManifest, entries: [], dependencies: [], diagnostics: [] }
+ ? { manifest: defaultManifest, nativeClassNames, entries: [], dependencies: [], diagnostics: [] }
: await loadProjectManifest({ root: context.root, entries, baseManifest: { version: 1, languageVersion: 3 } })
return {
status: 'loaded' as const,
context: requested, versions,
fingerprint: manifestFingerprint(result.manifest),
manifest: result.manifest,
+ nativeClassNames: result.nativeClassNames,
entries: result.entries,
dependencies: result.dependencies ?? [],
diagnostics: result.diagnostics,
@@ -49,7 +51,7 @@ export async function loadWorkspaceManifest(context: MasterCSSMCPContext, reques
return {
status: 'error' as const, reason: 'entry-load-failed' as const,
context: requested, versions, fingerprint: null,
- entries, dependencies: [] as string[], warnings: [] as string[],
+ entries, nativeClassNames, dependencies: [] as string[], warnings: [] as string[],
diagnostics: error && typeof error === 'object' && 'diagnostics' in error && Array.isArray(error.diagnostics)
? error.diagnostics : error && typeof error === 'object' && 'diagnostic' in error ? [error.diagnostic] : [],
error: getErrorMessage(error)
@@ -68,7 +70,7 @@ export function requireWorkspaceManifest(result: Awaited>) {
- const { manifest: _manifest, ...metadata } = { manifest: undefined, ...result }
+ const { manifest: _manifest, nativeClassNames: _nativeClassNames, ...metadata } = { manifest: undefined, ...result }
return metadata
}
diff --git a/packages/mcp/src/scan.ts b/packages/mcp/src/scan.ts
index 616a7035b..6efc72bba 100644
--- a/packages/mcp/src/scan.ts
+++ b/packages/mcp/src/scan.ts
@@ -60,7 +60,8 @@ export async function renderCSS(context: MasterCSSMCPContext, options: RenderCSS
let classes: string[]
if (options.html) {
const tooling = createToolingSessionSync({
- manifest: requireWorkspaceManifest(manifest)
+ manifest: requireWorkspaceManifest(manifest),
+ nativeClassNames: manifest.nativeClassNames
})
try {
classes = [...tooling.extractSource({
@@ -82,7 +83,7 @@ export async function renderCSS(context: MasterCSSMCPContext, options: RenderCSS
const rendered = renderClassNamesSync(classes, {
manifest: requireWorkspaceManifest(manifest)
})
- const tooling = createMCPToolingSession(requireWorkspaceManifest(manifest))
+ const tooling = createMCPToolingSession(requireWorkspaceManifest(manifest), manifest.nativeClassNames)
let inspections: ReturnType[]
try { inspections = classes.map(className => compactClassInspection(tooling, className, undefined, true)) }
finally { tooling.dispose() }
@@ -102,7 +103,7 @@ export async function renderCSS(context: MasterCSSMCPContext, options: RenderCSS
export async function inspectClass(context: MasterCSSMCPContext, options: InspectClassOptions) {
const manifest = await loadWorkspaceManifest(context, options.context)
const session = createMCPToolingSession(
- requireWorkspaceManifest(manifest)
+ requireWorkspaceManifest(manifest), manifest.nativeClassNames
)
try {
const inspection = session.inspectClassName(options.className, options.mode)
diff --git a/packages/mcp/src/server.ts b/packages/mcp/src/server.ts
index a4efec3d5..20178d64f 100644
--- a/packages/mcp/src/server.ts
+++ b/packages/mcp/src/server.ts
@@ -550,7 +550,6 @@ function registerTools(server: McpServer, context: MasterCSSMCPContext) {
mode: z.enum(['lint-fixes', 'generated-css']).optional(),
patterns: z.array(z.string()).optional(),
rules: z.string().optional(),
- includeDirectiveFixes: z.boolean().optional(),
outputPath: z.string().optional(),
ttlMs: z.number().int().min(1000).max(60 * 60 * 1000).optional()
},
diff --git a/packages/mcp/src/source-schema.ts b/packages/mcp/src/source-schema.ts
index 1f7192d30..6637f118a 100644
--- a/packages/mcp/src/source-schema.ts
+++ b/packages/mcp/src/source-schema.ts
@@ -18,7 +18,7 @@ export const extractedFile = z.object({
}))
})
const sourceFix = z.object({
- kind: z.enum(['class-list', 'directive']), safety: z.enum(['safe', 'structural']),
+ kind: z.literal('class-list'), safety: z.literal('safe'),
range, text: z.string(), description: z.string(), requiresFormatting: z.boolean()
})
export const lintFile = z.object({
@@ -29,15 +29,13 @@ export const lintFile = z.object({
source: z.literal('Master CSS'), sourceKind: z.string(), fixes: z.array(sourceFix).optional()
}))
})
-export const lintSummary = counts('files', 'diagnostics', 'errors', 'warnings', 'fixable', 'safeFixes', 'structuralFixes')
+export const lintSummary = counts('files', 'diagnostics', 'errors', 'warnings', 'fixable', 'safeFixes')
export const formatFile = z.object({ filePath: z.string(), languageId: z.string(), edits: z.array(z.object({ range: location, newText: z.string() })), changed: z.boolean(), beforeBytes: count, afterBytes: count })
-const sourceReference = z.object({ file: z.string().optional(), range, loc: z.object({ start: z.object({ line: count, column: count }), end: z.object({ line: count, column: count }) }).optional() })
-export const compositionTrace = z.object({ order: count, classes: strings, source: sourceReference.optional(), definitionSources: z.array(sourceReference), css: z.string(), variableNames: strings, animationNames: strings })
const discovered = z.object({ latent: strings, valid: strings, invalid: strings, usedNative: strings })
export const scannedFile = z.object({ filePath: z.string(), source: z.string(), scanned: z.boolean(), changed: z.boolean(), discovered })
export const scanner = z.object({ counts: counts('latent', 'valid', 'invalid', 'native', 'usedNative', 'safelist', 'blocklist'), classes: discovered.extend({ native: strings, safelist: strings, blocklist: strings }), resetDependencies: strings })
export const stylesheets = z.object({
- entries: z.array(z.object({ compositions: z.array(compositionTrace).optional(), filePath: z.string(), masterCSS: z.boolean(), pruneNativeCSS: z.boolean(), dependencies: strings, sourceDependencies: strings, warnings: strings, errors: strings })),
+ entries: z.array(z.object({ filePath: z.string(), masterCSS: z.boolean(), pruneNativeCSS: z.boolean(), dependencies: strings, sourceDependencies: strings, warnings: strings, errors: strings })),
dependencies: strings, warnings: strings, errors: z.array(z.object({ filePath: z.string(), message: z.string() }))
})
export const scanSummary = counts('files', 'stylesheets', 'diagnostics', 'errors', 'warnings', 'missingCSS', 'invalidClasses')
diff --git a/packages/mcp/src/tooling-session.ts b/packages/mcp/src/tooling-session.ts
index 4252558d7..bf338b2fc 100644
--- a/packages/mcp/src/tooling-session.ts
+++ b/packages/mcp/src/tooling-session.ts
@@ -7,8 +7,8 @@ import type {
} from '@master/css-tooling/language'
import type { MasterCSSManifest } from '@master/css-schema/manifest'
-export function createMCPToolingSession(manifest: MasterCSSManifest) {
- return createToolingSessionSync({ manifest })
+export function createMCPToolingSession(manifest: MasterCSSManifest, nativeClassNames: readonly string[] = []) {
+ return createToolingSessionSync({ manifest, nativeClassNames })
}
export function compactClassInspection(
diff --git a/packages/mcp/tests/bug-hunt-byte-surfaces.test.ts b/packages/mcp/tests/bug-hunt-byte-surfaces.test.ts
index c3a78679e..8b783fe67 100644
--- a/packages/mcp/tests/bug-hunt-byte-surfaces.test.ts
+++ b/packages/mcp/tests/bug-hunt-byte-surfaces.test.ts
@@ -9,7 +9,7 @@ import { renderCSS } from '../src/scan'
test('BH-0020 directive formatting reports UTF-8 sizes in content and file previews', async () => {
const root = mkdtempSync(join(tmpdir(), 'master-css-format-bytes-'))
const context = new MasterCSSMCPContext({ root })
- const content = '/* 中文😀 */\n@compose block inline ;'
+ const content = '/* 中文😀 */\n@safelist "block inline";'
try {
const result = await previewDirectiveFormat(context, { context: 'preset', content })
expect(result.mode).toBe('content')
diff --git a/packages/mcp/tests/bug-hunt-preview-concurrency.test.ts b/packages/mcp/tests/bug-hunt-preview-concurrency.test.ts
index ac13004af..07ac98df6 100644
--- a/packages/mcp/tests/bug-hunt-preview-concurrency.test.ts
+++ b/packages/mcp/tests/bug-hunt-preview-concurrency.test.ts
@@ -1,4 +1,4 @@
-import { linkSync, mkdtempSync, readFileSync, realpathSync, rmSync, symlinkSync, writeFileSync } from 'node:fs'
+import { linkSync, mkdirSync, mkdtempSync, readFileSync, realpathSync, rmSync, symlinkSync, writeFileSync } from 'node:fs'
import { tmpdir } from 'node:os'
import { join } from 'node:path'
import { afterEach, expect, it } from 'vitest'
@@ -19,6 +19,19 @@ afterEach(() => {
for (const root of roots.splice(0)) rmSync(root, { recursive: true, force: true })
})
+it('keeps a new writable file identity stable through a directory alias', async () => {
+ const { root, context } = setup()
+ const directory = join(root, 'real'), alias = join(root, 'alias')
+ mkdirSync(directory)
+ symlinkSync(directory, alias, 'junction')
+ const requested = join(alias, 'new.txt')
+ const before = await context.resolveWritableFile(requested)
+ const preview = await context.createPreview([{ filePath: requested, afterText: 'created' }])
+ await context.applyPreview(preview.confirmToken!)
+ expect(await context.resolveWritableFile(requested)).toBe(before)
+ expect(readFileSync(join(directory, 'new.txt'), 'utf8')).toBe('created')
+})
+
it('accepts exactly one simultaneous use of a preview token', async () => {
const { root, context } = setup()
const filePath = join(root, 'a.txt')
diff --git a/packages/mcp/tests/core.test.ts b/packages/mcp/tests/core.test.ts
index 921c246ae..29886152c 100644
--- a/packages/mcp/tests/core.test.ts
+++ b/packages/mcp/tests/core.test.ts
@@ -205,13 +205,16 @@ describe('@master/css-mcp', () => {
name: 'mastercss_render_css',
arguments: {
context: 'preset',
- classList: 'block field-sizing:content display:16px'
+ classList: 'block field-sizing:content display:16px display:banana'
}
}))
expect(renderedNative.invalid).toEqual([])
expect(renderedNative.inspections.find((item: { className: string }) => item.className === 'display:16px')).toMatchObject({ matchStatus: 'matched', cssValueStatus: 'invalid' })
+ expect(renderedNative.inspections.find((item: { className: string }) => item.className === 'display:banana')).toMatchObject({ matchStatus: 'matched', cssValueStatus: 'unknown' })
expect(renderedNative.css.text).toContain('.block{display:block}')
expect(renderedNative.css.text).toContain('.field-sizing\\:content{field-sizing:content}')
+ expect(renderedNative.css.text).toContain('.display\\:16px{display:16px}')
+ expect(renderedNative.css.text).toContain('.display\\:banana{display:banana}')
expect(renderedNative.css.bytes).toBe(renderedNative.css.text.length)
const suggestions = parseToolJSON(await connection.client.callTool({
@@ -298,7 +301,7 @@ describe('@master/css-mcp', () => {
entryPath: 'master.css'
}
}))
- expect(directives.version).toBe(1)
+ expect(directives.version).toBe(2)
expect(directives.status).toBe('ok')
expect(directives.directiveEntries).toEqual(expect.arrayContaining([
expect.objectContaining({ name: 'theme' }),
@@ -396,7 +399,7 @@ describe('@master/css-mcp', () => {
name: 'mastercss_css_compare',
arguments: {
context: 'preset',
- beforeClassList: 'block display:16px',
+ beforeClassList: 'block display:16px display:banana',
afterClassList: 'block field-sizing:content'
}
}))
@@ -407,6 +410,8 @@ describe('@master/css-mcp', () => {
removed: []
})
expect(nativeCompare.css.after.text).toContain('field-sizing:content')
+ expect(nativeCompare.css.before.text).toContain('.display\\:16px{display:16px}')
+ expect(nativeCompare.css.before.text).toContain('.display\\:banana{display:banana}')
} finally {
await connection.close()
}
@@ -415,7 +420,7 @@ describe('@master/css-mcp', () => {
it('previews directive formatting without writing until the preview is applied', async () => {
const root = createTempDir('master-css-mcp-format-')
const file = join(root, 'style.css')
- writeFileSync(file, '@compose block inline;')
+ writeFileSync(file, '@safelist "block inline";')
const connection = await connect(root)
try {
@@ -423,12 +428,12 @@ describe('@master/css-mcp', () => {
name: 'mastercss_preview_directive_format',
arguments: {
context: 'preset',
- content: '@compose block inline;',
+ content: '@safelist "block inline";',
filePath: 'style.css'
}
}))
expect(contentFormat.mode).toBe('content')
- expect(contentFormat.formatted).toBe('@compose block inline;')
+ expect(contentFormat.formatted).toBe('@safelist "block inline";')
const preview = parseToolJSON(await connection.client.callTool({
name: 'mastercss_preview_directive_format',
@@ -440,7 +445,7 @@ describe('@master/css-mcp', () => {
expect(preview.mode).toBe('files')
expect(preview.preview.confirmToken).toEqual(expect.any(String))
expect(preview.preview.changes).toHaveLength(1)
- expect(readFileSync(file, 'utf8')).toBe('@compose block inline;')
+ expect(readFileSync(file, 'utf8')).toBe('@safelist "block inline";')
const applied = parseToolJSON(await connection.client.callTool({
name: 'mastercss_apply_preview',
@@ -449,7 +454,7 @@ describe('@master/css-mcp', () => {
}
}))
expect(applied.applied).toBe(true)
- expect(readFileSync(file, 'utf8')).toBe('@compose block inline;')
+ expect(readFileSync(file, 'utf8')).toBe('@safelist "block inline";')
} finally {
await connection.close()
}
@@ -854,7 +859,7 @@ describe('@master/css-mcp', () => {
}
}))
- expect(report.version).toBe(3)
+ expect(report.version).toBe(4)
expect(report.root).toBe(root)
expect(report.files[0].discovered.valid).toContain('block')
expect(report.files[0].discovered.invalid).toContain('p-missing')
@@ -885,7 +890,7 @@ describe('@master/css-mcp', () => {
}
}))
- expect(report.version).toBe(3)
+ expect(report.version).toBe(4)
expect(report.root).toBe(root)
expect(report.files).toHaveLength(1)
expect(report.files[0].filePath).toBe(resolve(root, 'src/Component.tsx'))
diff --git a/packages/mcp/tests/semantic-context.test.ts b/packages/mcp/tests/semantic-context.test.ts
index 85b2bb020..1502baea9 100644
--- a/packages/mcp/tests/semantic-context.test.ts
+++ b/packages/mcp/tests/semantic-context.test.ts
@@ -36,13 +36,17 @@ it('explicit preset context reports matching separately from validity and browse
try {
const result = await inspectClass(context, { className: 'font:16px', context: 'preset' })
expect(result).toMatchObject({ matchStatus: 'matched', cssValueStatus: 'invalid', browserSupport: 'not-checked' })
- expect(result.manifest).toMatchObject({ context: 'preset', fingerprint: expect.stringMatching(/^[a-f0-9]{64}$/), versions: { languageVersion: 3, bindingAbiVersion: 12 } })
+ expect(result.manifest).toMatchObject({ context: 'preset', fingerprint: expect.stringMatching(/^[a-f0-9]{64}$/), versions: { languageVersion: 3, bindingAbiVersion: 14 } })
const response = jsonToolResult(result)
expect(JSON.parse((response.content[0] as { text: string }).text)).toEqual(response.structuredContent)
const rendered = await renderCSS(context, { context: 'preset', classList: 'font:16px width:--space(2)' })
expect(rendered.css.text).toContain('font:16px')
expect(rendered.inspections.map(inspection => inspection.cssValueStatus)).toEqual(['invalid', 'unknown'])
expect(rendered.diagnostics.map(diagnostic => diagnostic.code)).toEqual(['CSS_VALUE_INVALID', 'CSS_VALUE_UNKNOWN'])
+ const math = await inspectClass(context, { className: 'width:calc(1px|+|1s)', context: 'preset' })
+ expect(math.cssValueStatus).toBe('invalid')
+ const removed = await inspectClass(context, { className: 'size:20px', context: 'preset' })
+ expect(removed.diagnostics?.some(diagnostic => diagnostic.code === 'REMOVED_PRESET_UTILITY')).toBe(true)
} finally { context.dispose() }
})
@@ -58,20 +62,16 @@ it('keeps complete ambiguity alternatives in both structured and JSON output', a
} finally { context.dispose() }
})
-it('reports compose statements, definition locations and resource dependencies', async () => {
- const context = project()
- const content = '@theme{--color-accent:red;@keyframes spin{to{opacity:1}}}@utilities{paint{color:var(--color-accent);animation:spin 1s}}@layer components{.native{@compose paint;@compose color:blue;}}'
+it('does not warn about retired builtins for registered project CSS classes', async () => {
+ const context = project(String.raw`@master entry; .size\:20px { color:red; }`)
try {
- const result = await inspectDirectives(context, { context: 'preset', content, filePath: 'button.css' })
- expect(result.directives.nativeClassNames).toContain('native')
- expect(result.directives.classNames).not.toContain('native')
- expect(result.compositions).toHaveLength(2)
- expect(result.compositions[0]).toMatchObject({ classes: ['paint'], variableNames: ['color-accent'], animationNames: ['spin'] })
- expect(result.compositions[0].css).toContain('color:var(--color-accent)')
- const definition = result.compositions[0].definitionSources[0]
- expect(content.slice(definition.range.start, definition.range.end)).toBe('paint')
- const call = result.compositions[0].source!
- expect(content.slice(call.range.start, call.range.end)).toBe('@compose paint;')
- expect(result.compositions[1].classes).toEqual(['color:blue'])
+ const inspected = await inspectClass(context, { className: 'size:20px' })
+ const rendered = await renderCSS(context, { classList: 'size:20px' })
+ for (const diagnostics of [inspected.diagnostics, rendered.diagnostics]) {
+ expect(diagnostics?.some(diagnostic => diagnostic.code === 'REMOVED_PRESET_UTILITY')).toBe(false)
+ }
+ expect(inspected.manifest).not.toHaveProperty('nativeClassNames')
+ const other = await inspectClass(context, { className: 'size:30px' })
+ expect(other.diagnostics?.some(diagnostic => diagnostic.code === 'REMOVED_PRESET_UTILITY')).toBe(true)
} finally { context.dispose() }
})
diff --git a/packages/next/AI.md b/packages/next/AI.md
index a98003850..599e5b1c5 100644
--- a/packages/next/AI.md
+++ b/packages/next/AI.md
@@ -9,7 +9,7 @@
- `pre-render` mode through the Next.js Adapter API.
- `runtime` mode through the Next client instrumentation hook.
- `progressive` mode as runtime plus pre-render behavior.
-- Default `static` mode through generated CSS and scanner loaders for Turbopack and Webpack.
+- Default `static` mode through generated CSS; Turbopack CSS loaders own source watches, while Webpack keeps an early source loader.
- Next-specific manifest import/loaders and static CSS loaders.
- Build output rendering helpers.
@@ -47,7 +47,7 @@
- Next Adapter API type changes across Next major versions.
- Accidentally processing non-HTML assets.
- Duplicate writes for fallback HTML listed through multiple output groups.
-- Turbopack loader behavior as an incremental scanner.
+- Turbopack CSS loader watch ownership and direct generated CSS imports.
- Over-broad Turbopack JS loader rules breaking Next client component classification for linked workspace packages.
- Runtime injection must preserve user `instrumentation-client` via the secondary alias before overriding Next's `private-next-instrumentation-client`.
- Runtime, preload, mode default, and cascade-layer changes must be audited against Vite, Webpack, Nuxt, and Astro so integration behavior does not drift.
@@ -62,8 +62,10 @@
- Stylesheet collections may be retained only while entries, order, processed inputs
and dependencies are unchanged. Explicit `@source` includes and `@reference` context conservatively rebuild
because their discovery/lowering is not fully represented by the import inventory.
-- Module notifications share work only before snapshot capture; explicit stylesheet
- inputs remain ordered. Publish assets before the entry and the receipt after it.
+- Webpack module notifications share work only before snapshot capture; explicit
+ stylesheet inputs remain ordered. Turbopack does not publish from JS module
+ loaders: source and directory watches belong to CSS entries and imported
+ `.master/next.css`. Publish assets before the entry and the receipt after it.
- Webpack root-context watching excludes publication locks, receipts, processed-input
storage, scan logs and atomic temporary files. Generated CSS/assets and configuration
state remain observable; do not ignore the entire `.master` directory.
diff --git a/packages/next/README.md b/packages/next/README.md
index 9c556cb1c..cdb31b933 100644
--- a/packages/next/README.md
+++ b/packages/next/README.md
@@ -23,7 +23,7 @@ export default nextConfig
## Modes
-`@master/css-next` defaults to progressive rendering and supports these mode values:
+`@master/css-next` defaults to static rendering and supports these mode values:
| Mode | Description |
| --- | --- |
@@ -49,7 +49,7 @@ In static mode, import the generated stylesheet from your app stylesheet:
}
```
-Then enable static mode:
+Static mode is the default. To select it explicitly:
```js
import withMasterCSS from '@master/css-next'
@@ -64,7 +64,7 @@ const nextConfig = await withMasterCSS({
export default nextConfig
```
-Static mode uses source-glob scanning as the correctness baseline. A Turbopack CSS loader replaces `@import '@master/css'` with generated CSS. CSS files that import `@master/css` are treated as native CSS pruning roots by default; add `@preserve native;` when native CSS must be preserved.
+Static mode uses source-glob scanning as the correctness baseline. A Turbopack CSS loader replaces `@import '@master/css'` with generated CSS. Native CSS is preserved by default. Enable `pruneNativeCSS: true` for intentional project pruning, or use `@prune native;` for one source file. With integration-level pruning enabled, `@preserve native;` excludes one source file.
The generated entry can import companion stylesheets. Static mode publishes these stylesheets and referenced resources together for Turbopack, preserving source-relative resource URLs. Resource updates receive new filenames; earlier immutable assets remain available to builds already reading them. Static preparation rejects output failures so callers can retry after the cause is removed.
@@ -94,8 +94,9 @@ The `options` object is passed to `withMasterCSS(nextConfig, options)`.
| Option | Type | Default | Description |
| --- | --- | --- | --- |
| `enabled` | `boolean` | `true` | Enables the integration. Use `false` to disable it. |
-| `mode` | `'runtime' \| 'pre-render' \| 'static' \| 'progressive'` | `'progressive'` | Next.js integration mode. |
-| `runtime` | `boolean \| { enabled?: boolean; avoidFOUC?: boolean }` | `{ enabled: true }` | Runtime behavior in `runtime` and `progressive` modes. |
+| `mode` | `'runtime' \| 'pre-render' \| 'static' \| 'progressive'` | `'static'` | Next.js integration mode. |
+| `runtime` | `boolean \| { enabled?: boolean; avoidFOUC?: boolean }` | `{ enabled: false }` | Enabled by runtime/progressive modes. Explicit enabled values must agree with the mode. |
+| `pruneNativeCSS` | `boolean` | `false` | Opts project-owned native CSS into pruning. |
| `scanner` | `MasterCSSScannerConfiguration` | `{}` | Scanner configuration for static mode. |
| `buildReport` | `boolean \| string` | `false` | Write a build report with rendered files. `true` writes `.next/master-css-build-report.json`; a string is resolved from `distDir`. |
| `debug` | `boolean` | `false` | Log rendered output details during `next build`. |
diff --git a/packages/next/e2e/css-manifest-query/app/page.jsx b/packages/next/e2e/css-manifest-query/app/page.jsx
index 07c1148ff..9b0a29e13 100644
--- a/packages/next/e2e/css-manifest-query/app/page.jsx
+++ b/packages/next/e2e/css-manifest-query/app/page.jsx
@@ -10,9 +10,10 @@ function getVariable(namespace, key) {
export default function Page() {
const color = getVariable('color', 'e2e')
const breakpoint = getVariable('breakpoint', 'fixture')
+ const fontWeight = getVariable('font-weight', 'bold')
return (
-
+
{color}:{breakpoint}
)
diff --git a/packages/next/e2e/static-export/.master/stylesheets/06ed241712323a5695b1aa0965c42fce6072d8debb0232e53925bb628ebee0cb/c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-1cbfd5bd3a500142b187e9f63864a12dc4265824d450279964bc105531352996.css b/packages/next/e2e/static-export/.master/stylesheets/06ed241712323a5695b1aa0965c42fce6072d8debb0232e53925bb628ebee0cb/c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-1cbfd5bd3a500142b187e9f63864a12dc4265824d450279964bc105531352996.css
deleted file mode 100644
index 66e3a16c3..000000000
--- a/packages/next/e2e/static-export/.master/stylesheets/06ed241712323a5695b1aa0965c42fce6072d8debb0232e53925bb628ebee0cb/c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-1cbfd5bd3a500142b187e9f63864a12dc4265824d450279964bc105531352996.css
+++ /dev/null
@@ -1,2 +0,0 @@
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQSJ9 */
diff --git a/packages/next/e2e/static-export/.master/stylesheets/06ed241712323a5695b1aa0965c42fce6072d8debb0232e53925bb628ebee0cb/c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-2d919a59fdadb862826379fe7ffbed77f96c3aab7be7b554e46fececdbdfe433.css b/packages/next/e2e/static-export/.master/stylesheets/06ed241712323a5695b1aa0965c42fce6072d8debb0232e53925bb628ebee0cb/c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-2d919a59fdadb862826379fe7ffbed77f96c3aab7be7b554e46fececdbdfe433.css
deleted file mode 100644
index 7d244a11e..000000000
--- a/packages/next/e2e/static-export/.master/stylesheets/06ed241712323a5695b1aa0965c42fce6072d8debb0232e53925bb628ebee0cb/c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-2d919a59fdadb862826379fe7ffbed77f96c3aab7be7b554e46fececdbdfe433.css
+++ /dev/null
@@ -1,5 +0,0 @@
-@import "./c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-a10572ea9e8348dfe3d0e157929da4e482ea02aef80da2bf2dcc3f899d42d53b.css";
-@import "./c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-1cbfd5bd3a500142b187e9f63864a12dc4265824d450279964bc105531352996.css";
-@import "./c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-bd80d3758c4a06dee159a702b2719e26415602942fea159f20890002b90649d5.css";
-@import "./c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-7d6b4362977e5a0b5a99ca281514bfc3bb0f6e14a483438b4e1bc8076d2fcb33.css";
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZpbGU6Ly8vVXNlcnMvYXJvbi9tYXN0ZXIvY3NzL3BhY2thZ2VzL3ByZXNldC9zcmMvaW5kZXguY3NzIl0sInNvdXJjZXNDb250ZW50IjpbIkBpbXBvcnQgXCIuL2Jhc2UuY3NzXCI7XG5AaW1wb3J0IFwiLi90aGVtZS5jc3NcIjtcbkBpbXBvcnQgXCIuL3ZhcmlhbnRzLmNzc1wiO1xuQGltcG9ydCBcIi4vdXRpbGl0aWVzLmNzc1wiO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0FBQ0E7QUFDQTtBQUNBLGtKIn0= */
diff --git a/packages/next/e2e/static-export/.master/stylesheets/06ed241712323a5695b1aa0965c42fce6072d8debb0232e53925bb628ebee0cb/c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-7d6b4362977e5a0b5a99ca281514bfc3bb0f6e14a483438b4e1bc8076d2fcb33.css b/packages/next/e2e/static-export/.master/stylesheets/06ed241712323a5695b1aa0965c42fce6072d8debb0232e53925bb628ebee0cb/c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-7d6b4362977e5a0b5a99ca281514bfc3bb0f6e14a483438b4e1bc8076d2fcb33.css
deleted file mode 100644
index 66e3a16c3..000000000
--- a/packages/next/e2e/static-export/.master/stylesheets/06ed241712323a5695b1aa0965c42fce6072d8debb0232e53925bb628ebee0cb/c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-7d6b4362977e5a0b5a99ca281514bfc3bb0f6e14a483438b4e1bc8076d2fcb33.css
+++ /dev/null
@@ -1,2 +0,0 @@
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQSJ9 */
diff --git a/packages/next/e2e/static-export/.master/stylesheets/06ed241712323a5695b1aa0965c42fce6072d8debb0232e53925bb628ebee0cb/c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-8b3697fd0abf5cc7538681f772e93ec43e85dccd41b440ca080527acbeb03a06.css b/packages/next/e2e/static-export/.master/stylesheets/06ed241712323a5695b1aa0965c42fce6072d8debb0232e53925bb628ebee0cb/c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-8b3697fd0abf5cc7538681f772e93ec43e85dccd41b440ca080527acbeb03a06.css
deleted file mode 100644
index fca8ec7c4..000000000
--- a/packages/next/e2e/static-export/.master/stylesheets/06ed241712323a5695b1aa0965c42fce6072d8debb0232e53925bb628ebee0cb/c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-8b3697fd0abf5cc7538681f772e93ec43e85dccd41b440ca080527acbeb03a06.css
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "./c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-2d919a59fdadb862826379fe7ffbed77f96c3aab7be7b554e46fececdbdfe433.css";
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZpbGU6Ly8vVXNlcnMvYXJvbi9tYXN0ZXIvY3NzL3BhY2thZ2VzL2Nzcy9zcmMvaW5kZXguY3NzIl0sInNvdXJjZXNDb250ZW50IjpbIkBpbXBvcnQgXCJAbWFzdGVyL2Nzcy1wcmVzZXRcIjtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxrSiJ9 */
diff --git a/packages/next/e2e/static-export/.master/stylesheets/06ed241712323a5695b1aa0965c42fce6072d8debb0232e53925bb628ebee0cb/c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-a10572ea9e8348dfe3d0e157929da4e482ea02aef80da2bf2dcc3f899d42d53b.css b/packages/next/e2e/static-export/.master/stylesheets/06ed241712323a5695b1aa0965c42fce6072d8debb0232e53925bb628ebee0cb/c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-a10572ea9e8348dfe3d0e157929da4e482ea02aef80da2bf2dcc3f899d42d53b.css
deleted file mode 100644
index b04d9b375..000000000
--- a/packages/next/e2e/static-export/.master/stylesheets/06ed241712323a5695b1aa0965c42fce6072d8debb0232e53925bb628ebee0cb/c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-a10572ea9e8348dfe3d0e157929da4e482ea02aef80da2bf2dcc3f899d42d53b.css
+++ /dev/null
@@ -1,180 +0,0 @@
-@layer theme;
-
-@layer base {
- * {
- text-rendering: geometricprecision;
- }
-
- body {
- -webkit-text-size-adjust: 100%;
- -moz-text-size-adjust: 100%;
- -ms-text-size-adjust: 100%;
- text-size-adjust: 100%;
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- line-height: 1.2;
- }
-
- a, button {
- touch-action: manipulation;
- }
-
- [role="button"], summary, button, [type="button"] {
- -webkit-user-select: none;
- user-select: none;
- }
-
- *, :before, :after {
- box-sizing: border-box;
- }
-
- body {
- -moz-tab-size: 2;
- tab-size: 2;
- }
-
- img, svg, video, canvas, audio, iframe, embed, object {
- max-width: 100%;
- display: block;
- }
-
- html, body {
- height: -moz-available;
- }
-
- abbr[title] {
- text-decoration: underline dotted;
- }
-
- b, strong {
- font-weight: bolder;
- }
-
- pre, code, kbd, samp {
- font-size: 1em;
- }
-
- ::-moz-focus-inner {
- border-style: none;
- padding: 0;
- }
-
- :-moz-ui-invalid {
- box-shadow: none;
- }
-
- progress {
- vertical-align: baseline;
- }
-
- [type="search"] {
- appearance: textfield;
- outline-offset: -2px;
- }
-
- ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
- height: auto;
- }
-
- ::-webkit-search-decoration {
- -webkit-appearance: none;
- }
-
- ::-webkit-file-upload-button {
- -webkit-appearance: button;
- font: inherit;
- }
-
- hr {
- height: 0;
- color: inherit;
- }
-
- small {
- font-size: 80%;
- }
-
- sub, sup {
- vertical-align: baseline;
- font-size: 75%;
- line-height: 0;
- position: relative;
- }
-
- sub {
- bottom: -.25em;
- }
-
- sup {
- top: -.5em;
- }
-
- table {
- text-indent: 0;
- border-color: inherit;
- }
-
- body, :host {
- font-family: var(--font-family-sans);
- font-feature-settings: var(--font-feature-sans, normal);
- }
-
- code, kbd, samp, pre {
- font-family: var(--font-family-mono);
- font-feature-settings: var(--font-feature-mono, normal);
- }
-
- a {
- color: inherit;
- text-decoration: none;
- }
-
- button, input, optgroup, select, textarea {
- font: inherit;
- font-feature-settings: inherit;
- font-variation-settings: inherit;
- color: inherit;
- background-color: #0000;
- margin: 0;
- padding: 0;
- font-size: 100%;
- }
-
- *, :before, :after {
- border-style: solid;
- border-width: 0;
- }
-
- body, blockquote, dl, dd, hr, figure, p, pre, h1, h2, h3, h4, h5, h6 {
- margin: 0;
- }
-
- td, legend, fieldset {
- padding: 0;
- }
-
- ul, ol {
- margin: 0;
- padding: 0;
- }
-
- body {
- -webkit-tap-highlight-color: transparent;
- }
-
- ul {
- list-style: none;
- }
-
- h1, h2, h3, h4, h5, h6 {
- font-size: inherit;
- font-weight: inherit;
- }
-
- [hidden] {
- display: none;
- }
-}
-
-@layer defaults, components, utilities;
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZpbGU6Ly8vVXNlcnMvYXJvbi9tYXN0ZXIvY3NzL3BhY2thZ2VzL3ByZXNldC9zcmMvYmFzZS5jc3MiXSwic291cmNlc0NvbnRlbnQiOlsiQGxheWVyIHRoZW1lLCBiYXNlLCBkZWZhdWx0cywgY29tcG9uZW50cywgdXRpbGl0aWVzO1xuXG5AbGF5ZXIgYmFzZSB7XG4gIC8qIEltcHJvdmUgdGV4dCByZW5kZXJpbmcgcHJlY2lzaW9uIGFjcm9zcyBicm93c2Vycy4gKi9cbiAgKiB7XG4gICAgdGV4dC1yZW5kZXJpbmc6IGdlb21ldHJpY1ByZWNpc2lvbjtcbiAgfVxuXG4gIC8qIE5vcm1hbGl6ZSBib2R5IHRleHQgbWV0cmljcyBhbmQgZm9udCBzbW9vdGhpbmcuICovXG4gIGJvZHkge1xuICAgIGxpbmUtaGVpZ2h0OiAxLjI7XG4gICAgdGV4dC1zaXplLWFkanVzdDogMTAwJTtcbiAgICAtd2Via2l0LXRleHQtc2l6ZS1hZGp1c3Q6IDEwMCU7XG4gICAgLW1vei10ZXh0LXNpemUtYWRqdXN0OiAxMDAlO1xuICAgIC1tcy10ZXh0LXNpemUtYWRqdXN0OiAxMDAlO1xuICAgIC1tb3otb3N4LWZvbnQtc21vb3RoaW5nOiBncmF5c2NhbGU7XG4gICAgLXdlYmtpdC1mb250LXNtb290aGluZzogYW50aWFsaWFzZWQ7XG4gIH1cblxuICAvKiBSZW1vdmUgdG91Y2ggZGVsYXkgZnJvbSBjb21tb24gaW50ZXJhY3RpdmUgZWxlbWVudHMuICovXG4gIGEsIGJ1dHRvbiB7XG4gICAgdG91Y2gtYWN0aW9uOiBtYW5pcHVsYXRpb247XG4gIH1cblxuICAvKiBQcmV2ZW50IGFjY2lkZW50YWwgdGV4dCBzZWxlY3Rpb24gb24gYnV0dG9uLWxpa2UgY29udHJvbHMuICovXG4gIFtyb2xlPWJ1dHRvbl0sIHN1bW1hcnksXG4gIGJ1dHRvbiwgW3R5cGU9YnV0dG9uXSB7XG4gICAgLXdlYmtpdC11c2VyLXNlbGVjdDogbm9uZTtcbiAgICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgfVxuXG4gIC8qIFVzZSBib3JkZXItYm94IHNpemluZyBmb3IgYWxsIGVsZW1lbnRzIGFuZCBwc2V1ZG8tZWxlbWVudHMuICovXG4gICosIDo6YmVmb3JlLCA6OmFmdGVyIHtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICB9XG5cbiAgLyogTm9ybWFsaXplIHRhYiB3aWR0aCBmb3IgcmVhZGFibGUgcHJlZm9ybWF0dGVkIHRleHQuICovXG4gIGJvZHkge1xuICAgIC1tb3otdGFiLXNpemU6IDI7XG4gICAgdGFiLXNpemU6IDI7XG4gIH1cblxuICAvKiBNYWtlIGVtYmVkZGVkIG1lZGlhIHJlc3BvbnNpdmUgYW5kIGJsb2NrLWxldmVsIGJ5IGRlZmF1bHQuICovXG4gIGltZywgc3ZnLCB2aWRlbywgY2FudmFzLCBhdWRpbywgaWZyYW1lLCBlbWJlZCwgb2JqZWN0IHtcbiAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cblxuICAvKiBjb25zaXN0ZW50ICovXG5cbiAgLyogS2VlcCB0aGUgcm9vdCB2aWV3cG9ydCBoZWlnaHQgY29uc2lzdGVudCBvbiBtb2Rlcm4gYW5kIFdlYktpdCBicm93c2Vycy4gKi9cbiAgaHRtbCwgYm9keSB7XG4gICAgaGVpZ2h0OiAxMDBkdmg7XG4gICAgaGVpZ2h0OiAtd2Via2l0LWZpbGwtYXZhaWxhYmxlO1xuICAgIGhlaWdodDogLW1vei1hdmFpbGFibGU7XG4gIH1cblxuICAvKiBFbnN1cmUgYWJicmV2aWF0ZWQgdGV4dCB3aXRoIHRpdGxlcyBoYXMgYSBjb25zaXN0ZW50IHVuZGVybGluZSBzdHlsZS4gKi9cbiAgYWJiclt0aXRsZV0ge1xuICAgIHRleHQtZGVjb3JhdGlvbjogdW5kZXJsaW5lIGRvdHRlZDtcbiAgfVxuXG4gIC8qIEtlZXAgYm9sZCB0ZXh0IHNlbWFudGljYWxseSBzdHJvbmdlciB0aGFuIHN1cnJvdW5kaW5nIHRleHQuICovXG4gIGIsIHN0cm9uZyB7XG4gICAgZm9udC13ZWlnaHQ6IGJvbGRlcjtcbiAgfVxuXG4gIC8qIE5vcm1hbGl6ZSBtb25vc3BhY2UtcmVsYXRlZCBlbGVtZW50IHNpemluZy4gKi9cbiAgcHJlLFxuICBjb2RlLFxuICBrYmQsXG4gIHNhbXAge1xuICAgIGZvbnQtc2l6ZTogMWVtO1xuICB9XG5cbiAgLyogUmVtb3ZlIEZpcmVmb3ggaW5uZXIgZm9jdXMgcGFkZGluZyBhbmQgYm9yZGVyIGZyb20gY29udHJvbHMuICovXG4gIDo6LW1vei1mb2N1cy1pbm5lciB7XG4gICAgYm9yZGVyLXN0eWxlOiBub25lO1xuICAgIHBhZGRpbmc6IDA7XG4gIH1cblxuICAvKiBSZW1vdmUgRmlyZWZveCBpbnZhbGlkIGZpZWxkIHNoYWRvd3MuICovXG4gIDotbW96LXVpLWludmFsaWQge1xuICAgIGJveC1zaGFkb3c6IG5vbmU7XG4gIH1cblxuICAvKiBBbGlnbiBwcm9ncmVzcyBlbGVtZW50cyBjb25zaXN0ZW50bHkgd2l0aCBzdXJyb3VuZGluZyB0ZXh0LiAqL1xuICBwcm9ncmVzcyB7XG4gICAgdmVydGljYWwtYWxpZ246IGJhc2VsaW5lO1xuICB9XG5cbiAgLyogTm9ybWFsaXplIHNlYXJjaCBpbnB1dCBhcHBlYXJhbmNlIGFuZCBvdXRsaW5lIG9mZnNldC4gKi9cbiAgW3R5cGU9XCJzZWFyY2hcIl0ge1xuICAgIGFwcGVhcmFuY2U6IHRleHRmaWVsZDtcbiAgICBvdXRsaW5lLW9mZnNldDogLTJweDtcbiAgfVxuXG4gIC8qIEtlZXAgV2ViS2l0IG51bWJlciBpbnB1dCBzcGluIGJ1dHRvbnMgYXQgdGhlaXIgbmF0aXZlIGhlaWdodC4gKi9cbiAgOjotd2Via2l0LWlubmVyLXNwaW4tYnV0dG9uLCA6Oi13ZWJraXQtb3V0ZXItc3Bpbi1idXR0b24ge1xuICAgIGhlaWdodDogYXV0bztcbiAgfVxuXG4gIC8qIFJlbW92ZSBXZWJLaXQgc2VhcmNoIGlucHV0IGRlY29yYXRpb24uICovXG4gIDo6LXdlYmtpdC1zZWFyY2gtZGVjb3JhdGlvbiB7XG4gICAgLXdlYmtpdC1hcHBlYXJhbmNlOiBub25lO1xuICB9XG5cbiAgLyogTm9ybWFsaXplIFdlYktpdCBmaWxlIHVwbG9hZCBidXR0b24gYXBwZWFyYW5jZSBhbmQgZm9udC4gKi9cbiAgOjotd2Via2l0LWZpbGUtdXBsb2FkLWJ1dHRvbiB7XG4gICAgLXdlYmtpdC1hcHBlYXJhbmNlOiBidXR0b247XG4gICAgZm9udDogaW5oZXJpdDtcbiAgfVxuXG4gIC8qIE5vcm1hbGl6ZSBob3Jpem9udGFsIHJ1bGUgc2l6ZSBhbmQgY29sb3IgaW5oZXJpdGFuY2UuICovXG4gIGhyIHtcbiAgICBoZWlnaHQ6IDA7XG4gICAgY29sb3I6IGluaGVyaXQ7XG4gIH1cblxuICAvKiBOb3JtYWxpemUgc21hbGwgdGV4dCBzaXppbmcuICovXG4gIHNtYWxsIHtcbiAgICBmb250LXNpemU6IDgwJTtcbiAgfVxuXG4gIC8qIE5vcm1hbGl6ZSBzdXBlcnNjcmlwdCBhbmQgc3Vic2NyaXB0IHNpemluZyBhbmQgcG9zaXRpb25pbmcgY29udGV4dC4gKi9cbiAgc3ViLCBzdXAge1xuICAgIGZvbnQtc2l6ZTogNzUlO1xuICAgIGxpbmUtaGVpZ2h0OiAwO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICB2ZXJ0aWNhbC1hbGlnbjogYmFzZWxpbmU7XG4gIH1cblxuICAvKiBQb3NpdGlvbiBzdWJzY3JpcHRzIGNvbnNpc3RlbnRseSBiZWxvdyB0aGUgYmFzZWxpbmUuICovXG4gIHN1YiB7XG4gICAgYm90dG9tOiAtMC4yNWVtO1xuICB9XG5cbiAgLyogUG9zaXRpb24gc3VwZXJzY3JpcHRzIGNvbnNpc3RlbnRseSBhYm92ZSB0aGUgYmFzZWxpbmUuICovXG4gIHN1cCB7XG4gICAgdG9wOiAtMC41ZW07XG4gIH1cblxuICAvKiBOb3JtYWxpemUgdGFibGUgaW5kZW50YXRpb24gYW5kIGJvcmRlciBjb2xvciBpbmhlcml0YW5jZS4gKi9cbiAgdGFibGUge1xuICAgIHRleHQtaW5kZW50OiAwO1xuICAgIGJvcmRlci1jb2xvcjogaW5oZXJpdDtcbiAgfVxuXG4gIC8qIEFwcGx5IHRoZSBkZWZhdWx0IHNhbnMgZm9udCBzdGFjayB0byBkb2N1bWVudHMgYW5kIHNoYWRvdyBob3N0cy4gKi9cbiAgYm9keSwgOmhvc3Qge1xuICAgIGZvbnQtZmFtaWx5OiB2YXIoLS1mb250LWZhbWlseS1zYW5zKTtcbiAgICBmb250LWZlYXR1cmUtc2V0dGluZ3M6IHZhcigtLWZvbnQtZmVhdHVyZS1zYW5zLCBub3JtYWwpO1xuICB9XG5cbiAgLyogQXBwbHkgdGhlIGRlZmF1bHQgbW9ub3NwYWNlIGZvbnQgc3RhY2sgdG8gY29kZS1yZWxhdGVkIGVsZW1lbnRzLiAqL1xuICBjb2RlLCBrYmQsIHNhbXAsIHByZSB7XG4gICAgZm9udC1mYW1pbHk6IHZhcigtLWZvbnQtZmFtaWx5LW1vbm8pO1xuICAgIGZvbnQtZmVhdHVyZS1zZXR0aW5nczogdmFyKC0tZm9udC1mZWF0dXJlLW1vbm8sIG5vcm1hbCk7XG4gIH1cblxuICAvKiByZW1vdmUgKi9cblxuICAvKiBSZW1vdmUgZGVmYXVsdCBsaW5rIGNvbG9yIGFuZCB1bmRlcmxpbmUgc3R5bGVzLiAqL1xuICBhIHtcbiAgICBjb2xvcjogaW5oZXJpdDtcbiAgICB0ZXh0LWRlY29yYXRpb246IG5vbmU7XG4gIH1cblxuICAvKiBSZXNldCBmb3JtIGNvbnRyb2wgdHlwb2dyYXBoeSwgc3BhY2luZywgY29sb3IsIGFuZCBiYWNrZ3JvdW5kLiAqL1xuICBidXR0b24sIGlucHV0LCBvcHRncm91cCwgc2VsZWN0LCB0ZXh0YXJlYSB7XG4gICAgZm9udDogaW5oZXJpdDtcbiAgICBmb250LWZlYXR1cmUtc2V0dGluZ3M6IGluaGVyaXQ7XG4gICAgZm9udC12YXJpYXRpb24tc2V0dGluZ3M6IGluaGVyaXQ7XG4gICAgZm9udC1zaXplOiAxMDAlO1xuICAgIG1hcmdpbjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgIGNvbG9yOiBpbmhlcml0O1xuICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICB9XG5cbiAgLyogUmVtb3ZlIGRlZmF1bHQgYm9yZGVycyB3aGlsZSBrZWVwaW5nIHNvbGlkIGJvcmRlciBzdHlsZSBhcyB0aGUgYmFzZWxpbmUuICovXG4gICosIDo6YmVmb3JlLCA6OmFmdGVyIHtcbiAgICBib3JkZXItd2lkdGg6IDA7XG4gICAgYm9yZGVyLXN0eWxlOiBzb2xpZDtcbiAgfVxuXG4gIC8qIFJlbW92ZSBkZWZhdWx0IG1hcmdpbnMgZnJvbSBjb21tb24gYmxvY2sgYW5kIHRleHQgZWxlbWVudHMuICovXG4gIGJvZHksIGJsb2NrcXVvdGUsIGRsLCBkZCwgaHIsIGZpZ3VyZSwgcCwgcHJlLCBoMSwgaDIsIGgzLCBoNCwgaDUsIGg2IHtcbiAgICBtYXJnaW46IDA7XG4gIH1cblxuICAvKiBSZW1vdmUgZGVmYXVsdCBwYWRkaW5nIGZyb20gdGFibGUgY2VsbHMgYW5kIGZvcm0gZ3JvdXBpbmcgZWxlbWVudHMuICovXG4gIHRkLCBsZWdlbmQsIGZpZWxkc2V0IHtcbiAgICBwYWRkaW5nOiAwO1xuICB9XG5cbiAgLyogUmVtb3ZlIGRlZmF1bHQgbGlzdCBzcGFjaW5nLiAqL1xuICB1bCwgb2wge1xuICAgIG1hcmdpbjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICB9XG5cbiAgLyogUmVtb3ZlIG1vYmlsZSB0YXAgaGlnaGxpZ2h0IGNvbG9yLiAqL1xuICBib2R5IHtcbiAgICAtd2Via2l0LXRhcC1oaWdobGlnaHQtY29sb3I6IHRyYW5zcGFyZW50O1xuICB9XG5cbiAgLyogUmVtb3ZlIHVub3JkZXJlZCBsaXN0IG1hcmtlcnMuICovXG4gIHVsIHtcbiAgICBsaXN0LXN0eWxlOiBub25lO1xuICB9XG5cbiAgLyogUmVzZXQgaGVhZGluZyB0eXBvZ3JhcGh5IHRvIGluaGVyaXQgZnJvbSBzdXJyb3VuZGluZyB0ZXh0LiAqL1xuICBoMSwgaDIsIGgzLCBoNCwgaDUsIGg2IHtcbiAgICBmb250LXNpemU6IGluaGVyaXQ7XG4gICAgZm9udC13ZWlnaHQ6IGluaGVyaXQ7XG4gIH1cblxuICAvKiBIaWRlIGVsZW1lbnRzIG1hcmtlZCB3aXRoIHRoZSBoaWRkZW4gYXR0cmlidXRlLiAqL1xuICBbaGlkZGVuXSB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztBQUFBO0VBSUU7Ozs7RUFLQTs7Ozs7Ozs7OztFQVdBOzs7O0VBS0E7Ozs7O0VBT0E7Ozs7RUFLQTs7Ozs7RUFNQTs7Ozs7RUFRQTs7OztFQU9BOzs7O0VBS0E7Ozs7RUFLQTs7OztFQVFBOzs7OztFQU1BOzs7O0VBS0E7Ozs7RUFLQTs7Ozs7RUFNQTs7OztFQUtBOzs7O0VBS0E7Ozs7O0VBTUE7Ozs7O0VBTUE7Ozs7RUFLQTs7Ozs7OztFQVFBOzs7O0VBS0E7Ozs7RUFLQTs7Ozs7RUFNQTs7Ozs7RUFNQTs7Ozs7RUFRQTs7Ozs7RUFNQTs7Ozs7Ozs7Ozs7RUFZQTs7Ozs7RUFNQTs7OztFQUtBOzs7O0VBS0E7Ozs7O0VBTUE7Ozs7RUFLQTs7OztFQUtBOzs7OztFQU1BOzs7OztBQTNORix1QyJ9 */
diff --git a/packages/next/e2e/static-export/.master/stylesheets/06ed241712323a5695b1aa0965c42fce6072d8debb0232e53925bb628ebee0cb/c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-bd80d3758c4a06dee159a702b2719e26415602942fea159f20890002b90649d5.css b/packages/next/e2e/static-export/.master/stylesheets/06ed241712323a5695b1aa0965c42fce6072d8debb0232e53925bb628ebee0cb/c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-bd80d3758c4a06dee159a702b2719e26415602942fea159f20890002b90649d5.css
deleted file mode 100644
index 66e3a16c3..000000000
--- a/packages/next/e2e/static-export/.master/stylesheets/06ed241712323a5695b1aa0965c42fce6072d8debb0232e53925bb628ebee0cb/c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-bd80d3758c4a06dee159a702b2719e26415602942fea159f20890002b90649d5.css
+++ /dev/null
@@ -1,2 +0,0 @@
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQSJ9 */
diff --git a/packages/next/e2e/static-export/.master/stylesheets/06ed241712323a5695b1aa0965c42fce6072d8debb0232e53925bb628ebee0cb/c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-entry.css b/packages/next/e2e/static-export/.master/stylesheets/06ed241712323a5695b1aa0965c42fce6072d8debb0232e53925bb628ebee0cb/c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-entry.css
deleted file mode 100644
index 300f0925a..000000000
--- a/packages/next/e2e/static-export/.master/stylesheets/06ed241712323a5695b1aa0965c42fce6072d8debb0232e53925bb628ebee0cb/c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-entry.css
+++ /dev/null
@@ -1,4 +0,0 @@
-@import "./c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-8b3697fd0abf5cc7538681f772e93ec43e85dccd41b440ca080527acbeb03a06.css";
-
-@layer theme{:root{--font-family-sans:var(--font-sans, ui-sans-serif), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-family-mono:var(--font-mono, ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}}
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZpbGU6Ly8vVXNlcnMvYXJvbi9tYXN0ZXIvY3NzL3BhY2thZ2VzL25leHQvZTJlL3N0YXRpYy1leHBvcnQvYXBwL2dsb2JhbHMuY3NzIl0sInNvdXJjZXNDb250ZW50IjpbIkBpbXBvcnQgJ0BtYXN0ZXIvY3NzJztcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxrSiJ9 */
diff --git a/packages/next/e2e/static-export/.master/stylesheets/06ed241712323a5695b1aa0965c42fce6072d8debb0232e53925bb628ebee0cb/c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-entry.css.assets.json b/packages/next/e2e/static-export/.master/stylesheets/06ed241712323a5695b1aa0965c42fce6072d8debb0232e53925bb628ebee0cb/c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-entry.css.assets.json
deleted file mode 100644
index 506bdf7c8..000000000
--- a/packages/next/e2e/static-export/.master/stylesheets/06ed241712323a5695b1aa0965c42fce6072d8debb0232e53925bb628ebee0cb/c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-entry.css.assets.json
+++ /dev/null
@@ -1 +0,0 @@
-{"version":2,"files":[{"name":"c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-entry.css","sha256":"7c536b533339a2f0713ddb0219b3c79546fa22c800e612cd5cccc6701e81c40f","cssBytes":549,"sourceMap":"{\"version\":3,\"sources\":[\"file:///Users/aron/master/css/packages/next/e2e/static-export/app/globals.css\"],\"sourcesContent\":[\"@import '@master/css';\\n\"],\"names\":[],\"mappings\":\"AAAA,kJ\"}"},{"name":"c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-8b3697fd0abf5cc7538681f772e93ec43e85dccd41b440ca080527acbeb03a06.css","sha256":"da886cce320953af0727ee99cdc6f13c6169cd88cabfa962f812295c00269f47","cssBytes":146,"sourceMap":"{\"version\":3,\"sources\":[\"file:///Users/aron/master/css/packages/css/src/index.css\"],\"sourcesContent\":[\"@import \\\"@master/css-preset\\\";\\n\"],\"names\":[],\"mappings\":\"AAAA,kJ\"}"},{"name":"c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-2d919a59fdadb862826379fe7ffbed77f96c3aab7be7b554e46fececdbdfe433.css","sha256":"3c45775268485b273c3c9273b992f29995c097b39a24d5e41b740d5da8e50cf0","cssBytes":587,"sourceMap":"{\"version\":3,\"sources\":[\"file:///Users/aron/master/css/packages/preset/src/index.css\"],\"sourcesContent\":[\"@import \\\"./base.css\\\";\\n@import \\\"./theme.css\\\";\\n@import \\\"./variants.css\\\";\\n@import \\\"./utilities.css\\\";\\n\"],\"names\":[],\"mappings\":\"AAAA;AACA;AACA;AACA,kJ\"}"},{"name":"c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-a10572ea9e8348dfe3d0e157929da4e482ea02aef80da2bf2dcc3f899d42d53b.css","sha256":"5aa5d9321149baa59cbc830ff573ed8b989df22479632238c58f0a0e0c6c9de4","cssBytes":2779,"sourceMap":"{\"version\":3,\"sources\":[\"file:///Users/aron/master/css/packages/preset/src/base.css\"],\"sourcesContent\":[\"@layer theme, base, defaults, components, utilities;\\n\\n@layer base {\\n /* Improve text rendering precision across browsers. */\\n * {\\n text-rendering: geometricPrecision;\\n }\\n\\n /* Normalize body text metrics and font smoothing. */\\n body {\\n line-height: 1.2;\\n text-size-adjust: 100%;\\n -webkit-text-size-adjust: 100%;\\n -moz-text-size-adjust: 100%;\\n -ms-text-size-adjust: 100%;\\n -moz-osx-font-smoothing: grayscale;\\n -webkit-font-smoothing: antialiased;\\n }\\n\\n /* Remove touch delay from common interactive elements. */\\n a, button {\\n touch-action: manipulation;\\n }\\n\\n /* Prevent accidental text selection on button-like controls. */\\n [role=button], summary,\\n button, [type=button] {\\n -webkit-user-select: none;\\n user-select: none;\\n }\\n\\n /* Use border-box sizing for all elements and pseudo-elements. */\\n *, ::before, ::after {\\n box-sizing: border-box;\\n }\\n\\n /* Normalize tab width for readable preformatted text. */\\n body {\\n -moz-tab-size: 2;\\n tab-size: 2;\\n }\\n\\n /* Make embedded media responsive and block-level by default. */\\n img, svg, video, canvas, audio, iframe, embed, object {\\n max-width: 100%;\\n display: block;\\n }\\n\\n /* consistent */\\n\\n /* Keep the root viewport height consistent on modern and WebKit browsers. */\\n html, body {\\n height: 100dvh;\\n height: -webkit-fill-available;\\n height: -moz-available;\\n }\\n\\n /* Ensure abbreviated text with titles has a consistent underline style. */\\n abbr[title] {\\n text-decoration: underline dotted;\\n }\\n\\n /* Keep bold text semantically stronger than surrounding text. */\\n b, strong {\\n font-weight: bolder;\\n }\\n\\n /* Normalize monospace-related element sizing. */\\n pre,\\n code,\\n kbd,\\n samp {\\n font-size: 1em;\\n }\\n\\n /* Remove Firefox inner focus padding and border from controls. */\\n ::-moz-focus-inner {\\n border-style: none;\\n padding: 0;\\n }\\n\\n /* Remove Firefox invalid field shadows. */\\n :-moz-ui-invalid {\\n box-shadow: none;\\n }\\n\\n /* Align progress elements consistently with surrounding text. */\\n progress {\\n vertical-align: baseline;\\n }\\n\\n /* Normalize search input appearance and outline offset. */\\n [type=\\\"search\\\"] {\\n appearance: textfield;\\n outline-offset: -2px;\\n }\\n\\n /* Keep WebKit number input spin buttons at their native height. */\\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\\n height: auto;\\n }\\n\\n /* Remove WebKit search input decoration. */\\n ::-webkit-search-decoration {\\n -webkit-appearance: none;\\n }\\n\\n /* Normalize WebKit file upload button appearance and font. */\\n ::-webkit-file-upload-button {\\n -webkit-appearance: button;\\n font: inherit;\\n }\\n\\n /* Normalize horizontal rule size and color inheritance. */\\n hr {\\n height: 0;\\n color: inherit;\\n }\\n\\n /* Normalize small text sizing. */\\n small {\\n font-size: 80%;\\n }\\n\\n /* Normalize superscript and subscript sizing and positioning context. */\\n sub, sup {\\n font-size: 75%;\\n line-height: 0;\\n position: relative;\\n vertical-align: baseline;\\n }\\n\\n /* Position subscripts consistently below the baseline. */\\n sub {\\n bottom: -0.25em;\\n }\\n\\n /* Position superscripts consistently above the baseline. */\\n sup {\\n top: -0.5em;\\n }\\n\\n /* Normalize table indentation and border color inheritance. */\\n table {\\n text-indent: 0;\\n border-color: inherit;\\n }\\n\\n /* Apply the default sans font stack to documents and shadow hosts. */\\n body, :host {\\n font-family: var(--font-family-sans);\\n font-feature-settings: var(--font-feature-sans, normal);\\n }\\n\\n /* Apply the default monospace font stack to code-related elements. */\\n code, kbd, samp, pre {\\n font-family: var(--font-family-mono);\\n font-feature-settings: var(--font-feature-mono, normal);\\n }\\n\\n /* remove */\\n\\n /* Remove default link color and underline styles. */\\n a {\\n color: inherit;\\n text-decoration: none;\\n }\\n\\n /* Reset form control typography, spacing, color, and background. */\\n button, input, optgroup, select, textarea {\\n font: inherit;\\n font-feature-settings: inherit;\\n font-variation-settings: inherit;\\n font-size: 100%;\\n margin: 0;\\n padding: 0;\\n color: inherit;\\n background-color: transparent;\\n }\\n\\n /* Remove default borders while keeping solid border style as the baseline. */\\n *, ::before, ::after {\\n border-width: 0;\\n border-style: solid;\\n }\\n\\n /* Remove default margins from common block and text elements. */\\n body, blockquote, dl, dd, hr, figure, p, pre, h1, h2, h3, h4, h5, h6 {\\n margin: 0;\\n }\\n\\n /* Remove default padding from table cells and form grouping elements. */\\n td, legend, fieldset {\\n padding: 0;\\n }\\n\\n /* Remove default list spacing. */\\n ul, ol {\\n margin: 0;\\n padding: 0;\\n }\\n\\n /* Remove mobile tap highlight color. */\\n body {\\n -webkit-tap-highlight-color: transparent;\\n }\\n\\n /* Remove unordered list markers. */\\n ul {\\n list-style: none;\\n }\\n\\n /* Reset heading typography to inherit from surrounding text. */\\n h1, h2, h3, h4, h5, h6 {\\n font-size: inherit;\\n font-weight: inherit;\\n }\\n\\n /* Hide elements marked with the hidden attribute. */\\n [hidden] {\\n display: none;\\n }\\n}\\n\"],\"names\":[],\"mappings\":\"AAAA;;AAAA;EAIE;;;;EAKA;;;;;;;;;;EAWA;;;;EAKA;;;;;EAOA;;;;EAKA;;;;;EAMA;;;;;EAQA;;;;EAOA;;;;EAKA;;;;EAKA;;;;EAQA;;;;;EAMA;;;;EAKA;;;;EAKA;;;;;EAMA;;;;EAKA;;;;EAKA;;;;;EAMA;;;;;EAMA;;;;EAKA;;;;;;;EAQA;;;;EAKA;;;;EAKA;;;;;EAMA;;;;;EAMA;;;;;EAQA;;;;;EAMA;;;;;;;;;;;EAYA;;;;;EAMA;;;;EAKA;;;;EAKA;;;;;EAMA;;;;EAKA;;;;EAKA;;;;;EAMA;;;;;AA3NF,uC\"}"},{"name":"c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-1cbfd5bd3a500142b187e9f63864a12dc4265824d450279964bc105531352996.css","sha256":"42ea521fb11376c6f02018849ea882f7af366ae41a228f5aa9572df0dc12c36a","cssBytes":0,"sourceMap":"{\"version\":3,\"sources\":[],\"sourcesContent\":[],\"names\":[],\"mappings\":\"A\"}"},{"name":"c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-bd80d3758c4a06dee159a702b2719e26415602942fea159f20890002b90649d5.css","sha256":"42ea521fb11376c6f02018849ea882f7af366ae41a228f5aa9572df0dc12c36a","cssBytes":0,"sourceMap":"{\"version\":3,\"sources\":[],\"sourcesContent\":[],\"names\":[],\"mappings\":\"A\"}"},{"name":"c3b1d0e926bc8d97dfb5e18f58d06391eb737de1e55a585847a5fecd53436e4b-7d6b4362977e5a0b5a99ca281514bfc3bb0f6e14a483438b4e1bc8076d2fcb33.css","sha256":"42ea521fb11376c6f02018849ea882f7af366ae41a228f5aa9572df0dc12c36a","cssBytes":0,"sourceMap":"{\"version\":3,\"sources\":[],\"sourcesContent\":[],\"names\":[],\"mappings\":\"A\"}"}]}
\ No newline at end of file
diff --git a/packages/next/e2e/static-local-css/app/probe.css b/packages/next/e2e/static-local-css/app/probe.css
index 4b65eb379..19dfad387 100644
--- a/packages/next/e2e/static-local-css/app/probe.css
+++ b/packages/next/e2e/static-local-css/app/probe.css
@@ -1,2 +1 @@
-@reference './globals.css';
.probe { color: var(--color-probe); }
diff --git a/packages/next/e2e/static-module-reference/app/globals.css b/packages/next/e2e/static-module-reference/app/globals.css
index 52c3a410f..5688a517e 100644
--- a/packages/next/e2e/static-module-reference/app/globals.css
+++ b/packages/next/e2e/static-module-reference/app/globals.css
@@ -1,3 +1,8 @@
@import '@master/css';
@theme light { --color-probe: #123456; }
@theme dark { --color-probe: #abcdef; }
+
+@mode ocean { [data-theme="ocean"] { @slot; } }
+@theme ocean { --color-probe: #082f49; }
+
+@theme { @keyframes project-pulse { from { opacity: .5; } to { opacity: .5; } } }
diff --git a/packages/next/e2e/static-module-reference/app/other/other.module.css b/packages/next/e2e/static-module-reference/app/other/other.module.css
new file mode 100644
index 000000000..be365d62e
--- /dev/null
+++ b/packages/next/e2e/static-module-reference/app/other/other.module.css
@@ -0,0 +1 @@
+.other { color: var(--color-probe); animation: project-pulse 1s linear infinite; }
diff --git a/packages/next/e2e/static-module-reference/app/other/page.jsx b/packages/next/e2e/static-module-reference/app/other/page.jsx
new file mode 100644
index 000000000..a9f701f69
--- /dev/null
+++ b/packages/next/e2e/static-module-reference/app/other/page.jsx
@@ -0,0 +1,6 @@
+import Link from 'next/link'
+import styles from './other.module.css'
+
+export default function OtherPage() {
+ return Second Module probe Home route
+}
diff --git a/packages/next/e2e/static-module-reference/app/page.jsx b/packages/next/e2e/static-module-reference/app/page.jsx
index f51ff5666..25d00554d 100644
--- a/packages/next/e2e/static-module-reference/app/page.jsx
+++ b/packages/next/e2e/static-module-reference/app/page.jsx
@@ -1,5 +1,6 @@
import styles from './probe.module.css'
+import Link from 'next/link'
export default function Page() {
- return Module stylesheet probe
+ return Module stylesheet probe Other route
}
diff --git a/packages/next/e2e/static-module-reference/app/probe.module.css b/packages/next/e2e/static-module-reference/app/probe.module.css
index 4b65eb379..7f37d61af 100644
--- a/packages/next/e2e/static-module-reference/app/probe.module.css
+++ b/packages/next/e2e/static-module-reference/app/probe.module.css
@@ -1,2 +1 @@
-@reference './globals.css';
-.probe { color: var(--color-probe); }
+.probe { color: var(--color-probe); animation: project-pulse 1s linear infinite; }
diff --git a/packages/next/src/index.ts b/packages/next/src/index.ts
index d4e6e8434..390b6ee4a 100644
--- a/packages/next/src/index.ts
+++ b/packages/next/src/index.ts
@@ -37,7 +37,8 @@ const MASTER_CSS_MANIFEST_RESOURCE_QUERY = new RegExp(MASTER_CSS_MANIFEST_QUERY.
const MASTER_CSS_MANIFEST_IMPORT_CONTENT_PATTERN = new RegExp(`\\${MASTER_CSS_MANIFEST_QUERY}`)
const MASTER_CSS_VIRTUAL_MANIFEST_PATH_PATTERN = createVirtualDefaultManifestModulePathPattern()
const MASTER_CSS_VIRTUAL_EMITTED_GLOBALS_PATH_PATTERN = createVirtualEmittedGlobalsModulePathPattern()
-const MASTER_CSS_STYLE_CONTENT_PATTERN = new RegExp(`${createManifestEntryPattern().source}|@(compose|at|reference|variant|light|dark)\\b`)
+const MASTER_CSS_STATIC_OUTPUT_PATTERN = /[/\\]\.master[/\\]next\.css$/
+const MASTER_CSS_STATIC_STYLESHEET_PATTERN = /[/\\]\.master[/\\]next-style-[^/\\]+\.css$/
const NEXT_INSTRUMENTATION_CLIENT_ID = 'private-next-instrumentation-client'
const MASTER_CSS_USER_INSTRUMENTATION_CLIENT_ID = 'private-next-master-css-user-instrumentation-client'
const NEXT_REQUIRE_INSTRUMENTATION_CLIENT_IDS = [
@@ -258,6 +259,8 @@ function applyMasterCSSWebpackConfig(
config.module.rules = composeWebpackStylesheets(config.module.rules ?? [], stylesheetLoaderPath, MASTER_CSS_MANIFEST_RESOURCE_QUERY, staticStatePath ? { staticStatePath } : {})
if (staticStatePath) {
config.watchOptions = { ...config.watchOptions, ignored: staticWatchIgnores(config.watchOptions?.ignored) }
+ // Webpack can publish during the first changed module's rebuild, avoiding
+ // a second compilation after the CSS entry notices the changed output.
config.module.rules.push({
test: /\.[mc]?[jt]sx?$/,
exclude: /[/\\]node_modules[/\\]/,
@@ -406,29 +409,21 @@ function applyMasterCSSTurbopackConfig(
all: [
{ path: /\.(css|scss|sass)$/ },
{ not: { path: /\.module\.(css|scss|sass)$/ } },
- { content: MASTER_CSS_STYLE_CONTENT_PATTERN },
+ { not: { path: NEXT_STYLESHEET_ASSET_PATTERN } },
{ not: { query: MASTER_CSS_MANIFEST_RESOURCE_QUERY } }
]
},
loaders: [{ loader: stylesheetLoaderPath, options: { sassOptions: nextConfig.sassOptions ?? {} } }],
type: 'css' as const
}
- // Directives can be introduced by @use/@forward in another Sass file.
- const importedSassRule = {
- ...masterCSSStyleRule,
- condition: { all: [
- { path: /\.(scss|sass)$/ },
- { not: { path: /\.module\.(scss|sass)$/ } },
- { not: { content: MASTER_CSS_STYLE_CONTENT_PATTERN } },
- { not: { query: MASTER_CSS_MANIFEST_RESOURCE_QUERY } }
- ] }
- }
const cssModuleRule = {
...masterCSSStyleRule,
- type: 'css-module' as const,
+ // Preserve Next's inferred Module type. An explicit css-module type also
+ // retypes its internal CSS asset and Turbopack cannot process that wrapper.
+ type: undefined,
condition: { all: [
{ path: /\.module\.(css|scss|sass)$/ },
- { any: [{ content: MASTER_CSS_STYLE_CONTENT_PATTERN }, { path: /\.(scss|sass)$/ }] },
+ { not: { path: NEXT_STYLESHEET_ASSET_PATTERN } },
{ not: { query: MASTER_CSS_MANIFEST_RESOURCE_QUERY } }
] }
}
@@ -460,27 +455,14 @@ function applyMasterCSSTurbopackConfig(
masterCSSVirtualManifestRule,
masterCSSEmittedGlobalsRule,
masterCSSManifestRule,
- ...(includeStyleRule ? [publishedStylesheetMapRule, masterCSSStyleRule, importedSassRule, cssModuleRule] : []),
+ publishedStylesheetMapRule,
+ ...(includeStyleRule ? [masterCSSStyleRule, cssModuleRule] : []),
...toRuleArray(configRules)
]
} satisfies TurbopackRules
}
}
-// Keep Next's original module type and RSC transforms, including 'use client'.
-// Setting type: 'ecmascript' bypasses those transforms; `as` on the '*' rule
-// also appends an extension and changes the source's module identity.
-function createStaticSourceRule(path: RegExp) {
- return {
- condition: {
- all: [
- { not: 'foreign' as const },
- { path }
- ]
- }
- }
-}
-
function createCSSManifestImportSourceRules(cssManifestImportLoaderPath: string, projectDir: string) {
const loader = {
loader: cssManifestImportLoaderPath,
@@ -510,7 +492,6 @@ function applyMasterCSSStaticTurbopackConfig(
cssManifestLoaderPath: string,
cssManifestImportLoaderPath: string,
stylesheetLoaderPath: string,
- staticLoaderPath: string,
staticCSSLoaderPath: string,
virtualCSSPath: string,
virtualManifestPath: string,
@@ -521,24 +502,6 @@ function applyMasterCSSStaticTurbopackConfig(
const turbopackConfig = applyMasterCSSTurbopackConfig(nextConfig, cssManifestLoaderPath, cssManifestImportLoaderPath, stylesheetLoaderPath, virtualCSSPath, virtualManifestPath, virtualEmittedGlobalsPath, projectDir, undefined, false)
const rules = turbopackConfig.rules || {}
const starRules = toRuleArray(rules['*'])
- const staticLoader = {
- loader: staticLoaderPath,
- options: {
- statePath
- }
- }
- const sourceRules = [
- createStaticSourceRule(/\.tsx$/),
- createStaticSourceRule(/\.ts$/),
- createStaticSourceRule(/\.mts$/),
- createStaticSourceRule(/\.cts$/),
- createStaticSourceRule(/\.jsx$/),
- createStaticSourceRule(/\.js$/),
- createStaticSourceRule(/\.cjs$/)
- ].map((rule) => ({
- ...rule,
- loaders: [staticLoader]
- }))
const cssImportRule = {
condition: {
all: [
@@ -558,31 +521,48 @@ function applyMasterCSSStaticTurbopackConfig(
],
type: 'css' as const
}
+ // A direct generated CSS import has no source stylesheet loader to own the
+ // inventory. Let that CSS module watch and refresh it.
+ const generatedCSSRule = {
+ condition: { all: [{ not: 'foreign' as const }, { path: MASTER_CSS_STATIC_OUTPUT_PATTERN }] },
+ loaders: [{ loader: staticCSSLoaderPath, options: { statePath } }],
+ type: 'css' as const
+ }
// Static publication owns entry stylesheets, but local styles still need
- // directive lowering and referenced theme resources before Next emits CSS.
- // Keep CSS Modules on Next's built-in path: Turbopack cannot process the
- // transformed inner CSS asset produced by a custom module stylesheet loader.
+ // directive lowering and project theme resources before Next emits CSS.
const localStyleRule = {
condition: {
all: [
{ path: /\.(css|scss|sass)$/ },
{ not: { path: /\.module\.(css|scss|sass)$/ } },
{ not: { content: createManifestEntryPattern() } },
- { any: [{ content: MASTER_CSS_STYLE_CONTENT_PATTERN }, { path: /\.(scss|sass)$/ }] },
+ { not: { path: MASTER_CSS_STATIC_OUTPUT_PATTERN } },
+ { not: { path: MASTER_CSS_STATIC_STYLESHEET_PATTERN } },
+ { not: { path: NEXT_STYLESHEET_ASSET_PATTERN } },
{ not: { query: MASTER_CSS_MANIFEST_RESOURCE_QUERY } }
]
},
loaders: [{ loader: stylesheetLoaderPath, options: { sassOptions: nextConfig.sassOptions ?? {} } }],
type: 'css' as const
}
+ const localModuleRule = {
+ ...localStyleRule,
+ type: undefined,
+ condition: { all: [
+ { path: /\.module\.(css|scss|sass)$/ },
+ { not: { content: createManifestEntryPattern() } },
+ { not: { query: MASTER_CSS_MANIFEST_RESOURCE_QUERY } }
+ ] }
+ }
return {
...turbopackConfig,
rules: {
...rules,
'*': [
- ...sourceRules,
+ generatedCSSRule,
cssImportRule,
localStyleRule,
+ localModuleRule,
...starRules
]
} satisfies TurbopackRules
@@ -661,7 +641,6 @@ export function withMasterCSS(nextConfig: T = {} as T, opt
cssManifestLoaderPath,
cssManifestImportLoaderPath,
stylesheetLoaderPath,
- resolveStaticLoaderPath(),
resolveStaticCSSLoaderPath(),
turbopackVirtualCSSPath,
turbopackVirtualManifestPath,
diff --git a/packages/next/src/prepare-entry-graph.ts b/packages/next/src/prepare-entry-graph.ts
index 98330ca2d..d3aa23caf 100644
--- a/packages/next/src/prepare-entry-graph.ts
+++ b/packages/next/src/prepare-entry-graph.ts
@@ -1,7 +1,7 @@
import { createHash } from 'node:crypto'
import { pathToFileURL } from 'node:url'
import { inspectCSS } from '@master/css-compiler'
-import { compileRenderedStylesheet, compileStylesheet } from '@master/css-compiler/stylesheet'
+import { compileRenderedStylesheet, compileStylesheet, type MasterCSSStylesheetCompileOptions } from '@master/css-compiler/stylesheet'
import { defaultBuildManifest } from '@master/css-internal/project'
import { createNextModuleGraph } from './prepare-module-graph'
import { createNextPostCSS } from './prepare-postcss'
@@ -11,7 +11,13 @@ import type { ModuleContext } from './prepare-module'
import type { NextStylesheetLoaderOptions } from './prepare-stylesheet'
export async function prepareNextEntryGraph(context: ModuleContext, projectDir: string, options: NextStylesheetLoaderOptions,
- onDependency: (file: string) => void, source: string, sourceMap?: string) {
+ onDependency: (file: string) => void, source: string, sourceMap?: string,
+ definitions: Pick = { baseManifest: defaultBuildManifest }): Promise<{
+ graph: ReturnType
+ entry: Awaited['prepareEntry']>>
+ manifest: MasterCSSStylesheetCompileOptions['baseManifest']
+ postcss: boolean
+ }> {
const postcss = options.preprocessed ? createNextPostCSS(context, projectDir, onDependency) : undefined
const raw = createNextModuleGraph(context, projectDir, options, onDependency, { raw: true })
const rawEntry = await raw.prepareEntry(source, sourceMap)
@@ -19,7 +25,7 @@ export async function prepareNextEntryGraph(context: ModuleContext, projectDir:
const loadSass = () => ({ async compileStringAsync(css: string) { return { css } } })
const resourceFiles = new Map()
const manifest = await compileRenderedStylesheet(context.resourcePath, rawEntry.source, {
- baseManifest: defaultBuildManifest, projectDir, preserveNativeCSS: true, loadSass,
+ ...definitions, projectDir, preserveNativeCSS: true, loadSass,
sourceMap: rawEntry.sourceMap, baseFile: context.resourcePath, onDependency: track,
delivery: {
entryURL: './entry.css',
@@ -39,7 +45,7 @@ export async function prepareNextEntryGraph(context: ModuleContext, projectDir:
inputs: raw.inputs, retainedImports: raw.retainedImports,
async transform(_file, input, inputMap) { return { source: input, sourceMap: inputMap, globalAnimations } }
})
- return { graph, entry: await graph.prepareEntry(rawEntry.source, rawEntry.sourceMap), manifest: defaultBuildManifest, postcss: false }
+ return { graph, entry: await graph.prepareEntry(rawEntry.source, rawEntry.sourceMap), manifest: definitions.baseManifest, postcss: false }
}
const generatedCSS = rebasePostCSSResources(manifest.generatedCSS, context.resourcePath, [...resourceFiles])
let processedGlobals = manifest.emittedGlobals
diff --git a/packages/next/src/sass-source-context.ts b/packages/next/src/sass-source-context.ts
index ff9194246..822d38ef6 100644
--- a/packages/next/src/sass-source-context.ts
+++ b/packages/next/src/sass-source-context.ts
@@ -1,6 +1,12 @@
import { fileURLToPath } from 'node:url'
type SassMap = { version: number; sources: string[]; sourcesContent?: (string | null)[]; sourceRoot?: string; mappings: string }
+function sameSourceURL(candidate: URL | undefined, url: URL) {
+ if (candidate?.href === url.href) return true
+ return candidate?.protocol === 'file:' && url.protocol === 'file:'
+ && candidate.search === url.search && candidate.hash === url.hash
+ && fileURLToPath(candidate) === fileURLToPath(url)
+}
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
function decode(segment: string) {
const values: number[] = []
@@ -31,7 +37,7 @@ export function removeSassPrefixMap(map: object | undefined, url: URL, source: s
if (!map || !prefix) return map
const raw = map as SassMap
const base = new URL(raw.sourceRoot ? raw.sourceRoot.replace(/\/?$/, '/') : './', url)
- const index = raw.sources.findIndex(value => new URL(value, base).href === url.href)
+ const index = raw.sources.findIndex(value => sameSourceURL(new URL(value, base), url))
if (index < 0) return map
const lines = prefix.split(/\r\n?|\n/).length - 1
const sources = [...raw.sources], sourcesContent = [...raw.sourcesContent ?? []]
@@ -57,7 +63,7 @@ type Position = { line: number; column: number; offset: number }
type SassError = Error & { sassMessage?: string; span?: { url?: URL; start: Position; end: Position; text: string; context?: string } }
export function removeSassPrefixError(error: unknown, url: URL, source: string, prefix: string): unknown {
const original = error as SassError
- if (!prefix || !original?.span || original.span.url?.href !== url.href) return error
+ if (!prefix || !original?.span || !sameSourceURL(original.span.url, url)) return error
const lines = prefix.split(/\r\n?|\n/).length - 1, inserted = original.span.start.line < lines
const mappedURL = inserted ? new URL(url.href + '?master-css-additional-data') : url
const position = (value: Position) => ({ ...value, line: value.line - (inserted ? 0 : lines), offset: value.offset - (inserted ? 0 : prefix.length) })
diff --git a/packages/next/src/static-css-loader.ts b/packages/next/src/static-css-loader.ts
index aad84e371..460cf479a 100644
--- a/packages/next/src/static-css-loader.ts
+++ b/packages/next/src/static-css-loader.ts
@@ -1,4 +1,6 @@
-import { addStaticCSSDependencies, transformStaticStyleSource } from './static'
+import { addStaticCSSDependencies, readStaticState, refreshStaticOutput, transformStaticStyleSource } from './static'
+
+const generatedCSSPath = /[/\\]\.master[/\\]next\.css$/
interface LoaderContext {
resourcePath: string
@@ -28,13 +30,24 @@ export default function masterCSSNextStaticCSSLoader(this: LoaderContext, source
}
const preprocessorDependencies = this.getDependencies?.() ?? []
- const run = addStaticCSSDependencies(statePath, this.addDependency?.bind(this), this.addContextDependency?.bind(this), this.addMissingDependency?.bind(this))
- .then(() => transformStaticStyleSource(statePath, this.resourcePath, source, preprocessorDependencies))
- .then(async (content) => {
- // Transformation can discover resources and publish new companion files.
- await addStaticCSSDependencies(statePath, this.addDependency?.bind(this), this.addContextDependency?.bind(this), this.addMissingDependency?.bind(this))
- callback(null, content)
- })
+ const watch = () => addStaticCSSDependencies(statePath, this.addDependency?.bind(this), this.addContextDependency?.bind(this), this.addMissingDependency?.bind(this))
+ const run = Promise.resolve().then(async () => {
+ const state = readStaticState(statePath)
+ if (generatedCSSPath.test(this.resourcePath)) {
+ // A broad Turbopack root can also contain another project's output.
+ if (this.resourcePath !== state.outputPath) return source
+ const content = await refreshStaticOutput(statePath)
+ await watch()
+ return content
+ }
+ await watch()
+ const content = await transformStaticStyleSource(statePath, this.resourcePath, source, preprocessorDependencies)
+ // Transformation can discover resources and publish new companion files.
+ await watch()
+ return content
+ }).then(content => {
+ callback(null, content)
+ })
.catch((error: Error) => callback(error))
void run
diff --git a/packages/next/src/static.ts b/packages/next/src/static.ts
index 7703d68c7..1212237bd 100644
--- a/packages/next/src/static.ts
+++ b/packages/next/src/static.ts
@@ -356,6 +356,20 @@ export async function getOrCreateStaticSession(
return session
}
+/** Keep a directly imported generated CSS entry current when no source CSS entry is loaded. */
+export async function refreshStaticOutput(statePath: string) {
+ const state = readStaticState(statePath)
+ const options = resolveOptions({
+ mode: 'static',
+ scanner: state.options.scanner,
+ pruneNativeCSS: state.options.pruneNativeCSS,
+ debug: state.options.debug
+ })
+ const session = await getOrCreateStaticSession(state.projectDir, state.outputPath, options)
+ await session.write()
+ return readFileSync(state.outputPath, 'utf8')
+}
+
export async function prepareNextStatic(rawOptions: MasterCSSNextOptions = {}, setupOptions: PrepareNextStaticOptions = {}) {
const options = resolveOptions(rawOptions)
if (options.mode !== 'static') return
diff --git a/packages/next/src/stylesheet-delivery.ts b/packages/next/src/stylesheet-delivery.ts
index f08181c13..a7e261dc7 100644
--- a/packages/next/src/stylesheet-delivery.ts
+++ b/packages/next/src/stylesheet-delivery.ts
@@ -8,9 +8,8 @@ import { publishFile } from './static-publication'
const hash = (value: string | Buffer) => createHash('sha256').update(value).digest('hex')
/** The host loads entry CSS in place; publish every retained child before returning it. */
-export async function deliverNextStylesheet(file: string, projectDir: string, onDependency: (file: string) => void,
- compile: (delivery: MasterCSSStylesheetDeliveryOptions) => Promise) {
- const directory = join(projectDir, '.master/stylesheets', hash(file))
+export async function deliverNextStylesheet>(file: string, projectDir: string, onDependency: (file: string) => void,
+ compile: (delivery: MasterCSSStylesheetDeliveryOptions) => Promise, sharedGlobals = false) {
const href = (output: string) => './' + output
const resources = new Map()
const read = (file: string) => {
@@ -27,7 +26,14 @@ export async function deliverNextStylesheet(file: string, projectDir: string, on
onDependency
}
let result = await compile(delivery)
- revision = hash(JSON.stringify({ version: 2, stylesheets: result.stylesheets })) + '-'
+ // Generated globals have no local Module identity. Their resolved CSS already
+ // contains content-addressed resource URLs, so identical resource sets from
+ // separate modules can share one delivery entry without changing selectors.
+ const identity = sharedGlobals
+ ? hash(JSON.stringify({ version: 2, kind: 'generated-globals', stylesheets: result.stylesheets?.map(({ css, sourceMap }) => ({ css, sourceMap })) }))
+ : hash(file)
+ const directory = join(projectDir, '.master/stylesheets', identity)
+ revision = (sharedGlobals ? identity : hash(JSON.stringify({ version: 2, stylesheets: result.stylesheets }))) + '-'
result = await compile(delivery)
const assets = new Map()
const cssBytes = new Map()
diff --git a/packages/next/src/stylesheet-loader.ts b/packages/next/src/stylesheet-loader.ts
index fa226f299..706180bc0 100644
--- a/packages/next/src/stylesheet-loader.ts
+++ b/packages/next/src/stylesheet-loader.ts
@@ -1,14 +1,14 @@
-import { addStaticCSSDependencies, transformStaticStyleSource } from './static'
+import { addStaticCSSDependencies, resolveStaticOutputPath, transformStaticStyleSource } from './static'
import { prepareNextEntryGraph } from './prepare-entry-graph'
+import { nextGeneratedGlobalAnimations } from './prepare-global-module'
import type { ModuleContext } from './prepare-module'
import { deliverNextStylesheet } from './stylesheet-delivery'
-import { dirname, extname, resolve } from 'node:path'
+import { dirname, extname, relative, resolve } from 'node:path'
import { fileURLToPath } from 'node:url'
import { prepareNextStylesheet, type NextStylesheetLoaderOptions } from './prepare-stylesheet'
import {
compileRenderedStylesheet,
compileStylesheet,
- collectStylesheetEmittedGlobals,
transformStylesheet
} from '@master/css-compiler/stylesheet'
import {
@@ -34,19 +34,16 @@ function hasMasterStyleDirective(source: string) {
return source.includes('@settings') || source.includes('@theme') || source.includes('@master')
}
-function scopeModuleThemeVariables(code: string, generatedCSS: string | undefined, classNames: readonly string[] | undefined) {
- if (!generatedCSS || !classNames?.length || !code.includes(generatedCSS)) return code
- // Next's CSS Module pipeline requires a local class in every selector.
- // Variables referenced by a module can live on its own classes: descendants
- // inherit them, and mode queries retain the same conditions.
- const localSelector = [...new Set(classNames)].map(name => `.${name.replace(/(^[0-9]|[^a-zA-Z0-9_-])/gu, char => `\\${char.codePointAt(0)!.toString(16)} `)}`).join(',')
- const scoped = generatedCSS
- .replace(/:root\s*,\s*:host(?=\s*\{)|:host\s*,\s*:root(?=\s*\{)/gu, localSelector)
- .replace(/:root(?=\s*\{)|:host(?=\s*\{)/gu, localSelector)
- return code.replace(generatedCSS, scoped)
+function isGeneratedStylesheet(resourcePath: string, projectDir?: string) {
+ if (!projectDir) return false
+ const file = relative(projectDir, resourcePath).replace(/\\/g, '/')
+ return resourcePath === resolveStaticOutputPath(projectDir)
+ || /^\.master\/next-style-[^/]+\.css$/.test(file)
+ || file.startsWith('.master/stylesheets/')
}
function shouldAddStyleDependencies(resourcePath: string, source: string, projectDir?: string) {
+ if (isGeneratedStylesheet(resourcePath, projectDir)) return false
try {
const resolution = resolveStylesheetSync(resourcePath, source, { projectDir })
return Boolean(resolution && resolution.kind !== 'plain')
@@ -55,22 +52,10 @@ function shouldAddStyleDependencies(resourcePath: string, source: string, projec
}
}
-async function createGlobalStyleEntryEmittedGlobals(
- entries: readonly string[],
- baseManifest: Awaited>['manifest'],
- projectDir: string | undefined,
- dependencies: string[]
-) {
- if (!entries.length) return
- const result = await collectStylesheetEmittedGlobals(entries, {
- baseManifest,
- projectDir
- })
- dependencies.push(...result.dependencies)
- return result.emittedGlobals
-}
-
async function transformStyleSource(resourcePath: string, source: string, projectDir: string | undefined, options: NextStylesheetLoaderOptions, onDependency: (file: string) => void, inputMap?: object | string, loaderContext?: LoaderContext) {
+ if (isGeneratedStylesheet(resourcePath, projectDir)) {
+ return { code: source, dependencies: [], sourceMap: typeof inputMap === 'string' ? inputMap : inputMap ? JSON.stringify(inputMap) : undefined }
+ }
const rawSass = !options.preprocessed && ['.scss', '.sass'].includes(extname(resourcePath))
const prepared = rawSass ? await prepareNextStylesheet(resourcePath, source, projectDir, options, onDependency) : undefined
source = prepared?.source ?? source
@@ -135,38 +120,81 @@ async function transformStyleSource(resourcePath: string, source: string, projec
}
}
- if (resolution.kind === 'local') {
+ if (resolution.kind === 'local' || resolution.kind === 'plain') {
+ const moduleStyle = /\.module\.(?:css|scss|sass)$/u.test(resourcePath)
const entries = await discoverManifestEntries({ root: projectDir })
+ loaderContext?.addContextDependency?.(projectDir ?? dirname(resourcePath))
+ if (!entries.length && resolution.kind === 'plain') return { code: source, dependencies, sourceMap }
const projectManifest = await loadProjectManifest({
root: projectDir,
entries,
- baseManifest: defaultBuildManifest
+ baseManifest: defaultBuildManifest,
+ onDependency
})
- const emittedGlobals = await createGlobalStyleEntryEmittedGlobals(
- entries,
- projectManifest.manifest,
- projectDir,
- dependencies
- )
const result = await transformStylesheet(resourcePath, source, {
baseManifest: projectManifest.manifest,
loadSass,
...context,
projectDir,
- emittedGlobals
+ referenceFiles: entries,
+ transformNativeStylesheets: true,
+ generatedGlobals: moduleStyle ? 'separate' : 'inline'
})
dependencies.push(...projectManifest.dependencies, ...(result.dependencies || []))
+ if (!result.transformed) return { code: source, dependencies, sourceMap }
+ if (moduleStyle && result.globalStylesheet && nextGeneratedGlobalAnimations(result.globalStylesheet.css).length) {
+ // Managed animation names would be renamed by Next’s final Module pass.
+ // Scope and publish that graph once, retaining the public Module exports.
+ const preparedGraph = await prepareNextEntryGraph(loaderContext ?? { resourcePath }, projectDir ?? dirname(resourcePath), options, onDependency, source, sourceMap, {
+ baseManifest: projectManifest.manifest, referenceFiles: entries
+ })
+ const { graph, entry } = preparedGraph
+ const trackDependency = (file: string) => onDependency(graph.dependencyFile(file))
+ const delivered = await deliverNextStylesheet(resourcePath, projectDir ?? dirname(resourcePath), onDependency, delivery => compileRenderedStylesheet(resourcePath, entry.source, {
+ baseManifest: preparedGraph.manifest,
+ referenceFiles: preparedGraph.postcss ? undefined : entries,
+ projectDir, preserveNativeCSS: true, loadSass,
+ sourceMap: entry.sourceMap, baseFile: resourcePath, onDependency: trackDependency,
+ delivery: { ...delivery, resolveImport: graph.resolveImport, onDependency: trackDependency }
+ }))
+ dependencies.push(...delivered.dependencies.map(file => graph.dependencyFile(file)))
+ return { code: delivered.css + '\n' + entry.exportsCSS, sourceMap: delivered.sourceMap, dependencies, postcss: preparedGraph.postcss }
+ }
+ let code = result.code
+ let outputMap = result.sourceMap
+ if (moduleStyle && result.globalStylesheet) {
+ // Recompile the resource graph with publication URLs before relocating
+ // globals. Local CSS stays on Next's native Module path; the generated
+ // entry is already handled as global CSS by webpack-css-loader's pitch.
+ let preparedGlobals: Awaited> | undefined
+ const globals = await deliverNextStylesheet(resourcePath, projectDir ?? dirname(resourcePath), onDependency, async delivery => {
+ // This compiler boundary contains generated resources, never child
+ // stylesheet imports. Resource URLs are content-addressed and do not
+ // depend on the entry revision, so the publication pass can reuse it.
+ const delivered = preparedGlobals ??= await transformStylesheet(resourcePath, source, {
+ baseManifest: projectManifest.manifest, loadSass, ...context, projectDir,
+ referenceFiles: entries, transformNativeStylesheets: true, generatedGlobals: 'separate', delivery
+ })
+ dependencies.push(...delivered.dependencies)
+ const css = delivered.globalStylesheet?.css ?? ''
+ const sourceMap = delivered.globalStylesheet?.sourceMap ?? JSON.stringify({ version: 3, sources: [], names: [], mappings: '' })
+ return { css, sourceMap, entry: resourcePath,
+ stylesheets: [{ id: resourcePath, href: delivery.entryURL, css, sourceMap }],
+ resources: delivered.resources }
+ }, true)
+ code = globals.css + '\n' + code
+ if (outputMap) {
+ const map = JSON.parse(outputMap)
+ map.mappings = ';' + map.mappings
+ outputMap = JSON.stringify(map)
+ }
+ }
return {
- code: /\.module\.(?:css|scss|sass)$/u.test(resourcePath)
- ? scopeModuleThemeVariables(result.code, result.compilation?.generatedCSS, result.compilation?.nativeClassNames)
- : result.code,
- sourceMap: result.sourceMap,
+ code,
+ sourceMap: outputMap,
dependencies
}
}
- if (resolution.kind === 'plain') {
- return { code: source, dependencies, sourceMap }
- }
return { code: source, dependencies, sourceMap }
}
diff --git a/packages/next/tests/bug-hunt-entry-reference-build-state.test.ts b/packages/next/tests/bug-hunt-entry-reference-build-state.test.ts
index f42bba179..13a89fe75 100644
--- a/packages/next/tests/bug-hunt-entry-reference-build-state.test.ts
+++ b/packages/next/tests/bug-hunt-entry-reference-build-state.test.ts
@@ -9,7 +9,7 @@ for (const child of [false, true]) test(`Next build completion preserves entry r
mkdirSync(join(root, 'app'))
const entry = join(root, 'app/globals.css'), rules = join(root, 'app/rules.css'), token = join(root, 'app/tokens.css')
writeFileSync(token, '@utilities{audit-margin{margin:3rem}}')
- const source = '@reference "./tokens.css";.card{@compose audit-margin;}'
+ const source = "@reference \"./tokens.css\";.card{@variant media(all){margin:3rem;}}"
writeFileSync(entry, '@master entry;' + (child ? '@import "./rules.css";' : source))
if (child) writeFileSync(rules, source)
const result = await resolveMasterCSSBuildState(root, ['card'])
diff --git a/packages/next/tests/bug-hunt-loader-graph-delivery.test.ts b/packages/next/tests/bug-hunt-loader-graph-delivery.test.ts
index 2dd75df0d..90e52a1bc 100644
--- a/packages/next/tests/bug-hunt-loader-graph-delivery.test.ts
+++ b/packages/next/tests/bug-hunt-loader-graph-delivery.test.ts
@@ -1,4 +1,4 @@
-import { mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs'
+import { mkdirSync, mkdtempSync, realpathSync, readFileSync, rmSync, writeFileSync } from 'node:fs'
import { tmpdir } from 'node:os'
import { dirname, join } from 'node:path'
import { fileURLToPath, pathToFileURL } from 'node:url'
@@ -22,7 +22,7 @@ function graph(file: string, code: string, output = new Map()) {
return output
}
for (const kind of ['nested-resource', 'external-import'] as const) test(`general Next loader publishes retained ${kind} graph`, async () => {
- const root = mkdtempSync(join(tmpdir(), 'next-loader-graph-'))
+ const root = realpathSync.native(mkdtempSync(join(tmpdir(), 'next-loader-graph-')))
try {
const file = join(root, 'app/globals.css'), child = join(root, 'app/nested/child.css'), image = join(root, 'app/nested/pixel space.svg')
mkdirSync(dirname(child), { recursive: true })
@@ -64,9 +64,9 @@ for (const kind of ['nested-resource', 'external-import'] as const) test(`genera
})
test('general Next delivered entry retains original native declaration source maps', async () => {
- const root = mkdtempSync(join(tmpdir(), 'next-loader-entry-map-'))
+ const root = realpathSync.native(mkdtempSync(join(tmpdir(), 'next-loader-entry-map-')))
try {
- const file = join(root, 'entry.css'), source = '@master entry;@utilities{paint{padding:2rem}}\n.card{@compose paint;}'
+ const file = join(root, 'entry.css'), source = "@master entry;@theme{--paint-padding:2rem}\n.card{@variant media(all){padding:var(--paint-padding);}}"
writeFileSync(file, source)
const result = await transform(root, file, source, []), sheets = graph(file, result.code)
const owner = [...sheets].find(([, css]) => css.includes('.card'))!
@@ -81,15 +81,15 @@ test('general Next delivered entry retains original native declaration source ma
})
for (const syntax of ['scss', 'sass']) test(`general Next ${syntax} delivered entry retains imported partial ownership and map`, async () => {
- const root = mkdtempSync(join(tmpdir(), 'next-loader-sass-entry-map-'))
+ const root = realpathSync.native(mkdtempSync(join(tmpdir(), 'next-loader-sass-entry-map-')))
try {
const requireVite = createRequire(new URL('../../vite/package.json', import.meta.url))
const sass = createRequire(requireVite.resolve('vite')).resolve('sass')
const file = join(root, 'entry.' + syntax), partial = join(root, 'parts/_entry.scss')
mkdirSync(dirname(partial))
- writeFileSync(partial, '@reference "./tokens.css";.card{@compose paint;}')
- writeFileSync(join(root, 'parts/tokens.css'), '@utilities{paint{padding:2rem}}')
- writeFileSync(join(root, 'tokens.css'), '@utilities{paint{padding:99rem}}')
+ writeFileSync(partial, "@reference \"./tokens.css\";.card{@variant media(all){padding:var(--paint-padding);}}")
+ writeFileSync(join(root, 'parts/tokens.css'), '@theme{--paint-padding:2rem}')
+ writeFileSync(join(root, 'tokens.css'), '@theme{--paint-padding:99rem}')
const source = syntax === 'sass' ? '@use "parts/entry"\n@master entry\n' : '@use "parts/entry";@master entry;'
writeFileSync(file, source)
const dependencies: string[] = [], result = await transform(root, file, source, dependencies, { sassOptions: { implementation: sass } })
diff --git a/packages/next/tests/bug-hunt-output-source-maps.test.ts b/packages/next/tests/bug-hunt-output-source-maps.test.ts
index d3911a262..aeaf5ffbd 100644
--- a/packages/next/tests/bug-hunt-output-source-maps.test.ts
+++ b/packages/next/tests/bug-hunt-output-source-maps.test.ts
@@ -1,5 +1,5 @@
import { readStylesheetEntry } from './helpers/stylesheet-output'
-import { mkdtempSync, rmSync, writeFileSync } from 'node:fs'
+import { mkdtempSync, realpathSync, rmSync, writeFileSync } from 'node:fs'
import { createRequire, SourceMap } from 'node:module'
import { join } from 'node:path'
import { tmpdir } from 'node:os'
@@ -10,8 +10,8 @@ import loader from '../src/stylesheet-loader'
const require = createRequire(new URL('../../vite/package.json', import.meta.url))
const sassFile = createRequire(require.resolve('vite')).resolve('sass')
async function fixture(run: (root: string) => Promise) {
- const root = mkdtempSync(join(tmpdir(), 'next-output-map-'))
- try { writeFileSync(join(root, 'master.css'), '@master entry;@utilities{paint{padding:2rem}}'); await run(root) }
+ const root = realpathSync.native(mkdtempSync(join(tmpdir(), 'next-output-map-')))
+ try { writeFileSync(join(root, 'master.css'), '@master entry;@theme{--paint-padding:2rem}'); await run(root) }
finally { rmSync(root, { recursive: true, force: true }) }
}
function compile(root: string, file: string, source: string, options = {}, inputMap?: object) {
@@ -29,7 +29,7 @@ function origin(result: Awaited>, token: string) {
test('Next injected package entry retains pure CSS authoring lines in its callback map', async () => {
await fixture(async root => {
- const file = join(root, 'entry.css'), source = '@master entry;@utilities{paint{padding:2rem}}\n.card{@compose paint;}'
+ const file = join(root, 'entry.css'), source = "@master entry;@theme{--paint-padding:2rem}\n.card{@variant media(all){padding:var(--paint-padding);}}"
const result = await compile(root, file, source)
expect(origin(result, '.card')).toMatchObject({ originalSource: pathToFileURL(file).href, originalLine: 1, originalColumn: 0 })
expect(result.sourceMap.sourcesContent).toContain(source)
@@ -38,29 +38,29 @@ test('Next injected package entry retains pure CSS authoring lines in its callba
for (const syntax of ['scss', 'sass']) test(`Next ${syntax} output map retains original root after additionalData`, async () => {
await fixture(async root => {
const file = join(root, 'card.module.' + syntax)
- const source = syntax === 'sass' ? '.card\n @compose paint\n' : '.card {\n @compose paint;\n}'
+ const source = syntax === 'sass' ? '.card\n @variant media(all)\n padding: var(--paint-padding)\n' : '.card {\n @variant media(all){padding:var(--paint-padding);}\n}'
const result = await compile(root, file, source, { sassOptions: { implementation: sassFile, additionalData: syntax === 'sass' ? '$a: 1\n$b: 2' : '$a:1;\n$b:2;' } })
expect(origin(result, '.card')).toMatchObject({ originalSource: pathToFileURL(file).href, originalLine: 0 })
- expect(origin(result, 'padding:2rem')).toMatchObject({ originalSource: pathToFileURL(file).href, originalLine: 1 })
+ expect(origin(result, 'padding:var(--paint-padding)')).toMatchObject({ originalSource: pathToFileURL(file).href, originalLine: syntax === 'sass' ? 2 : 1 })
expect(result.sourceMap.sourcesContent).toContain(source)
})
})
test('Next output map distinguishes imported Sass and injected CSS origins', async () => {
await fixture(async root => {
const file = join(root, 'card.module.scss'), child = join(root, '_card.scss')
- writeFileSync(child, '.card{@compose paint;}')
+ writeFileSync(child, '.card{@variant media(all){padding:var(--paint-padding);}}')
const result = await compile(root, file, '@use "card";', { sassOptions: { implementation: sassFile, additionalData: '$gap:1;' } })
expect(origin(result, '.card')).toMatchObject({ originalSource: pathToFileURL(child).href, originalLine: 0 })
- const injected = await compile(root, file, '.card{@compose paint;}', { sassOptions: { implementation: sassFile, additionalData: '.injected{margin:1rem}' } })
+ const injected = await compile(root, file, '.card{@variant media(all){padding:var(--paint-padding);}}', { sassOptions: { implementation: sassFile, additionalData: '.injected{margin:1rem}' } })
expect(origin(injected, '.injected')).toMatchObject({ originalSource: pathToFileURL(file).href + '?master-css-additional-data', originalLine: 0 })
})
})
test('Next preprocessed Webpack input chains the supplied Sass map through lowering', async () => {
await fixture(async root => {
- const file = join(root, 'card.module.scss'), source = '/* original */\n.card {\n @compose paint;\n}'
+ const file = join(root, 'card.module.scss'), source = '/* original */\n.card {\n @variant media(all){padding:var(--paint-padding);}\n}'
const prepared = await require(sassFile).compileStringAsync(source, { url: pathToFileURL(file), sourceMap: true, sourceMapIncludeSources: true })
const result = await compile(root, file, prepared.css, { preprocessed: true }, prepared.sourceMap)
- expect(origin(result, 'padding:2rem')).toMatchObject({ originalSource: pathToFileURL(file).href, originalLine: 2 })
+ expect(origin(result, 'padding:var(--paint-padding)')).toMatchObject({ originalSource: pathToFileURL(file).href, originalLine: 2 })
expect(result.sourceMap.sourcesContent).toContain(source)
})
})
diff --git a/packages/next/tests/bug-hunt-postcss-resource-host.test.ts b/packages/next/tests/bug-hunt-postcss-resource-host.test.ts
index 6facd30ac..9ca9ff948 100644
--- a/packages/next/tests/bug-hunt-postcss-resource-host.test.ts
+++ b/packages/next/tests/bug-hunt-postcss-resource-host.test.ts
@@ -76,7 +76,7 @@ test('installed Next PostCSS loader chain emits late resources once, keeps user
root.walkDecls(declaration => { if (declaration.prop === '--color-late') declaration.value = '#fedcba' })
} }]
const { dependencies, pitched, output } = await runHostChain(projectDir, entry, { source: lowered.css, sourceMap: lowered.sourceMap, generatedCSS, resources: policy }, plugins, true)
- expect(dependencies).toEqual([expect.stringContaining('.master/postcss'), entry])
+ expect(dependencies).toEqual([expect.stringContaining(join('.master', 'postcss')), entry])
expect(pitched[2]?.masterPostCSSResources).toBeTypeOf('function')
expect(counts).toEqual([1, 2])
expect(output).toBeDefined()
diff --git a/packages/next/tests/bug-hunt-preprocessed-stylesheet.test.ts b/packages/next/tests/bug-hunt-preprocessed-stylesheet.test.ts
index 112ff2f94..7f36aa642 100644
--- a/packages/next/tests/bug-hunt-preprocessed-stylesheet.test.ts
+++ b/packages/next/tests/bug-hunt-preprocessed-stylesheet.test.ts
@@ -15,10 +15,10 @@ for (const preprocessed of [false, true]) test(`Next preserves the host Sass pre
writeFileSync(join(root, 'master.css'), '@master entry;')
const resourcePath = join(root, preprocessed ? 'card.module.sass' : 'card.module.scss')
const raw = preprocessed
- ? '@reference "./master.css"\n.card\n @compose p:2rem\n'
- : '@reference "./master.css"; $padding:2rem; .card { @compose p:#{$padding}; }'
+ ? '@reference "./master.css"\n.card\n @variant media(all)\n padding: 2rem\n'
+ : '@reference "./master.css"; $padding:2rem; .card { @variant media(all){padding:#{$padding};} }'
writeFileSync(resourcePath, raw)
- const source = preprocessed ? '@reference "./master.css";\n.card { @compose p:2rem; }' : raw
+ const source = preprocessed ? "@reference \"./master.css\";\n.card { @variant media(all){padding:2rem;} }" : raw
const css = await new Promise((resolve, reject) => loader.call({
resourcePath, rootContext: root,
getOptions: () => ({ preprocessed }),
diff --git a/packages/next/tests/bug-hunt-raw-sass-context.test.ts b/packages/next/tests/bug-hunt-raw-sass-context.test.ts
index 1dedf93ab..6e0ee0d27 100644
--- a/packages/next/tests/bug-hunt-raw-sass-context.test.ts
+++ b/packages/next/tests/bug-hunt-raw-sass-context.test.ts
@@ -1,14 +1,15 @@
-import { mkdirSync, mkdtempSync, rmSync, symlinkSync, writeFileSync } from 'node:fs'
+import { mkdirSync, mkdtempSync, realpathSync, rmSync, symlinkSync, writeFileSync } from 'node:fs'
import { createRequire } from 'node:module'
import { dirname, join } from 'node:path'
import { tmpdir } from 'node:os'
import { expect, test } from 'vitest'
import loader from '../src/stylesheet-loader'
+import { readStylesheetText } from './helpers/stylesheet-output'
const require = createRequire(new URL('../../vite/package.json', import.meta.url))
const sassFile = createRequire(require.resolve('vite')).resolve('sass')
async function fixture(run: (root: string) => Promise) {
- const root = mkdtempSync(join(tmpdir(), 'next-raw-sass-'))
+ const root = realpathSync.native(mkdtempSync(join(tmpdir(), 'next-raw-sass-')))
try {
mkdirSync(join(root, 'parts'));mkdirSync(join(root, 'node_modules'))
symlinkSync(dirname(sassFile), join(root, 'node_modules/sass'), 'dir')
@@ -19,26 +20,26 @@ async function fixture(run: (root: string) => Promise) {
function compile(root: string, file: string, source: string, dependencies: string[], sassOptions?: Record) {
return new Promise((resolve, reject) => loader.call({
resourcePath: file, rootContext: root, getOptions: () => ({ sassOptions }), addDependency: file => dependencies.push(file),
- async: () => (error: Error | null, output?: string) => error ? reject(error) : resolve(output!)
+ async: () => (error: Error | null, output?: string) => error ? reject(error) : resolve(readStylesheetText(file, output!))
}, source))
}
for (const syntax of ['scss', 'sass']) test(`Next raw ${syntax} retains partial reference and edit dependencies`, async () => {
await fixture(async root => {
const file = join(root, 'card.module.' + syntax), partial = join(root, 'parts/_rules.scss'), token = join(root, 'parts/tokens.css')
- writeFileSync(partial, '@reference "./tokens.css";.card{@compose paint;}')
- writeFileSync(token, '@utilities{paint{padding:2rem}}')
- writeFileSync(join(root, 'tokens.css'), '@utilities{paint{padding:99rem}}')
+ writeFileSync(partial, "@reference \"./tokens.css\";.card{@variant media(all){padding:var(--paint-padding);}}")
+ writeFileSync(token, '@theme{--paint-padding:2rem}')
+ writeFileSync(join(root, 'tokens.css'), '@theme{--paint-padding:99rem}')
const source = syntax === 'sass' ? '@use "parts/rules"\n' : '@use "parts/rules";', dependencies: string[] = []
- expect(await compile(root, file, source, dependencies)).toContain('padding:2rem')
+ expect(await compile(root, file, source, dependencies)).toContain('--paint-padding:2rem')
expect(dependencies).toEqual(expect.arrayContaining([file, partial, token]))
- writeFileSync(token, '@utilities{paint{padding:4rem}}')
- expect(await compile(root, file, source, [])).toContain('padding:4rem')
+ writeFileSync(token, '@theme{--paint-padding:4rem}')
+ expect(await compile(root, file, source, [])).toContain('--paint-padding:4rem')
})
})
test('Next raw Sass uses configured implementation, load paths and additional data', async () => {
await fixture(async root => {
writeFileSync(join(root, 'parts/_tokens.scss'), '$space:3rem;')
- const css = await compile(root, join(root, 'card.module.scss'), '@use "tokens";@reference "./master.css";.card{@compose p:#{tokens.$space};margin:$extra}', [], {
+ const css = await compile(root, join(root, 'card.module.scss'), '@use "tokens";@reference "./master.css";.card{@variant media(all){padding:#{tokens.$space};}margin:$extra}', [], {
implementation: sassFile, loadPaths: [join(root, 'parts')], additionalData: '$extra:4rem;', style: 'compressed'
})
expect(css).toContain('padding:3rem')
@@ -48,11 +49,11 @@ test('Next raw Sass uses configured implementation, load paths and additional da
test('Next registers missing mapped CSS reference before error and recovers on creation', async () => {
await fixture(async root => {
const file = join(root, 'card.module.scss'), missing = join(root, 'parts/missing.css'), dependencies: string[] = []
- writeFileSync(join(root, 'parts/_rules.scss'), '@reference "./missing.css";.card{@compose paint;}')
+ writeFileSync(join(root, 'parts/_rules.scss'), "@reference \"./missing.css\";.card{@variant media(all){padding:var(--paint-padding);}}")
await expect(compile(root, file, '@use "parts/rules";', dependencies)).rejects.toThrow()
expect(dependencies).toContain(missing)
- writeFileSync(missing, '@utilities{paint{padding:5rem}}')
- expect(await compile(root, file, '@use "parts/rules";', [])).toContain('padding:5rem')
+ writeFileSync(missing, '@theme{--paint-padding:5rem}')
+ expect(await compile(root, file, '@use "parts/rules";', [])).toContain('--paint-padding:5rem')
})
})
test('Next reports invalid compose in the original Sass partial', async () => {
diff --git a/packages/next/tests/bug-hunt-sass-directive-terminators.test.ts b/packages/next/tests/bug-hunt-sass-directive-terminators.test.ts
index fdd10a729..de7b44de7 100644
--- a/packages/next/tests/bug-hunt-sass-directive-terminators.test.ts
+++ b/packages/next/tests/bug-hunt-sass-directive-terminators.test.ts
@@ -15,7 +15,7 @@ for (const syntax of ['scss', 'indented']) for (const explicitCompressed of [fal
const root = mkdtempSync(join(tmpdir(), 'next-sass-terminators-'))
try {
const file = join(root, syntax === 'scss' ? 'card.module.scss' : 'card.module.sass')
- const source = syntax === 'scss' ? '@reference "./master.css";.card{@compose p:2rem;}' : '@reference "./master.css"\n.card\n @compose p:2rem\n'
+ const source = syntax === 'scss' ? "@reference \"./master.css\";.card{@variant media(all){padding:2rem;}}" : '@reference "./master.css"\n.card\n @variant media(all)\n padding: 2rem\n'
writeFileSync(file, source);writeFileSync(join(root, 'master.css'), '@master entry;')
const sassOptions = { loadPaths: [root], quietDeps: true, ...(explicitCompressed ? { style: 'compressed' } : {}) }
const original = { loader: '/node_modules/next/dist/compiled/sass-loader/cjs.js', options: { sourceMap: true, implementation: sassRequire.resolve('sass'), sassOptions } }
diff --git a/packages/next/tests/bug-hunt-sass-source-offsets.test.ts b/packages/next/tests/bug-hunt-sass-source-offsets.test.ts
index 5b4ff25c7..3a12547b6 100644
--- a/packages/next/tests/bug-hunt-sass-source-offsets.test.ts
+++ b/packages/next/tests/bug-hunt-sass-source-offsets.test.ts
@@ -1,5 +1,5 @@
import { readStylesheetText } from './helpers/stylesheet-output'
-import { mkdirSync, mkdtempSync, rmSync, symlinkSync, writeFileSync } from 'node:fs'
+import { mkdirSync, mkdtempSync, realpathSync, rmSync, symlinkSync, writeFileSync } from 'node:fs'
import { createRequire } from 'node:module'
import { dirname, join } from 'node:path'
import { tmpdir } from 'node:os'
@@ -9,7 +9,7 @@ import loader from '../src/stylesheet-loader'
const require = createRequire(new URL('../../vite/package.json', import.meta.url))
const sassFile = createRequire(require.resolve('vite')).resolve('sass')
async function fixture(run: (root: string) => Promise) {
- const root = mkdtempSync(join(tmpdir(), 'next-raw-sass-'))
+ const root = realpathSync.native(mkdtempSync(join(tmpdir(), 'next-raw-sass-')))
try {
mkdirSync(join(root, 'parts'));mkdirSync(join(root, 'node_modules'))
symlinkSync(dirname(sassFile), join(root, 'node_modules/sass'), 'dir')
@@ -45,7 +45,7 @@ test('Next additionalData does not shift imported partial diagnostics', async ()
for (const syntax of ['scss', 'sass']) test(`Next ${syntax} reports Sass errors against authored root after injection`, async () => {
await fixture(async root => {
const file = join(root, 'card.module.' + syntax)
- const source = syntax === 'sass' ? '/* authored */\n.card\n padding: $missing\n' : '/* authored */\n.card { padding: $missing; }'
+ const source = syntax === 'sass' ? '/* authored */\n.card\n padding: $missing\n' : "/* authored */\n.card { @variant media(all){padding: $missing;} }"
const additionalData = syntax === 'sass' ? '$a: 1\r\n$b: 2' : '$a:1;\r\n$b:2;'
await expect(compile(root, file, source, [], { implementation: sassFile, additionalData })).rejects.toMatchObject({
span: { start: { line: syntax === 'sass' ? 2 : 1 }, text: '$missing' }, message: expect.stringContaining(`${file}:${syntax === 'sass' ? 3 : 2}:`)
@@ -62,7 +62,7 @@ test('Next labels compiler errors in injected Sass as injected content', async (
})
test('Next labels Sass errors in injected content without negative locations', async () => {
await fixture(async root => {
- await expect(compile(root, join(root, 'card.module.scss'), '.card{padding:1rem}', [], { implementation: sassFile, additionalData: '.injected{padding:$missing}' })).rejects.toMatchObject({
+ await expect(compile(root, join(root, 'card.module.scss'), '.card{padding:1rem}', [], { implementation: sassFile, additionalData: ".injected{@variant media(all){padding:$missing}}" })).rejects.toMatchObject({
span: { start: { line: 0 }, text: '$missing' }, message: expect.stringContaining('?master-css-additional-data:1:')
})
})
@@ -70,9 +70,9 @@ test('Next labels Sass errors in injected content without negative locations', a
for (const syntax of ['scss', 'sass']) test(`Next ${syntax} entry preserves imported partial reference ownership`, async () => {
await fixture(async root => {
const file = join(root, 'entry.' + syntax), partial = join(root, 'parts/_entry.scss')
- writeFileSync(partial, '@reference "./tokens.css";.card{@compose paint;}')
- writeFileSync(join(root, 'parts/tokens.css'), '@utilities{paint{padding:2rem}}')
- writeFileSync(join(root, 'tokens.css'), '@utilities{paint{padding:99rem}}')
+ writeFileSync(partial, "@reference \"./tokens.css\";.card{@variant media(all){padding:var(--paint-padding);}}")
+ writeFileSync(join(root, 'parts/tokens.css'), '@theme{--paint-padding:2rem}')
+ writeFileSync(join(root, 'tokens.css'), '@theme{--paint-padding:99rem}')
const source = syntax === 'sass' ? '@use "parts/entry"\n@master entry\n' : '@use "parts/entry";@master entry;'
const result = await compile(root, file, source, [], { implementation: sassFile })
expect(result).toContain('padding:2rem')
diff --git a/packages/next/tests/bug-hunt-turbopack-css-module.test.ts b/packages/next/tests/bug-hunt-turbopack-css-module.test.ts
index fa4d06483..e34416879 100644
--- a/packages/next/tests/bug-hunt-turbopack-css-module.test.ts
+++ b/packages/next/tests/bug-hunt-turbopack-css-module.test.ts
@@ -20,16 +20,16 @@ function stylesheetRules(file: string, source: string) {
return rules.filter(rule => rule.loaders?.some(loader => String(typeof loader === 'string' ? loader : (loader as { loader: string }).loader).endsWith('stylesheet-loader.js')) && matches(rule.condition, file, source))
}
for (const extension of ['css', 'scss', 'sass']) test(`Turbopack preserves CSS Module type for .module.${extension}`, () => {
- const rules = stylesheetRules(`card.module.${extension}`, '.card{@compose p:2rem;}')
+ const rules = stylesheetRules(`card.module.${extension}`, ".card{@variant media(all){padding:2rem;}}")
expect(rules).toHaveLength(1)
- expect(rules[0].type).toBe('css-module')
- expect(rules[0].as).toBeUndefined() // Preserve the source identity; type handles Sass output.
+ expect(rules[0].type).toBeUndefined()
+ expect(rules[0].as).toBeUndefined() // Preserve Next’s inferred module type and original filename.
})
for (const extension of ['scss', 'sass']) test(`Turbopack handles imported directives in .module.${extension} once`, () => {
const rules = stylesheetRules(`card.module.${extension}`, '@use "parts/card";')
expect(rules).toHaveLength(1)
- expect(rules[0].type).toBe('css-module')
- expect(rules[0].as).toBeUndefined() // Preserve the source identity; type handles Sass output.
+ expect(rules[0].type).toBeUndefined()
+ expect(rules[0].as).toBeUndefined() // Preserve Next’s inferred module type and original filename.
})
test('Turbopack keeps global Sass global and forwards configured options', () => {
const rules = stylesheetRules('globals.scss', '@use "parts/global";')
@@ -37,6 +37,8 @@ test('Turbopack keeps global Sass global and forwards configured options', () =>
expect(rules[0].type).toBe('css')
expect(rules[0].loaders).toEqual([expect.objectContaining({ options: { sassOptions: { loadPaths: ['/project/styles'] } } })])
})
-test('Turbopack leaves native CSS Modules without Master directives to Next', () => {
- expect(stylesheetRules('card.module.css', '.card{padding:2rem;}')).toEqual([])
+test('Turbopack supplies project context to native CSS Modules without a directive gate', () => {
+ const rules = stylesheetRules('card.module.css', '.card{padding:2rem;}')
+ expect(rules).toHaveLength(1)
+ expect(rules[0].type).toBeUndefined()
})
diff --git a/packages/next/tests/bug-hunt-webpack-css-pipeline.test.ts b/packages/next/tests/bug-hunt-webpack-css-pipeline.test.ts
index d3dd267f9..ab58aae3a 100644
--- a/packages/next/tests/bug-hunt-webpack-css-pipeline.test.ts
+++ b/packages/next/tests/bug-hunt-webpack-css-pipeline.test.ts
@@ -27,7 +27,7 @@ for (const sass of [false, true]) for (const lightning of [false, true]) test(`B
const dispatcher = chain[1]
expect(dispatcher.loader).toMatch(/[/\\]webpack-css-loader\.js$/)
expect(dispatcher.options.loader).toBe(cssLoader.loader)
- const postcss = chain.find((item: { loader: string }) => item.loader.endsWith('/webpack-postcss-loader.js'))
+ const postcss = chain.find((item: { loader: string }) => /[/\\]webpack-postcss-loader\.js$/.test(item.loader))
if (!lightning) {
expect(postcss.options.loader).toBe(nextLoader('postcss-loader'))
expect(postcss.options.options).toBe(postcssOptions)
diff --git a/packages/next/tests/build-state.test.ts b/packages/next/tests/build-state.test.ts
index d478b1a14..73a98406e 100644
--- a/packages/next/tests/build-state.test.ts
+++ b/packages/next/tests/build-state.test.ts
@@ -33,7 +33,7 @@ describe('resolveMasterCSSBuildState', () => {
'.host { color: var(--color-host); }',
'',
'.hidden-card {',
- ' @compose hidden;',
+ ' @variant media(all){display:none;}',
'}'
].join('\n'))
diff --git a/packages/next/tests/css-manifest-loader.test.ts b/packages/next/tests/css-manifest-loader.test.ts
index 562329c24..fc679da60 100644
--- a/packages/next/tests/css-manifest-loader.test.ts
+++ b/packages/next/tests/css-manifest-loader.test.ts
@@ -231,14 +231,14 @@ describe('css manifest loader', () => {
rootContext: projectDir,
getOptions: () => ({ virtual: true, module: true }),
addDependency: (dependency: string) => dependencies.push(dependency)
- })).rejects.toThrow('Invalid @compose utility')
+ })).rejects.toThrow('@compose has been removed')
expect(dependencies).toContain(entryPath)
writeFileSync(entryPath, [
'@import "@master/css";',
'@utilities {',
' card {',
- ' @compose block;',
+ ' @variant media(all){display:block;}',
' }',
'}'
].join('\n'))
diff --git a/packages/next/tests/css-manifest-query-e2e.test.ts b/packages/next/tests/css-manifest-query-e2e.test.ts
index 306b33940..392298e25 100644
--- a/packages/next/tests/css-manifest-query-e2e.test.ts
+++ b/packages/next/tests/css-manifest-query-e2e.test.ts
@@ -59,6 +59,7 @@ describe('css manifest query e2e', () => {
.join('\n')
expect(html).toContain('data-color="#4b6fff"')
expect(html).toContain('data-breakpoint="1234"')
+ expect(html).toContain('data-font-weight="700"')
expect(manifestJSONFiles).toEqual([])
expect(html).toContain('/assets/_next/')
expect(jsBundleContents).toContain('#4b6fff')
diff --git a/packages/next/tests/dev-hmr-e2e.test.ts b/packages/next/tests/dev-hmr-e2e.test.ts
index 99b1d50c4..323084bdd 100644
--- a/packages/next/tests/dev-hmr-e2e.test.ts
+++ b/packages/next/tests/dev-hmr-e2e.test.ts
@@ -1,9 +1,9 @@
import { spawn, type ChildProcess } from 'node:child_process'
import { once } from 'node:events'
-import { appendFileSync, mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs'
+import { appendFileSync, existsSync, mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs'
import { createServer } from 'node:net'
import { tmpdir } from 'node:os'
-import { dirname, join } from 'node:path'
+import { dirname, isAbsolute, join, relative, sep } from 'node:path'
import { fileURLToPath, pathToFileURL } from 'node:url'
import { chromium, type Browser } from '@playwright/test'
import { describe, expect, it, onTestFinished } from 'vitest'
@@ -11,6 +11,7 @@ import execPnpmSync from './helpers/pnpm-command'
const packageDir = dirname(fileURLToPath(new URL('../package.json', import.meta.url)))
const nextBin = fileURLToPath(new URL('../node_modules/next/dist/bin/next', import.meta.url))
+const traceLoaderPath = fileURLToPath(new URL('./helpers/static-hmr-trace-loader.mjs', import.meta.url))
function delay(ms: number) {
return new Promise((resolve) => setTimeout(resolve, ms))
@@ -33,13 +34,13 @@ function getFreePort() {
})
}
-function createGlobalsCSS(compose: string) {
+function createGlobalsCSS(display: string) {
return [
'@import "@master/css";',
'',
'@layer components {',
' .probe {',
- ` @compose ${compose};`,
+ ` display: ${display === 'hidden' ? 'none' : display};`,
' width: 40px;',
' height: 40px;',
' }',
@@ -57,11 +58,31 @@ function writeFixture(fixtureDir: string, compose = 'inline-flex') {
private: true,
type: 'module'
}, null, 2))
- const nextIntegrationURL = pathToFileURL(process.env.MASTER_NEXT_HMR_INTEGRATION ?? join(packageDir, 'dist/index.js')).href
+ const nextIntegrationPath = process.env.MASTER_NEXT_HMR_INTEGRATION ?? join(packageDir, 'dist/index.js')
+ // Webpack tracks config imports as files and cannot cache a file:// specifier.
+ const relativeIntegrationPath = relative(fixtureDir, nextIntegrationPath).split(sep).join('/')
+ const nextIntegrationSpecifier = isAbsolute(relativeIntegrationPath)
+ ? pathToFileURL(nextIntegrationPath).href
+ : relativeIntegrationPath.startsWith('.') ? relativeIntegrationPath : `./${relativeIntegrationPath}`
writeFileSync(join(fixtureDir, 'next.config.js'), [
- `import { withMasterCSS } from ${JSON.stringify(nextIntegrationURL)}`,
+ `import { withMasterCSS } from ${JSON.stringify(nextIntegrationSpecifier)}`,
'',
- `export default withMasterCSS({ reactStrictMode: true })`,
+ `const configured = withMasterCSS(${JSON.stringify({ reactStrictMode: true, ...(process.env.MASTER_NEXT_HMR_TURBOPACK_ROOT ? { turbopack: { root: process.env.MASTER_NEXT_HMR_TURBOPACK_ROOT } } : {}) })})`,
+ `let result = configured`,
+ `if (process.env.MASTER_NEXT_HMR_TRACE_REPORT) {`,
+ ` result = Promise.resolve(configured).then(config => {`,
+ ` for (const rule of config.turbopack?.rules?.['*'] ?? []) {`,
+ ` for (const entry of rule.loaders ?? []) {`,
+ ` const kind = /(?:static-css-loader|static-loader|stylesheet-loader)\\.js$/.exec(entry.loader)?.[0]`,
+ ` if (!kind) continue`,
+ ` entry.options = { ...entry.options, __masterOriginalLoader: entry.loader, __masterTraceKind: kind }`,
+ ` entry.loader = ${JSON.stringify(traceLoaderPath)}`,
+ ` }`,
+ ` }`,
+ ` return config`,
+ ` })`,
+ `}`,
+ `export default result`,
''
].join('\n'))
writeFileSync(join(fixtureDir, 'app/layout.jsx'), [
@@ -126,6 +147,7 @@ function startNextDev(fixtureDir: string, port: number, bundler: 'turbo' | 'webp
NODE_ENV: 'development',
...(pipelineReport ? {
MASTER_NEXT_HMR_PIPELINE_REPORT: pipelineReport,
+ ...(bundler === 'turbo' ? { MASTER_NEXT_HMR_TRACE_REPORT: join(dirname(pipelineReport), 'loaders.jsonl') } : {}),
NODE_OPTIONS: `${process.env.NODE_OPTIONS ?? ''} --import=${new URL('./helpers/static-hmr-metrics.mjs', import.meta.url).href}`
} : {})
},
@@ -155,19 +177,23 @@ async function stopNextDev(child: ChildProcess) {
async function waitForServer(url: string, child: ChildProcess, output: { text: string }) {
const deadline = Date.now() + 60000
+ const recentProbes: string[] = []
while (Date.now() < deadline) {
if (child.exitCode !== null) {
throw new Error(`Next dev exited early.\n${output.text}`)
}
try {
const response = await fetch(url, { signal: AbortSignal.timeout(5000) })
+ recentProbes.push(`HTTP ${response.status}`)
if (response.status < 500) return
- } catch {
+ } catch (error) {
+ recentProbes.push(error instanceof Error ? `${error.name}: ${error.message}` : String(error))
// Server is still starting.
}
+ if (recentProbes.length > 8) recentProbes.shift()
await delay(500)
}
- throw new Error(`Timed out waiting for Next dev server.\n${output.text}`)
+ throw new Error(`Timed out waiting for Next dev server. Recent probes: ${recentProbes.join('; ')}\n${output.text}`)
}
async function expectDisplay(browser: Browser, url: string, display: string) {
@@ -183,6 +209,78 @@ async function expectDisplay(browser: Browser, url: string, display: string) {
}
describe('Next dev HMR', () => {
+ it('updates a direct generated CSS import when sources change or appear (turbo)', async () => {
+ buildPackage()
+ const workspace = join(packageDir, 'e2e/dev-hmr-workspaces')
+ mkdirSync(workspace, { recursive: true })
+ const fixture = mkdtempSync(join(workspace, 'direct-css-'))
+ writeFixture(fixture)
+ writeFileSync(join(fixture, 'app/globals.css'), '')
+ writeFileSync(join(fixture, 'app/layout.jsx'), `import '../.master/next.css'; export default function RootLayout({ children }) { return {children} }`)
+ const port = await getFreePort(), url = `http://127.0.0.1:${port}`
+ const { child, output } = startNextDev(fixture, port, 'turbo')
+ let browser: Browser | undefined
+ try {
+ await waitForServer(url, child, output)
+ browser = await chromium.launch()
+ const page = await browser.newPage()
+ await page.goto(url)
+ await page.waitForFunction(() => getComputedStyle(document.getElementById('incremental')!).padding === '11px')
+ await page.evaluate(() => { (window as Window & { __MASTER_CSS_HMR_MARKER?: string }).__MASTER_CSS_HMR_MARKER = 'preserve' })
+ writePage(fixture, 77)
+ await page.waitForFunction(() => getComputedStyle(document.getElementById('incremental')!).padding === '77px')
+ const added = join(fixture, 'app/unimported.jsx')
+ writeFileSync(added, `export const hidden = 'm:37px'`)
+ await page.evaluate(() => {
+ const probe = document.createElement('div')
+ probe.id = 'new-source-probe'
+ probe.className = 'm:37px'
+ document.body.append(probe)
+ })
+ await page.waitForFunction(() => getComputedStyle(document.getElementById('new-source-probe')!).marginTop === '37px')
+ rmSync(added)
+ await page.waitForFunction(() => getComputedStyle(document.getElementById('new-source-probe')!).marginTop === '0px')
+ expect(await page.evaluate(() => (window as Window & { __MASTER_CSS_HMR_MARKER?: string }).__MASTER_CSS_HMR_MARKER)).toBe('preserve')
+ } finally {
+ await browser?.close()
+ await stopNextDev(child)
+ rmSync(fixture, { recursive: true, force: true })
+ }
+ }, 180000)
+
+ it('updates separated Module theme resources while preserving ancestor inheritance (webpack)', async () => {
+ buildPackage()
+ const workspace = join(packageDir, 'e2e/dev-hmr-workspaces')
+ mkdirSync(workspace, { recursive: true })
+ const fixture = mkdtempSync(join(workspace, 'module-globals-'))
+ writeFixture(fixture)
+ const tokens = join(fixture, 'app/tokens.css')
+ writeFileSync(tokens, '@theme { --color-module: red; }')
+ writeFileSync(join(fixture, 'app/Card.module.css'), '@reference "./tokens.css"; .card { color:var(--color-module); }')
+ writeFileSync(join(fixture, 'app/page.jsx'), `import styles from './Card.module.css'; export default function Page(){ return Theme }`)
+ const port = await getFreePort(), url = `http://127.0.0.1:${port}`
+ const { child, output } = startNextDev(fixture, port, 'webpack')
+ let browser: Browser | undefined
+ try {
+ await waitForServer(url, child, output)
+ browser = await chromium.launch()
+ const page = await browser.newPage()
+ await page.goto(url)
+ await page.waitForFunction(() => getComputedStyle(document.querySelector('main')!).color === 'rgb(255, 0, 0)')
+ await page.evaluate(() => document.body.style.setProperty('--color-module', 'rgb(1, 2, 3)'))
+ expect(await page.locator('main').evaluate(element => getComputedStyle(element).color)).toBe('rgb(1, 2, 3)')
+ writeFileSync(tokens, '@theme { --color-module: blue; }')
+ await page.waitForFunction(() => getComputedStyle(document.documentElement).getPropertyValue('--color-module').trim() === 'blue')
+ expect(await page.locator('main').evaluate(element => getComputedStyle(element).color)).toBe('rgb(1, 2, 3)')
+ await page.evaluate(() => document.body.style.removeProperty('--color-module'))
+ expect(await page.locator('main').evaluate(element => getComputedStyle(element).color)).toBe('rgb(0, 0, 255)')
+ } finally {
+ await browser?.close()
+ await stopNextDev(child)
+ rmSync(fixture, { recursive: true, force: true })
+ }
+ }, 180000)
+
it.each(['turbo', 'webpack'] as const)('updates Master CSS without a full reload (%s)', async bundler => {
buildPackage()
const workspaceDir = join(packageDir, 'e2e/dev-hmr-workspaces')
@@ -232,13 +330,26 @@ describe('Next dev HMR', () => {
const singleStarted = Date.now()
let started = performance.now()
writePage(fixtureDir, padding)
- await page.waitForFunction(value => getComputedStyle(document.getElementById('incremental')!).padding === `${value}px`, padding)
+ try {
+ await page.waitForFunction(value => getComputedStyle(document.getElementById('incremental')!).padding === `${value}px`, padding)
+ } catch (error) {
+ const actual = await page.locator('#incremental').evaluate(element => getComputedStyle(element).padding)
+ console.error(`Next ${bundler} page round ${round}: expected ${padding}px, got ${actual}`)
+ throw error
+ }
const singleMs = performance.now() - started
const burstStarted = Date.now()
started = performance.now()
writeModules(fixtureDir, padding + 1)
- await page.waitForFunction(value => Array.from({ length: 10 }, (_, index) =>
- getComputedStyle(document.getElementById(`module-${index}`)!).padding === `${value + index}px`).every(Boolean), padding + 1)
+ try {
+ await page.waitForFunction(value => Array.from({ length: 10 }, (_, index) =>
+ getComputedStyle(document.getElementById(`module-${index}`)!).padding === `${value + index}px`).every(Boolean), padding + 1)
+ } catch (error) {
+ const actual = await page.evaluate(() => Array.from({ length: 10 }, (_, index) =>
+ getComputedStyle(document.getElementById(`module-${index}`)!).padding))
+ console.error(`Next ${bundler} module round ${round}: expected ${padding + 1}..${padding + 10}px, got ${actual.join(', ')}`)
+ throw error
+ }
if (round > 0) samples.push({ singleMs, burstMs: performance.now() - started, singleStarted, burstStarted, finished: Date.now() })
}
if (process.env.MASTER_NEXT_HMR_REPORT && pipelineReport) {
@@ -247,15 +358,23 @@ describe('Next dev HMR', () => {
const idleStarted = Date.now()
await delay(2000)
const publications = readFileSync(pipelineReport, 'utf8').trim().split('\n').map(line => JSON.parse(line) as { started: number, finished: number, composeCalls: number })
+ const loaderReport = join(metricsDir!, 'loaders.jsonl')
+ const loaderEvents = existsSync(loaderReport) ? readFileSync(loaderReport, 'utf8').trim().split('\n').map(line => JSON.parse(line)) : []
const idle = publications.filter(row => row.started >= idleStarted)
appendFileSync(process.env.MASTER_NEXT_HMR_REPORT,
- JSON.stringify({ bundler, node: process.version, samples, publications, idle,
- note: 'File write to observed browser computed style; one warmup, three samples. Pipeline hold/wait are separate child-process observations. Idle observes two seconds after a one-second drain.' }) + '\n')
+ JSON.stringify({ bundler, node: process.version, samples, publications, loaderEvents, idle,
+ note: 'File write to observed browser computed style; one warmup, three samples. Pipeline hold/wait and loader calls are separate child-process observations. Idle observes two seconds after a one-second drain.' }) + '\n')
expect(idle.reduce((sum, row) => sum + row.composeCalls, 0)).toBe(0)
}
await expect(page.evaluate(() => {
return (window as unknown as { __MASTER_CSS_HMR_MARKER?: string }).__MASTER_CSS_HMR_MARKER
})).resolves.toBe('preserve')
+ } catch (error) {
+ console.error(`Next ${bundler} output:\n${output.text}`)
+ if (pipelineReport && existsSync(pipelineReport)) {
+ console.error(`Next ${bundler} pipeline:\n${readFileSync(pipelineReport, 'utf8')}`)
+ }
+ throw error
} finally {
await cleanup()
}
diff --git a/packages/next/tests/helpers/static-hmr-metrics.mjs b/packages/next/tests/helpers/static-hmr-metrics.mjs
index 18e094a69..cb5541496 100644
--- a/packages/next/tests/helpers/static-hmr-metrics.mjs
+++ b/packages/next/tests/helpers/static-hmr-metrics.mjs
@@ -2,19 +2,25 @@
// the fixture's source inventory; it is never imported by published packages.
import fs from 'node:fs/promises'
import { appendFileSync } from 'node:fs'
+import { AsyncLocalStorage } from 'node:async_hooks'
import { syncBuiltinESMExports } from 'node:module'
import { MasterCSSStylesheetCollection } from '@master/css-compiler/stylesheet'
const report = process.env.MASTER_NEXT_HMR_PIPELINE_REPORT
if (report) {
- const original = { open: fs.open, unlink: fs.unlink, readFile: fs.readFile }
+ const original = { open: fs.open, unlink: fs.unlink, readFile: fs.readFile, glob: fs.glob, rename: fs.rename, link: fs.link }
+ const traceContext = globalThis.__MASTER_CSS_HMR_TRACE_CONTEXT__ = new AsyncLocalStorage()
let operation, waiting
fs.open = async function (file, flags, ...args) {
const publishing = String(file).endsWith('/.master/publish.lock') && flags === 'wx'
if (publishing) waiting ??= performance.now()
const handle = await original.open.call(this, file, flags, ...args)
if (publishing) {
- operation = { started: Date.now(), waitMs: performance.now() - waiting, holdStart: performance.now(), composeCalls: 0, composeMs: 0, sourceReads: 0 }
+ operation = {
+ started: Date.now(), waitMs: performance.now() - waiting, holdStart: performance.now(),
+ composeCalls: 0, composeMs: 0, sourceReads: 0, snapshots: 0, changedOutputs: [],
+ origin: traceContext.getStore()
+ }
waiting = undefined
}
return handle
@@ -23,6 +29,20 @@ if (report) {
if (operation && /\.[jt]sx?$/.test(String(file))) operation.sourceReads++
return original.readFile.call(this, file, ...args)
}
+ fs.glob = function (pattern, ...args) {
+ if (operation && pattern === '**/*') operation.snapshots++
+ return original.glob.call(this, pattern, ...args)
+ }
+ fs.rename = async function (from, to, ...args) {
+ const result = await original.rename.call(this, from, to, ...args)
+ if (operation && String(to).includes('/.master/')) operation.changedOutputs.push(String(to))
+ return result
+ }
+ fs.link = async function (from, to, ...args) {
+ const result = await original.link.call(this, from, to, ...args)
+ if (operation && String(to).includes('/.master/')) operation.changedOutputs.push(String(to))
+ return result
+ }
fs.unlink = async function (file, ...args) {
const result = await original.unlink.call(this, file, ...args)
if (String(file).endsWith('/.master/publish.lock') && operation) {
diff --git a/packages/next/tests/helpers/static-hmr-trace-loader.mjs b/packages/next/tests/helpers/static-hmr-trace-loader.mjs
new file mode 100644
index 000000000..8114c4d20
--- /dev/null
+++ b/packages/next/tests/helpers/static-hmr-trace-loader.mjs
@@ -0,0 +1,35 @@
+// Test-only wrapper. It leaves the original loader result and options intact
+// while recording which watched paths each invocation registers.
+import { appendFileSync } from 'node:fs'
+import { randomUUID } from 'node:crypto'
+import { pathToFileURL } from 'node:url'
+
+export default function traceNextLoader(source, ...args) {
+ const options = this.getOptions()
+ const { __masterOriginalLoader: originalPath, __masterTraceKind: kind, ...originalOptions } = options
+ const report = process.env.MASTER_NEXT_HMR_TRACE_REPORT
+ const callback = this.async()
+ const trace = {
+ id: `${process.pid}:${randomUUID()}`,
+ kind,
+ resource: this.resourcePath,
+ pid: process.pid,
+ started: Date.now(),
+ files: [], contexts: [], missing: []
+ }
+ const finish = (error) => {
+ if (report) appendFileSync(report, JSON.stringify({ ...trace, finished: Date.now(), error: error?.message }) + '\n')
+ }
+ const context = Object.create(this)
+ context.getOptions = () => originalOptions
+ context.addDependency = file => { trace.files.push(file); this.addDependency?.(file) }
+ context.addContextDependency = directory => { trace.contexts.push(directory); this.addContextDependency?.(directory) }
+ context.addMissingDependency = file => { trace.missing.push(file); this.addMissingDependency?.(file) }
+ context.async = () => (error, ...results) => { finish(error); callback(error, ...results) }
+ const active = globalThis.__MASTER_CSS_HMR_TRACE_CONTEXT__
+ import(pathToFileURL(originalPath).href)
+ .then(({ default: loader }) => active
+ ? active.run({ id: trace.id, kind, resource: trace.resource }, () => loader.call(context, source, ...args))
+ : loader.call(context, source, ...args))
+ .catch(error => { finish(error); callback(error) })
+}
diff --git a/packages/next/tests/next-config.test.ts b/packages/next/tests/next-config.test.ts
index e37978247..0ee18c46d 100644
--- a/packages/next/tests/next-config.test.ts
+++ b/packages/next/tests/next-config.test.ts
@@ -105,17 +105,15 @@ function createMasterCSSRuntimeTestModule() {
}
describe('withMasterCSS', () => {
- it('routes local CSS directives through the Turbopack stylesheet loader', () => {
+ it('routes native CSS and CSS Modules through the project context without a directive gate', () => {
const config = withMasterCSS({}, { mode: 'progressive' }) as any
- const rules = config.turbopack.rules['*'] as { condition?: { all?: { content?: RegExp }[] }; loaders?: { loader: string }[] }[]
- const styleRule = rules.find(rule => rule.loaders?.some(loader => typeof loader.loader === 'string' && loader.loader.endsWith('/stylesheet-loader.js')))
- const pattern = styleRule?.condition?.all?.find(condition => condition.content)?.content
-
- expect(pattern).toBeInstanceOf(RegExp)
- for (const directive of ['@reference "./globals.css";', '@variant sm {}', '@light {}', '@dark {}']) {
- expect(pattern!.test(directive)).toBe(true)
+ const rules = config.turbopack.rules['*'] as any[]
+ const styleRules = rules.filter(rule => rule.loaders?.some((loader: any) => typeof loader.loader === 'string' && toPosixPath(loader.loader).endsWith('/stylesheet-loader.js')))
+ expect(styleRules.map(rule => rule.type)).toEqual(['css', undefined])
+ for (const rule of styleRules) {
+ expect(rule.condition.all.some((condition: any) => condition.content)).toBe(false)
+ expect(rule.condition.all.some((condition: any) => condition.not?.path?.test('/project/.master/stylesheets/' + 'a'.repeat(64) + '/' + 'b'.repeat(64) + '-entry.css'))).toBe(true)
}
- expect(pattern!.test('.card { color: red; }')).toBe(false)
})
it('sets the Next adapter path and registers options', () => {
@@ -234,7 +232,7 @@ describe('withMasterCSS', () => {
all: [
{ path: /\.(css|scss|sass)$/ },
{ not: { path: /\.module\.(css|scss|sass)$/ } },
- { content: expect.any(RegExp) },
+ { not: { path: expect.any(RegExp) } },
{ not: { query: /master-css-manifest/ } }
]
},
@@ -490,6 +488,10 @@ describe('withMasterCSS', () => {
expect(nextConfig.turbopack.resolveAlias[VIRTUAL_CSS_ID]).toBe('./.master/next.css')
expect(nextConfig.turbopack.resolveAlias[VIRTUAL_MANIFEST_ID]).toContain(virtualManifestProjectPath)
expect(nextConfig.turbopack.resolveAlias[VIRTUAL_EMITTED_GLOBALS_ID]).toContain(virtualEmittedGlobalsProjectPath)
+ const staticRules = nextConfig.turbopack.rules['*'] as { condition?: { all?: { path?: RegExp, not?: string }[] }, loaders?: { loader: string }[] }[]
+ expect(staticRules.flatMap(rule => rule.loaders ?? []).some(loader => /static-loader\.js$/.test(loader.loader))).toBe(false)
+ expect(staticRules.some(rule => rule.condition?.all?.some(condition => condition.path?.test(join(root, '.master/next.css')))
+ && rule.loaders?.some(loader => /static-css-loader\.js$/.test(loader.loader)))).toBe(true)
expect(nextConfig.turbopack.rules['*']).toEqual(expect.arrayContaining([
expect.objectContaining({
condition: {
@@ -518,7 +520,7 @@ describe('withMasterCSS', () => {
condition: expect.objectContaining({
all: expect.arrayContaining([
{ path: expect.any(RegExp) },
- { content: expect.any(RegExp) },
+ { not: { path: expect.any(RegExp) } },
{ not: { query: /master-css-manifest/ } }
])
}),
diff --git a/packages/next/tests/playground.test.ts b/packages/next/tests/playground.test.ts
index 27231f1d0..dea5d6be5 100644
--- a/packages/next/tests/playground.test.ts
+++ b/packages/next/tests/playground.test.ts
@@ -68,6 +68,8 @@ describe('playground', () => {
expect(clientSource).not.toContain(removedRuntimeRegistryName)
expect(clientSource).not.toContain('mastercss_binding_wasm')
expect(clientSource).not.toContain('"nativeTokenNamespaces"')
+ expect(clientSource).not.toContain('var(--font-sans')
+ expect(clientSource).not.toContain('#0070f3')
expect(readOutputFileContents(join(nextDir, 'static'), path => path.endsWith('.wasm'))).toEqual([])
expect(existsSync(join(nextDir, 'static/master-css/hydration'))).toBe(false)
})
diff --git a/packages/next/tests/sass-source-context.test.ts b/packages/next/tests/sass-source-context.test.ts
new file mode 100644
index 000000000..7b41778a6
--- /dev/null
+++ b/packages/next/tests/sass-source-context.test.ts
@@ -0,0 +1,41 @@
+import { createRequire, SourceMap } from 'node:module'
+import { resolve } from 'node:path'
+import { fileURLToPath, pathToFileURL } from 'node:url'
+import { expect, test } from 'vitest'
+import { removeSassPrefixError, removeSassPrefixMap } from '../src/sass-source-context'
+
+const require = createRequire(new URL('../../vite/package.json', import.meta.url))
+const sass = createRequire(require.resolve('vite'))('sass')
+const prefix = '$first: 1;\n$second: 2;\n'
+
+for (const filename of ['card~name.scss', 'card #name.scss', 'card%20name.scss']) {
+ test(`Sass maps subtract additional data for equivalent file URL encodings: ${filename}`, async () => {
+ const url = pathToFileURL(resolve(filename)), source = '.card { color: red; }'
+ const result = await sass.compileStringAsync(prefix + source, { url, sourceMap: true, sourceMapIncludeSources: true })
+ const map = removeSassPrefixMap(result.sourceMap, url, source, prefix) as ConstructorParameters[0]
+ const origin = new SourceMap(map).findEntry(0, 0)
+ expect(origin).toMatchObject({ originalLine: 0, originalColumn: 0 })
+ expect('originalSource' in origin && fileURLToPath(origin.originalSource)).toBe(fileURLToPath(url))
+ expect(map.sourcesContent).toContain(source)
+ })
+
+ test(`Sass errors subtract additional data for equivalent file URL encodings: ${filename}`, async () => {
+ const url = pathToFileURL(resolve(filename)), source = '.card { color: $missing; }'
+ let failure: unknown
+ try { await sass.compileStringAsync(prefix + source, { url }) }
+ catch (error) { failure = error }
+ expect(failure).toBeDefined()
+ expect(removeSassPrefixError(failure, url, source, prefix)).toMatchObject({
+ span: { url, start: { line: 0 }, text: '$missing' },
+ message: expect.stringContaining(`${fileURLToPath(url)}:1:`)
+ })
+ })
+}
+
+test('Sass errors from a distinct virtual source keep their original location', () => {
+ const url = pathToFileURL(resolve('card.scss'))
+ const failure = Object.assign(new Error('virtual failure'), {
+ span: { url: new URL(url.href + '?importer'), start: { line: 4 } }
+ })
+ expect(removeSassPrefixError(failure, url, '.card {}', prefix)).toBe(failure)
+})
diff --git a/packages/next/tests/static-local-css-e2e.test.ts b/packages/next/tests/static-local-css-e2e.test.ts
index 498cecb02..802030b7d 100644
--- a/packages/next/tests/static-local-css-e2e.test.ts
+++ b/packages/next/tests/static-local-css-e2e.test.ts
@@ -14,8 +14,9 @@ beforeAll(() => {
it.each([
['static-local-css', '--turbo', false],
['static-local-css', '--webpack', false],
- ['static-module-reference', '--webpack', true]
-] as const)('delivers referenced native theme variables in Next %s %s mode', async (fixture, builder, moduleStyle) => {
+ ['static-module-reference', '--webpack', true],
+ ['static-module-reference', '--turbo', true]
+] as const)('delivers project theme variables without @reference in Next %s %s mode', async (fixture, builder, moduleStyle) => {
const fixtureDir = join(packageDir, 'e2e', fixture)
const outDir = join(fixtureDir, 'out')
execFileSync(join(packageDir, 'node_modules/.bin/next'), ['build', builder], {
@@ -37,19 +38,24 @@ it.each([
expect(css).toContain('--color-probe:#123456')
expect(css).toContain('--color-probe:#abcdef')
} else {
- expect(css).toContain('#123456')
- expect(css).toContain('#abcdef')
+ // Webpack retains a publication import; Turbopack may bundle the global CSS.
+ if (builder === '--webpack') expect(css).toContain('@import')
+ expect(css).not.toMatch(/\.[\w-]+\{--color-probe:/)
}
expect(css).not.toContain('@reference')
const server = createServer((request, response) => {
- const pathname = new URL(request.url || '/', 'http://localhost').pathname
- const file = join(outDir, pathname === '/' ? 'index.html' : pathname)
+ const url = new URL(request.url || '/', 'http://localhost')
+ const pathname = url.pathname
+ const route = pathname === '/' ? '/index' : pathname
+ const file = join(outDir, !extname(pathname)
+ ? route + (request.headers.rsc === '1' || url.searchParams.has('_rsc') ? '.txt' : '.html')
+ : pathname)
if (relative(outDir, file).startsWith('..') || !existsSync(file)) {
response.writeHead(404).end()
return
}
- const type = ({ '.html': 'text/html', '.css': 'text/css', '.js': 'application/javascript' } as Record)[extname(file)] || 'application/octet-stream'
+ const type = ({ '.html': 'text/html', '.css': 'text/css', '.js': 'application/javascript', '.txt': 'text/x-component' } as Record)[extname(file)] || 'application/octet-stream'
response.writeHead(200, { 'content-type': type }).end(readFileSync(file))
})
await new Promise(resolve => server.listen(0, '127.0.0.1', resolve))
@@ -59,9 +65,36 @@ it.each([
if (!address || typeof address === 'string') throw new Error('Missing test server port')
for (const [colorScheme, expected] of [['light', 'rgb(18, 52, 86)'], ['dark', 'rgb(171, 205, 239)']] as const) {
const page = await browser.newPage({ colorScheme })
+ const errors: string[] = []
+ page.on('pageerror', error => errors.push(error.message))
+ page.on('response', response => { if (response.status() >= 400) errors.push(`${response.status()} ${response.url()}`) })
try {
await page.goto(`http://127.0.0.1:${address.port}/`)
expect(await page.locator('main').evaluate(element => getComputedStyle(element).color)).toBe(expected)
+ if (moduleStyle) {
+ await expect.poll(() => page.locator('main').evaluate(element => getComputedStyle(element).opacity)).toBe('0.5')
+ await page.evaluate(() => document.body.setAttribute('data-theme', 'ocean'))
+ for (const [link, pathname] of [['Other route', '/other'], ['Home route', '/']] as const) {
+ await page.getByRole('link', { name: link }).click()
+ await page.waitForURL(`http://127.0.0.1:${address.port}${pathname}`)
+ // The attribute survives client navigation; each route's different
+ // CSS Module must preserve the same generated theme cascade.
+ expect(await page.locator('body').getAttribute('data-theme')).toBe('ocean')
+ expect(await page.locator('main').evaluate(element => getComputedStyle(element).color)).toBe('rgb(8, 47, 73)')
+ }
+ await page.evaluate(() => document.body.removeAttribute('data-theme'))
+ expect(await page.locator('main').evaluate(element => getComputedStyle(element).color)).toBe(expected)
+ await page.evaluate(() => document.body.style.setProperty('--color-probe', 'rgb(1, 2, 3)'))
+ expect(await page.locator('main').evaluate(element => getComputedStyle(element).color)).toBe('rgb(1, 2, 3)')
+ await page.evaluate(() => {
+ document.body.style.removeProperty('--color-probe')
+ document.body.setAttribute('data-theme', 'ocean')
+ const copy = document.querySelector('main')!.cloneNode(true)
+ document.body.append(copy)
+ })
+ expect(await page.locator('main').evaluateAll(elements => elements.map(element => getComputedStyle(element).color))).toEqual(['rgb(8, 47, 73)', 'rgb(8, 47, 73)'])
+ }
+ expect(errors).toEqual([])
} finally {
await page.close()
}
diff --git a/packages/next/tests/static.test.ts b/packages/next/tests/static.test.ts
index b5472127a..dfe33f02a 100644
--- a/packages/next/tests/static.test.ts
+++ b/packages/next/tests/static.test.ts
@@ -1,4 +1,4 @@
-import { mkdirSync, mkdtempSync, readFileSync, writeFileSync } from 'node:fs'
+import { mkdirSync, mkdtempSync, readFileSync, renameSync, rmSync, writeFileSync } from 'node:fs'
import { tmpdir } from 'node:os'
import { join } from 'node:path'
import { fileURLToPath, pathToFileURL } from 'node:url'
@@ -58,10 +58,14 @@ function runStaticCSSLoader(statePath: string, resourcePath: string, source: str
function runStaticCSSLoaderWithDependencies(statePath: string, resourcePath: string, source: string) {
const dependencies: string[] = []
+ const contexts: string[] = []
+ const missing: string[] = []
return new Promise((resolve, reject) => {
const context: ThisParameterType = {
resourcePath,
addDependency: (dependency) => dependencies.push(dependency),
+ addContextDependency: (directory) => contexts.push(directory),
+ addMissingDependency: (file) => missing.push(file),
cacheable: () => undefined,
getOptions: () => ({ statePath }),
async: () => (error, content) => {
@@ -74,7 +78,7 @@ function runStaticCSSLoaderWithDependencies(statePath: string, resourcePath: str
}
masterCSSNextStaticCSSLoader.call(context, source)
- }).then((content) => ({ content, dependencies }))
+ }).then((content) => ({ content, dependencies, contexts, missing }))
}
describe('Next static mode', () => {
@@ -111,6 +115,72 @@ describe('Next static mode', () => {
expect(css).toContain('margin:0')
})
+ it('keeps Webpack module watches and lets generated CSS discover new sources', async () => {
+ const root = createFixture()
+ const first = join(root, 'app/page.tsx'), second = join(root, 'app/other.tsx')
+ writeFileSync(first, '')
+ writeFileSync(second, '')
+ const state = (await prepareNextStatic({}, { projectDir: root }))!
+ const dependencies: string[] = [], contexts: string[] = [], missing: string[] = []
+ await new Promise((resolve, reject) => {
+ const jsContext = {
+ resourcePath: first,
+ getOptions: () => ({ statePath: state.statePath }),
+ addDependency: file => dependencies.push(file),
+ addContextDependency: directory => contexts.push(directory),
+ addMissingDependency: file => missing.push(file),
+ async: () => error => error ? reject(error) : resolve()
+ } satisfies ThisParameterType & {
+ addContextDependency: (directory: string) => void
+ addMissingDependency: (file: string) => void
+ }
+ masterCSSNextStaticLoader.call(jsContext, readFileSync(first, 'utf8'))
+ })
+ expect(dependencies).toEqual(expect.arrayContaining([state.statePath, first, second]))
+ expect(contexts).toContain(root)
+ expect(missing).toEqual(expect.arrayContaining([join(root, '.gitignore'), join(root, 'app/.gitignore')]))
+
+ const stylesheet = join(root, 'app/globals.css')
+ const entry = await runStaticCSSLoaderWithDependencies(state.statePath, stylesheet, readFileSync(stylesheet, 'utf8'))
+ expect(entry.dependencies).toEqual(expect.arrayContaining([state.statePath, first, second]))
+ expect(entry.contexts).toContain(root)
+ expect(entry.missing).toEqual(expect.arrayContaining([join(root, '.gitignore'), join(root, 'app/.gitignore')]))
+
+ writeFileSync(first, '')
+ await runStaticLoader(state.statePath, first, readFileSync(first, 'utf8'))
+ expect(readStaticCSS(state.outputPath)).toContain('padding:44px')
+ const refreshed = await runStaticCSSLoaderWithDependencies(state.statePath, stylesheet, readFileSync(stylesheet, 'utf8'))
+ expect(refreshed.dependencies).toContain(first)
+ expect(readStaticCSS(state.outputPath)).toContain('padding:44px')
+
+ const added = join(root, 'app/added.tsx')
+ writeFileSync(added, '')
+ const generated = await runStaticCSSLoaderWithDependencies(state.statePath, state.outputPath, readFileSync(state.outputPath, 'utf8'))
+ expect(generated.content).toContain('gap:33px')
+ expect(generated.dependencies).toContain(added)
+ expect(generated.contexts).toContain(root)
+
+ const renamed = join(root, 'app/renamed.tsx')
+ renameSync(added, renamed)
+ const afterRename = await runStaticCSSLoaderWithDependencies(state.statePath, state.outputPath, generated.content)
+ expect(afterRename.content).toContain('gap:33px')
+ expect(afterRename.dependencies).toContain(renamed)
+ expect(afterRename.dependencies).not.toContain(added)
+
+ rmSync(renamed)
+ writeFileSync(join(root, '.gitignore'), 'ignored.tsx\n')
+ writeFileSync(join(root, 'ignored.tsx'), '')
+ const afterRemoval = await runStaticCSSLoaderWithDependencies(state.statePath, state.outputPath, afterRename.content)
+ expect(afterRemoval.content).not.toContain('gap:33px')
+ expect(afterRemoval.content).not.toContain('margin:55px')
+ expect(afterRemoval.dependencies).toContain(join(root, '.gitignore'))
+
+ const foreign = await runStaticCSSLoaderWithDependencies(state.statePath, join(root, 'other/.master/next.css'), '.foreign{}')
+ expect(foreign.content).toBe('.foreign{}')
+ expect(foreign.dependencies).toEqual([])
+ expect(foreign.contexts).toEqual([])
+ })
+
it('publishes complete CSS in independent workers before source loaders run, including MDX', async () => {
const root = createFixture()
const page = join(root, 'app/page.tsx')
@@ -260,7 +330,7 @@ describe('Next static mode', () => {
expect(readStaticCSS(outputPath)).not.toContain('--color-primary')
})
- it('lets the scanner loader feed an imported module into the scanner incrementally', async () => {
+ it('lets the source loader publish an imported module while the CSS loader owns complete watches', async () => {
const root = createFixture()
const outputPath = resolveStaticOutputPath(root)
const statePath = resolveStaticStatePath(outputPath)
@@ -276,6 +346,7 @@ describe('Next static mode', () => {
`
writeFileSync(modulePath, source)
await expect(runStaticLoader(statePath, modulePath, source)).resolves.toBe(source)
+ await runStaticCSSLoader(statePath, join(root, 'app/globals.css'), readFileSync(join(root, 'app/globals.css'), 'utf8'))
const css = readStaticCSS(outputPath)
expect(css).toContain('display:block')
@@ -309,7 +380,7 @@ describe('Next static mode', () => {
expect(css).not.toContain('123456px')
})
- it('updates static CSS when Turbopack reruns the source loader', async () => {
+ it('updates static CSS when Webpack reruns the source loader', async () => {
const root = createFixture()
const pagePath = join(root, 'app/page.tsx')
writeFileSync(pagePath, `
@@ -334,7 +405,7 @@ describe('Next static mode', () => {
`)
await runStaticLoader(statePath, pagePath, readFileSync(pagePath, 'utf-8'))
-
+ await runStaticCSSLoader(statePath, join(root, 'app/globals.css'), readFileSync(join(root, 'app/globals.css'), 'utf8'))
expect(readStaticCSS(outputPath)).toContain('margin:0')
})
diff --git a/packages/next/tests/stylesheet-loader.test.ts b/packages/next/tests/stylesheet-loader.test.ts
index 2f79c46b8..b2c0b246c 100644
--- a/packages/next/tests/stylesheet-loader.test.ts
+++ b/packages/next/tests/stylesheet-loader.test.ts
@@ -1,7 +1,8 @@
import { readStylesheetText } from './helpers/stylesheet-output'
-import { mkdirSync, mkdtempSync, writeFileSync } from 'node:fs'
+import { existsSync, mkdirSync, mkdtempSync, readFileSync, writeFileSync } from 'node:fs'
import { tmpdir } from 'node:os'
import { join } from 'node:path'
+import { fileURLToPath, pathToFileURL } from 'node:url'
import { describe, expect, it } from 'vitest'
import masterCSSStylesheetLoader from '../src/stylesheet-loader'
@@ -30,10 +31,59 @@ function runStylesheetLoader(root: string, resourcePath: string, source: string)
}
masterCSSStylesheetLoader.call(context, source)
- }).then((content) => ({ content: readStylesheetText(resourcePath, content), dependencies }))
+ }).then((content) => ({ content: readStylesheetText(resourcePath, content), code: content, dependencies }))
}
describe('Next style CSS loader', () => {
+ it('passes published static sidecars through without rebuilding the project manifest', async () => {
+ const root = createFixture()
+ // An immutable output must remain loadable even while the author is editing
+ // an invalid entry. The source entry loader owns that error and its watches.
+ writeFileSync(join(root, 'app/globals.css'), '@master entry; @utilities { broken: { width:--value(); } }')
+ const file = join(root, '.master', `next-style-${'a'.repeat(64)}-${'b'.repeat(64)}.css`)
+ const source = '@layer utilities{.p\\:11px{padding:11px}}'
+ const result = await runStylesheetLoader(root, file, source)
+ expect(result.code).toBe(source)
+ expect(result.dependencies).toEqual([])
+ await expect(runStylesheetLoader(root, join(root, 'app/authored.css'), '.card{color:red}')).rejects.toThrow()
+ })
+
+ it('relocates global token URLs through the resource delivery graph', async () => {
+ const root = createFixture()
+ const image = join(root, 'app/pattern.svg')
+ const tokens = join(root, 'app/tokens.css')
+ writeFileSync(image, '')
+ writeFileSync(tokens, '@theme { --image-probe: url("./pattern.svg"); }')
+ const file = join(root, 'app/Pattern.module.css')
+ const result = await runStylesheetLoader(root, file, '@reference "./tokens.css"; .card { background-image: var(--image-probe); }')
+ const entry = fileURLToPath(new URL(result.code.match(/@import "([^"]+)"/)![1], pathToFileURL(file)))
+ const globalCSS = readFileSync(entry, 'utf8')
+ const href = globalCSS.match(/url\(["']?([^"')]+)["']?\)/)![1]
+ expect(existsSync(fileURLToPath(new URL(href, pathToFileURL(entry))))).toBe(true)
+ expect(result.dependencies).toContain(image)
+ expect(result.dependencies).toContain(tokens)
+ expect(result.code).toContain('var(--image-probe)')
+ expect(globalCSS).toContain('sourceMappingURL=')
+ })
+ it('shares global resources across Modules and republishes referenced changes', async () => {
+ const root = createFixture()
+ const tokens = join(root, 'app/tokens.css')
+ const source = '@reference "./tokens.css"; .card { color: var(--color-shared); }'
+ writeFileSync(tokens, '@theme { --color-shared: red; }')
+ const a = join(root, 'app/A.module.css')
+ const b = join(root, 'app/B.module.css')
+ const first = await runStylesheetLoader(root, a, source)
+ const second = await runStylesheetLoader(root, b, source)
+ const asset = (file: string, code: string) => fileURLToPath(new URL(code.match(/@import "([^"]+)"/)![1], pathToFileURL(file)))
+ expect(asset(a, first.code)).toBe(asset(b, second.code))
+ expect(second.dependencies).toContain(tokens)
+ expect(second.dependencies).toContain(asset(b, second.code))
+ writeFileSync(tokens, '@theme { --color-shared: blue; }')
+ const changed = await runStylesheetLoader(root, a, source)
+ expect(asset(a, changed.code)).not.toBe(asset(a, first.code))
+ expect(changed.content).toContain('--color-shared:blue')
+ expect(changed.code).not.toContain('--color-shared:')
+ })
it('derives native CSS from @master/css instead of hardcoding a package subpath', async () => {
const root = createFixture()
const entryPath = join(root, 'app/globals.css')
@@ -106,7 +156,7 @@ describe('Next style CSS loader', () => {
const result = await runStylesheetLoader(
root,
join(root, 'app/Button.module.css'),
- '.button { @compose inline-flex brand; color: white; }'
+ ".button { @variant media(all){background-color:#123456;display:inline-flex; color: white;} }"
)
expect(result.content).toContain('.button{')
@@ -127,7 +177,7 @@ describe('Next style CSS loader', () => {
const result = await runStylesheetLoader(
root,
modulePath,
- '@reference "./tokens.css"; .button { @compose brand; }'
+ "@reference \"./tokens.css\"; .button { @variant media(all){color:#123456;} }"
)
expect(result.content).toContain('.button{color:#123456}')
@@ -167,7 +217,7 @@ describe('Next style CSS loader', () => {
const result = await runStylesheetLoader(
root,
join(root, 'app', name),
- '@reference "./globals.css"; .button { color: var(--color-brand); }'
+ '.button { color: var(--color-brand); }'
)
expect(result.content).toMatch(/color:\s*var\(--color-brand\)/)
@@ -175,9 +225,10 @@ describe('Next style CSS loader', () => {
expect(result.content).toContain('--color-brand:#abcdef')
expect(result.content).not.toContain('@reference')
if (name.endsWith('.module.css')) {
- expect(result.content).not.toMatch(/:root\s*\{--color-brand/)
- expect(result.content).not.toMatch(/:host\s*\{--color-brand/)
- expect(result.content).toMatch(/\.button\s*\{--color-brand:#123456\}/)
+ expect(result.code).toMatch(/^@import /)
+ expect(result.content).toMatch(/:root\s*\{--color-brand/)
+ expect(result.code).not.toContain('--color-brand:#')
+ expect(result.content).not.toMatch(/\.button\s*\{--color-brand:/)
}
})
@@ -190,7 +241,7 @@ describe('Next style CSS loader', () => {
const result = await runStylesheetLoader(
root,
pagePath,
- '@reference "./globals.css"; .home-section { @compose py-5xl; }'
+ "@reference \"./globals.css\"; .home-section { @variant media(all){padding-block:var(--spacing-5xl);} }"
)
expect(result.content).toContain('.home-section{padding-block:var(--spacing-5xl)}')
@@ -201,7 +252,7 @@ describe('Next style CSS loader', () => {
expect(result.dependencies).toContain(globalsPath)
})
- it('dedupes referenced default theme variables already emitted by global CSS for page-level CSS', async () => {
+ it('retains local resources when a discovered global entry is not guaranteed loaded', async () => {
const root = createFixture()
const globalsPath = join(root, 'app/globals.css')
const pagePath = join(root, 'app/page.css')
@@ -213,11 +264,11 @@ describe('Next style CSS loader', () => {
const result = await runStylesheetLoader(
root,
pagePath,
- '@reference "./globals.css"; .home-section { @compose py-5xl; }'
+ "@reference \"./globals.css\"; .home-section { @variant media(all){padding-block:var(--spacing-5xl);} }"
)
expect(result.content).toContain('.home-section{padding-block:var(--spacing-5xl)}')
- expect(result.content).not.toContain('--spacing-5xl:')
+ expect(result.content).toContain('--spacing-5xl:')
expect(result.content).not.toContain('@reference')
expect(result.content).not.toContain('@master/css')
expect(result.dependencies).toContain(pagePath)
@@ -235,10 +286,10 @@ describe('Next style CSS loader', () => {
error = caught as Error & { dependencies?: string[] }
}
expect(error).toBeInstanceOf(Error)
- expect(error?.message).toContain('Invalid @compose utility')
+ expect(error?.message).toContain('@compose has been removed')
expect(error?.dependencies).toContain(modulePath)
- const result = await runStylesheetLoader(root, modulePath, '.button { @compose block; }')
+ const result = await runStylesheetLoader(root, modulePath, ".button { @variant media(all){display:block;} }")
expect(result.content).toContain('.button{display:block}')
expect(result.dependencies).toContain(modulePath)
diff --git a/packages/nuxt/README.md b/packages/nuxt/README.md
index 205ec9fdc..2ebd96ee7 100644
--- a/packages/nuxt/README.md
+++ b/packages/nuxt/README.md
@@ -76,9 +76,9 @@ Import the default stylesheet from a global Vue style block:
```
-The default `progressive` mode integrates Nuxt SSR, SSG, ISR, and Hybrid rendering strategies through Nitro, automatically loading custom configuration.
+The default `static` mode generates CSS from source files without injecting the browser runtime. Choose `progressive` to combine Nitro server rendering with browser runtime hydration across Nuxt SSR, SSG, ISR, and Hybrid rendering strategies.
-In `mode: 'runtime'`, the module publishes a stable manifest JSON asset and modulepreloads it from the Nuxt document head when it also injects the client runtime plugin. `runtime: false` disables both automatic runtime injection and the manifest JSON modulepreload.
+In `mode: 'runtime'`, the module publishes a stable manifest JSON asset and modulepreloads it from the Nuxt document head when it also injects the client runtime plugin. To omit the browser runtime, choose `static` or `pre-render`; `runtime: false` conflicts with `runtime` and `progressive` modes and is rejected.
## Options
@@ -99,8 +99,8 @@ Default options:
| Option | Default | Description |
| --- | --- | --- |
| `enabled` | `true` | Enables the module. |
-| `mode` | `'progressive'` | Nuxt defaults to progressive rendering. |
+| `mode` | `'static'` | Selects static, pre-render, runtime, or progressive rendering. |
| `scanner` | `{}` | Scanner configuration passed through to the shared Vite pipeline. |
-| `runtime` | `{ enabled: true, avoidFOUC: true }` | Controls runtime injection and FOUC protection. |
+| `runtime` | `{ enabled: false }` | Enabled by runtime/progressive modes; optional FOUC protection. Explicit enabled values must agree with the mode. |
See the [Nuxt installation guide](https://rc.css.master.co/guide/installation/nuxtjs) for a full project setup.
diff --git a/packages/preset/src/default-manifest.json b/packages/preset/src/default-manifest.json
index 771aaee03..28bd1326a 100644
--- a/packages/preset/src/default-manifest.json
+++ b/packages/preset/src/default-manifest.json
@@ -1 +1 @@
-{"version":1,"languageVersion":3,"modes":[{"name":"light","branches":[{"selector":":root","conditions":["@media (prefers-color-scheme:light)"]},{"selector":":host","conditions":["@media (prefers-color-scheme:light)"]}]},{"name":"dark","branches":[{"selector":":root","conditions":["@media (prefers-color-scheme:dark)"]},{"selector":":host","conditions":["@media (prefers-color-scheme:dark)"]}]}],"variables":{"color":[{"key":"stone-0","value":"oklch(99% .002 72)"},{"key":"stone-5","value":"oklch(94.9% .0053 72)"},{"key":"stone-10","value":"oklch(90.8% .0158 72)"},{"key":"stone-20","value":"oklch(82.6% .0287 72)"},{"key":"stone-30","value":"oklch(74.4% .04 72)"},{"key":"stone-40","value":"oklch(66.2% .044 72)"},{"key":"stone-50","value":"oklch(58% .045 72)"},{"key":"stone-60","value":"oklch(49.8% .033 72)"},{"key":"stone-70","value":"oklch(41.6% .0275 72)"},{"key":"stone-80","value":"oklch(33.4% .022 72)"},{"key":"stone-90","value":"oklch(25.2% .0105 72)"},{"key":"stone-95","value":"oklch(21.1% .0079 72)"},{"key":"stone-100","value":"oklch(17% .0053 72)"},{"key":"gray-0","value":"oklch(98.48% 0 none)"},{"key":"gray-5","value":"oklch(96.5% 0 none)"},{"key":"gray-10","value":"oklch(90% 0 none)"},{"key":"gray-20","value":"oklch(82% 0 none)"},{"key":"gray-30","value":"oklch(73.5% 0 none)"},{"key":"gray-40","value":"oklch(65% 0 none)"},{"key":"gray-50","value":"oklch(55.2% 0 none)"},{"key":"gray-60","value":"oklch(48% 0 none)"},{"key":"gray-70","value":"oklch(39.5% 0 none)"},{"key":"gray-80","value":"oklch(31% 0 none)"},{"key":"gray-90","value":"oklch(23.5% 0 none)"},{"key":"gray-95","value":"oklch(18.5% 0 none)"},{"key":"gray-100","value":"oklch(14.5% 0 none)"},{"key":"neutral-0","value":"oklch(98.38% .0033 250)"},{"key":"neutral-5","value":"oklch(96.8% .0048 253)"},{"key":"neutral-10","value":"oklch(94.8% .0074 262)"},{"key":"neutral-20","value":"oklch(88.5% .014 268)"},{"key":"neutral-30","value":"oklch(79.5% .02 270)"},{"key":"neutral-40","value":"oklch(68.5% .026 272)"},{"key":"neutral-50","value":"oklch(57% .03 273)"},{"key":"neutral-60","value":"oklch(48% .028 273)"},{"key":"neutral-70","value":"oklch(39% .024 273)"},{"key":"neutral-80","value":"oklch(30.5% .019 273)"},{"key":"neutral-90","value":"oklch(23% .014 273)"},{"key":"neutral-95","value":"oklch(18% .01 273)"},{"key":"neutral-100","value":"oklch(14% .007 273)"},{"key":"slate-0","value":"oklch(98.07% .0055 257.1)"},{"key":"slate-5","value":"oklch(96.15% .0145 267.3)"},{"key":"slate-10","value":"oklch(90.16% .0324 268.2)"},{"key":"slate-20","value":"oklch(82.16% .045 268.2)"},{"key":"slate-30","value":"oklch(74.16% .069 268.2)"},{"key":"slate-40","value":"oklch(63.99% .0804 266.1)"},{"key":"slate-50","value":"oklch(55.43% .0949 263.4)"},{"key":"slate-60","value":"oklch(45.03% .0817 265.9)"},{"key":"slate-70","value":"oklch(39% .0702 263.9)"},{"key":"slate-80","value":"oklch(32.14% .0604 264.8)"},{"key":"slate-90","value":"oklch(27.33% .0536 264.8)"},{"key":"slate-95","value":"oklch(21.5% .0573 267.4)"},{"key":"slate-100","value":"oklch(17.5% .0688 267.4)"},{"key":"brown-0","value":"oklch(97% .0097 47.1)"},{"key":"brown-5","value":"oklch(95.48% .0183 34.8)"},{"key":"brown-10","value":"oklch(88.65% .0558 33.4)"},{"key":"brown-20","value":"oklch(81.37% .1065 33.6)"},{"key":"brown-30","value":"oklch(74.39% .12 32.5)"},{"key":"brown-40","value":"oklch(67.62% .12 32.5)"},{"key":"brown-50","value":"oklch(61.9% .12 32.5)"},{"key":"brown-60","value":"oklch(55.58% .12 32.5)"},{"key":"brown-70","value":"oklch(49.11% .12 32.5)"},{"key":"brown-80","value":"oklch(42.07% .12 32.5)"},{"key":"brown-90","value":"oklch(35.11% .12 32.5)"},{"key":"brown-95","value":"oklch(24.7% .0958 31.2)"},{"key":"brown-100","value":"oklch(21.21% .0822 31.2)"},{"key":"orange-0","value":"oklch(96.76% .0202 84.6)"},{"key":"orange-5","value":"oklch(94.78% .0417 83)"},{"key":"orange-10","value":"oklch(89.94% .0784 75.7)"},{"key":"orange-20","value":"oklch(82.86% .1343 69.2)"},{"key":"orange-30","value":"oklch(75.09% .179 58.4)"},{"key":"orange-40","value":"oklch(71.4% .1941 48.1)"},{"key":"orange-50","value":"oklch(66.61% .2247 36.7)"},{"key":"orange-60","value":"oklch(61.68% .2388 31.2)"},{"key":"orange-70","value":"oklch(53.53% .2196 29.2)"},{"key":"orange-80","value":"oklch(46.33% .1901 29.2)"},{"key":"orange-90","value":"oklch(36.63% .1503 29.2)"},{"key":"orange-95","value":"oklch(25.4% .1042 29.2)"},{"key":"orange-100","value":"oklch(21.44% .088 29.2)"},{"key":"amber-0","value":"oklch(97.5% .0306 99)"},{"key":"amber-5","value":"oklch(96.24% .0573 98.1)"},{"key":"amber-10","value":"oklch(93.46% .0995 95.8)"},{"key":"amber-20","value":"oklch(88.25% .1592 91.3)"},{"key":"amber-30","value":"oklch(86% .1633 86.9)"},{"key":"amber-40","value":"oklch(83.04% .1701 81.1)"},{"key":"amber-50","value":"oklch(79.4% .1709 71.1)"},{"key":"amber-60","value":"oklch(73.31% .1784 56.5)"},{"key":"amber-70","value":"oklch(63.23% .1757 46.7)"},{"key":"amber-80","value":"oklch(53.09% .1677 39.7)"},{"key":"amber-90","value":"oklch(42.68% .138 38.6)"},{"key":"amber-95","value":"oklch(29.27% .0971 37.4)"},{"key":"amber-100","value":"oklch(23.94% .0818 36.1)"},{"key":"yellow-0","value":"oklch(98.86% .0355 107.4)"},{"key":"yellow-5","value":"oklch(98.27% .0758 108)"},{"key":"yellow-10","value":"oklch(97.31% .1513 109.1)"},{"key":"yellow-20","value":"oklch(95.82% .207 108.4)"},{"key":"yellow-30","value":"oklch(93.51% .1981 104.7)"},{"key":"yellow-40","value":"oklch(91.5% .1909 101.1)"},{"key":"yellow-50","value":"oklch(87.52% .1796 94.6)"},{"key":"yellow-60","value":"oklch(82.02% .169 82.1)"},{"key":"yellow-70","value":"oklch(72.04% .1592 67)"},{"key":"yellow-80","value":"oklch(64.84% .1477 63.1)"},{"key":"yellow-90","value":"oklch(52.17% .1199 62.2)"},{"key":"yellow-95","value":"oklch(33.35% .083 54.6)"},{"key":"yellow-100","value":"oklch(26.22% .0646 55.4)"},{"key":"lime-0","value":"oklch(98.05% .0399 116)"},{"key":"lime-5","value":"oklch(96.62% .08 121.2)"},{"key":"lime-10","value":"oklch(95.06% .1441 121.5)"},{"key":"lime-20","value":"oklch(92.45% .2251 126)"},{"key":"lime-30","value":"oklch(87.79% .2261 126.9)"},{"key":"lime-40","value":"oklch(82.22% .225 131.1)"},{"key":"lime-50","value":"oklch(74.39% .2131 133.9)"},{"key":"lime-60","value":"oklch(66.45% .195 135.3)"},{"key":"lime-70","value":"oklch(58.7% .1769 136.7)"},{"key":"lime-80","value":"oklch(51.46% .1612 138.7)"},{"key":"lime-90","value":"oklch(44.54% .1437 140.1)"},{"key":"lime-95","value":"oklch(29.84% .097 140.4)"},{"key":"lime-100","value":"oklch(25.83% .0851 141.1)"},{"key":"green-0","value":"oklch(97% .0305 145.7)"},{"key":"green-5","value":"oklch(94.95% .071 145.5)"},{"key":"green-10","value":"oklch(92.05% .1355 145.7)"},{"key":"green-20","value":"oklch(89.18% .2191 143.8)"},{"key":"green-30","value":"oklch(84.3% .24 143.9)"},{"key":"green-40","value":"oklch(77.68% .25 144.1)"},{"key":"green-50","value":"oklch(72.41% .2464 142.5)"},{"key":"green-60","value":"oklch(67.52% .2298 142.5)"},{"key":"green-70","value":"oklch(58.66% .1996 142.5)"},{"key":"green-80","value":"oklch(51.96% .1768 142.5)"},{"key":"green-90","value":"oklch(44.03% .1498 142.5)"},{"key":"green-95","value":"oklch(30.17% .1027 142.5)"},{"key":"green-100","value":"oklch(26.35% .0897 142.5)"},{"key":"beryl-0","value":"oklch(96.57% .03 163.7)"},{"key":"beryl-5","value":"oklch(94.71% .0634 163.5)"},{"key":"beryl-10","value":"oklch(91.87% .1178 162.2)"},{"key":"beryl-20","value":"oklch(90.33% .1569 161.2)"},{"key":"beryl-30","value":"oklch(86.43% .2104 155.8)"},{"key":"beryl-40","value":"oklch(82.49% .1978 156.6)"},{"key":"beryl-50","value":"oklch(76.89% .1885 155.4)"},{"key":"beryl-60","value":"oklch(69.77% .1794 153.1)"},{"key":"beryl-70","value":"oklch(60.74% .1602 151.9)"},{"key":"beryl-80","value":"oklch(54.36% .1421 152.3)"},{"key":"beryl-90","value":"oklch(46.09% .1213 152)"},{"key":"beryl-95","value":"oklch(30.39% .0888 147.6)"},{"key":"beryl-100","value":"oklch(26.71% .0855 144.4)"},{"key":"teal-0","value":"oklch(97.24% .023 179.8)"},{"key":"teal-5","value":"oklch(94.3% .0661 180.5)"},{"key":"teal-10","value":"oklch(92.33% .1056 181.5)"},{"key":"teal-20","value":"oklch(91.3% .1327 183.1)"},{"key":"teal-30","value":"oklch(90.52% .1472 184.8)"},{"key":"teal-40","value":"oklch(89.99% .1577 186.3)"},{"key":"teal-50","value":"oklch(86.13% .1485 190.5)"},{"key":"teal-60","value":"oklch(79.38% .1355 194.8)"},{"key":"teal-70","value":"oklch(67.86% .1154 199.2)"},{"key":"teal-80","value":"oklch(60.62% .1033 203.7)"},{"key":"teal-90","value":"oklch(52.19% .0898 208.3)"},{"key":"teal-95","value":"oklch(31.94% .0584 220.7)"},{"key":"teal-100","value":"oklch(28.34% .0534 224.3)"},{"key":"cyan-0","value":"oklch(97.47% .022 196.6)"},{"key":"cyan-5","value":"oklch(95.05% .0598 196)"},{"key":"cyan-10","value":"oklch(92.28% .1032 196.9)"},{"key":"cyan-20","value":"oklch(89.98% .1264 200.1)"},{"key":"cyan-30","value":"oklch(87.28% .1376 204.3)"},{"key":"cyan-40","value":"oklch(84.82% .1408 209.5)"},{"key":"cyan-50","value":"oklch(81.54% .1453 216.7)"},{"key":"cyan-60","value":"oklch(77.57% .1494 226.7)"},{"key":"cyan-70","value":"oklch(70.27% .1509 235.9)"},{"key":"cyan-80","value":"oklch(63.25% .1493 241.7)"},{"key":"cyan-90","value":"oklch(52.16% .1354 246.4)"},{"key":"cyan-95","value":"oklch(35.21% .0976 249.2)"},{"key":"cyan-100","value":"oklch(30.27% .0847 249.6)"},{"key":"sky-0","value":"oklch(97.39% .0139 209.4)"},{"key":"sky-5","value":"oklch(94.65% .0358 212.1)"},{"key":"sky-10","value":"oklch(90.51% .0667 216.5)"},{"key":"sky-20","value":"oklch(86.58% .0902 224)"},{"key":"sky-30","value":"oklch(77.94% .1431 228.4)"},{"key":"sky-40","value":"oklch(72.24% .1626 239)"},{"key":"sky-50","value":"oklch(67.09% .1828 248.5)"},{"key":"sky-60","value":"oklch(62.09% .2077 255.4)"},{"key":"sky-70","value":"oklch(55.12% .2483 261.6)"},{"key":"sky-80","value":"oklch(49.98% .2769 263.8)"},{"key":"sky-90","value":"oklch(40.76% .2499 264.2)"},{"key":"sky-95","value":"oklch(28.37% .1946 265.1)"},{"key":"sky-100","value":"oklch(25.85% .1768 265.4)"},{"key":"blue-0","value":"oklch(97.5% .0105 219.7)"},{"key":"blue-5","value":"oklch(93.53% .0305 231.3)"},{"key":"blue-10","value":"oklch(90.01% .0519 236.1)"},{"key":"blue-20","value":"oklch(81.69% .0975 246.5)"},{"key":"blue-30","value":"oklch(72.87% .1468 249.3)"},{"key":"blue-40","value":"oklch(64.31% .1921 258.5)"},{"key":"blue-50","value":"oklch(58.22% .2279 263.9)"},{"key":"blue-60","value":"oklch(51.83% .2687 266.1)"},{"key":"blue-70","value":"oklch(46.26% .3057 266.7)"},{"key":"blue-80","value":"oklch(42.89% .2907 266.3)"},{"key":"blue-90","value":"oklch(39.4% .2629 268)"},{"key":"blue-95","value":"oklch(28.64% .1893 269)"},{"key":"blue-100","value":"oklch(25.46% .168 269.2)"},{"key":"indigo-0","value":"oklch(97.1% .0083 257.2)"},{"key":"indigo-5","value":"oklch(94.11% .0228 279.6)"},{"key":"indigo-10","value":"oklch(87.83% .0547 274.4)"},{"key":"indigo-20","value":"oklch(77.74% .1153 280.2)"},{"key":"indigo-30","value":"oklch(70.2% .1611 282.9)"},{"key":"indigo-40","value":"oklch(61.3% .218 284)"},{"key":"indigo-50","value":"oklch(56.78% .2478 284.1)"},{"key":"indigo-60","value":"oklch(50.06% .2906 282)"},{"key":"indigo-70","value":"oklch(48.74% .2963 279.3)"},{"key":"indigo-80","value":"oklch(48.25% .2976 277.4)"},{"key":"indigo-90","value":"oklch(41.46% .2571 276.7)"},{"key":"indigo-95","value":"oklch(29.36% .1799 278.3)"},{"key":"indigo-100","value":"oklch(25.28% .1551 278.1)"},{"key":"violet-0","value":"oklch(97.96% .01 322.8)"},{"key":"violet-5","value":"oklch(94.02% .0266 299.5)"},{"key":"violet-10","value":"oklch(88.69% .0596 300.1)"},{"key":"violet-20","value":"oklch(80.47% .113 297.7)"},{"key":"violet-30","value":"oklch(71.63% .1722 298.7)"},{"key":"violet-40","value":"oklch(62.1% .237 297.8)"},{"key":"violet-50","value":"oklch(56.23% .2803 297.8)"},{"key":"violet-60","value":"oklch(52.55% .293 292.4)"},{"key":"violet-70","value":"oklch(51.12% .2931 287.9)"},{"key":"violet-80","value":"oklch(48.43% .2798 286.7)"},{"key":"violet-90","value":"oklch(40.64% .2331 287.9)"},{"key":"violet-95","value":"oklch(28.51% .1631 288.3)"},{"key":"violet-100","value":"oklch(24.44% .1403 287.8)"},{"key":"purple-0","value":"oklch(97.07% .0155 325.8)"},{"key":"purple-5","value":"oklch(94.28% .0315 314.4)"},{"key":"purple-10","value":"oklch(89.13% .0709 314.7)"},{"key":"purple-20","value":"oklch(81.4% .1318 312.8)"},{"key":"purple-30","value":"oklch(72.72% .2007 312.8)"},{"key":"purple-40","value":"oklch(63.36% .2677 310)"},{"key":"purple-50","value":"oklch(58.21% .2988 307.2)"},{"key":"purple-60","value":"oklch(55.59% .2952 301)"},{"key":"purple-70","value":"oklch(54.45% .294 297.9)"},{"key":"purple-80","value":"oklch(48.76% .264 297.5)"},{"key":"purple-90","value":"oklch(39.15% .2105 298.7)"},{"key":"purple-95","value":"oklch(27.95% .1488 300.5)"},{"key":"purple-100","value":"oklch(24.3% .128 302.4)"},{"key":"fuchsia-0","value":"oklch(97.07% .0155 325.8)"},{"key":"fuchsia-5","value":"oklch(94.57% .0378 324.9)"},{"key":"fuchsia-10","value":"oklch(89.9% .086 326.3)"},{"key":"fuchsia-20","value":"oklch(81.84% .1554 322)"},{"key":"fuchsia-30","value":"oklch(74.78% .2085 319.1)"},{"key":"fuchsia-40","value":"oklch(67.61% .25 316.5)"},{"key":"fuchsia-50","value":"oklch(62.91% .25 316.7)"},{"key":"fuchsia-60","value":"oklch(58.72% .25 311.8)"},{"key":"fuchsia-70","value":"oklch(53.61% .25 312.8)"},{"key":"fuchsia-80","value":"oklch(47.9% .2382 313.2)"},{"key":"fuchsia-90","value":"oklch(38.62% .1895 315.8)"},{"key":"fuchsia-95","value":"oklch(27.75% .1357 316.4)"},{"key":"fuchsia-100","value":"oklch(23.7% .1162 315.9)"},{"key":"pink-0","value":"oklch(97.07% .0155 325.8)"},{"key":"pink-5","value":"oklch(94.74% .0372 326.5)"},{"key":"pink-10","value":"oklch(88.85% .083 332.8)"},{"key":"pink-20","value":"oklch(81.57% .1379 341.6)"},{"key":"pink-30","value":"oklch(74.68% .2018 342.5)"},{"key":"pink-40","value":"oklch(69.18% .2455 347.6)"},{"key":"pink-50","value":"oklch(65.84% .25 350.7)"},{"key":"pink-60","value":"oklch(63.54% .25 359.2)"},{"key":"pink-70","value":"oklch(58.95% .2377 2.6)"},{"key":"pink-80","value":"oklch(53% .2126 6.4)"},{"key":"pink-90","value":"oklch(43.66% .1748 8.1)"},{"key":"pink-95","value":"oklch(31.48% .1261 7.8)"},{"key":"pink-100","value":"oklch(27.42% .1098 8.5)"},{"key":"crimson-0","value":"oklch(97.07% .0155 325.8)"},{"key":"crimson-5","value":"oklch(94.2% .0266 353.2)"},{"key":"crimson-10","value":"oklch(88.09% .0623 1)"},{"key":"crimson-20","value":"oklch(80.33% .1184 4.5)"},{"key":"crimson-30","value":"oklch(72.9% .1774 4.4)"},{"key":"crimson-40","value":"oklch(66.41% .2325 8.3)"},{"key":"crimson-50","value":"oklch(63.55% .25 15.3)"},{"key":"crimson-60","value":"oklch(62.66% .25 21.2)"},{"key":"crimson-70","value":"oklch(58.59% .2383 26.2)"},{"key":"crimson-80","value":"oklch(53.32% .2169 26.3)"},{"key":"crimson-90","value":"oklch(44.03% .1783 24.4)"},{"key":"crimson-95","value":"oklch(31.73% .1287 25.1)"},{"key":"crimson-100","value":"oklch(27.68% .1126 26.2)"},{"key":"red-0","value":"oklch(96.63% .01 17.2)"},{"key":"red-5","value":"oklch(94.05% .0239 17)"},{"key":"red-10","value":"oklch(87.16% .0632 17.8)"},{"key":"red-20","value":"oklch(79.39% .119 18.8)"},{"key":"red-30","value":"oklch(72.94% .1679 17.5)"},{"key":"red-40","value":"oklch(64.7% .2399 19.9)"},{"key":"red-50","value":"oklch(62.82% .25 28.6)"},{"key":"red-60","value":"oklch(60.94% .2501 29.2)"},{"key":"red-70","value":"oklch(57.58% .2363 29.2)"},{"key":"red-80","value":"oklch(53.09% .2178 29.2)"},{"key":"red-90","value":"oklch(44.45% .1824 29.2)"},{"key":"red-95","value":"oklch(32.59% .1337 29.2)"},{"key":"red-100","value":"oklch(28.54% .1171 29.2)"},{"key":"sand-0","value":"oklch(98.6% .007 88)"},{"key":"sand-5","value":"oklch(96.4% .014 86)"},{"key":"sand-10","value":"oklch(93.2% .025 84)"},{"key":"sand-20","value":"oklch(86.6% .045 82)"},{"key":"sand-30","value":"oklch(79.7% .064 80)"},{"key":"sand-40","value":"oklch(71.8% .079 78)"},{"key":"sand-50","value":"oklch(63.4% .082 76)"},{"key":"sand-60","value":"oklch(53.8% .074 73)"},{"key":"sand-70","value":"oklch(44.6% .064 70)"},{"key":"sand-80","value":"oklch(35.8% .05 67)"},{"key":"sand-90","value":"oklch(26.8% .034 64)"},{"key":"sand-95","value":"oklch(22.2% .026 62)"},{"key":"sand-100","value":"oklch(17.8% .018 60)"},{"key":"taupe-0","value":"oklch(98.5% .003 55)"},{"key":"taupe-5","value":"oklch(96.1% .006 53)"},{"key":"taupe-10","value":"oklch(92.4% .01 51)"},{"key":"taupe-20","value":"oklch(85% .018 49)"},{"key":"taupe-30","value":"oklch(77.3% .025 47)"},{"key":"taupe-40","value":"oklch(68.5% .03 45)"},{"key":"taupe-50","value":"oklch(59.2% .032 43)"},{"key":"taupe-60","value":"oklch(49.6% .03 41)"},{"key":"taupe-70","value":"oklch(40.6% .027 39)"},{"key":"taupe-80","value":"oklch(32.1% .023 37)"},{"key":"taupe-90","value":"oklch(23.8% .017 35)"},{"key":"taupe-95","value":"oklch(19.7% .013 34)"},{"key":"taupe-100","value":"oklch(15.8% .009 33)"},{"key":"olive-0","value":"oklch(98.5% .009 110)"},{"key":"olive-5","value":"oklch(96.2% .02 111)"},{"key":"olive-10","value":"oklch(92.8% .036 112)"},{"key":"olive-20","value":"oklch(86.4% .063 113)"},{"key":"olive-30","value":"oklch(79.4% .087 114)"},{"key":"olive-40","value":"oklch(71.5% .105 114)"},{"key":"olive-50","value":"oklch(62.8% .108 113)"},{"key":"olive-60","value":"oklch(53.4% .096 112)"},{"key":"olive-70","value":"oklch(44.5% .081 111)"},{"key":"olive-80","value":"oklch(35.8% .063 110)"},{"key":"olive-90","value":"oklch(27.1% .044 109)"},{"key":"olive-95","value":"oklch(22.6% .034 108)"},{"key":"olive-100","value":"oklch(18.2% .025 107)"},{"key":"sage-0","value":"oklch(98.4% .004 151)"},{"key":"sage-5","value":"oklch(96% .009 152)"},{"key":"sage-10","value":"oklch(92.5% .017 153)"},{"key":"sage-20","value":"oklch(85.6% .03 154)"},{"key":"sage-30","value":"oklch(78.1% .042 155)"},{"key":"sage-40","value":"oklch(69.8% .049 156)"},{"key":"sage-50","value":"oklch(60.9% .051 157)"},{"key":"sage-60","value":"oklch(51.5% .047 158)"},{"key":"sage-70","value":"oklch(42.8% .041 159)"},{"key":"sage-80","value":"oklch(34.3% .033 160)"},{"key":"sage-90","value":"oklch(25.9% .024 161)"},{"key":"sage-95","value":"oklch(21.5% .018 162)"},{"key":"sage-100","value":"oklch(17.3% .012 163)"},{"key":"moss-0","value":"oklch(98.3% .007 132)"},{"key":"moss-5","value":"oklch(95.8% .017 133)"},{"key":"moss-10","value":"oklch(92.1% .032 134)"},{"key":"moss-20","value":"oklch(85.2% .058 135)"},{"key":"moss-30","value":"oklch(77.8% .08 136)"},{"key":"moss-40","value":"oklch(69.9% .097 137)"},{"key":"moss-50","value":"oklch(61.3% .103 138)"},{"key":"moss-60","value":"oklch(52.2% .093 139)"},{"key":"moss-70","value":"oklch(43.6% .08 140)"},{"key":"moss-80","value":"oklch(35.3% .064 141)"},{"key":"moss-90","value":"oklch(26.8% .045 142)"},{"key":"moss-95","value":"oklch(22.3% .034 143)"},{"key":"moss-100","value":"oklch(17.9% .023 144)"},{"key":"petrol-0","value":"oklch(98.3% .005 205)"},{"key":"petrol-5","value":"oklch(95.8% .013 207)"},{"key":"petrol-10","value":"oklch(92% .026 209)"},{"key":"petrol-20","value":"oklch(84.8% .046 211)"},{"key":"petrol-30","value":"oklch(76.8% .066 213)"},{"key":"petrol-40","value":"oklch(68% .085 215)"},{"key":"petrol-50","value":"oklch(58.6% .099 217)"},{"key":"petrol-60","value":"oklch(49.3% .091 219)"},{"key":"petrol-70","value":"oklch(40.8% .075 221)"},{"key":"petrol-80","value":"oklch(32.8% .059 223)"},{"key":"petrol-90","value":"oklch(24.8% .041 225)"},{"key":"petrol-95","value":"oklch(20.6% .031 226)"},{"key":"petrol-100","value":"oklch(16.5% .022 227)"},{"key":"copper-0","value":"oklch(98.4% .007 76)"},{"key":"copper-5","value":"oklch(96% .017 75)"},{"key":"copper-10","value":"oklch(92.5% .031 74)"},{"key":"copper-20","value":"oklch(86% .059 72)"},{"key":"copper-30","value":"oklch(79% .087 70)"},{"key":"copper-40","value":"oklch(71.4% .115 68)"},{"key":"copper-50","value":"oklch(63.3% .13 66)"},{"key":"copper-60","value":"oklch(54.7% .116 64)"},{"key":"copper-70","value":"oklch(46% .098 62)"},{"key":"copper-80","value":"oklch(37.2% .078 60)"},{"key":"copper-90","value":"oklch(28.2% .055 58)"},{"key":"copper-95","value":"oklch(23.5% .042 57)"},{"key":"copper-100","value":"oklch(18.9% .03 56)"},{"key":"terracotta-0","value":"oklch(98.3% .006 47)"},{"key":"terracotta-5","value":"oklch(95.8% .015 46)"},{"key":"terracotta-10","value":"oklch(92% .03 44)"},{"key":"terracotta-20","value":"oklch(85.4% .05 42)"},{"key":"terracotta-30","value":"oklch(78.7% .073 40)"},{"key":"terracotta-40","value":"oklch(72% .09 38)"},{"key":"terracotta-50","value":"oklch(64.4% .096 36)"},{"key":"terracotta-60","value":"oklch(55.8% .087 34)"},{"key":"terracotta-70","value":"oklch(47% .076 32)"},{"key":"terracotta-80","value":"oklch(38% .062 30)"},{"key":"terracotta-90","value":"oklch(28.8% .044 28)"},{"key":"terracotta-95","value":"oklch(24% .034 27)"},{"key":"terracotta-100","value":"oklch(19.3% .025 26)"},{"key":"stone","value":"var(--color-stone-30)","dependencies":["color-stone-30","color-stone-40"],"modes":{"light":{"type":"string","value":"var(--color-stone-30)"},"dark":{"type":"string","value":"var(--color-stone-40)"}}},{"key":"gray","value":"var(--color-gray-30)","dependencies":["color-gray-30","color-gray-40"],"modes":{"light":{"type":"string","value":"var(--color-gray-30)"},"dark":{"type":"string","value":"var(--color-gray-40)"}}},{"key":"neutral","value":"var(--color-neutral-30)","dependencies":["color-neutral-30","color-neutral-40"],"modes":{"light":{"type":"string","value":"var(--color-neutral-30)"},"dark":{"type":"string","value":"var(--color-neutral-40)"}}},{"key":"slate","value":"var(--color-slate-30)","dependencies":["color-slate-30","color-slate-40"],"modes":{"light":{"type":"string","value":"var(--color-slate-30)"},"dark":{"type":"string","value":"var(--color-slate-40)"}}},{"key":"brown","value":"var(--color-brown-40)","dependencies":["color-brown-40","color-brown-50"],"modes":{"light":{"type":"string","value":"var(--color-brown-40)"},"dark":{"type":"string","value":"var(--color-brown-50)"}}},{"key":"orange","value":"var(--color-orange-40)","dependencies":["color-orange-40","color-orange-50"],"modes":{"light":{"type":"string","value":"var(--color-orange-40)"},"dark":{"type":"string","value":"var(--color-orange-50)"}}},{"key":"amber","value":"var(--color-amber-40)","dependencies":["color-amber-40","color-amber-50"],"modes":{"light":{"type":"string","value":"var(--color-amber-40)"},"dark":{"type":"string","value":"var(--color-amber-50)"}}},{"key":"yellow","value":"var(--color-yellow-40)","dependencies":["color-yellow-40","color-yellow-50"],"modes":{"light":{"type":"string","value":"var(--color-yellow-40)"},"dark":{"type":"string","value":"var(--color-yellow-50)"}}},{"key":"lime","value":"var(--color-lime-40)","dependencies":["color-lime-40","color-lime-50"],"modes":{"light":{"type":"string","value":"var(--color-lime-40)"},"dark":{"type":"string","value":"var(--color-lime-50)"}}},{"key":"green","value":"var(--color-green-40)","dependencies":["color-green-40","color-green-50"],"modes":{"light":{"type":"string","value":"var(--color-green-40)"},"dark":{"type":"string","value":"var(--color-green-50)"}}},{"key":"beryl","value":"var(--color-beryl-40)","dependencies":["color-beryl-40","color-beryl-50"],"modes":{"light":{"type":"string","value":"var(--color-beryl-40)"},"dark":{"type":"string","value":"var(--color-beryl-50)"}}},{"key":"teal","value":"var(--color-teal-40)","dependencies":["color-teal-40","color-teal-50"],"modes":{"light":{"type":"string","value":"var(--color-teal-40)"},"dark":{"type":"string","value":"var(--color-teal-50)"}}},{"key":"cyan","value":"var(--color-cyan-40)","dependencies":["color-cyan-40","color-cyan-50"],"modes":{"light":{"type":"string","value":"var(--color-cyan-40)"},"dark":{"type":"string","value":"var(--color-cyan-50)"}}},{"key":"sky","value":"var(--color-sky-60)","dependencies":["color-sky-60","color-sky-50"],"modes":{"light":{"type":"string","value":"var(--color-sky-60)"},"dark":{"type":"string","value":"var(--color-sky-50)"}}},{"key":"blue","value":"var(--color-blue-60)","dependencies":["color-blue-60","color-blue-50"],"modes":{"light":{"type":"string","value":"var(--color-blue-60)"},"dark":{"type":"string","value":"var(--color-blue-50)"}}},{"key":"indigo","value":"var(--color-indigo-60)","dependencies":["color-indigo-60","color-indigo-50"],"modes":{"light":{"type":"string","value":"var(--color-indigo-60)"},"dark":{"type":"string","value":"var(--color-indigo-50)"}}},{"key":"violet","value":"var(--color-violet-60)","dependencies":["color-violet-60","color-violet-50"],"modes":{"light":{"type":"string","value":"var(--color-violet-60)"},"dark":{"type":"string","value":"var(--color-violet-50)"}}},{"key":"purple","value":"var(--color-purple-60)","dependencies":["color-purple-60","color-purple-50"],"modes":{"light":{"type":"string","value":"var(--color-purple-60)"},"dark":{"type":"string","value":"var(--color-purple-50)"}}},{"key":"fuchsia","value":"var(--color-fuchsia-60)","dependencies":["color-fuchsia-60","color-fuchsia-50"],"modes":{"light":{"type":"string","value":"var(--color-fuchsia-60)"},"dark":{"type":"string","value":"var(--color-fuchsia-50)"}}},{"key":"pink","value":"var(--color-pink-60)","dependencies":["color-pink-60","color-pink-50"],"modes":{"light":{"type":"string","value":"var(--color-pink-60)"},"dark":{"type":"string","value":"var(--color-pink-50)"}}},{"key":"crimson","value":"var(--color-crimson-60)","dependencies":["color-crimson-60","color-crimson-50"],"modes":{"light":{"type":"string","value":"var(--color-crimson-60)"},"dark":{"type":"string","value":"var(--color-crimson-50)"}}},{"key":"red","value":"var(--color-red-60)","dependencies":["color-red-60","color-red-50"],"modes":{"light":{"type":"string","value":"var(--color-red-60)"},"dark":{"type":"string","value":"var(--color-red-50)"}}},{"key":"sand","value":"var(--color-sand-30)","dependencies":["color-sand-30","color-sand-40"],"modes":{"light":{"type":"string","value":"var(--color-sand-30)"},"dark":{"type":"string","value":"var(--color-sand-40)"}}},{"key":"taupe","value":"var(--color-taupe-30)","dependencies":["color-taupe-30","color-taupe-40"],"modes":{"light":{"type":"string","value":"var(--color-taupe-30)"},"dark":{"type":"string","value":"var(--color-taupe-40)"}}},{"key":"olive","value":"var(--color-olive-50)","dependencies":["color-olive-50","color-olive-40"],"modes":{"light":{"type":"string","value":"var(--color-olive-50)"},"dark":{"type":"string","value":"var(--color-olive-40)"}}},{"key":"sage","value":"var(--color-sage-30)","dependencies":["color-sage-30","color-sage-40"],"modes":{"light":{"type":"string","value":"var(--color-sage-30)"},"dark":{"type":"string","value":"var(--color-sage-40)"}}},{"key":"moss","value":"var(--color-moss-50)","dependencies":["color-moss-50","color-moss-40"],"modes":{"light":{"type":"string","value":"var(--color-moss-50)"},"dark":{"type":"string","value":"var(--color-moss-40)"}}},{"key":"petrol","value":"var(--color-petrol-60)","dependencies":["color-petrol-60","color-petrol-50"],"modes":{"light":{"type":"string","value":"var(--color-petrol-60)"},"dark":{"type":"string","value":"var(--color-petrol-50)"}}},{"key":"copper","value":"var(--color-copper-50)","dependencies":["color-copper-50","color-copper-40"],"modes":{"light":{"type":"string","value":"var(--color-copper-50)"},"dark":{"type":"string","value":"var(--color-copper-40)"}}},{"key":"terracotta","value":"var(--color-terracotta-50)","dependencies":["color-terracotta-50","color-terracotta-40"],"modes":{"light":{"type":"string","value":"var(--color-terracotta-50)"},"dark":{"type":"string","value":"var(--color-terracotta-40)"}}},{"key":"white","value":"oklch(100% 0 none)","inline":true},{"key":"black","value":"oklch(0% 0 none)","inline":true},{"key":"current","value":"currentColor","inline":true}],"color-surface":[{"key":"base","value":"var(--color-neutral-0)","dependencies":["color-neutral-0","color-gray-95"],"modes":{"light":{"type":"string","value":"var(--color-neutral-0)"},"dark":{"type":"string","value":"var(--color-gray-95)"}}},{"key":"muted","value":"var(--color-neutral-5)","dependencies":["color-neutral-5","color-gray-100"],"modes":{"light":{"type":"string","value":"var(--color-neutral-5)"},"dark":{"type":"string","value":"var(--color-gray-100)"}}},{"key":"raised","value":"var(--color-white)","dependencies":["color-white","color-gray-90"],"modes":{"light":{"type":"string","value":"var(--color-white)"},"dark":{"type":"string","value":"var(--color-gray-90)"}}},{"key":"overlay","value":"var(--color-white)","dependencies":["color-white","color-gray-80"],"modes":{"light":{"type":"string","value":"var(--color-white)"},"dark":{"type":"string","value":"var(--color-gray-80)"}}},{"key":"inverse","value":"var(--color-black)","dependencies":["color-black","color-white"],"modes":{"light":{"type":"string","value":"var(--color-black)"},"dark":{"type":"string","value":"var(--color-white)"}}}],"color-line":[{"key":"base","value":"oklch(0% 0 none / .12)","modes":{"light":{"type":"string","value":"oklch(0% 0 none / .12)"},"dark":{"type":"string","value":"oklch(100% 0 none / .12)"}}},{"key":"strong","value":"oklch(0% 0 none / .18)","modes":{"light":{"type":"string","value":"oklch(0% 0 none / .18)"},"dark":{"type":"string","value":"oklch(100% 0 none / .18)"}}},{"key":"muted","value":"oklch(0% 0 none / .09)","modes":{"light":{"type":"string","value":"oklch(0% 0 none / .09)"},"dark":{"type":"string","value":"oklch(100% 0 none / .09)"}}},{"key":"subtle","value":"oklch(0% 0 none / .06)","modes":{"light":{"type":"string","value":"oklch(0% 0 none / .06)"},"dark":{"type":"string","value":"oklch(100% 0 none / .06)"}}}],"color-text":[{"key":"body","value":"var(--color-neutral-70)","dependencies":["color-neutral-70","color-gray-30"],"modes":{"light":{"type":"string","value":"var(--color-neutral-70)"},"dark":{"type":"string","value":"var(--color-gray-30)"}}},{"key":"strong","value":"var(--color-neutral-100)","dependencies":["color-neutral-100","color-white"],"modes":{"light":{"type":"string","value":"var(--color-neutral-100)"},"dark":{"type":"string","value":"var(--color-white)"}}},{"key":"muted","value":"var(--color-neutral-60)","dependencies":["color-neutral-60","color-gray-40"],"modes":{"light":{"type":"string","value":"var(--color-neutral-60)"},"dark":{"type":"string","value":"var(--color-gray-40)"}}},{"key":"subtle","value":"var(--color-neutral-50)","dependencies":["color-neutral-50","color-gray-50"],"modes":{"light":{"type":"string","value":"var(--color-neutral-50)"},"dark":{"type":"string","value":"var(--color-gray-50)"}}},{"key":"disabled","value":"var(--color-neutral-40)","dependencies":["color-neutral-40","color-gray-60"],"modes":{"light":{"type":"string","value":"var(--color-neutral-40)"},"dark":{"type":"string","value":"var(--color-gray-60)"}}},{"key":"placeholder","value":"var(--color-neutral-40)","dependencies":["color-neutral-40","color-gray-60"],"modes":{"light":{"type":"string","value":"var(--color-neutral-40)"},"dark":{"type":"string","value":"var(--color-gray-60)"}}},{"key":"inverse","value":"var(--color-white)","dependencies":["color-white","color-black"],"modes":{"light":{"type":"string","value":"var(--color-white)"},"dark":{"type":"string","value":"var(--color-black)"}}},{"key":"link","value":"var(--color-blue-60)","dependencies":["color-blue-60","color-blue-30"],"modes":{"light":{"type":"string","value":"var(--color-blue-60)"},"dark":{"type":"string","value":"var(--color-blue-30)"}}},{"key":"link-hover","value":"var(--color-blue-70)","dependencies":["color-blue-70","color-blue-20"],"modes":{"light":{"type":"string","value":"var(--color-blue-70)"},"dark":{"type":"string","value":"var(--color-blue-20)"}}},{"key":"stone","value":"var(--color-stone-60)","dependencies":["color-stone-60","color-stone-30"],"modes":{"light":{"type":"string","value":"var(--color-stone-60)"},"dark":{"type":"string","value":"var(--color-stone-30)"}}},{"key":"gray","value":"var(--color-gray-60)","dependencies":["color-gray-60","color-gray-30"],"modes":{"light":{"type":"string","value":"var(--color-gray-60)"},"dark":{"type":"string","value":"var(--color-gray-30)"}}},{"key":"neutral","value":"var(--color-neutral-60)","dependencies":["color-neutral-60","color-neutral-30"],"modes":{"light":{"type":"string","value":"var(--color-neutral-60)"},"dark":{"type":"string","value":"var(--color-neutral-30)"}}},{"key":"slate","value":"var(--color-slate-60)","dependencies":["color-slate-60","color-slate-30"],"modes":{"light":{"type":"string","value":"var(--color-slate-60)"},"dark":{"type":"string","value":"var(--color-slate-30)"}}},{"key":"brown","value":"var(--color-brown-60)","dependencies":["color-brown-60","color-brown-30"],"modes":{"light":{"type":"string","value":"var(--color-brown-60)"},"dark":{"type":"string","value":"var(--color-brown-30)"}}},{"key":"orange","value":"var(--color-orange-60)","dependencies":["color-orange-60","color-orange-30"],"modes":{"light":{"type":"string","value":"var(--color-orange-60)"},"dark":{"type":"string","value":"var(--color-orange-30)"}}},{"key":"amber","value":"var(--color-amber-60)","dependencies":["color-amber-60","color-amber-40"],"modes":{"light":{"type":"string","value":"var(--color-amber-60)"},"dark":{"type":"string","value":"var(--color-amber-40)"}}},{"key":"yellow","value":"var(--color-yellow-70)","dependencies":["color-yellow-70","color-yellow-40"],"modes":{"light":{"type":"string","value":"var(--color-yellow-70)"},"dark":{"type":"string","value":"var(--color-yellow-40)"}}},{"key":"lime","value":"var(--color-lime-70)","dependencies":["color-lime-70","color-lime-40"],"modes":{"light":{"type":"string","value":"var(--color-lime-70)"},"dark":{"type":"string","value":"var(--color-lime-40)"}}},{"key":"green","value":"var(--color-green-70)","dependencies":["color-green-70","color-green-40"],"modes":{"light":{"type":"string","value":"var(--color-green-70)"},"dark":{"type":"string","value":"var(--color-green-40)"}}},{"key":"beryl","value":"var(--color-beryl-70)","dependencies":["color-beryl-70","color-beryl-40"],"modes":{"light":{"type":"string","value":"var(--color-beryl-70)"},"dark":{"type":"string","value":"var(--color-beryl-40)"}}},{"key":"teal","value":"var(--color-teal-70)","dependencies":["color-teal-70","color-teal-40"],"modes":{"light":{"type":"string","value":"var(--color-teal-70)"},"dark":{"type":"string","value":"var(--color-teal-40)"}}},{"key":"cyan","value":"var(--color-cyan-70)","dependencies":["color-cyan-70","color-cyan-40"],"modes":{"light":{"type":"string","value":"var(--color-cyan-70)"},"dark":{"type":"string","value":"var(--color-cyan-40)"}}},{"key":"sky","value":"var(--color-sky-70)","dependencies":["color-sky-70","color-sky-30"],"modes":{"light":{"type":"string","value":"var(--color-sky-70)"},"dark":{"type":"string","value":"var(--color-sky-30)"}}},{"key":"blue","value":"var(--color-blue-60)","dependencies":["color-blue-60","color-blue-30"],"modes":{"light":{"type":"string","value":"var(--color-blue-60)"},"dark":{"type":"string","value":"var(--color-blue-30)"}}},{"key":"indigo","value":"var(--color-indigo-60)","dependencies":["color-indigo-60","color-indigo-30"],"modes":{"light":{"type":"string","value":"var(--color-indigo-60)"},"dark":{"type":"string","value":"var(--color-indigo-30)"}}},{"key":"violet","value":"var(--color-violet-60)","dependencies":["color-violet-60","color-violet-30"],"modes":{"light":{"type":"string","value":"var(--color-violet-60)"},"dark":{"type":"string","value":"var(--color-violet-30)"}}},{"key":"purple","value":"var(--color-purple-60)","dependencies":["color-purple-60","color-purple-30"],"modes":{"light":{"type":"string","value":"var(--color-purple-60)"},"dark":{"type":"string","value":"var(--color-purple-30)"}}},{"key":"fuchsia","value":"var(--color-fuchsia-60)","dependencies":["color-fuchsia-60","color-fuchsia-30"],"modes":{"light":{"type":"string","value":"var(--color-fuchsia-60)"},"dark":{"type":"string","value":"var(--color-fuchsia-30)"}}},{"key":"pink","value":"var(--color-pink-60)","dependencies":["color-pink-60","color-pink-30"],"modes":{"light":{"type":"string","value":"var(--color-pink-60)"},"dark":{"type":"string","value":"var(--color-pink-30)"}}},{"key":"crimson","value":"var(--color-crimson-60)","dependencies":["color-crimson-60","color-crimson-30"],"modes":{"light":{"type":"string","value":"var(--color-crimson-60)"},"dark":{"type":"string","value":"var(--color-crimson-30)"}}},{"key":"red","value":"var(--color-red-60)","dependencies":["color-red-60","color-red-30"],"modes":{"light":{"type":"string","value":"var(--color-red-60)"},"dark":{"type":"string","value":"var(--color-red-30)"}}},{"key":"sand","value":"var(--color-sand-60)","dependencies":["color-sand-60","color-sand-30"],"modes":{"light":{"type":"string","value":"var(--color-sand-60)"},"dark":{"type":"string","value":"var(--color-sand-30)"}}},{"key":"taupe","value":"var(--color-taupe-60)","dependencies":["color-taupe-60","color-taupe-30"],"modes":{"light":{"type":"string","value":"var(--color-taupe-60)"},"dark":{"type":"string","value":"var(--color-taupe-30)"}}},{"key":"olive","value":"var(--color-olive-60)","dependencies":["color-olive-60","color-olive-30"],"modes":{"light":{"type":"string","value":"var(--color-olive-60)"},"dark":{"type":"string","value":"var(--color-olive-30)"}}},{"key":"sage","value":"var(--color-sage-60)","dependencies":["color-sage-60","color-sage-30"],"modes":{"light":{"type":"string","value":"var(--color-sage-60)"},"dark":{"type":"string","value":"var(--color-sage-30)"}}},{"key":"moss","value":"var(--color-moss-60)","dependencies":["color-moss-60","color-moss-30"],"modes":{"light":{"type":"string","value":"var(--color-moss-60)"},"dark":{"type":"string","value":"var(--color-moss-30)"}}},{"key":"petrol","value":"var(--color-petrol-60)","dependencies":["color-petrol-60","color-petrol-30"],"modes":{"light":{"type":"string","value":"var(--color-petrol-60)"},"dark":{"type":"string","value":"var(--color-petrol-30)"}}},{"key":"copper","value":"var(--color-copper-60)","dependencies":["color-copper-60","color-copper-30"],"modes":{"light":{"type":"string","value":"var(--color-copper-60)"},"dark":{"type":"string","value":"var(--color-copper-30)"}}},{"key":"terracotta","value":"var(--color-terracotta-70)","dependencies":["color-terracotta-70","color-terracotta-30"],"modes":{"light":{"type":"string","value":"var(--color-terracotta-70)"},"dark":{"type":"string","value":"var(--color-terracotta-30)"}}}],"font-family":[{"key":"sans","value":"var(--font-sans, ui-sans-serif), system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"","dependencies":["font-sans"]},{"key":"mono","value":"var(--font-mono, ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace","dependencies":["font-mono"]},{"key":"serif","value":"var(--font-serif, ui-serif), Georgia, Cambria, \"Times New Roman\", Times, serif","dependencies":["font-serif"]}],"tracking":[{"key":"tightest","value":"-.072em"},{"key":"tighter","value":"-.04em"},{"key":"tight","value":"-.02em"},{"key":"normal","type":"number","value":0},{"key":"wide","value":".02em"},{"key":"wider","value":".04em"},{"key":"widest","value":".12em"}],"leading":[{"key":"xs","type":"number","value":1.2},{"key":"sm","type":"number","value":1.4},{"key":"md","type":"number","value":1.6},{"key":"lg","type":"number","value":1.8},{"key":"xl","type":"number","value":2}],"font-weight":[{"key":"thin","type":"number","value":100},{"key":"extralight","type":"number","value":200},{"key":"light","type":"number","value":300},{"key":"regular","type":"number","value":400},{"key":"medium","type":"number","value":500},{"key":"semibold","type":"number","value":600},{"key":"bold","type":"number","value":700},{"key":"extrabold","type":"number","value":800},{"key":"heavy","type":"number","value":900}],"font-size":[{"key":"3xs","type":"number","value":".5rem","numeric":{"value":0.5,"unit":"rem"}},{"key":"2xs","type":"number","value":".625rem","numeric":{"value":0.625,"unit":"rem"}},{"key":"xs","type":"number","value":".75rem","numeric":{"value":0.75,"unit":"rem"}},{"key":"sm","type":"number","value":".875rem","numeric":{"value":0.875,"unit":"rem"}},{"key":"md","type":"number","value":"1rem","numeric":{"value":1,"unit":"rem"}},{"key":"lg","type":"number","value":"1.125rem","numeric":{"value":1.125,"unit":"rem"}},{"key":"xl","type":"number","value":"1.25rem","numeric":{"value":1.25,"unit":"rem"}},{"key":"2xl","type":"number","value":"1.5rem","numeric":{"value":1.5,"unit":"rem"}},{"key":"3xl","type":"number","value":"2rem","numeric":{"value":2,"unit":"rem"}},{"key":"4xl","type":"number","value":"2.25rem","numeric":{"value":2.25,"unit":"rem"}},{"key":"5xl","type":"number","value":"2.5rem","numeric":{"value":2.5,"unit":"rem"}},{"key":"6xl","type":"number","value":"3rem","numeric":{"value":3,"unit":"rem"}},{"key":"7xl","type":"number","value":"3.75rem","numeric":{"value":3.75,"unit":"rem"}},{"key":"8xl","type":"number","value":"4.5rem","numeric":{"value":4.5,"unit":"rem"}},{"key":"9xl","type":"number","value":"6rem","numeric":{"value":6,"unit":"rem"}},{"key":"10xl","type":"number","value":"8rem","numeric":{"value":8,"unit":"rem"}}],"font-feature":[{"key":"tabular","value":"\"tnum\""}],"content":[{"key":"empty","value":"\"\""}],"radius":[{"key":"xs","type":"number","value":".125rem","numeric":{"value":0.125,"unit":"rem"}},{"key":"sm","type":"number","value":".25rem","numeric":{"value":0.25,"unit":"rem"}},{"key":"md","type":"number","value":".375rem","numeric":{"value":0.375,"unit":"rem"}},{"key":"lg","type":"number","value":".5rem","numeric":{"value":0.5,"unit":"rem"}},{"key":"xl","type":"number","value":".75rem","numeric":{"value":0.75,"unit":"rem"}},{"key":"2xl","type":"number","value":"1rem","numeric":{"value":1,"unit":"rem"}},{"key":"3xl","type":"number","value":"1.5rem","numeric":{"value":1.5,"unit":"rem"}},{"key":"4xl","type":"number","value":"2rem","numeric":{"value":2,"unit":"rem"}}],"spacing":[{"key":"4xs","type":"number","value":".125rem","numeric":{"value":0.125,"unit":"rem"}},{"key":"3xs","type":"number","value":".25rem","numeric":{"value":0.25,"unit":"rem"}},{"key":"2xs","type":"number","value":".375rem","numeric":{"value":0.375,"unit":"rem"}},{"key":"xs","type":"number","value":".5rem","numeric":{"value":0.5,"unit":"rem"}},{"key":"sm","type":"number","value":".75rem","numeric":{"value":0.75,"unit":"rem"}},{"key":"md","type":"number","value":"1rem","numeric":{"value":1,"unit":"rem"}},{"key":"lg","type":"number","value":"1.5rem","numeric":{"value":1.5,"unit":"rem"}},{"key":"xl","type":"number","value":"2rem","numeric":{"value":2,"unit":"rem"}},{"key":"2xl","type":"number","value":"3rem","numeric":{"value":3,"unit":"rem"}},{"key":"3xl","type":"number","value":"4rem","numeric":{"value":4,"unit":"rem"}},{"key":"4xl","type":"number","value":"6rem","numeric":{"value":6,"unit":"rem"}},{"key":"5xl","type":"number","value":"8rem","numeric":{"value":8,"unit":"rem"}}],"breakpoint":[{"key":"4xs","type":"number","value":"22.5rem","numeric":{"value":22.5,"unit":"rem"}},{"key":"3xs","type":"number","value":"30rem","numeric":{"value":30,"unit":"rem"}},{"key":"2xs","type":"number","value":"37.5rem","numeric":{"value":37.5,"unit":"rem"}},{"key":"xs","type":"number","value":"48rem","numeric":{"value":48,"unit":"rem"}},{"key":"sm","type":"number","value":"52.125rem","numeric":{"value":52.125,"unit":"rem"}},{"key":"md","type":"number","value":"64rem","numeric":{"value":64,"unit":"rem"}},{"key":"lg","type":"number","value":"80rem","numeric":{"value":80,"unit":"rem"}},{"key":"xl","type":"number","value":"90rem","numeric":{"value":90,"unit":"rem"}},{"key":"2xl","type":"number","value":"100rem","numeric":{"value":100,"unit":"rem"}},{"key":"3xl","type":"number","value":"120rem","numeric":{"value":120,"unit":"rem"}},{"key":"4xl","type":"number","value":"160rem","numeric":{"value":160,"unit":"rem"}}],"container":[{"key":"3xs","type":"number","value":"16rem","numeric":{"value":16,"unit":"rem"}},{"key":"2xs","type":"number","value":"18rem","numeric":{"value":18,"unit":"rem"}},{"key":"xs","type":"number","value":"20rem","numeric":{"value":20,"unit":"rem"}},{"key":"sm","type":"number","value":"24rem","numeric":{"value":24,"unit":"rem"}},{"key":"md","type":"number","value":"28rem","numeric":{"value":28,"unit":"rem"}},{"key":"lg","type":"number","value":"32rem","numeric":{"value":32,"unit":"rem"}},{"key":"xl","type":"number","value":"36rem","numeric":{"value":36,"unit":"rem"}},{"key":"2xl","type":"number","value":"42rem","numeric":{"value":42,"unit":"rem"}},{"key":"3xl","type":"number","value":"48rem","numeric":{"value":48,"unit":"rem"}},{"key":"4xl","type":"number","value":"56rem","numeric":{"value":56,"unit":"rem"}},{"key":"5xl","type":"number","value":"64rem","numeric":{"value":64,"unit":"rem"}},{"key":"6xl","type":"number","value":"72rem","numeric":{"value":72,"unit":"rem"}},{"key":"7xl","type":"number","value":"80rem","numeric":{"value":80,"unit":"rem"}},{"key":"8xl","type":"number","value":"90rem","numeric":{"value":90,"unit":"rem"}}],"duration":[{"key":"fastest","value":"75ms"},{"key":"faster","value":".1s"},{"key":"fast","value":".15s"},{"key":"normal","value":".2s"},{"key":"slow","value":".3s"},{"key":"slower","value":".5s"},{"key":"slowest","value":".8s"}],"easing":[{"key":"smooth","value":"cubic-bezier(.4, 0, .2, 1)"},{"key":"soft","value":"cubic-bezier(.33, 1, .68, 1)"},{"key":"crisp","value":"cubic-bezier(.16, 1, .3, 1)"},{"key":"snap","value":"cubic-bezier(.2, 0, 0, 1)"},{"key":"accelerate","value":"cubic-bezier(.4, 0, 1, 1)"},{"key":"decelerate","value":"cubic-bezier(0, 0, .2, 1)"},{"key":"overshoot","value":"cubic-bezier(.34, 1.56, .64, 1)"},{"key":"rewind","value":"cubic-bezier(.36, 0, .66, -.56)"},{"key":"spring","value":"cubic-bezier(.68, -.6, .32, 1.6)"}],"animate":[{"key":"fade","value":"fade 1s infinite"},{"key":"flash","value":"flash 1s infinite"},{"key":"float","value":"float 3s ease-in-out infinite"},{"key":"heart","value":"heart 1s infinite"},{"key":"jump","value":"jump 1s infinite"},{"key":"ping","value":"ping 1s infinite"},{"key":"pulse","value":"pulse 1s infinite"},{"key":"rotate","value":"rotate 1s linear infinite"},{"key":"shake","value":"shake 1s infinite"},{"key":"zoom","value":"zoom 1s infinite"}],"shadow":[{"key":"xs","value":"0 0 0 1px oklch(0% 0 none / .04), 0 1px 2px -1px oklch(0% 0 none / .08)","modes":{"light":{"type":"string","value":"0 0 0 1px oklch(0% 0 none / .04), 0 1px 2px -1px oklch(0% 0 none / .08)"},"dark":{"type":"string","value":"0 0 0 1px oklch(100% 0 none / .04), 0 1px 2px -1px oklch(0% 0 none / .3)"}}},{"key":"sm","value":"0 0 0 1px oklch(0% 0 none / .04), 0 1px 2px -1px oklch(0% 0 none / .06), 0 3px 6px -2px oklch(0% 0 none / .08)","modes":{"light":{"type":"string","value":"0 0 0 1px oklch(0% 0 none / .04), 0 1px 2px -1px oklch(0% 0 none / .06), 0 3px 6px -2px oklch(0% 0 none / .08)"},"dark":{"type":"string","value":"0 0 0 1px oklch(100% 0 none / .05), 0 1px 2px -1px oklch(0% 0 none / .34), 0 3px 6px -2px oklch(0% 0 none / .26)"}}},{"key":"md","value":"0 0 0 1px oklch(0% 0 none / .05), 0 2px 4px -2px oklch(0% 0 none / .06), 0 8px 16px -4px oklch(0% 0 none / .1)","modes":{"light":{"type":"string","value":"0 0 0 1px oklch(0% 0 none / .05), 0 2px 4px -2px oklch(0% 0 none / .06), 0 8px 16px -4px oklch(0% 0 none / .1)"},"dark":{"type":"string","value":"0 0 0 1px oklch(100% 0 none / .06), 0 2px 4px -2px oklch(0% 0 none / .38), 0 8px 16px -4px oklch(0% 0 none / .3)"}}},{"key":"lg","value":"0 0 0 1px oklch(0% 0 none / .05), 0 4px 8px -4px oklch(0% 0 none / .08), 0 16px 32px -8px oklch(0% 0 none / .12)","modes":{"light":{"type":"string","value":"0 0 0 1px oklch(0% 0 none / .05), 0 4px 8px -4px oklch(0% 0 none / .08), 0 16px 32px -8px oklch(0% 0 none / .12)"},"dark":{"type":"string","value":"0 0 0 1px oklch(100% 0 none / .06), 0 4px 8px -4px oklch(0% 0 none / .42), 0 16px 32px -8px oklch(0% 0 none / .34)"}}},{"key":"xl","value":"0 0 0 1px oklch(0% 0 none / .06), 0 8px 16px -6px oklch(0% 0 none / .1), 0 24px 48px -12px oklch(0% 0 none / .14)","modes":{"light":{"type":"string","value":"0 0 0 1px oklch(0% 0 none / .06), 0 8px 16px -6px oklch(0% 0 none / .1), 0 24px 48px -12px oklch(0% 0 none / .14)"},"dark":{"type":"string","value":"0 0 0 1px oklch(100% 0 none / .07), 0 8px 16px -6px oklch(0% 0 none / .46), 0 24px 48px -12px oklch(0% 0 none / .38)"}}},{"key":"2xl","value":"0 0 0 1px oklch(0% 0 none / .06), 0 12px 24px -8px oklch(0% 0 none / .12), 0 32px 64px -16px oklch(0% 0 none / .18)","modes":{"light":{"type":"string","value":"0 0 0 1px oklch(0% 0 none / .06), 0 12px 24px -8px oklch(0% 0 none / .12), 0 32px 64px -16px oklch(0% 0 none / .18)"},"dark":{"type":"string","value":"0 0 0 1px oklch(100% 0 none / .07), 0 12px 24px -8px oklch(0% 0 none / .5), 0 32px 64px -16px oklch(0% 0 none / .44)"}}}],"":[{"key":"full","value":"100%","inline":true},{"key":"fit","value":"fit-content","inline":true},{"key":"max","value":"max-content","inline":true},{"key":"min","value":"min-content","inline":true}],"order":[{"key":"first","type":"number","value":-999999,"inline":true},{"key":"last","type":"number","value":999999,"inline":true}]},"animations":{"fade":{"0%":{"opacity":"0"},"to":{"opacity":"1"}},"flash":{"0%":{"opacity":"1"},"50%":{"opacity":"1"},"to":{"opacity":"1"},"25%":{"opacity":"0"},"75%":{"opacity":"0"}},"float":{"0%":{"transform":"none"},"50%":{"transform":"translateY(-1.25rem)"},"to":{"transform":"none"}},"heart":{"0%":{"transform":"scale(1)"},"14%":{"transform":"scale(1.3)"},"28%":{"transform":"scale(1)"},"42%":{"transform":"scale(1.3)"},"70%":{"transform":"scale(1)"}},"jump":{"0%":{"transform":"translateY(-25%)","animation-timing-function":"cubic-bezier(.8, 0, 1, 1)"},"to":{"transform":"translateY(-25%)","animation-timing-function":"cubic-bezier(.8, 0, 1, 1)"},"50%":{"transform":"translateY(0)","animation-timing-function":"cubic-bezier(0, 0, .2, 1)"}},"ping":{"75%":{"transform":"scale(2)","opacity":"0"},"to":{"transform":"scale(2)","opacity":"0"}},"pulse":{"0%":{"transform":"none"},"50%":{"transform":"scale(1.05)"},"to":{"transform":"none"}},"rotate":{"0%":{"transform":"rotate(-360deg)"},"to":{"transform":"none"}},"shake":{"0%":{"transform":"none"},"6.5%":{"transform":"translateX(-6px) rotateY(-9deg)"},"18.5%":{"transform":"translateX(5px) rotateY(7deg)"},"31.5%":{"transform":"translateX(-3px) rotateY(-5deg)"},"43.5%":{"transform":"translateX(2px) rotateY(3deg)"},"50%":{"transform":"none"}},"zoom":{"0%":{"transform":"scale(0)"},"to":{"transform":"none"}}},"variants":[{"token":"@all","branches":[{"conditions":["@media all"],"conditionNodes":[{"id":"media","nodes":[{"type":"string","value":"all"}]}]}]},{"token":"@print","branches":[{"conditions":["@media print"],"conditionNodes":[{"id":"media","nodes":[{"type":"string","value":"print"}]}]}]},{"token":"@screen","branches":[{"conditions":["@media screen"],"conditionNodes":[{"id":"media","nodes":[{"type":"string","value":"screen"}]}]}]},{"token":"@speech","branches":[{"conditions":["@media speech"],"conditionNodes":[{"id":"media","nodes":[{"type":"string","value":"speech"}]}]}]},{"token":"@landscape","branches":[{"conditions":["@media (orientation:landscape)"],"conditionNodes":[{"id":"media","nodes":[{"type":"string","name":"orientation","value":"landscape"}]}]}]},{"token":"@portrait","branches":[{"conditions":["@media (orientation:portrait)"],"conditionNodes":[{"id":"media","nodes":[{"type":"string","name":"orientation","value":"portrait"}]}]}]},{"token":"@motion","branches":[{"conditions":["@media (prefers-reduced-motion:no-preference)"],"conditionNodes":[{"id":"media","nodes":[{"type":"string","name":"prefers-reduced-motion","value":"no-preference"}]}]}]},{"token":"@reduce-motion","branches":[{"conditions":["@media (prefers-reduced-motion:reduce)"],"conditionNodes":[{"id":"media","nodes":[{"type":"string","name":"prefers-reduced-motion","value":"reduce"}]}]}]},{"token":"@base","branches":[{"layer":"base"}]},{"token":"@default","branches":[{"layer":"defaults"}]},{"token":"@component","branches":[{"layer":"components"}]},{"token":"@utility","branches":[{"layer":"utilities"}]},{"token":"@starting-style","branches":[{"conditions":["@starting-style"],"conditionNodes":[{"id":"starting-style","nodes":[]}]}]}],"conditions":{"4xs":{"id":"media","nodes":[{"type":"number","value":22.5,"unit":"rem"}]},"3xs":{"id":"media","nodes":[{"type":"number","value":30,"unit":"rem"}]},"2xs":{"id":"media","nodes":[{"type":"number","value":37.5,"unit":"rem"}]},"xs":{"id":"media","nodes":[{"type":"number","value":48,"unit":"rem"}]},"sm":{"id":"media","nodes":[{"type":"number","value":52.125,"unit":"rem"}]},"md":{"id":"media","nodes":[{"type":"number","value":64,"unit":"rem"}]},"lg":{"id":"media","nodes":[{"type":"number","value":80,"unit":"rem"}]},"xl":{"id":"media","nodes":[{"type":"number","value":90,"unit":"rem"}]},"2xl":{"id":"media","nodes":[{"type":"number","value":100,"unit":"rem"}]},"3xl":{"id":"media","nodes":[{"type":"number","value":120,"unit":"rem"}]},"4xl":{"id":"media","nodes":[{"type":"number","value":160,"unit":"rem"}]},"all":{"id":"media","nodes":[{"type":"string","value":"all"}]},"print":{"id":"media","nodes":[{"type":"string","value":"print"}]},"screen":{"id":"media","nodes":[{"type":"string","value":"screen"}]},"speech":{"id":"media","nodes":[{"type":"string","value":"speech"}]},"landscape":{"id":"media","nodes":[{"type":"string","name":"orientation","value":"landscape"}]},"portrait":{"id":"media","nodes":[{"type":"string","name":"orientation","value":"portrait"}]},"motion":{"id":"media","nodes":[{"type":"string","name":"prefers-reduced-motion","value":"no-preference"}]},"reduce-motion":{"id":"media","nodes":[{"type":"string","name":"prefers-reduced-motion","value":"reduce"}]},"base":{"id":"layer","nodes":[{"type":"string","value":"base"}]},"default":{"id":"layer","nodes":[{"type":"string","value":"defaults"}]},"component":{"id":"layer","nodes":[{"type":"string","value":"components"}]},"utility":{"id":"layer","nodes":[{"type":"string","value":"utilities"}]},"starting-style":{"id":"starting-style","nodes":[]}},"breakpointConditions":{"4xs":{"id":"media","nodes":[{"type":"number","value":22.5,"unit":"rem"}]},"3xs":{"id":"media","nodes":[{"type":"number","value":30,"unit":"rem"}]},"2xs":{"id":"media","nodes":[{"type":"number","value":37.5,"unit":"rem"}]},"xs":{"id":"media","nodes":[{"type":"number","value":48,"unit":"rem"}]},"sm":{"id":"media","nodes":[{"type":"number","value":52.125,"unit":"rem"}]},"md":{"id":"media","nodes":[{"type":"number","value":64,"unit":"rem"}]},"lg":{"id":"media","nodes":[{"type":"number","value":80,"unit":"rem"}]},"xl":{"id":"media","nodes":[{"type":"number","value":90,"unit":"rem"}]},"2xl":{"id":"media","nodes":[{"type":"number","value":100,"unit":"rem"}]},"3xl":{"id":"media","nodes":[{"type":"number","value":120,"unit":"rem"}]},"4xl":{"id":"media","nodes":[{"type":"number","value":160,"unit":"rem"}]}},"containerConditions":{"3xs":{"id":"container","nodes":[{"type":"number","value":16,"unit":"rem"}]},"2xs":{"id":"container","nodes":[{"type":"number","value":18,"unit":"rem"}]},"xs":{"id":"container","nodes":[{"type":"number","value":20,"unit":"rem"}]},"sm":{"id":"container","nodes":[{"type":"number","value":24,"unit":"rem"}]},"md":{"id":"container","nodes":[{"type":"number","value":28,"unit":"rem"}]},"lg":{"id":"container","nodes":[{"type":"number","value":32,"unit":"rem"}]},"xl":{"id":"container","nodes":[{"type":"number","value":36,"unit":"rem"}]},"2xl":{"id":"container","nodes":[{"type":"number","value":42,"unit":"rem"}]},"3xl":{"id":"container","nodes":[{"type":"number","value":48,"unit":"rem"}]},"4xl":{"id":"container","nodes":[{"type":"number","value":56,"unit":"rem"}]},"5xl":{"id":"container","nodes":[{"type":"number","value":64,"unit":"rem"}]},"6xl":{"id":"container","nodes":[{"type":"number","value":72,"unit":"rem"}]},"7xl":{"id":"container","nodes":[{"type":"number","value":80,"unit":"rem"}]},"8xl":{"id":"container","nodes":[{"type":"number","value":90,"unit":"rem"}]}},"utilities":[{"id":".abs","name":"abs","type":-2,"emit":{"type":"static","rules":[{"declarations":{"position":"absolute"}}]},"matchers":[{"type":"static","name":"abs"}]},{"id":".bg-clip-border","name":"bg-clip-border","type":-2,"emit":{"type":"static","rules":[{"declarations":{"background-clip":"border-box"}}]},"matchers":[{"type":"static","name":"bg-clip-border"}]},{"id":".bg-clip-content","name":"bg-clip-content","type":-2,"emit":{"type":"static","rules":[{"declarations":{"background-clip":"content-box"}}]},"matchers":[{"type":"static","name":"bg-clip-content"}]},{"id":".bg-clip-padding","name":"bg-clip-padding","type":-2,"emit":{"type":"static","rules":[{"declarations":{"background-clip":"padding-box"}}]},"matchers":[{"type":"static","name":"bg-clip-padding"}]},{"id":".bg-clip-text","name":"bg-clip-text","type":-2,"emit":{"type":"static","rules":[{"declarations":{"background-clip":"text"}}]},"matchers":[{"type":"static","name":"bg-clip-text"}]},{"id":"bg-origin-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"background-origin":null}}]},"matchers":[{"type":"pattern","prefix":"bg-origin-","values":["border","content","padding"],"valueMap":{"border":"border-box","content":"content-box","padding":"padding-box"}}]},{"id":".block","name":"block","type":-2,"emit":{"type":"static","rules":[{"declarations":{"display":"block"}}]},"matchers":[{"type":"static","name":"block"}]},{"id":".bottom","name":"bottom","type":-2,"emit":{"type":"static","rules":[{"declarations":{"bottom":"0"}}]},"matchers":[{"type":"static","name":"bottom"}]},{"id":"box-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"box-sizing":null}}]},"matchers":[{"type":"pattern","prefix":"box-","values":["border","content"],"valueMap":{"border":"border-box","content":"content-box"}}]},{"id":".break-spaces","name":"break-spaces","type":-2,"emit":{"type":"static","rules":[{"declarations":{"white-space":"break-spaces"}}]},"matchers":[{"type":"static","name":"break-spaces"}]},{"id":".break-word","name":"break-word","type":-2,"emit":{"type":"static","rules":[{"declarations":{"word-break":"break-word"}}]},"matchers":[{"type":"static","name":"break-word"}]},{"id":".capitalize","name":"capitalize","type":-2,"emit":{"type":"static","rules":[{"declarations":{"text-transform":"capitalize"}}]},"matchers":[{"type":"static","name":"capitalize"}]},{"id":".center","name":"center","type":-2,"emit":{"type":"static","rules":[{"declarations":{"left":"0","right":"0","margin-left":"auto","margin-right":"auto"}}]},"matchers":[{"type":"static","name":"center"}]},{"id":".clip-border","name":"clip-border","type":-2,"emit":{"type":"static","rules":[{"declarations":{"clip-path":"border-box"}}]},"matchers":[{"type":"static","name":"clip-border"}]},{"id":".clip-content","name":"clip-content","type":-2,"emit":{"type":"static","rules":[{"declarations":{"clip-path":"content-box"}}]},"matchers":[{"type":"static","name":"clip-content"}]},{"id":".clip-fill","name":"clip-fill","type":-2,"emit":{"type":"static","rules":[{"declarations":{"clip-path":"fill-box"}}]},"matchers":[{"type":"static","name":"clip-fill"}]},{"id":".clip-margin","name":"clip-margin","type":-2,"emit":{"type":"static","rules":[{"declarations":{"clip-path":"margin-box"}}]},"matchers":[{"type":"static","name":"clip-margin"}]},{"id":".clip-none","name":"clip-none","type":-2,"emit":{"type":"static","rules":[{"declarations":{"clip-path":"none"}}]},"matchers":[{"type":"static","name":"clip-none"}]},{"id":".clip-padding","name":"clip-padding","type":-2,"emit":{"type":"static","rules":[{"declarations":{"clip-path":"padding-box"}}]},"matchers":[{"type":"static","name":"clip-padding"}]},{"id":".clip-stroke","name":"clip-stroke","type":-2,"emit":{"type":"static","rules":[{"declarations":{"clip-path":"stroke-box"}}]},"matchers":[{"type":"static","name":"clip-stroke"}]},{"id":".clip-view","name":"clip-view","type":-2,"emit":{"type":"static","rules":[{"declarations":{"clip-path":"view-box"}}]},"matchers":[{"type":"static","name":"clip-view"}]},{"id":".container","name":"container","type":-2,"emit":{"type":"static","rules":[{"declarations":{"container-type":"inline-size"}}]},"matchers":[{"type":"static","name":"container"}]},{"id":"content-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"align-content":null}}]},"matchers":[{"type":"pattern","prefix":"content-","values":["around","between","evenly"],"valueMap":{"around":"space-around","between":"space-between","evenly":"space-evenly"}}]},{"id":"content-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"align-content":null}}]},"matchers":[{"type":"pattern","prefix":"content-","values":["baseline","center","end","flex-end","flex-start","normal","start","stretch"]}]},{"id":".contents","name":"contents","type":-2,"emit":{"type":"static","rules":[{"declarations":{"display":"contents"}}]},"matchers":[{"type":"static","name":"contents"}]},{"id":".decoration-from-font","name":"decoration-from-font","type":-2,"emit":{"type":"static","rules":[{"declarations":{"text-decoration-thickness":"from-font"}}]},"matchers":[{"type":"static","name":"decoration-from-font"}]},{"id":".diagonal-fractions","name":"diagonal-fractions","type":-2,"emit":{"type":"static","rules":[{"declarations":{"font-variant-numeric":"diagonal-fractions"}}]},"matchers":[{"type":"static","name":"diagonal-fractions"}]},{"id":".fit","name":"fit","type":-2,"emit":{"type":"static","rules":[{"declarations":{"width":"fit-content","height":"fit-content"}}]},"matchers":[{"type":"static","name":"fit"}]},{"id":".fixed","name":"fixed","type":-2,"emit":{"type":"static","rules":[{"declarations":{"position":"fixed"}}]},"matchers":[{"type":"static","name":"fixed"}]},{"id":".flex","name":"flex","type":-2,"emit":{"type":"static","rules":[{"declarations":{"display":"flex"}}]},"matchers":[{"type":"static","name":"flex"}]},{"id":".flex-col","name":"flex-col","type":-2,"emit":{"type":"static","rules":[{"declarations":{"flex-direction":"column"}}]},"matchers":[{"type":"static","name":"flex-col"}]},{"id":".flex-col-reverse","name":"flex-col-reverse","type":-2,"emit":{"type":"static","rules":[{"declarations":{"flex-direction":"column-reverse"}}]},"matchers":[{"type":"static","name":"flex-col-reverse"}]},{"id":".flex-row","name":"flex-row","type":-2,"emit":{"type":"static","rules":[{"declarations":{"flex-direction":"row"}}]},"matchers":[{"type":"static","name":"flex-row"}]},{"id":".flex-row-reverse","name":"flex-row-reverse","type":-2,"emit":{"type":"static","rules":[{"declarations":{"flex-direction":"row-reverse"}}]},"matchers":[{"type":"static","name":"flex-row-reverse"}]},{"id":".flow-root","name":"flow-root","type":-2,"emit":{"type":"static","rules":[{"declarations":{"display":"flow-root"}}]},"matchers":[{"type":"static","name":"flow-root"}]},{"id":".font-antialiased","name":"font-antialiased","type":-2,"emit":{"type":"static","rules":[{"declarations":{"-webkit-font-smoothing":"antialiased","-moz-osx-font-smoothing":"grayscale"}}]},"matchers":[{"type":"static","name":"font-antialiased"}]},{"id":".font-subpixel-antialiased","name":"font-subpixel-antialiased","type":-2,"emit":{"type":"static","rules":[{"declarations":{"-webkit-font-smoothing":"auto","-moz-osx-font-smoothing":"auto"}}]},"matchers":[{"type":"static","name":"font-subpixel-antialiased"}]},{"id":".font-bolder","name":"font-bolder","type":-2,"emit":{"type":"static","rules":[{"declarations":{"font-weight":"bolder"}}]},"matchers":[{"type":"static","name":"font-bolder"}]},{"id":".full","name":"full","type":-2,"emit":{"type":"static","rules":[{"declarations":{"width":"100%","height":"100%"}}]},"matchers":[{"type":"static","name":"full"}]},{"id":".text-gradient","name":"text-gradient","type":-2,"emit":{"type":"static","rules":[{"declarations":{"-webkit-text-fill-color":"transparent","background-clip":"text"}}]},"matchers":[{"type":"static","name":"text-gradient"}]},{"id":".grid","name":"grid","type":-2,"emit":{"type":"static","rules":[{"declarations":{"display":"grid"}}]},"matchers":[{"type":"static","name":"grid"}]},{"id":".hidden","name":"hidden","type":-2,"emit":{"type":"static","rules":[{"declarations":{"display":"none"}}]},"matchers":[{"type":"static","name":"hidden"}]},{"id":".inline","name":"inline","type":-2,"emit":{"type":"static","rules":[{"declarations":{"display":"inline"}}]},"matchers":[{"type":"static","name":"inline"}]},{"id":".inline-block","name":"inline-block","type":-2,"emit":{"type":"static","rules":[{"declarations":{"display":"inline-block"}}]},"matchers":[{"type":"static","name":"inline-block"}]},{"id":".inline-flex","name":"inline-flex","type":-2,"emit":{"type":"static","rules":[{"declarations":{"display":"inline-flex"}}]},"matchers":[{"type":"static","name":"inline-flex"}]},{"id":".inline-grid","name":"inline-grid","type":-2,"emit":{"type":"static","rules":[{"declarations":{"display":"inline-grid"}}]},"matchers":[{"type":"static","name":"inline-grid"}]},{"id":".inline-table","name":"inline-table","type":-2,"emit":{"type":"static","rules":[{"declarations":{"display":"inline-table"}}]},"matchers":[{"type":"static","name":"inline-table"}]},{"id":".invisible","name":"invisible","type":-2,"emit":{"type":"static","rules":[{"declarations":{"visibility":"hidden"}}]},"matchers":[{"type":"static","name":"invisible"}]},{"id":".isolate","name":"isolate","type":-2,"emit":{"type":"static","rules":[{"declarations":{"isolation":"isolate"}}]},"matchers":[{"type":"static","name":"isolate"}]},{"id":".italic","name":"italic","type":-2,"emit":{"type":"static","rules":[{"declarations":{"font-style":"italic"}}]},"matchers":[{"type":"static","name":"italic"}]},{"id":"items-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"align-items":null}}]},"matchers":[{"type":"pattern","prefix":"items-","values":["baseline","center","end","flex-end","flex-start","normal","self-end","self-start","start","stretch"]}]},{"id":"justify-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"justify-content":null}}]},"matchers":[{"type":"pattern","prefix":"justify-","values":["around","between","evenly"],"valueMap":{"around":"space-around","between":"space-between","evenly":"space-evenly"}}]},{"id":"justify-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"justify-content":null}}]},"matchers":[{"type":"pattern","prefix":"justify-","values":["center","end","flex-end","flex-start","left","normal","right","start","stretch"]}]},{"id":".left","name":"left","type":-2,"emit":{"type":"static","rules":[{"declarations":{"left":"0"}}]},"matchers":[{"type":"static","name":"left"}]},{"id":".line-through","name":"line-through","type":-2,"emit":{"type":"static","rules":[{"declarations":{"text-decoration":"line-through"}}]},"matchers":[{"type":"static","name":"line-through"}]},{"id":".lining-nums","name":"lining-nums","type":-2,"emit":{"type":"static","rules":[{"declarations":{"font-variant-numeric":"lining-nums"}}]},"matchers":[{"type":"static","name":"lining-nums"}]},{"id":".list-item","name":"list-item","type":-2,"emit":{"type":"static","rules":[{"declarations":{"display":"list-item"}}]},"matchers":[{"type":"static","name":"list-item"}]},{"id":".lowercase","name":"lowercase","type":-2,"emit":{"type":"static","rules":[{"declarations":{"text-transform":"lowercase"}}]},"matchers":[{"type":"static","name":"lowercase"}]},{"id":".max-vh","name":"max-vh","type":-2,"emit":{"type":"static","rules":[{"declarations":{"max-height":"100vh"}}]},"matchers":[{"type":"static","name":"max-vh"}]},{"id":".max-vw","name":"max-vw","type":-2,"emit":{"type":"static","rules":[{"declarations":{"max-width":"100vw"}}]},"matchers":[{"type":"static","name":"max-vw"}]},{"id":".middle","name":"middle","type":-2,"emit":{"type":"static","rules":[{"declarations":{"top":"0","bottom":"0","margin-top":"auto","margin-bottom":"auto"}}]},"matchers":[{"type":"static","name":"middle"}]},{"id":".min-vh","name":"min-vh","type":-2,"emit":{"type":"static","rules":[{"declarations":{"min-height":"100vh"}}]},"matchers":[{"type":"static","name":"min-vh"}]},{"id":".min-vw","name":"min-vw","type":-2,"emit":{"type":"static","rules":[{"declarations":{"min-width":"100vw"}}]},"matchers":[{"type":"static","name":"min-vw"}]},{"id":".oblique","name":"oblique","type":-2,"emit":{"type":"static","rules":[{"declarations":{"font-style":"oblique"}}]},"matchers":[{"type":"static","name":"oblique"}]},{"id":".oldstyle-nums","name":"oldstyle-nums","type":-2,"emit":{"type":"static","rules":[{"declarations":{"font-variant-numeric":"oldstyle-nums"}}]},"matchers":[{"type":"static","name":"oldstyle-nums"}]},{"id":".ordinal","name":"ordinal","type":-2,"emit":{"type":"static","rules":[{"declarations":{"font-variant-numeric":"ordinal"}}]},"matchers":[{"type":"static","name":"ordinal"}]},{"id":".overline","name":"overline","type":-2,"emit":{"type":"static","rules":[{"declarations":{"text-decoration":"overline"}}]},"matchers":[{"type":"static","name":"overline"}]},{"id":".overflow","name":"overflow","type":-2,"emit":{"type":"static","rules":[{"declarations":{"overflow":"visible"}}]},"matchers":[{"type":"static","name":"overflow"}]},{"id":".proportional-nums","name":"proportional-nums","type":-2,"emit":{"type":"static","rules":[{"declarations":{"font-variant-numeric":"proportional-nums"}}]},"matchers":[{"type":"static","name":"proportional-nums"}]},{"id":".rel","name":"rel","type":-2,"emit":{"type":"static","rules":[{"declarations":{"position":"relative"}}]},"matchers":[{"type":"static","name":"rel"}]},{"id":".right","name":"right","type":-2,"emit":{"type":"static","rules":[{"declarations":{"right":"0"}}]},"matchers":[{"type":"static","name":"right"}]},{"id":".round","name":"round","type":-2,"emit":{"type":"static","rules":[{"declarations":{"border-radius":"50%","aspect-ratio":"1/1"}}]},"matchers":[{"type":"static","name":"round"}]},{"id":".rounded","name":"rounded","type":-2,"emit":{"type":"static","rules":[{"declarations":{"border-radius":"1e9em"}}]},"matchers":[{"type":"static","name":"rounded"}]},{"id":"self-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"align-self":null}}]},"matchers":[{"type":"pattern","prefix":"self-","values":["anchor-center","auto","baseline","center","end","flex-end","flex-start","normal","self-end","self-start","start","stretch"]}]},{"id":".shape-border","name":"shape-border","type":-2,"emit":{"type":"static","rules":[{"declarations":{"shape-outside":"border-box"}}]},"matchers":[{"type":"static","name":"shape-border"}]},{"id":".shape-content","name":"shape-content","type":-2,"emit":{"type":"static","rules":[{"declarations":{"shape-outside":"content-box"}}]},"matchers":[{"type":"static","name":"shape-content"}]},{"id":".shape-margin","name":"shape-margin","type":-2,"emit":{"type":"static","rules":[{"declarations":{"shape-outside":"margin-box"}}]},"matchers":[{"type":"static","name":"shape-margin"}]},{"id":".shape-none","name":"shape-none","type":-2,"emit":{"type":"static","rules":[{"declarations":{"shape-outside":"none"}}]},"matchers":[{"type":"static","name":"shape-none"}]},{"id":".shape-padding","name":"shape-padding","type":-2,"emit":{"type":"static","rules":[{"declarations":{"shape-outside":"padding-box"}}]},"matchers":[{"type":"static","name":"shape-padding"}]},{"id":".slashed-zero","name":"slashed-zero","type":-2,"emit":{"type":"static","rules":[{"declarations":{"font-variant-numeric":"slashed-zero"}}]},"matchers":[{"type":"static","name":"slashed-zero"}]},{"id":".stacked-fractions","name":"stacked-fractions","type":-2,"emit":{"type":"static","rules":[{"declarations":{"font-variant-numeric":"stacked-fractions"}}]},"matchers":[{"type":"static","name":"stacked-fractions"}]},{"id":".square","name":"square","type":-2,"emit":{"type":"static","rules":[{"declarations":{"aspect-ratio":"1/1"}}]},"matchers":[{"type":"static","name":"square"}]},{"id":".sr-only","name":"sr-only","type":-2,"emit":{"type":"static","rules":[{"declarations":{"position":"absolute","width":"1px","height":"1px","padding":"0","margin":"-1px","overflow":"hidden","clip":"rect(0, 0, 0, 0)","white-space":"nowrap","border-width":"0"}}]},"matchers":[{"type":"static","name":"sr-only"}]},{"id":".static","name":"static","type":-2,"emit":{"type":"static","rules":[{"declarations":{"position":"static"}}]},"matchers":[{"type":"static","name":"static"}]},{"id":".sticky","name":"sticky","type":-2,"emit":{"type":"static","rules":[{"declarations":{"position":"sticky"}}]},"matchers":[{"type":"static","name":"sticky"}]},{"id":".table","name":"table","type":-2,"emit":{"type":"static","rules":[{"declarations":{"display":"table"}}]},"matchers":[{"type":"static","name":"table"}]},{"id":".table-caption","name":"table-caption","type":-2,"emit":{"type":"static","rules":[{"declarations":{"display":"table-caption"}}]},"matchers":[{"type":"static","name":"table-caption"}]},{"id":".table-cell","name":"table-cell","type":-2,"emit":{"type":"static","rules":[{"declarations":{"display":"table-cell"}}]},"matchers":[{"type":"static","name":"table-cell"}]},{"id":".table-column","name":"table-column","type":-2,"emit":{"type":"static","rules":[{"declarations":{"display":"table-column"}}]},"matchers":[{"type":"static","name":"table-column"}]},{"id":".table-column-group","name":"table-column-group","type":-2,"emit":{"type":"static","rules":[{"declarations":{"display":"table-column-group"}}]},"matchers":[{"type":"static","name":"table-column-group"}]},{"id":".table-footer-group","name":"table-footer-group","type":-2,"emit":{"type":"static","rules":[{"declarations":{"display":"table-footer-group"}}]},"matchers":[{"type":"static","name":"table-footer-group"}]},{"id":".table-header-group","name":"table-header-group","type":-2,"emit":{"type":"static","rules":[{"declarations":{"display":"table-header-group"}}]},"matchers":[{"type":"static","name":"table-header-group"}]},{"id":".table-row","name":"table-row","type":-2,"emit":{"type":"static","rules":[{"declarations":{"display":"table-row"}}]},"matchers":[{"type":"static","name":"table-row"}]},{"id":".table-row-group","name":"table-row-group","type":-2,"emit":{"type":"static","rules":[{"declarations":{"display":"table-row-group"}}]},"matchers":[{"type":"static","name":"table-row-group"}]},{"id":".tabular-nums","name":"tabular-nums","type":-2,"emit":{"type":"static","rules":[{"declarations":{"font-variant-numeric":"tabular-nums"}}]},"matchers":[{"type":"static","name":"tabular-nums"}]},{"id":".top","name":"top","type":-2,"emit":{"type":"static","rules":[{"declarations":{"top":"0"}}]},"matchers":[{"type":"static","name":"top"}]},{"id":"transform-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"transform-box":null}}]},"matchers":[{"type":"pattern","prefix":"transform-","values":["border","content","fill","stroke","view"],"valueMap":{"border":"border-box","content":"content-box","fill":"fill-box","stroke":"stroke-box","view":"view-box"}}]},{"id":".untouchable","name":"untouchable","type":-2,"emit":{"type":"static","rules":[{"declarations":{"pointer-events":"none"}}]},"matchers":[{"type":"static","name":"untouchable"}]},{"id":".underline","name":"underline","type":-2,"emit":{"type":"static","rules":[{"declarations":{"text-decoration":"underline"}}]},"matchers":[{"type":"static","name":"underline"}]},{"id":".uppercase","name":"uppercase","type":-2,"emit":{"type":"static","rules":[{"declarations":{"text-transform":"uppercase"}}]},"matchers":[{"type":"static","name":"uppercase"}]},{"id":".vh","name":"vh","type":-2,"emit":{"type":"static","rules":[{"declarations":{"height":"100vh"}}]},"matchers":[{"type":"static","name":"vh"}]},{"id":".video","name":"video","type":-2,"emit":{"type":"static","rules":[{"declarations":{"aspect-ratio":"16/9"}}]},"matchers":[{"type":"static","name":"video"}]},{"id":".visible","name":"visible","type":-2,"emit":{"type":"static","rules":[{"declarations":{"visibility":"visible"}}]},"matchers":[{"type":"static","name":"visible"}]},{"id":".vw","name":"vw","type":-2,"emit":{"type":"static","rules":[{"declarations":{"width":"100vw"}}]},"matchers":[{"type":"static","name":"vw"}]},{"id":"wrap-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"overflow-wrap":null}}]},"matchers":[{"type":"pattern","prefix":"wrap-","values":["anywhere","break-word","normal"]}]},{"id":"animate-<~animate>","type":-1,"variableAliasRefs":["~animate"],"emit":{"type":"static","rules":[{"declarations":{"animation":null}}]},"matchers":[{"type":"token","prefix":"animate-"}]},{"id":"font-<~font-size>","type":0,"variableAliasRefs":["~font-size"],"emit":{"type":"static","rules":[{"declarations":{"font-size":null}}]},"matchers":[{"type":"token","prefix":"font-"}]},{"id":"font-<~font-family>","type":0,"variableAliasRefs":["~font-family"],"emit":{"type":"static","rules":[{"declarations":{"font-family":null}}]},"matchers":[{"type":"token","prefix":"font-"}]},{"id":"font-<~font-weight>","type":0,"variableAliasRefs":["~font-weight"],"emit":{"type":"static","rules":[{"declarations":{"font-weight":null}}]},"matchers":[{"type":"token","prefix":"font-"}]},{"id":"bg-<~color>","type":0,"variableAliasRefs":["~color"],"emit":{"type":"static","rules":[{"declarations":{"background-color":null}}]},"matchers":[{"type":"token","prefix":"bg-"}]},{"id":"surface-<~color-surface>","type":0,"variableAliasRefs":["~color-surface"],"emit":{"type":"static","rules":[{"declarations":{"background-color":null}}]},"matchers":[{"type":"token","prefix":"surface-"}]},{"id":"size-<~container>","type":-1,"variableAliasRefs":["~container"],"emit":{"type":"static","rules":[{"declarations":{"width":null,"height":null}}]},"matchers":[{"type":"token","prefix":"size-"}]},{"id":"size:<*>","type":-1,"emit":{"type":"static","rules":[{"declarations":{"width":null,"height":null}}]},"matchers":[{"type":"key","keys":["size"]}]},{"id":"min-size-<~container>","type":-1,"variableAliasRefs":["~container"],"emit":{"type":"static","rules":[{"declarations":{"min-width":null,"min-height":null}}]},"matchers":[{"type":"token","prefix":"min-size-"}]},{"id":"min-size:<*>","type":-1,"emit":{"type":"static","rules":[{"declarations":{"min-width":null,"min-height":null}}]},"matchers":[{"type":"key","keys":["min-size"]}]},{"id":"max-size-<~container>","type":-1,"variableAliasRefs":["~container"],"emit":{"type":"static","rules":[{"declarations":{"max-width":null,"max-height":null}}]},"matchers":[{"type":"token","prefix":"max-size-"}]},{"id":"max-size:<*>","type":-1,"emit":{"type":"static","rules":[{"declarations":{"max-width":null,"max-height":null}}]},"matchers":[{"type":"key","keys":["max-size"]}]},{"id":"b-<~color-line|~color>","type":-1,"variableAliasRefs":["~color-line","~color"],"emit":{"type":"static","rules":[{"declarations":{"border-color":null}}]},"matchers":[{"type":"token","prefix":"b-"}]},{"id":"bt-<~color-line|~color>","type":0,"variableAliasRefs":["~color-line","~color"],"emit":{"type":"static","rules":[{"declarations":{"border-top-color":null}}]},"matchers":[{"type":"token","prefix":"bt-"}]},{"id":"br-<~color-line|~color>","type":0,"variableAliasRefs":["~color-line","~color"],"emit":{"type":"static","rules":[{"declarations":{"border-right-color":null}}]},"matchers":[{"type":"token","prefix":"br-"}]},{"id":"bb-<~color-line|~color>","type":0,"variableAliasRefs":["~color-line","~color"],"emit":{"type":"static","rules":[{"declarations":{"border-bottom-color":null}}]},"matchers":[{"type":"token","prefix":"bb-"}]},{"id":"bl-<~color-line|~color>","type":0,"variableAliasRefs":["~color-line","~color"],"emit":{"type":"static","rules":[{"declarations":{"border-left-color":null}}]},"matchers":[{"type":"token","prefix":"bl-"}]},{"id":"bx-<~color-line|~color>","type":-1,"variableAliasRefs":["~color-line","~color"],"emit":{"type":"static","rules":[{"declarations":{"border-inline-color":null}}]},"matchers":[{"type":"token","prefix":"bx-"}]},{"id":"by-<~color-line|~color>","type":-1,"variableAliasRefs":["~color-line","~color"],"emit":{"type":"static","rules":[{"declarations":{"border-block-color":null}}]},"matchers":[{"type":"token","prefix":"by-"}]},{"id":"outline-<~color-line|~color>","type":0,"variableAliasRefs":["~color-line","~color"],"emit":{"type":"static","rules":[{"declarations":{"outline-color":null}}]},"matchers":[{"type":"token","prefix":"outline-"}]},{"id":"outline-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"outline-width":null}}]},"matchers":[{"type":"pattern","prefix":"outline-","values":["medium","thick","thin"]}]},{"id":"outline-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"outline-style":null}}]},"matchers":[{"type":"pattern","prefix":"outline-","values":["auto","dashed","dotted","double","hidden","none","solid"]}]},{"id":"grid-cols:<*>","type":0,"emit":{"type":"static","rules":[{"declarations":{"display":"grid","grid-template-columns":["repeat(",null,", minmax(0, 1fr))"]}}]},"matchers":[{"type":"key","keys":["grid-cols"]}]},{"id":"grid-rows:<*>","type":0,"emit":{"type":"static","rules":[{"declarations":{"display":"grid","grid-auto-flow":"column","grid-template-rows":["repeat(",null,", minmax(0, 1fr))"]}}]},"matchers":[{"type":"key","keys":["grid-rows"]}]},{"id":"grid-col-span:<*>","type":-1,"emit":{"type":"static","rules":[{"declarations":{"grid-column":["span ",null,"/span ",null]}}]},"matchers":[{"type":"key","keys":["grid-col-span"]}]},{"id":"grid-row-span:<*>","type":-1,"emit":{"type":"static","rules":[{"declarations":{"grid-row":["span ",null,"/span ",null]}}]},"matchers":[{"type":"key","keys":["grid-row-span"]}]},{"id":"clamp-lines:<*>","type":-1,"emit":{"type":"static","rules":[{"declarations":{"display":"-webkit-box","-webkit-box-orient":"vertical","-webkit-line-clamp":null,"overflow":"hidden","overflow-wrap":"break-word","text-overflow":"ellipsis"}}]},"matchers":[{"type":"key","keys":["clamp-lines"]}]},{"id":"text-<~font-size>","type":-1,"variableAliasRefs":["~font-size"],"emit":{"type":"static","rules":[{"declarations":{"font-size":null,"line-height":["max(1.8em - max(0rem, ",null," - 1rem) * 1.12, ",null,")"],"letter-spacing":["clamp(-.072em, calc((",null," - 1rem) * -.048), 0em)"]}}]},"matchers":[{"type":"token","prefix":"text-"}]},{"id":"text:<*>","type":-1,"emit":{"type":"static","rules":[{"declarations":{"font-size":null,"line-height":["max(1.8em - max(0rem, ",null," - 1rem) * 1.12, ",null,")"],"letter-spacing":["clamp(-.072em, calc((",null," - 1rem) * -.048), 0em)"]}}]},"matchers":[{"type":"key","keys":["text"]}]},{"id":"text-<~color-text>","type":0,"variableAliasRefs":["~color-text"],"emit":{"type":"static","rules":[{"declarations":{"color":null}}]},"matchers":[{"type":"token","prefix":"text-"}]},{"id":"text-decoration-<~color-text|~color>","type":0,"variableAliasRefs":["~color-text","~color"],"emit":{"type":"static","rules":[{"declarations":{"text-decoration-color":null}}]},"matchers":[{"type":"token","prefix":"text-decoration-"}]},{"id":"text-decoration:<*>","type":-1,"emit":{"type":"static","rules":[{"declarations":{"-webkit-text-decoration":null,"text-decoration":null}}]},"matchers":[{"type":"key","keys":["text-decoration"]}]},{"id":"text-decoration-thickness:<*>","type":0,"emit":{"type":"static","rules":[{"declarations":{"text-decoration-thickness":null}}]},"matchers":[{"type":"key","keys":["text-decoration-thickness"]}]},{"id":"text-underline-<~spacing>","type":0,"variableAliasRefs":["~spacing"],"emit":{"type":"static","rules":[{"declarations":{"text-underline-offset":null}}]},"matchers":[{"type":"token","prefix":"text-underline-"}]},{"id":"text-stroke-<~color>","type":0,"variableAliasRefs":["~color"],"emit":{"type":"static","rules":[{"declarations":{"-webkit-text-stroke-color":null}}]},"matchers":[{"type":"token","prefix":"text-stroke-"}]},{"id":"text-stroke:<*>","type":0,"emit":{"type":"static","rules":[{"declarations":{"-webkit-text-stroke":null}}]},"matchers":[{"type":"key","keys":["text-stroke"]}]},{"id":"backdrop-filter-<~color>","type":-1,"variableAliasRefs":["~color"],"emit":{"type":"static","rules":[{"declarations":{"-webkit-backdrop-filter":null,"backdrop-filter":null}}]},"matchers":[{"type":"token","prefix":"backdrop-filter-"}]},{"id":"backdrop-filter:<*>","type":-1,"emit":{"type":"static","rules":[{"declarations":{"-webkit-backdrop-filter":null,"backdrop-filter":null}}]},"matchers":[{"type":"key","keys":["backdrop-filter"]}]},{"id":"box-decoration-break:<*>","type":-1,"emit":{"type":"static","rules":[{"declarations":{"-webkit-box-decoration-break":null,"box-decoration-break":null}}]},"matchers":[{"type":"key","keys":["box-decoration-break"]}]},{"id":"mask-image:<*>","type":-1,"emit":{"type":"static","rules":[{"declarations":{"-webkit-mask-image":null,"mask-image":null}}]},"matchers":[{"type":"key","keys":["mask-image"]}]},{"id":"user-drag:<*>","type":-1,"emit":{"type":"static","rules":[{"declarations":{"-webkit-user-drag":null,"user-drag":null}}]},"matchers":[{"type":"key","keys":["user-drag"]}]},{"id":"user-select:<*>","type":-1,"emit":{"type":"static","rules":[{"declarations":{"-webkit-user-select":null,"user-select":null}}]},"matchers":[{"type":"key","keys":["user-select"]}]},{"id":"bg-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"background-size":null}}]},"matchers":[{"type":"pattern","prefix":"bg-","values":["auto","contain","cover"]}]},{"id":"bg-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"background-position":null}}]},"matchers":[{"type":"pattern","prefix":"bg-","values":["bottom","center","left","right","top"]}]},{"id":"bg-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"background-attachment":null}}]},"matchers":[{"type":"pattern","prefix":"bg-","values":["fixed","local","scroll"]}]},{"id":"bg-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"background-repeat":null}}]},"matchers":[{"type":"pattern","prefix":"bg-","values":["repeat","no-repeat","repeat-x","repeat-y"]}]},{"id":"b-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"border-style":null}}]},"matchers":[{"type":"pattern","prefix":"b-","values":["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"]}]},{"id":"bt-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"border-top-style":null}}]},"matchers":[{"type":"pattern","prefix":"bt-","values":["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"]}]},{"id":"br-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"border-right-style":null}}]},"matchers":[{"type":"pattern","prefix":"br-","values":["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"]}]},{"id":"bb-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"border-bottom-style":null}}]},"matchers":[{"type":"pattern","prefix":"bb-","values":["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"]}]},{"id":"bl-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"border-left-style":null}}]},"matchers":[{"type":"pattern","prefix":"bl-","values":["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"]}]},{"id":"bx-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"border-inline-style":null}}]},"matchers":[{"type":"pattern","prefix":"bx-","values":["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"]}]},{"id":"by-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"border-block-style":null}}]},"matchers":[{"type":"pattern","prefix":"by-","values":["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"]}]},{"id":"decoration-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"text-decoration-style":null}}]},"matchers":[{"type":"pattern","prefix":"decoration-","values":["solid","double","dotted","dashed","wavy"]}]},{"id":"flex-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"flex-wrap":null}}]},"matchers":[{"type":"pattern","prefix":"flex-","values":["wrap","nowrap","wrap-reverse"]}]},{"id":"list-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"list-style-type":null}}]},"matchers":[{"type":"pattern","prefix":"list-","values":["disc","decimal"]}]},{"id":"list-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"list-style-position":null}}]},"matchers":[{"type":"pattern","prefix":"list-","values":["inside","outside"]}]},{"id":"object-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"object-fit":null}}]},"matchers":[{"type":"pattern","prefix":"object-","values":["cover","contain","fill","scale-down"]}]},{"id":"object-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"object-position":null}}]},"matchers":[{"type":"pattern","prefix":"object-","values":["center","top","bottom","left","right"]}]},{"id":"snap-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"scroll-snap-type":null}}]},"matchers":[{"type":"pattern","prefix":"snap-","values":["x","y","both","block","inline"]}]},{"id":"snap-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"scroll-snap-align":null}}]},"matchers":[{"type":"pattern","prefix":"snap-","values":["start","end","center"]}]},{"id":"snap-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"scroll-snap-stop":null}}]},"matchers":[{"type":"pattern","prefix":"snap-","values":["normal","always"]}]},{"id":"text-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"text-align":null}}]},"matchers":[{"type":"pattern","prefix":"text-","values":["left","center","right","start","end","justify"]}]},{"id":"text-","type":-2,"emit":{"type":"static","rules":[{"declarations":{"text-wrap":null}}]},"matchers":[{"type":"pattern","prefix":"text-","values":["wrap","nowrap","balance","pretty"]}]},{"id":"text-
 %>)
+  %>)
+