Is there a way to minify CSS with new nested syntax?

August 25, 2023

I’m using new CSS feature of nesting classes like that:

  .nav-bar {
    width: 100%;

    @media screen and (min-width: 768px) {
      display: flex;
    }

    .container {
      display: flex;

      &::after,
      &::before {
        content: none;
      }
     }
   }

And I was wondering how can I minify this type of code?
Also, can you please advice if it’s a good idea to use CSS nesting in 2023?
On caniuse.com it shows that this feature is supported by 75% of browsers.

I’m asking if this is a good idea because I see a lot of CSS errors in the inspector, like these ones:
inspector screenshot

I have tried online minifier tools, and none of them worked as expected.

>Solution :

Use lightningcss to minify your code. Also it would be highly advised that you setup some sort of backwards compatible code for the browsers that don’t support those CSS features. Whether it is a good idea or not is up to what you do with those features and the support you give for older browsers.