search

postcss / postcss-custom-properties

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

importFrom not working #152

Closed frippz closed 5 years ago

frippz commented 5 years ago

With reference to this closed issue: https://github.com/postcss/postcss-custom-properties/issues/141

I've got a similar setup, wherein I transpile separate files, so I gathered that importFrom was needed for postcss-custom-properties to work properly. My postcss.config.js:

module.exports = {
  map: { inline: true },
  plugins: [
    require('postcss-custom-properties')({
      importFrom: 'src/css/00_variables.css'
    }),
  ]
};

Checking the output, however, shows this:

#header {
  background-color: var(--header-background);
  background-color: var(--header-background);
  color: var(--header-text);
  color: var(--header-text);
  padding: 0;
}

This repo is publicly available over here should anyone want to have a closer look. Just to make sure that my config file was actually working, I quickly tested to add preserve: false which confirmed that it is (since those duplicated lines went away). Something might be off with the path, perhaps? I've tried both importFrom: 'src/css/00_variables.css' as well as importFrom: './src/css/00_variables.css'. The src folder does reside in the project root.

silvenon commented 5 years ago

Since these issues you've made some changes to the repository, could you point to the exact commit in your code where you experienced this behavior?

frippz commented 5 years ago

@silvenon I'm so sorry, of course! I just kept on working and forgot about this. 😳 Right now I'm running without fallbacks for custom properties, but of course better legacy support is preferable.

Here's a snapshot from when I last had this issue: https://github.com/frippz/frippz.se/tree/6db2fd86364283a41b872a3e610cf9e304cfe7fe

ghost commented 5 years ago

@silvenon i am also having this issue, i am trying to use importFrom to import some css variables and exportTo to output the file, the output file is created, but always empty.

silvenon commented 5 years ago

@mike-rotate are you using exportTo from postcss-preset-env or are you using postcss-custom-properties directly?

ghost commented 5 years ago

@silvenon i'm using it in an object passed in to postcss-preset-env

silvenon commented 5 years ago

It's a different issue then, you can subscribe to csstools/postcss-preset-env#93 to track progress.

ghost commented 5 years ago

@silvenon argh, sorry! i didn't realise i had switch to this github repo while following a trail of issues.

silvenon commented 5 years ago

No problem, they're all connected 😉

jonathantneal commented 5 years ago

Closing this one to help me stay focused. I might have some time to work on it tonight.

morganfeeney commented 5 years ago

Hey all, can I ask what was the outcome of this issue? I believe I am facing the same thing here: csstools/postcss-preset-env#141

jonathantneal commented 5 years ago

From the other issue.

After doing some further searching it looks as though what I expect to happen, will not. It looks like I need to use exportTo to get the imported custom properties into :root.