Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/spring-raining/postcss-plugins
PostCSS plugin to provide theming function based on CSS variables using `@var` rules.
https://github.com/spring-raining/postcss-plugins
css postcss postcss-plugin
Last synced: about 1 month ago
JSON representation
PostCSS plugin to provide theming function based on CSS variables using `@var` rules.
- Host: GitHub
- URL: https://github.com/spring-raining/postcss-plugins
- Owner: spring-raining
- Created: 2024-02-14T13:16:14.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-09-12T14:32:58.000Z (2 months ago)
- Last Synced: 2024-09-28T09:22:07.134Z (about 2 months ago)
- Topics: css, postcss, postcss-plugin
- Language: TypeScript
- Homepage:
- Size: 62.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# PostCSS Variable Theming
[
][npm-url]
[npm-url]: https://www.npmjs.com/package/postcss-variable-theming
> PostCSS plugin to provide theming function based on CSS variables using `@var` rules.
## Installation
```
npm install -D postcss-variable-theming
```
## Usage
`postcss.confg.js`:
```js
const theming = require('postcss-variable-theming');
module.exports = {
plugins: [theming()],
};
```
```css
/* Input CSS */
@var foo {
:root {
font: 16px / 1.5;
color: ;
}
}
@var h1, heading {
h1 {
font-size: 2em;
line-height: 1.5;
}
}
@var h2, heading {
h2 {
font-size: 1.5em;
line-height: 1.5;
}
}
@var h3, heading {
h3 {
font-size: 1.17em;
line-height: 1.5;
}
}
```
```css
/* Output CSS */
:root {
font: var(--foo-font, 16px / 1.5);
color: var(--foo-color);
}
h1 {
font-size: var(--h1-font-size, var(--heading-font-size, 2em));
line-height: var(--h1-line-height, var(--heading-line-height, 1.5));
}
h2 {
font-size: var(--h2-font-size, var(--heading-font-size, 1.5em));
line-height: var(--h2-line-height, var(--heading-line-height, 1.5));
}
h3 {
font-size: var(--h3-font-size, var(--heading-font-size, 1.17em));
line-height: var(--h3-line-height, var(--heading-line-height, 1.5));
}
```
Or you can use a special `*` character as follows:
```css
@var *, heading {
@var h1 {
h1 { ... }
}
@var h2 {
h2 { ... }
}
@var h3 {
h3 { ... }
}
}
```
### Theme nesting
```css
/* Input CSS */
@var {
:root {
--color-1: orange;
}
@var foo.bar {
:root {
--color-2: green;
}
}
@var foo {
@var baz {
:root {
--color-3: purple;
}
}
}
}
```
```css
/* Output CSS */
:root {
--color-1: var(--color-1, orange);
}
:root {
--color-2: var(--foo--bar-color-2, green);
}
:root {
--color-3: var(--foo--baz-color-3, purple);
}
```
### Explicit nesting specifier: `&`
```css
/* Input CSS */
@var acme {
@var *, fallback.& {
@media (prefers-color-scheme: light) {
@var &.light {
:root {
color: #111;
background-color: #fff;
}
}
}
@media (prefers-color-scheme: dark) {
@var &.dark {
:root {
color: #fff;
background-color: #333;
}
}
}
}
}
```
```css
/* Output CSS */
@media (prefers-color-scheme: light) {
:root {
color: var(--acme--light-color, var(--fallback--acme-color, #111));
background-color: var(--acme--light-background-color,
var(--fallback--acme-background-color, #fff));
}
}
@media (prefers-color-scheme: dark) {
:root {
color: var(--acme--dark-color, var(--fallback--acme-color, #fff));
background-color: var(--acme--dark-background-color,
var(--fallback--acme-background-color, #333));
}
}
```
## Options
```js
module.exports = {
plugins: [require('postcss-variable-theming')({
prefix: '',
propDelimiter: '-',
nestedThemeDelimiter: '--',
atRuleName: 'var',
})],
};
```
### `prefix`
* Type: `string`
* Default: `''`
### `propDelimiter`
* Type: `string`
* Default: `'-'`
### `nestedThemeDelimiter`
* Type: `string`
* Default: `'--'`
### `atRuleName`
* Type: `string`
* Default: `var`