postcss plugins postcss-preset-env no work

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”: [“*”] } } } }

[sodatea]

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.

[sodatea]

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