How to set up environment in phpstorm to write CSS with new features ( & and @nested, CSS Custom Properties), selector nesting?

Question

css

I wanted to write in pure css with new features, now they are transitioning or planning a transition on projects, I decided to practice. Installed postcss, installed plugins in postcss.config.js In postcss-preset-env, almost everything is already there, it should work, var (--foo) works, there are variables, but there is no nesting. I want to invest, what should I do? Are there any examples that you would recommend?

Installed plugins:

module.exports = {
  plugins: [
    require('postcss-preset-env')({
      features: {
        'nesting-rules': true,
        'color-mod-function': { unresolved: 'warn' }
      }
    }),
    require('postcss-animation'),
    require('postcss-fixes')({
      preset: 'recommended'
    }),
    require('cssnano')({
      preset: [
        'default', {
          discardComments: {
            removeAll: true
          }
        }
      ]
    }),
  ]
};

Answer 1

Found the answer: I
just remembered that I should look into the collection of plugins for phpstorm.
You need to install
AND configure phpstorm: The IDE now recognizes .pcss files. You can also enable PostCSS support for your .css files in Preferences | Languages ​​& Frameworks | style sheets | Dialects.

As a result, it was / became: