Bundler-agnostic, zero-runtime CSS-in-TS — powered by a TypeScript plugin
npm install typiqueBundler-agnostic, zero-runtime CSS-in-TS — powered by a TypeScript plugin.
---
📖 Please refer to the GitHub repo for the full documentation.
Other useful links:
- Demos
- Plugin configuration
- Typique Configuration for Monorepos and Shared Code
- Plugin description
- TypeScript: 5.5 up to 6.0
- Node.js: 18 and above
``bash`
npm i -D typescript
npm i typique
If you use VS Code, switch to the workspace TypeScript: Command Palette → Select TypeScript Version → Use Workspace Version.
`json`
{
"compilerOptions": {
"plugins": [
{
"name": "typique/ts-plugin"
}
]
}
}
Name your constants ...Class and ...Var to instruct Typique to suggest completion items in the constant initializers.
`ts
import type { Css, Var } from 'typique'
const sizeVar = '--size' satisfies Var
// ^
// Completion appears here
const roundButtonClass = 'round-button' satisfies Css<{
// ^
// Completion appears here
[sizeVar]: 32
borderRadius: calc(${typeof sizeVar} / 2)
height:
width:
}>
`html`
...
...
This command generates the CSS from the command line:
`sh`
npx typique --projectFile ./index.ts --tsserver ./path/to/tsserver.js -- ...ts-args
- --projectFile (required) — a TypeScript file used to bootstrap your project--tsserver
- (optional) — a path to the TypeScript server executable...ts-args` (optional) — TypeScript server command-line arguments
-