https://github.com/albertfdp/postcss-logical-issue

Reproduction of postcss-logical issue
https://github.com/albertfdp/postcss-logical-issue

Last synced: about 5 hours ago
JSON representation

Reproduction of postcss-logical issue

• Host: GitHub
• URL: https://github.com/albertfdp/postcss-logical-issue
• Owner: albertfdp
• License: mit
• Created: 2022-07-27T07:55:18.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-07-27T08:09:47.000Z (over 2 years ago)
• Last Synced: 2023-05-02T05:36:25.708Z (over 1 year ago)
• Language: JavaScript
• Size: 30.3 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# postcss-logical-issue

Reproduction of postcss-logical issue

## Issue

When running `postcss` with `postcss-preset-env` or a combination of the following plugins

```js

module.exports = {

  plugins: {

    "postcss-custom-properties": {},

    "postcss-logical": {},

    "postcss-dir-pseudo-class": {},

  },

};

```

and an input CSS as:

```css

:root {

  --content-width: 300px;

}

.c {

  margin-inline-start: var(--content-width);

}

```

Produce as output a duplicate rule that prevents the usage of the custom property:

```css

:root {

  --content-width: 300px;

}

[dir="ltr"] .c {

  margin-left: 300px;

  margin-left: var(--content-width);

}

[dir="rtl"] .c {

  margin-right: 300px;

  margin-right: var(--content-width);

}

[dir="ltr"] .c {

  margin-left: 300px;

}

[dir="rtl"] .c {

  margin-right: 300px;

}

```