diff --git a/CHANGELOG.md b/CHANGELOG.md index 07f7b8d..f677d49 100755 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +## [8.2.2](https://github.com/postcss/postcss-calc/compare/v8.2.1...v8.2.2) (2022-01-12) + +## Bug Fixes + +* respect CSS var when reducing ([99d9fa5](https://github.com/postcss/postcss-calc/commit/99d9fa53a7fba3586590d0c45a0982b09e8bf5c6)) + # [8.2.1](https://github.com/postcss/postcss-calc/compare/v8.2.0...v8.2.1) (2022-01-11) ## Bug Fixes diff --git a/README.md b/README.md index 9cd9252..2c20740 100755 --- a/README.md +++ b/README.md @@ -1,12 +1,9 @@ # PostCSS Calc [][PostCSS] [![NPM Version][npm-img]][npm-url] -[![Build Status][cli-img]][cli-url] [![Support Chat][git-img]][git-url] -[PostCSS Calc] lets you reduce `calc()` references whenever it's possible. This -can be particularly useful with the [PostCSS Custom Properties] plugin. - +[PostCSS Calc] lets you reduce `calc()` references whenever it's possible. When multiple units are mixed together in the same expression, the `calc()` statement is left as is, to fallback to the [W3C calc() implementation]. @@ -34,61 +31,27 @@ var output = postcss() .css ``` -**Example** (with [PostCSS Custom Properties] enabled as well): - -```js -// dependencies -var fs = require("fs") -var postcss = require("postcss") -var customProperties = require("postcss-custom-properties") -var calc = require("postcss-calc") - -// css to be processed -var css = fs.readFileSync("input.css", "utf8") - -// process css -var output = postcss() - .use(customProperties()) - .use(calc()) - .process(css) - .css -``` - Using this `input.css`: ```css -:root { - --main-font-size: 16px; -} - -body { - font-size: var(--main-font-size); -} - h1 { - font-size: calc(var(--main-font-size) * 2); + font-size: calc(16px * 2); height: calc(100px - 2em); - margin-bottom: calc( - var(--main-font-size) - * 1.5 - ) + width: calc(2*var(--base-width)); + margin-bottom: calc(16px * 1.5); } ``` you will get: ```css -body { - font-size: 16px -} - h1 { font-size: 32px; height: calc(100px - 2em); + width: calc(2*var(--base-width)); margin-bottom: 24px } ``` - Checkout [tests] for more examples. ### Options @@ -159,6 +122,9 @@ div[data-size="calc(3*3)"] { --- +## Related PostCSS plugins +To replace the value of CSS custom properties at build time, try [PostCSS Custom Properties]. + ## Contributing Work on a branch, install dev-dependencies, respect coding style & run tests @@ -175,8 +141,6 @@ npm test ## [License](LICENSE) -[cli-img]: https://img.shields.io/travis/postcss/postcss-calc/master.svg -[cli-url]: https://travis-ci.org/postcss/postcss-calc [git-img]: https://img.shields.io/badge/support-chat-blue.svg [git-url]: https://gitter.im/postcss/postcss [npm-img]: https://img.shields.io/npm/v/postcss-calc.svg diff --git a/package.json b/package.json index 5f626e7..5fb2c7b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "postcss-calc", - "version": "8.2.1", + "version": "8.2.2", "description": "PostCSS plugin to reduce calc()", "keywords": [ "css", diff --git a/src/__tests__/index.js b/src/__tests__/index.js index 09df516..82fc839 100644 --- a/src/__tests__/index.js +++ b/src/__tests__/index.js @@ -106,7 +106,7 @@ test( 'should reduce additions and subtractions (7)', testValue( 'calc(0px - (24px - (var(--a) - var(--b)) / 2 + var(--c)))', - 'calc(-24px + var(--a)/2 - var(--b)/2 - var(--c))' + 'calc(-24px + (var(--a) - var(--b))/2 - var(--c))' ) ); @@ -122,27 +122,27 @@ test( test( 'should reduce multiplication', - testValue('calc(((var(--a) + 4px) * 2) * 2)', 'calc(var(--a)*2*2 + 16px)') + testValue('calc(((var(--a) + 4px) * 2) * 2)', 'calc((var(--a) + 4px)*2*2)') ); test( 'should reduce multiplication before reducing additions', testValue( 'calc(((var(--a) + 4px) * 2) * 2 + 4px)', - 'calc(var(--a)*2*2 + 20px)' + 'calc((var(--a) + 4px)*2*2 + 4px)' ) ); test( 'should reduce division', - testValue('calc(((var(--a) + 4px) / 2) / 2)', 'calc(var(--a)/2/2 + 1px)') + testValue('calc(((var(--a) + 4px) / 2) / 2)', 'calc((var(--a) + 4px)/2/2)') ); test( 'should reduce division before reducing additions', testValue( 'calc(((var(--a) + 4px) / 2) / 2 + 4px)', - 'calc(var(--a)/2/2 + 5px)' + 'calc((var(--a) + 4px)/2/2 + 4px)' ) ); @@ -750,7 +750,20 @@ test( (var(--fluid-screen) - ((var(--fluid-min-width) / 16) * 1rem)) / ((var(--fluid-max-width) / 16) - (var(--fluid-min-width) / 16)) )`, - 'calc((var(--fluid-screen) - var(--fluid-min-width)/16*1rem)/(var(--fluid-max-width)/16 - var(--fluid-min-width)/16))' + 'calc((var(--fluid-screen) - ((var(--fluid-min-width)/16)*1rem))/(var(--fluid-max-width)/16 - var(--fluid-min-width)/16))' + ) +); + +test( + 'should preserve division precedence (3)', + testValue('calc(1/(10/var(--dot-size)))', 'calc(1/(10/var(--dot-size)))') +); + +test( + 'should correctly preserve parentheses', + testValue( + 'calc(1/((var(--a) - var(--b))/16))', + 'calc(1/(var(--a) - var(--b))/16)' ) ); diff --git a/src/lib/reducer.js b/src/lib/reducer.js index 8ff6162..7ec432c 100644 --- a/src/lib/reducer.js +++ b/src/lib/reducer.js @@ -285,6 +285,16 @@ function convertNodesUnits(left, right, precision) { } } +/** + * @param {import('../parser').ParenthesizedExpression} node + */ +function includesNoCssProperties(node) { + return node.content.type !== 'Function' && + (node.content.type !== 'MathExpression' || + (node.content.right.type !== 'Function' && + node.content.left.type !== 'Function') + ); +} /** * @param {import('../parser').CalcNode} node * @param {number} precision @@ -309,7 +319,7 @@ function reduce(node, precision) { } if (node.type === 'ParenthesizedExpression') { - if (node.content.type !== 'Function') { + if (includesNoCssProperties(node)) { return reduce(node.content, precision); } }