https://github.com/coobaha/postcss-variables-loader

Share variables between CSS and JS with Webpack + HMR
https://github.com/coobaha/postcss-variables-loader

css cssnext hmr postcss postcss-variables-loader webpack

Last synced: 4 days ago
JSON representation

Share variables between CSS and JS with Webpack + HMR

• Host: GitHub
• URL: https://github.com/coobaha/postcss-variables-loader
• Owner: Coobaha
• Created: 2016-10-22T22:47:21.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-10-27T01:04:23.000Z (about 1 year ago)
• Last Synced: 2024-10-11T11:30:39.416Z (about 1 month ago)
• Topics: css, cssnext, hmr, postcss, postcss-variables-loader, webpack
• Language: JavaScript
• Size: 2.4 MB
• Stars: 18
• Watchers: 4
• Forks: 5
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
postcss-variables-loader




  

    

  

  

    

  

  

    

  

  

    

  

  

    

  





Allows you to share variables between CSS and JS with Webpack and HMR.






This loader transforms special CSS files to JS modules.


* Shared variables between CSS and JS

* HMR friendly, CSS changes are applied on the fly.

To be more JS friendly loader will:

* strip `px` part from CSS px numbers

* convert dashes-case to camelCase

* check for runtime config mutations and access of missing keys (only in dev or es6 mode)

## Usage

```css

/* variables.config.css */

@custom-media --small-device (max-width: 480px))

:root {

  --primary-color: blue;

  --gutter: 30px;

}

```

```css

/* component.css  */

@import 'colors.config.css'

.component {

  color: var(--primary-color);

  margin: 0 var(--gutter);

}

@media (--small-device) {

  /* styles for small viewport */

}

```

```js

// component.js

import variables from 'colors.config.css';

console.log(variables);

/*

  variables = {

    primaryColor: 'blue';

    gutter: 30;

    smallDevice: '(max-width: 480px)'

  }

*/

component.style.color = variables.primaryColor;

function add5ToGutter() {

  return 5 + variables.gutter;

}

```

## Install

```sh

yarn add --dev postcss-variables-loader

```

```sh

npm install --save-dev postcss-variables-loader

```

**NB**: You need to process CSS somehow (eg [postcss](https://github.com/postcss/postcss))

 and imports inside css (eg via [postcss-import](https://github.com/postcss/postcss-import))

**Recommended webpack configuration**:

`webpack.config.js` with babel-loader

```

rules: [

  {

    test: /\.config.css$/,

    loader: 'babel-loader!postcss-variables-loader'

  },

  // dont forget to exclude *.config.css from other css loaders

  {

    test: /\.css$/,

    exclude: /\.config.css$/,

    loader: 'css-loader!postcss-loader'

  }

]

```

## Options

if `production.env.NODE_ENV === 'development'` it will try to wrap config inside `Proxy` in runtime.

It is used to guard from accidental mutations or accessing missing keys.

If you dont want this behaviour: pass `es5=1`:

`loader: 'postcss-variables-loader?es5=1'`

## License

- **MIT** : http://opensource.org/licenses/MIT