source: trip-planner-front/node_modules/postcss-overflow-shorthand/README.md@ 571e0df

Last change on this file since 571e0df was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 2.6 KB
Line 
1# PostCSS Overflow Shorthand [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
2
3[![NPM Version][npm-img]][npm-url]
4[![CSS Standard Status][css-img]][css-url]
5[![Build Status][cli-img]][cli-url]
6[![Support Chat][git-img]][git-url]
7
8[PostCSS Overflow Shorthand] lets you use the `overflow` shorthand in CSS,
9following the [CSS Overflow] specification.
10
11```pcss
12html {
13 overflow: hidden auto;
14}
15
16/* becomes */
17
18html {
19 overflow-x: hidden;
20 overflow-y: auto;
21 overflow: hidden auto;
22}
23```
24
25## Usage
26
27Add [PostCSS Overflow Shorthand] to your project:
28
29```bash
30npm install postcss-overflow-shorthand --save-dev
31```
32
33Use [PostCSS Overflow Shorthand] to process your CSS:
34
35```js
36const postcssOverflowShorthand = require('postcss-overflow-shorthand');
37
38postcssOverflowShorthand.process(YOUR_CSS /*, processOptions, pluginOptions */);
39```
40
41Or use it as a [PostCSS] plugin:
42
43```js
44const postcss = require('postcss');
45const postcssOverflowShorthand = require('postcss-overflow-shorthand');
46
47postcss([
48 postcssOverflowShorthand(/* pluginOptions */)
49]).process(YOUR_CSS /*, processOptions */);
50```
51
52[PostCSS Overflow Shorthand] runs in all Node environments, with special
53instructions for:
54
55| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
56| --- | --- | --- | --- | --- | --- |
57
58## Options
59
60### preserve
61
62The `preserve` option determines whether the original `overflow` declaration is
63preserved. By default, it is preserved.
64
65```js
66postcssOverflowShorthand({ preserve: false })
67```
68
69```pcss
70html {
71 overflow: hidden auto;
72}
73
74/* becomes */
75
76html {
77 overflow-x: hidden;
78 overflow-y: auto;
79}
80```
81
82[cli-img]: https://img.shields.io/travis/jonathantneal/postcss-overflow-shorthand.svg
83[cli-url]: https://travis-ci.org/jonathantneal/postcss-overflow-shorthand
84[css-img]: https://cssdb.org/badge/overflow-property.svg
85[css-url]: https://cssdb.org/#overflow-property
86[git-img]: https://img.shields.io/badge/support-chat-blue.svg
87[git-url]: https://gitter.im/postcss/postcss
88[npm-img]: https://img.shields.io/npm/v/postcss-overflow-shorthand.svg
89[npm-url]: https://www.npmjs.com/package/postcss-overflow-shorthand
90
91[CSS Overflow]: https://drafts.csswg.org/css-overflow/#propdef-overflow
92[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
93[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
94[PostCSS]: https://github.com/postcss/postcss
95[PostCSS Loader]: https://github.com/postcss/postcss-loader
96[PostCSS Overflow Shorthand]: https://github.com/jonathantneal/postcss-overflow-shorthand
Note: See TracBrowser for help on using the repository browser.