You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

189 lines
3.6 KiB

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