https://github.com/leechy/postcss-multiple-properties
PostCSS Multiple Properties Plugin
https://github.com/leechy/postcss-multiple-properties
Last synced: about 1 month ago
JSON representation
PostCSS Multiple Properties Plugin
- Host: GitHub
- URL: https://github.com/leechy/postcss-multiple-properties
- Owner: leechy
- License: mit
- Created: 2020-05-25T19:18:33.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T20:21:05.000Z (over 3 years ago)
- Last Synced: 2025-02-28T00:56:56.335Z (over 1 year ago)
- Language: JavaScript
- Size: 822 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# PostCSS Multiple Properties Plugin
[PostCSS] plugin that parses multiple comma separated property names with the same value to separate property declarations.
[PostCSS]: https://github.com/postcss/postcss
```css
.foo {
top,left,padding,margin: 0;
}
```
```css
.foo {
top: 0;
left: 0;
padding: 0;
margin: 0;
}
```
## Warning
Due to the specifics of the PostCSS default parser you are not able to use any whitespace characters
between the propery names. Only commas.
In order to work as expected, this plugin should use custom PostCSS parser that handles declaration
property names with whitespace (probably whitespace with commas in it). This parser is yet to be developed.
## Usage
Check you project for existed PostCSS config: `postcss.config.js`
in the project root, `"postcss"` section in `package.json`
or `postcss` in bundle config.
If you already use PostCSS, add the plugin to plugins list:
```diff
module.exports = {
plugins: [
+ require('postcss-multiple-properties'),
require('autoprefixer')
]
}
```
If you do not use PostCSS, add it according to [official docs]
and set this plugin in settings.
[official docs]: https://github.com/postcss/postcss#usage