01e58a3ad0
* feat: write variables as a CSS token stylesheet Copy a collection as CSS custom properties or a Tailwind v4 theme from the variables dialog, print it with openpencil tokens, and rebuild design_to_tokens on the same generator. Default modes go in :root or @theme, other modes override under their condition, and aliases are declared again in each mode scope so they follow it. * fix: give modes that slug alike their own selector and variant Two modes in one collection whose names reduce to the same slug, such as Dark and dark!, shared one default selector and Tailwind variant, so the later mode silently overrode the earlier one. Slugs are now numbered in mode order, as variable names already are.
36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
import { describe, expect, test } from 'bun:test'
|
|
|
|
import { executeRPCCommand, type TokensResult } from '@open-pencil/core/rpc'
|
|
import { SceneGraph } from '@open-pencil/scene-graph'
|
|
|
|
function graphWithTokens(): SceneGraph {
|
|
const graph = new SceneGraph()
|
|
const collection = graph.createCollection('Theme')
|
|
graph.createVariable('Primary', 'COLOR', collection.id, { r: 1, g: 0, b: 0, a: 1 })
|
|
graph.createVariable('Gap', 'FLOAT', collection.id, 8)
|
|
return graph
|
|
}
|
|
|
|
describe('tokens command', () => {
|
|
test('returns the stylesheet with its filters applied', async () => {
|
|
const result = (await executeRPCCommand(graphWithTokens(), 'tokens', {
|
|
format: 'css',
|
|
type: 'color'
|
|
})) as TokensResult
|
|
expect(result).toEqual({
|
|
css: ':root {\n --color-primary: #FF0000;\n}\n',
|
|
tokenCount: 1,
|
|
issues: []
|
|
})
|
|
})
|
|
|
|
test('rejects an unknown format or type', () => {
|
|
expect(() => executeRPCCommand(graphWithTokens(), 'tokens', { format: 'scss' })).toThrow(
|
|
'Unknown token format: scss. Use css or tailwind.'
|
|
)
|
|
expect(() => executeRPCCommand(graphWithTokens(), 'tokens', { type: 'shadow' })).toThrow(
|
|
'Unknown variable type: shadow. Use COLOR, FLOAT, STRING, BOOLEAN.'
|
|
)
|
|
})
|
|
})
|