PostCSS logical properties output is missed out

[lukaskoeller]

Describe the bug If I use css logical properties (as part of the postcss-preset-env), something like padding-inline is correctly transformed. Though, when I use padding-inline-start, the plugin generates new selectors (e.g. [dir="ltr"] div { padding-left: 1px }) but it is not part of the output.

Logs n/a

To Reproduce Use the postcss-preset-env plugin for postcss and use css logical properties that contain start or end in their property.

• See Demo

Expected behavior The output of the postcss logical plugin and postcss dir plugin actually appears in the final css generated by svelte.

/* Input */
section {
  padding-inline-start: 30px;
}

/* Output */
[dir="ltr"] section.s-f0oQgdSLZrX7 {

Information about your project:

• Your browser and the version: https://www.whatsmybrowser.org/b/ZPZGQ

• Your operating system: macOS Monterey

• svelte-preprocess version 4.10.7

• Whether your project uses Webpack or Rollup: Uses vite

[lukaskoeller]

Workaround

Setting the dir via options make it work

postcss.config.cjs

const config = {
  plugins: [
    autoprefixer,
    postcssPresetEnv({
      stage: 1,
      features: {
        'logical-properties-and-values': {
          dir: 'ltr'
        }
      }
    })
  ]
};