https://github.com/shrpne/postcss-clear-empty-strings

Remove declarations with empty values
https://github.com/shrpne/postcss-clear-empty-strings

clear empty postcss

Last synced: about 2 months ago
JSON representation

Remove declarations with empty values

• Host: GitHub
• URL: https://github.com/shrpne/postcss-clear-empty-strings
• Owner: shrpne
• License: mit
• Created: 2018-02-25T17:09:05.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-02-25T17:11:18.000Z (almost 7 years ago)
• Last Synced: 2024-12-09T04:45:45.290Z (about 2 months ago)
• Topics: clear, empty, postcss
• Language: JavaScript
• Size: 2.93 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# PostCSS Clear Empty Strings [![Build Status][ci-img]][ci]

[PostCSS] plugin remove declarations with empty values, except `content` property.

[PostCSS]: https://github.com/postcss/postcss

[ci-img]:  https://travis-ci.org/shrpne/postcss-clear-empty-strings.svg

[ci]:      https://travis-ci.org/shrpne/postcss-clear-empty-strings

If you use CSS framework like [Bootstrap](https://getbootstrap.com/) or [Uikit](https://getuikit.com/), you can override their variables with empty string to remove declaration which use that variable.

```scss

/* Bootstrap scss source */

h1, .h1 { font-size: $h1-font-size; }

h2, .h2 { font-size: $h2-font-size; }

h3, .h3 { font-size: $h3-font-size; }

h4, .h4 { font-size: $h4-font-size; }

h5, .h5 { font-size: $h5-font-size; }

h6, .h6 { font-size: $h6-font-size; }

/* Your scss variables */

$h1-font-size: 32px;

$h2-font-size: 24px;

$h3-font-size: 16px;

$h4-font-size: "";

$h5-font-size: "";

$h6-font-size: "";

/* css output generated from scss */

h1, .h1 { font-size: 32px; }

h2, .h2 { font-size: 24px; }

h3, .h3 { font-size: 16px; }

h4, .h4 { font-size: ""; }

h5, .h5 { font-size: ""; }

h6, .h6 { font-size: ""; }

/* postcss-clear-empty-string */

h1, .h1 { font-size: 32px; }

h2, .h2 { font-size: 24px; }

h3, .h3 { font-size: 16px; }

h4, .h4 { }

h5, .h5 { }

h6, .h6 { }

/* minify */

h1,.h1{font-size:32px}h2,.h2{font-size:24px}h3,.h3{font-size:16px}

```

## Usage

```js

postcss([ require('postcss-clear-empty-strings') ])

```

See [PostCSS] docs for examples for your environment.