https://github.com/yarastqt/postcss-theme-fold

Postcss plugin for folding css-variables with using whitepaper design system in legacy browsers.
https://github.com/yarastqt/postcss-theme-fold

css-variables postcss postcss-plugin whitepaper

Last synced: 10 days ago
JSON representation

Postcss plugin for folding css-variables with using whitepaper design system in legacy browsers.

• Host: GitHub
• URL: https://github.com/yarastqt/postcss-theme-fold
• Owner: yarastqt
• Created: 2019-12-06T08:07:08.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2021-12-11T08:57:37.000Z (almost 3 years ago)
• Last Synced: 2023-03-03T14:52:07.297Z (over 1 year ago)
• Topics: css-variables, postcss, postcss-plugin, whitepaper
• Language: TypeScript
• Homepage:
• Size: 671 KB
• Stars: 5
• Watchers: 2
• Forks: 9
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# postcss-theme-fold [][postcss]

[![NPM Version][npm-img]][npm-url] [![github (ci)][github-ci]][github-ci]

Postcss plugin for folding css-variables with using [whitepaper](whitepaper) design system in legacy browsers.

## Install

```sh

npm i -D postcss-theme-fold

```

## Usage

```js

const { resolve } = require('path')

const postcss = require('postcss')

const themeFold = require('postcss-theme-fold')

postcss([

  themeFold({

    mode: 'multi-themes',

    themes: [

      [

        resolve('src/components/Theme/_size/Theme_color_default.css'),

        resolve('src/components/Theme/_size/Theme_size_default.css'),

      ],

      [

        resolve('src/components/Theme/_size/Theme_color_brand.css'),

        resolve('src/components/Theme/_size/Theme_size_default.css'),

      ],

    ],

    globalSelectors: ['.utilityfocus'],

  }),

])

  .process(css, { from: cssPath })

  .then(result => result.css)

```

### Options

* **themes (string[][])**: List of themes with path to css files.

* **globalSelectors (string[])**: Global helper-selectors.

* **mode ('single-theme' | 'multi-themes')**: Method of theme folding, by default choice mode in relation from themes size. `single-theme` — don't accumulate cascade with theme selectors. `multi-themes` — accumulate cascade with theme selectors.

* **shouldProcessVariable (declaration: Declaration) => boolean**: Predicate for processing each nodes.

* **disableWarnings**: Disable warnings about missing values

* **debug**: Show original variables as comment

* **preserve:** Preserve original declaration

### Example content

#### input:

```css

/* Theme/_color/Theme_color_default.css */

.Theme_color_default {

  --color: #fff;

}

/* Theme/_size/Theme_size_default.css */

.Theme_size_default {

  --size: 10px;

}

/* Button/Button.css */

.Button {

  color: var(--color);

  font-size: var(--size);

  box-sizing: border-box;

}

```

#### output:

Split rules from other chunks of theme to extra selectors for order to reduce the specificity.

```css

.Button {

  box-sizing: border-box;

}

.Theme_color_default .Button {

  color: #fff;

}

.Theme_size_default .Button {

  font-size: 10px;

}

```

## Know issues

[npm-img]: https://img.shields.io/npm/v/postcss-theme-fold.svg

[npm-url]: https://www.npmjs.com/package/postcss-theme-fold

[github-ci]: https://github.com/yarastqt/postcss-theme-fold/workflows/ci/badge.svg?branch=master

[whitepaper]: http://whitepaper.tools

[PostCSS]: https://github.com/postcss/postcss