source: trip-planner-front/node_modules/postcss-calc/README.md@ 6a3a178

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

initial commit

  • Property mode set to 100644
File size: 3.6 KB
Line 
1# PostCSS Calc [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS" width="90" height="90" align="right">][PostCSS]
2
3[![NPM Version][npm-img]][npm-url]
4[![Build Status][cli-img]][cli-url]
5[![Support Chat][git-img]][git-url]
6
7[PostCSS Calc] lets you reduce `calc()` references whenever it's possible. This
8can be particularly useful with the [PostCSS Custom Properties] plugin.
9
10When multiple units are mixed together in the same expression, the `calc()`
11statement is left as is, to fallback to the [W3C calc() implementation].
12
13## Installation
14
15```bash
16npm install postcss-calc
17```
18
19## Usage
20
21```js
22// dependencies
23var fs = require("fs")
24var postcss = require("postcss")
25var calc = require("postcss-calc")
26
27// css to be processed
28var css = fs.readFileSync("input.css", "utf8")
29
30// process css
31var output = postcss()
32 .use(calc())
33 .process(css)
34 .css
35```
36
37**Example** (with [PostCSS Custom Properties] enabled as well):
38
39```js
40// dependencies
41var fs = require("fs")
42var postcss = require("postcss")
43var customProperties = require("postcss-custom-properties")
44var calc = require("postcss-calc")
45
46// css to be processed
47var css = fs.readFileSync("input.css", "utf8")
48
49// process css
50var output = postcss()
51 .use(customProperties())
52 .use(calc())
53 .process(css)
54 .css
55```
56
57Using this `input.css`:
58
59```css
60:root {
61 --main-font-size: 16px;
62}
63
64body {
65 font-size: var(--main-font-size);
66}
67
68h1 {
69 font-size: calc(var(--main-font-size) * 2);
70 height: calc(100px - 2em);
71 margin-bottom: calc(
72 var(--main-font-size)
73 * 1.5
74 )
75}
76```
77
78you will get:
79
80```css
81body {
82 font-size: 16px
83}
84
85h1 {
86 font-size: 32px;
87 height: calc(100px - 2em);
88 margin-bottom: 24px
89}
90```
91
92Checkout [tests] for more examples.
93
94### Options
95
96#### `precision` (default: `5`)
97
98Allow you to define the precision for decimal numbers.
99
100```js
101var out = postcss()
102 .use(calc({precision: 10}))
103 .process(css)
104 .css
105```
106
107#### `preserve` (default: `false`)
108
109Allow you to preserve calc() usage in output so browsers will handle decimal
110precision themselves.
111
112```js
113var out = postcss()
114 .use(calc({preserve: true}))
115 .process(css)
116 .css
117```
118
119#### `warnWhenCannotResolve` (default: `false`)
120
121Adds warnings when calc() are not reduced to a single value.
122
123```js
124var out = postcss()
125 .use(calc({warnWhenCannotResolve: true}))
126 .process(css)
127 .css
128```
129
130#### `mediaQueries` (default: `false`)
131
132Allows calc() usage as part of media query declarations.
133
134```js
135var out = postcss()
136 .use(calc({mediaQueries: true}))
137 .process(css)
138 .css
139```
140
141#### `selectors` (default: `false`)
142
143Allows calc() usage as part of selectors.
144
145```js
146var out = postcss()
147 .use(calc({selectors: true}))
148 .process(css)
149 .css
150```
151
152Example:
153
154```css
155div[data-size="calc(3*3)"] {
156 width: 100px;
157}
158```
159
160---
161
162## Contributing
163
164Work on a branch, install dev-dependencies, respect coding style & run tests
165before submitting a bug fix or a feature.
166
167```bash
168git clone git@github.com:postcss/postcss-calc.git
169git checkout -b patch-1
170npm install
171npm test
172```
173
174## [Changelog](CHANGELOG.md)
175
176## [License](LICENSE)
177
178[cli-img]: https://img.shields.io/travis/postcss/postcss-calc/master.svg
179[cli-url]: https://travis-ci.org/postcss/postcss-calc
180[git-img]: https://img.shields.io/badge/support-chat-blue.svg
181[git-url]: https://gitter.im/postcss/postcss
182[npm-img]: https://img.shields.io/npm/v/postcss-calc.svg
183[npm-url]: https://www.npmjs.com/package/postcss-calc
184
185[PostCSS]: https://github.com/postcss
186[PostCSS Calc]: https://github.com/postcss/postcss-calc
187[PostCSS Custom Properties]: https://github.com/postcss/postcss-custom-properties
188[tests]: src/__tests__/index.js
189[W3C calc() implementation]: https://www.w3.org/TR/css3-values/#calc-notation
Note: See TracBrowser for help on using the repository browser.