postcss / postcss-custom-properties

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

7.0.0 variable resolution broken? #118

Closed oleersoy closed 6 years ago

oleersoy commented 6 years ago

When I upgraded @superflycss/cli to version 7.0.0 none of the variables resolve. To see this:

git clone https://github.com/superflycss/cli
cd cli
npm i -g
sfc new a
cd a
sfc build

Look at target/main/css/index.css and compare it to src/main/css. The variables are resolved. If postcss custom properties is upgraded to version 7.0.0 in the dependencies, the variables no longer resolve.

oleersoy commented 6 years ago

Also reverting to 6.3.1 resolves variables but leaves the root declaration in the produced css. For example after running builds the following is still contained in the output:

:root {
}

In other words the variables are removed, but the root part stays ....

jonathantneal commented 6 years ago

I don’t see the files you mentioned in that project. Would you spin up a test repo?

jonathantneal commented 6 years ago

Closing due to inactivity.

oleersoy commented 5 years ago

Hi - Sorry I totally missed the feedback on this. Anyways I had a chance to get back to it, and now I'm getting different behavior, but it's still broken. For example if I try processing this:

:root {
    --main-bg-color: coral; 
}

.red {
    color: red;
    background-color: var(--main-bg-color);
}
.blue {
    color: blue;
}

I end up with:

:root {
    --main-bg-color: coral; 
}

.red {
    color: red;
    background-color: coral;
    background-color: var(--main-bg-color);
}

.blue {
    color: blue;
}

This is the script:

const postcss = require('postcss')
const fs = require('fs')
const PLI = require("@superflycss/pli");

const options = {
  html: ['html/*.html']
}

let postcss_plugins = [
  require("postcss-import"),
  require("postcss-custom-properties"),
  require("postcss-reporter")({
    clearMessages: true
  })
];

fs.readFile('css/index.css', (err, css) => {
  postcss(postcss_plugins)
    .process(css, { from: 'css/app.css', to: 'dest/app.css' })
    .then(result => {
      fs.writeFile('css/filtered.css', result.css, () => true)
      if ( result.map ) {
        fs.writeFile('dest/app.css.map', result.map, () => true)
      }
    })
})