search

postcss / postcss-custom-properties

Use Custom Properties in CSS
https://postcss.github.io/postcss-custom-properties
MIT License
596 stars 77 forks source link

Having trouble setting options #177

Closed brianzelip closed 5 years ago

brianzelip commented 5 years ago

Hello! I'm having trouble setting the preserve option. Anyone able to lend a hand? Here's my context:

I'm using postcss-cli to process some CSS:

// package.json
{
 "scripts": {
    "build": "postcss src/palette.css -u postcss-import postcss-custom-media postcss-custom-properties postcss-calc postcss-color-function autoprefixer -d dist"
  }
}
// postcss.config.js

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-custom-media': {},
    'postcss-custom-properties': { preserve: false },
    'postcss-calc': {},
    'postcss-color-function': {},
    autoprefixer: {}
  }
};
/* input */

body {
  font-family: var(--font-family);
  line-height: var(--line-height);
  font-size: var(--body-font-size);
}

Here's the output I expect:

/* expected output */

body {
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
  line-height: 1.5;
  font-size: 100%;
}

Yet here is the actual output:

/* actual output */

body {
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
  font-family: var(--font-family);
  line-height: 1.5;
  line-height: var(--line-height);
  font-size: 100%;
  font-size: var(--body-font-size);
}

I know this is a really basic question - thanks for any help!

pascalduez commented 5 years ago

Maybe try not passing the plugins list as CLI arguments, they should be read from the config file anyway.

brianzelip commented 5 years ago

Thanks a bunch @pascalduez, that worked.