https://github.com/postcss/postcss-size
PostCSS plugin for size shortcut
https://github.com/postcss/postcss-size
Last synced: 3 months ago
JSON representation
PostCSS plugin for size shortcut
- Host: GitHub
- URL: https://github.com/postcss/postcss-size
- Owner: postcss
- License: mit
- Created: 2015-02-05T05:30:42.000Z (almost 11 years ago)
- Default Branch: main
- Last Pushed: 2023-10-15T12:27:25.000Z (about 2 years ago)
- Last Synced: 2024-04-14T03:01:02.651Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 721 KB
- Stars: 52
- Watchers: 11
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# PostCSS Size
[PostCSS] plugin for `size` shortcut to set `width` and `height` properties.
It also handles `min-size` to set `min-width` and `min-height`, and `max-size` to set `max-width` and `max-height`.
[PostCSS]: https://github.com/postcss/postcss
```css
.two {
size: 20px 10px;
}
.one {
size: 10px;
}
.minmax {
min-size: 10px;
max-size: 200px auto;
}
```
```css
.two {
width: 20px;
height: 10px;
}
.one {
width: 10px;
height: 10px;
}
.minmax {
min-width: 10px;
min-height: 10px;
max-width: 200px;
max-height: auto;
}
```
## Usage
**Step 1:** Install plugin:
```sh
npm install --save-dev postcss postcss-size
```
**Step 2:** 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 do not use PostCSS, add it according to [official docs]
and set this plugin in settings.
**Step 3:** Add the plugin to plugins list:
```diff
module.exports = {
plugins: [
+ require('postcss-size'),
require('autoprefixer')
]
}
```
[official docs]: https://github.com/postcss/postcss#usage