typique
v1.0.2
Published
Bundler-agnostic, zero-runtime CSS-in-TS — powered by a TypeScript plugin
Downloads
17
Maintainers
berezkinReadme
Typique
Bundler-agnostic, zero-runtime CSS-in-TS — powered by a TypeScript plugin.
📖 Please refer to the GitHub repo for the full documentation.
Other useful links:
Version requirements
- TypeScript: 5.5 up to 6.0
- Node.js: 18 and above
Installation
1. Install workspace TypeScript and Typique
npm i -D typescript
npm i typiqueIf you use VS Code, switch to the workspace TypeScript: Command Palette → Select TypeScript Version → Use Workspace Version.
2. Add the plugin to tsconfig.json
{
"compilerOptions": {
"plugins": [
{
"name": "typique/ts-plugin"
}
]
}
}3. Write some styles
Name your constants ...Class and ...Var to instruct Typique to suggest completion items in the constant initializers.
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: `var(${typeof sizeVar})`
width: `var(${typeof sizeVar})`
}>4. Import the generated CSS into your app
<html>
<head>
...
<link href="./typique-output.css" rel="stylesheet">
</head>
...
</html>5. Add a build step
This command generates the CSS from the command line:
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