Skip to content

Commit

Permalink
docs: improve Readme
Browse files Browse the repository at this point in the history
Fix #106

* Show the effect of PostCSS Calc alone, so people don't expect it to resolve
  custom properties.
* Remove outdated Travis badge
  • Loading branch information
ludofischer committed Jan 11, 2022
1 parent 754a266 commit 3f2c424
Showing 1 changed file with 8 additions and 44 deletions.
52 changes: 8 additions & 44 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
# PostCSS Calc [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS" width="90" height="90" align="right">][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].

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand Down

0 comments on commit 3f2c424

Please sign in to comment.