Some CSS rules removed by PostCSS

[jsakalos]

The bug was discovered by a user of Bryntum Scheduler and reported it in this forum post.

However, it can be easily reproduced w/o Bryntum libraries by adding the following styles to index.vue of the application newly created by npx create-nuxt-app:

pages/index.js:

<style>
  .logo {
    margin-inline-end:1em;
    border:10px solid red;
  }
</style>

That results in the markup shown on the screenshot-1:

It can be remedied by disabling PostCSS but that's not a real fix, just a workaround:

nuxt.config.js:

  build: {
    postcss: false
  }

That leads to the expected result on the screenshot-2:

I'm also attaching the showcase application.
nuxt.zip

[marianoweber]

@jsakalos

This behavior has something to do with how postcss processes rules according to their cssdb stages.

Logical Properties and Values
are considered "unstable and subject to change" (stage 2)

Following changes to nuxt.config.js will make these rules work:

nuxt.config.js

build: {
  postcss: {
    preset: {
      features: {
        stage: 2,
        'logical-properties-and-values': false
      }
    }
  }
}

Source: https://stackoverflow.com/questions/64565180/how-to-prevent-postcss-preset-env-from-removing-css-logical-properties