https://github.com/scrum/postcss-envariables

PostCss plugin to use environment variables in CSS
https://github.com/scrum/postcss-envariables

css env envariables postcss postcss-plugin webpack4

Last synced: 3 months ago
JSON representation

PostCss plugin to use environment variables in CSS

• Host: GitHub
• URL: https://github.com/scrum/postcss-envariables
• Owner: Scrum
• License: mit
• Created: 2019-01-29T14:19:21.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-02-04T07:43:39.000Z (over 6 years ago)
• Last Synced: 2025-03-27T07:44:19.808Z (3 months ago)
• Topics: css, env, envariables, postcss, postcss-plugin, webpack4
• Language: JavaScript
• Homepage:
• Size: 23.4 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • Changelog: changelog.md
  • License: license

Awesome Lists containing this project

README

        
# postcss-envariables 

> [PostCSS](https://github.com/postcss/postcss) plugin to transform environment variables in CSS.

[![Travis Build Status](https://img.shields.io/travis/Scrum/postcss-envariables/master.svg?style=flat-square&label=unix&logo=travis)](https://travis-ci.org/Scrum/postcss-envariables)[![AppVeyor Build Status](https://img.shields.io/appveyor/ci/GitScrum/postcss-envariables/master.svg?style=flat-square&label=windows&logo=appveyor)](https://ci.appveyor.com/project/GitScrum/postcss-envariables)[![](https://img.shields.io/node/v/postcss-envariables.svg?style=flat-square)]()[![npm version](https://img.shields.io/npm/v/postcss-envariables.svg?style=flat-square&logo=npm)](https://www.npmjs.com/package/postcss-envariables)[![Dependency Status](https://david-dm.org/Scrum/postcss-envariables.svg?style=flat-square)](https://david-dm.org/scrum/postcss-envariables)[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg?style=flat-square)](https://github.com/xojs/xo)[![Coveralls status](https://img.shields.io/coveralls/Scrum/postcss-envariables.svg?style=flat-square)](https://coveralls.io/r/Scrum/postcss-envariables)

[![npm downloads](https://img.shields.io/npm/dm/postcss-envariables.svg?style=flat-square)](https://www.npmjs.com/package/postcss-envariables)[![npm](https://img.shields.io/npm/dt/postcss-envariables.svg?style=flat-square)](https://www.npmjs.com/package/postcss-envariables)

## Why?

Adds the ability to use a environment variables in CSS.

*Used in conjunction with the plugin ```postcss-css-variables```*

## Install

```bash

$ npm install postcss-envariables

```

> **Note:** This project is compatible with node v6+

## Usage

```js

// Dependencies

import fs from 'fs';

import postcss from 'postcss';

import env from 'postcss-envariables';

import cssVariables from 'postcss-css-variables';

// CSS to be processed

const css = fs.readFileSync('css/input.css', 'utf8');

// Process CSS

const output = postcss(css)

    .use(env({ /* env: { contextPath: path/to/file } */ }))

    .use(cssVariables())

    .css;

console.log(output);

```

*Use before plugin ```postcss-css-variables```.*  

# Example

## Node

```js

import fs from 'fs';

import postcss from 'postcss';

import env from 'postcss-envariables';

import cssVariables from 'postcss-css-variables';

const css = fs.readFileSync('css/input.css', 'utf8');

const output = postcss(css)

    .use(env({env: {contextPath: 'dev'}}))

    .use(cssVariables())

    .css;

console.log(output);

```

```css

/* input.css */

:root {

    --contextPath: env.contextPath;

}

.selector {

    backgrount-image: url('var(--contextPath)/image.png');

}

```

```css

/* Output example */

.selector {

    backgrount-image: url('dev/image.png');

}

```

## Webpack -> [demo](https://github.com/inside-demo/webpack-postcss-envariables-demo)

*```package.json```*

```json

"scripts": {

    "build": "webpack --mode=development"

}

```

*```postcss.config.js```*

```js

module.exports = ({options: {env}}) => {

    return {

        plugins: {

            'postcss-envariables': {

                env: {

                    contextPath: env === 'development' ? 'dev' : ''

                }

            },

            'postcss-css-variables': {}

        }

    };

};

```

*```webpack.config.js```*

```js

module.exports = (env, argv) => ({

    mode: argv.mode,

    module: {

        rules: [

            {

                test: /\.css$/,

                use: [

                    {

                        loader: 'postcss-loader',

                        options: {

                            config: {

                                ctx: {

                                    env: argv.mode

                                }

                            }

                        }

                    }

                ]

            }

        ]

    }

});

```

*```input.css```*

```css

:root {

    --contextPath: env.contextPath;

}

.selector {

    backgrount-image: url('var(--contextPath)/image.png');

}

```

*```Output```*

```css

.selector {

    backgrount-image: url('dev/image.png');

}

```