postcss-calc 8.2.1 → 8.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -44
- package/dist/lib/reducer.js +9 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
# PostCSS Calc [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS" width="90" height="90" align="right">][PostCSS]
|
|
2
2
|
|
|
3
3
|
[![NPM Version][npm-img]][npm-url]
|
|
4
|
-
[![Build Status][cli-img]][cli-url]
|
|
5
4
|
[![Support Chat][git-img]][git-url]
|
|
6
5
|
|
|
7
|
-
[PostCSS Calc] lets you reduce `calc()` references whenever it's possible.
|
|
8
|
-
can be particularly useful with the [PostCSS Custom Properties] plugin.
|
|
9
|
-
|
|
6
|
+
[PostCSS Calc] lets you reduce `calc()` references whenever it's possible.
|
|
10
7
|
When multiple units are mixed together in the same expression, the `calc()`
|
|
11
8
|
statement is left as is, to fallback to the [W3C calc() implementation].
|
|
12
9
|
|
|
@@ -34,61 +31,27 @@ var output = postcss()
|
|
|
34
31
|
.css
|
|
35
32
|
```
|
|
36
33
|
|
|
37
|
-
**Example** (with [PostCSS Custom Properties] enabled as well):
|
|
38
|
-
|
|
39
|
-
```js
|
|
40
|
-
// dependencies
|
|
41
|
-
var fs = require("fs")
|
|
42
|
-
var postcss = require("postcss")
|
|
43
|
-
var customProperties = require("postcss-custom-properties")
|
|
44
|
-
var calc = require("postcss-calc")
|
|
45
|
-
|
|
46
|
-
// css to be processed
|
|
47
|
-
var css = fs.readFileSync("input.css", "utf8")
|
|
48
|
-
|
|
49
|
-
// process css
|
|
50
|
-
var output = postcss()
|
|
51
|
-
.use(customProperties())
|
|
52
|
-
.use(calc())
|
|
53
|
-
.process(css)
|
|
54
|
-
.css
|
|
55
|
-
```
|
|
56
|
-
|
|
57
34
|
Using this `input.css`:
|
|
58
35
|
|
|
59
36
|
```css
|
|
60
|
-
:root {
|
|
61
|
-
--main-font-size: 16px;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
body {
|
|
65
|
-
font-size: var(--main-font-size);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
37
|
h1 {
|
|
69
|
-
font-size: calc(
|
|
38
|
+
font-size: calc(16px * 2);
|
|
70
39
|
height: calc(100px - 2em);
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
* 1.5
|
|
74
|
-
)
|
|
40
|
+
width: calc(2*var(--base-width));
|
|
41
|
+
margin-bottom: calc(16px * 1.5);
|
|
75
42
|
}
|
|
76
43
|
```
|
|
77
44
|
|
|
78
45
|
you will get:
|
|
79
46
|
|
|
80
47
|
```css
|
|
81
|
-
body {
|
|
82
|
-
font-size: 16px
|
|
83
|
-
}
|
|
84
|
-
|
|
85
48
|
h1 {
|
|
86
49
|
font-size: 32px;
|
|
87
50
|
height: calc(100px - 2em);
|
|
51
|
+
width: calc(2*var(--base-width));
|
|
88
52
|
margin-bottom: 24px
|
|
89
53
|
}
|
|
90
54
|
```
|
|
91
|
-
|
|
92
55
|
Checkout [tests] for more examples.
|
|
93
56
|
|
|
94
57
|
### Options
|
|
@@ -159,6 +122,9 @@ div[data-size="calc(3*3)"] {
|
|
|
159
122
|
|
|
160
123
|
---
|
|
161
124
|
|
|
125
|
+
## Related PostCSS plugins
|
|
126
|
+
To replace the value of CSS custom properties at build time, try [PostCSS Custom Properties].
|
|
127
|
+
|
|
162
128
|
## Contributing
|
|
163
129
|
|
|
164
130
|
Work on a branch, install dev-dependencies, respect coding style & run tests
|
|
@@ -175,8 +141,6 @@ npm test
|
|
|
175
141
|
|
|
176
142
|
## [License](LICENSE)
|
|
177
143
|
|
|
178
|
-
[cli-img]: https://img.shields.io/travis/postcss/postcss-calc/master.svg
|
|
179
|
-
[cli-url]: https://travis-ci.org/postcss/postcss-calc
|
|
180
144
|
[git-img]: https://img.shields.io/badge/support-chat-blue.svg
|
|
181
145
|
[git-url]: https://gitter.im/postcss/postcss
|
|
182
146
|
[npm-img]: https://img.shields.io/npm/v/postcss-calc.svg
|
package/dist/lib/reducer.js
CHANGED
|
@@ -346,6 +346,14 @@ function convertNodesUnits(left, right, precision) {
|
|
|
346
346
|
};
|
|
347
347
|
}
|
|
348
348
|
}
|
|
349
|
+
/**
|
|
350
|
+
* @param {import('../parser').ParenthesizedExpression} node
|
|
351
|
+
*/
|
|
352
|
+
|
|
353
|
+
|
|
354
|
+
function includesNoCssProperties(node) {
|
|
355
|
+
return node.content.type !== 'Function' && (node.content.type !== 'MathExpression' || node.content.right.type !== 'Function' && node.content.left.type !== 'Function');
|
|
356
|
+
}
|
|
349
357
|
/**
|
|
350
358
|
* @param {import('../parser').CalcNode} node
|
|
351
359
|
* @param {number} precision
|
|
@@ -375,7 +383,7 @@ function reduce(node, precision) {
|
|
|
375
383
|
}
|
|
376
384
|
|
|
377
385
|
if (node.type === 'ParenthesizedExpression') {
|
|
378
|
-
if (node
|
|
386
|
+
if (includesNoCssProperties(node)) {
|
|
379
387
|
return reduce(node.content, precision);
|
|
380
388
|
}
|
|
381
389
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "postcss-calc",
|
|
3
|
-
"version": "8.2.
|
|
3
|
+
"version": "8.2.2",
|
|
4
4
|
"description": "PostCSS plugin to reduce calc()",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"css",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"pretest": "pnpm run build",
|
|
56
56
|
"test": "uvu -r @babel/register src/__tests__"
|
|
57
57
|
},
|
|
58
|
-
"readme": "# PostCSS Calc [<img src=\"https://postcss.github.io/postcss/logo.svg\" alt=\"PostCSS\" width=\"90\" height=\"90\" align=\"right\">][PostCSS]\n\n[![NPM Version][npm-img]][npm-url]\n[![
|
|
58
|
+
"readme": "# PostCSS Calc [<img src=\"https://postcss.github.io/postcss/logo.svg\" alt=\"PostCSS\" width=\"90\" height=\"90\" align=\"right\">][PostCSS]\n\n[![NPM Version][npm-img]][npm-url]\n[![Support Chat][git-img]][git-url]\n\n[PostCSS Calc] lets you reduce `calc()` references whenever it's possible.\nWhen multiple units are mixed together in the same expression, the `calc()`\nstatement is left as is, to fallback to the [W3C calc() implementation].\n\n## Installation\n\n```bash\nnpm install postcss-calc\n```\n\n## Usage\n\n```js\n// dependencies\nvar fs = require(\"fs\")\nvar postcss = require(\"postcss\")\nvar calc = require(\"postcss-calc\")\n\n// css to be processed\nvar css = fs.readFileSync(\"input.css\", \"utf8\")\n\n// process css\nvar output = postcss()\n .use(calc())\n .process(css)\n .css\n```\n\nUsing this `input.css`:\n\n```css\nh1 {\n font-size: calc(16px * 2);\n height: calc(100px - 2em);\n width: calc(2*var(--base-width));\n margin-bottom: calc(16px * 1.5);\n}\n```\n\nyou will get:\n\n```css\nh1 {\n font-size: 32px;\n height: calc(100px - 2em);\n width: calc(2*var(--base-width));\n margin-bottom: 24px\n}\n```\nCheckout [tests] for more examples.\n\n### Options\n\n#### `precision` (default: `5`)\n\nAllow you to define the precision for decimal numbers.\n\n```js\nvar out = postcss()\n .use(calc({precision: 10}))\n .process(css)\n .css\n```\n\n#### `preserve` (default: `false`)\n\nAllow you to preserve calc() usage in output so browsers will handle decimal\nprecision themselves.\n\n```js\nvar out = postcss()\n .use(calc({preserve: true}))\n .process(css)\n .css\n```\n\n#### `warnWhenCannotResolve` (default: `false`)\n\nAdds warnings when calc() are not reduced to a single value.\n\n```js\nvar out = postcss()\n .use(calc({warnWhenCannotResolve: true}))\n .process(css)\n .css\n```\n\n#### `mediaQueries` (default: `false`)\n\nAllows calc() usage as part of media query declarations.\n\n```js\nvar out = postcss()\n .use(calc({mediaQueries: true}))\n .process(css)\n .css\n```\n\n#### `selectors` (default: `false`)\n\nAllows calc() usage as part of selectors.\n\n```js\nvar out = postcss()\n .use(calc({selectors: true}))\n .process(css)\n .css\n```\n\nExample:\n\n```css\ndiv[data-size=\"calc(3*3)\"] {\n width: 100px;\n}\n```\n\n---\n\n## Related PostCSS plugins\nTo replace the value of CSS custom properties at build time, try [PostCSS Custom Properties].\n\n## Contributing\n\nWork on a branch, install dev-dependencies, respect coding style & run tests\nbefore submitting a bug fix or a feature.\n\n```bash\ngit clone git@github.com:postcss/postcss-calc.git\ngit checkout -b patch-1\nnpm install\nnpm test\n```\n\n## [Changelog](CHANGELOG.md)\n\n## [License](LICENSE)\n\n[git-img]: https://img.shields.io/badge/support-chat-blue.svg\n[git-url]: https://gitter.im/postcss/postcss\n[npm-img]: https://img.shields.io/npm/v/postcss-calc.svg\n[npm-url]: https://www.npmjs.com/package/postcss-calc\n\n[PostCSS]: https://github.com/postcss\n[PostCSS Calc]: https://github.com/postcss/postcss-calc\n[PostCSS Custom Properties]: https://github.com/postcss/postcss-custom-properties\n[tests]: src/__tests__/index.js\n[W3C calc() implementation]: https://www.w3.org/TR/css3-values/#calc-notation\n"
|
|
59
59
|
}
|