From 924a88fab5466307aba0b76d36b30ab06b11dcb5 Mon Sep 17 00:00:00 2001 From: littleblack111 Date: Sat, 14 Oct 2023 20:57:16 +0800 Subject: updates --- node_modules/postcss-calc/README.md | 90 +++++++++++++++---------------------- 1 file changed, 36 insertions(+), 54 deletions(-) (limited to 'node_modules/postcss-calc/README.md') diff --git a/node_modules/postcss-calc/README.md b/node_modules/postcss-calc/README.md index 4cabf731..2c207402 100755 --- a/node_modules/postcss-calc/README.md +++ b/node_modules/postcss-calc/README.md @@ -1,16 +1,16 @@ -# postcss-calc [![Build Status](https://travis-ci.org/postcss/postcss-calc.png)](https://travis-ci.org/postcss/postcss-calc) +# PostCSS Calc [PostCSS][PostCSS] -> [PostCSS](https://github.com/postcss/postcss) plugin to reduce `calc()`. +[![NPM Version][npm-img]][npm-url] +[![Support Chat][git-img]][git-url] -This plugin reduce `calc()` references whenever it's possible. -This can be particularly useful with the [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties) plugin. - -**Note:** When multiple units are mixed together in the same expression, the `calc()` statement is left as is, to fallback to the [w3c calc() feature](http://www.w3.org/TR/css3-values/#calc). +[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]. ## Installation -```console -$ npm install postcss-calc +```bash +npm install postcss-calc ``` ## Usage @@ -31,62 +31,28 @@ var output = postcss() .css ``` -**Example** (with [postcss-custom-properties](https://github.com/postcss/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](src/__tests__/index.js) for more examples. +Checkout [tests] for more examples. ### Options @@ -103,7 +69,8 @@ var out = postcss() #### `preserve` (default: `false`) -Allow you to preserve calc() usage in output so browsers will handle decimal precision themselves. +Allow you to preserve calc() usage in output so browsers will handle decimal +precision themselves. ```js var out = postcss() @@ -155,17 +122,32 @@ 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 before submitting a bug fix or a feature. +Work on a branch, install dev-dependencies, respect coding style & run tests +before submitting a bug fix or a feature. -```console -$ git clone https://github.com/postcss/postcss-calc.git -$ git checkout -b patch-1 -$ npm install -$ npm test +```bash +git clone git@github.com:postcss/postcss-calc.git +git checkout -b patch-1 +npm install +npm test ``` ## [Changelog](CHANGELOG.md) ## [License](LICENSE) + +[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 +[npm-url]: https://www.npmjs.com/package/postcss-calc + +[PostCSS]: https://github.com/postcss +[PostCSS Calc]: https://github.com/postcss/postcss-calc +[PostCSS Custom Properties]: https://github.com/postcss/postcss-custom-properties +[tests]: src/__tests__/index.js +[W3C calc() implementation]: https://www.w3.org/TR/css3-values/#calc-notation -- cgit v1.2.3