Skip to content

Commit

Permalink
update plugin README
Browse files Browse the repository at this point in the history
  • Loading branch information
dev-nicolaos committed Oct 18, 2023
1 parent 0bf6c3e commit 89887d5
Showing 1 changed file with 23 additions and 0 deletions.
23 changes: 23 additions & 0 deletions packages/plugin-css/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -314,6 +314,29 @@ export default {
};
```

### Space Replacement

Tokens and tokens groups can have whitespace in their names, but CSS variable names cannot contain whitespace. Leading and trailing whitespace will be removed during transformation and any whitespace in the middle of a group or token name will be replaced with the value of the `spaceReplacement` option.

`spaceReplacement` defaults to an underscore (`'_'`), so this token...

```json
{
"group": {
"token name": {
"$type": "dimension",
"$value": "42px"
}
}
}
```

...would be transformed into the following CSS variable.

```css
--group-token_name: 42px;
```

### Usage with @cobalt-ui/plugin-sass

If you’re using Sass in your project, you can load this plugin through [@cobalt-ui/plugin-sass](https://cobalt-ui.pages.dev/docs/integrations/sass/), which lets you use CSS vars while letting Sass typecheck everything and making sure your stylesheet references everything correctly.
Expand Down

0 comments on commit 89887d5

Please sign in to comment.