importFrom not actually imported

[joelmoss]

:root {
  --black: #0a0a0a;
}

"postcss-preset-env": {
  "importFrom": [
    "app/javascript/src/lib/theme/colors.css"
  ]
}

The above doesn't seem to actually import the custom properties. I can of course @import directly, but am I missing something here?

[jonathantneal]

The importFrom option is relative to the project. Is this path correct? Could you setup a small github repo with code to replicate this bug?

[joelmoss]

Yeah that path is valid. I know, because I can import environment-variables from json, which works fine...

"postcss-preset-env": {
  "importFrom": [
    "app/javascript/src/lib/theme/breakpoints.json"
  ]
}

app/javascript/src/lib/theme/breakpoints.json

{
  "environment-variables": {
    "--phone": "320px",
    "--largephone": "425px",
    "--tablet": "768px",
    "--desktop": "1024px",
    "--largedesktop": "1440px"
  }
}

[jonathantneal]

Would you make a repo using postcss-custom-properties or postcss-preset-env that demonstrates this failing?

For example, I have many tests for this functionality. Here is a test for importing properties directly, and here is a test for importing properties from JSON.

[b-m-f]

I have a similar problem.

The --color-2 variable is available for the transforms, but wont be in the :root as here.

So the browser that would support it can not find the variable.

[jonathantneal]

@b-m-f, I’m on the fence as to whether this is a reasonable feature. It’s more “sugar” than fallback.

The importFrom option gives fallbacks to var() that it couldn’t have in a multi-file environment. A static site with multiple CSS files could have this problem.

This hypothetical appendImportsToRoot: true|false would presume a single-file environment, where the importFrom option should not have been necessary to begin with.

That’s why I’m not sure if it’s a valid fallback feature to add.

[b-m-f]

@jonathantneal makes sense. I am also using the normal @import to achieve this now.

[jonathantneal]

Feel free to open a new issue if something was not resolved here.