https://github.com/nsaunders/demitasse
CSS Modules in TypeScript…the simple way
https://github.com/nsaunders/demitasse
css css-in-js typescript
Last synced: about 1 year ago
JSON representation
CSS Modules in TypeScript…the simple way
- Host: GitHub
- URL: https://github.com/nsaunders/demitasse
- Owner: nsaunders
- License: mit
- Created: 2021-07-14T23:46:48.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-10-06T20:30:59.000Z (over 2 years ago)
- Last Synced: 2025-04-03T18:42:25.690Z (about 1 year ago)
- Topics: css, css-in-js, typescript
- Language: TypeScript
- Homepage:
- Size: 836 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ☕ Demitasse 
**CSS Modules in TypeScript…the _simple_ way**
Demitasse offers a component development experience comparable to Typed CSS Modules or CSS-in-TypeScript (CSS-in-JS) without the typical runtime cost or unwieldy configuration of those approaches.
💅 Author style rules within TypeScript.
👬 Colocate styles and markup.
⚒️ Extract static CSS at build time.
📦 Locally-scoped class names
🔎 Transparent build configuration
👼 Pure computation / no side effects
## Installation
```bash
npm install demitasse
```
## API
#### `cssBindings`
```typescript
cssBindings:
(css: string) => {
classes: Record;
ids: Record;
}
```
Given a style sheet, returns a map of class names and IDs. For use with dot notation, keys are converted to camel-case; e.g. `button-label` is converted to `buttonLabel`. The values correspond to the names that appear in the `css`.
#### `makeCSSBindings`
```typescript
makeCSSBindings:
(mapFn: (name: string, meta: { type: "class" | "id", context: Context }) => string) =>
(css: string, context: Context) => {
classes: Record;
ids: Record;
}
```
Given a mapping function `mapFn`, returns a function similar to [`cssBindings`](#cssbindings), except with one additional `context` parameter. The `context` argument is forwarded to `mapFn` and can be used e.g. to add a prefix to the class name or ID.
### Generated docs
Generated API documentation is available [here](./docs).
## Additional resources
* [Examples](./examples)
* [Guides](./docs/guides)