postcss plugins postcss-preset-env no work

[KingSwim404]

Version

3.5.1

Reproduction link

https://github.com/KingSwim404/open-kingswim-blog-xyz

Environment info

System:
    OS: macOS 10.14.5
    CPU: (4) x64 Intel(R) Core(TM) i5-4308U CPU @ 2.80GHz
  Binaries:
    Node: 8.11.1 - ~/.nvm/versions/node/v8.11.1/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.0.1 - ~/.nvm/versions/node/v8.11.1/bin/npm
  Browsers:
    Chrome: 75.0.3770.142
    Firefox: 68.0
    Safari: 12.1.1
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0 
    @vue/babel-preset-app:  3.10.0 
    @vue/babel-preset-jsx:  1.1.0 
    @vue/babel-sugar-functional-vue:  1.0.0 
    @vue/babel-sugar-inject-h:  1.0.0 
    @vue/babel-sugar-v-model:  1.0.0 
    @vue/babel-sugar-v-on:  1.1.0 
    @vue/cli-overlay:  3.10.0 
    @vue/cli-plugin-babel: ^3.9.0 => 3.9.2 
    @vue/cli-plugin-eslint: ^3.9.0 => 3.9.2 
    @vue/cli-service: ^3.9.0 => 3.9.3 
    @vue/cli-shared-utils:  3.10.0 
    @vue/component-compiler-utils:  2.6.0 (3.0.0)
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/web-component-wrapper:  1.2.0 
    babel-helper-vue-jsx-merge-props:  2.0.3 
    eslint-plugin-vue: ^5.0.0 => 5.2.3 
    vue: ^2.6.10 => 2.6.10 
    vue-cli-plugin-ftp-deploy: ^0.1.12 => 0.1.12 
    vue-eslint-parser:  2.0.3 
    vue-hot-reload-api:  2.3.3 
    vue-i18n: ^8.12.0 => 8.12.0 
    vue-lazyload: ^1.3.1 => 1.3.1 
    vue-loader:  15.7.1 
    vue-router: ^3.0.7 => 3.0.7 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.10 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
    vuex:  3.1.1 
  npmGlobalPackages:
    @vue/cli: 3.5.1

Steps to reproduce

npm run dev

What is expected?

:root {
--main-color: #50bfff;
}
@Custom-Media --mobile-media (width <= 860px);
@media (--mobile-media) {
a {
color: var(--main-color);
}
}
/* becomes */
@media (max-width : 860px ){
a {
color: #50bfff ;
}
}

What is actually happening?

result:
@media (--mobile-media) {
a {
color: var(--main-color);
}
}
not change

---

Google Chrome version 75.0.3770.142

postcss-preset-env ( not work )
postcss-pxtorem ( can work )

package.json{

---

"postcss": {
"plugins": {
"postcss-preset-env": {},
"postcss-pxtorem": {
"rootValue": 50,
"propList": ["*"]
}
}
}
}

[LinusBorg]

Please provide a minimal reproduction instead of a whole project

[haoqunjiang]

"postcss-preset-env": {
  "stage": 1,
  "importFrom": "src/assets/css/common.pcss"
}

[haoqunjiang]

Without any configuration options, PostCSS Preset Env enables Stage 2 features.

@custom-media is a stage-1 feature.

The importFrom option specifies sources where variables like Custom Media, Custom Properties, Custom Selectors, and Environment Variables can be imported from, which might be CSS, JS, and JSON files, functions, and directly passed objects.

Without this option the stylesheets in .vue files cannot access those globally defined varables.

[KingSwim404]

Without any configuration options, PostCSS Preset Env enables Stage 2 features.

@custom-media is a stage-1 feature.

The importFrom option specifies sources where variables like Custom Media, Custom Properties, Custom Selectors, and Environment Variables can be imported from, which might be CSS, JS, and JSON files, functions, and directly passed objects.

Without this option the stylesheets in .vue files cannot access those globally defined varables.

Thank you very much . I lost the importFrom . I try stage 1 to 4 can not work . Must stage 1 and importFrom togethor.

[KingSwim404]

Please provide a minimal reproduction instead of a whole project

I just ready a minimal reproduction . But i foud @sodatea solved the problem . This is my first issues , don't have much experience .
Next i will do better, good problem to have a good answer.
Also thank you for your reminder.

[KingSwim404]

Without any configuration options, PostCSS Preset Env enables Stage 2 features.

@custom-media is a stage-1 feature.

The importFrom option specifies sources where variables like Custom Media, Custom Properties, Custom Selectors, and Environment Variables can be imported from, which might be CSS, JS, and JSON files, functions, and directly passed objects.

Without this option the stylesheets in .vue files cannot access those globally defined varables.

I got a new problem.
If i change the globally defined varable @Custom-Media value , can not hot reload.
like :
defined: @Custom-Media --mobile-media (width <= 850px);
change: @Custom-Media --mobile-media (width > 850px);
UI no change;

But i change the @Custom-Media varable name and value , can hot reload.

Then i try defined varable @Custom-Media in .vue files , change value , can hot reload.

Other globally varables can hot reload .

minimal reproduction link: https://github.com/KingSwim404/test-postcss-preset-env