https://github.com/darrenjacoby/postcss-root-parse-var

Parse a custom property from `:root` or another selector to a static value
https://github.com/darrenjacoby/postcss-root-parse-var

css postcss postcss-plugin postcss-root-parse-var

Last synced: 2 months ago
JSON representation

Parse a custom property from `:root` or another selector to a static value

• Host: GitHub
• URL: https://github.com/darrenjacoby/postcss-root-parse-var
• Owner: darrenjacoby
• License: mit
• Created: 2020-04-23T12:51:07.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-04-23T13:43:30.000Z (almost 5 years ago)
• Last Synced: 2023-11-27T01:47:56.646Z (about 1 year ago)
• Topics: css, postcss, postcss-plugin, postcss-root-parse-var
• Language: JavaScript
• Homepage:
• Size: 4.88 KB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# postcss-root-parse-var

Simple PostCSS plugin to add support for **`parse-var()`**, allowing a CSS variable to be parsed from `:root` or a selector of your choice.

Useful if a subsequent PostCSS plugin requires a static value to work on. This is not intended as a fallback for `var()`.

### Installation

```shell

yarn add postcss-root-parse-var --dev

```

Require `postcssRootParseVar` at the top of Webpack or Mix:

```js

const postcssRootParseVar = require('postcss-root-parse-var');

```

#### Using Webpack

```js

postcss([postcssRootParseVar]);

```

#### Using Mix Sass (Sage 10)

```js

mix

    .sass('resources/assets/styles/editor.scss', 'styles')

    .options({

        postCss: [postcssRootParseVar]

    });

```

### Config

Some config can be passed into `postcssRootParseVar()` in Webpack or Mix. 

```js

postcssRange({

    root: ':root',

    prefix: 'parse-var',

})

```

### Usage

```scss

:root {

    --screen-md: 48rem;

    --screen-lg: 75rem,

}

.parse-var {

    font-size: range(2rem, 6rem, parse-var(--screen-md), parse-var(--screen-lg));

}

```

This will parse the root custom properties resulting in a static value for `--screen-md` and `--screen-lg`.

```scss

.parse-var {

    font-size: range(2rem, 6rem, 48rem, 75rem);

}

```