bezoerb / postcss-discard Goto Github PK

View Code? Open in Web Editor NEW

12.0 3.0 3.0 1.63 MB

PostCSS plugin to discard rules, atrules or declarations by selector, RegExp or callback function

License: MIT License

JavaScript 100.00%

postcss-discard's Introduction

PostCSS Discard

PostCSS plugin to discard rules by selector, RegExp, or @type. Also usable to generate a diff from two stylesheets

Usage

const discard = require('postcss-discard');
postcss([discard(options)]);

See PostCSS docs for examples for your environment.

Options

Name	Type	Description
atrule	`String`, `RegExp`, `Function`	Match atrule like `@font-face`
rule	`String`, `RegExp`, `Function`	Match rule like `.big-background-image {...}`
decl	`String`, `RegExp`, `Function`	Match declarations
css	`String`	CSS String or path to file containing css

You can also pass a filter function for any of the supported types. The function is invoked with two arguments (node, value).

node The currently processed AST node generated by postcss.
value Current value.

Return true if the element should be discarded.

Examples

Diffing stylesheets

postcss(discard({css: 'STYLES TO BE REMOVED'})).process('ORIGINAL CSS').css;

Discard by specifying rules

.bg {
  width: 100%;
  height: 100%;
  background-image: url('some/big/image.png');
}

@font-face {
  font-family: 'My awesome font';
}

@media print {
  ...;
}

postcss([
  discard({
    atrule: ['@font-face', /print/],
  }),
]);

.bg {
  width: 100%;
  height: 100%;
}

postcss-discard's People

Contributors

Stargazers

Watchers

Forkers

therealpecus docccdev dartess

postcss-discard's Issues

cannot drop @supports rules

Hi!

we're running postcss-discard as part of Addy Osmani's critical. We verified and isolated a curious case: postcss-discard errors out when asked to drop @supports atRules.

const postcss = require('postcss')
const discard = require('postcss-discard')
const css = `@charset "UTF-8"; @supports(--css: variables) { @font-face{ font-family: SkyText } body { background: lime; }}; body { background: rebeccapurple; }`

postcss([discard({
  atrule: ['@supports', '@charset'],
})])
  .process(css, { from: './full.css', to: './cleaned.css' })
  .then(result => console.log(result))
  .catch(e => console.error(e))

Error: TypeError: Cannot read property 'type' of undefined

It works if @supports is paired with @font-face but we need to keep @font-face definitions outside of @supports groups.

Let me know if you need additional help in isolating this. I might give it a try with a PR, but it will take me a while to familiarize with the codebase. Maybe it's a quickie ;-)

Thanks!
Matteo

Plugin removed all @custom-media rules

Can you help solve this problem? thanks

source css:

@custom-media --small only screen and (min-width: 480px);
@custom-media --medium only screen and (min-width: 768px);

@media (--small) {...}
@media (--medium) {...}

use plugin:

postcssDiscard({ atrule: [/--small/] }),

output css:

@media (--medium) {...}

Help pls! How can I use with laravel mix?

I want to remove rules from app.css which are in critical.css file.

This is my code in webpack.mix.js. No errors & nothing happens.

    mix.postCss('public/css/app.css', 'public/css/app_1.css', [
        require('postcss-discard')({
            css: 'public/css/app_critical.min.css'
        })
    ]);

bezoerb / postcss-discard Goto Github PK

postcss-discard's Introduction

PostCSS Discard

Usage

Options

Examples

Diffing stylesheets

Discard by specifying rules

postcss-discard's People

Contributors

Stargazers

Watchers

Forkers

postcss-discard's Issues

cannot drop @supports rules

Plugin removed all @custom-media rules

Help pls! How can I use with laravel mix?

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent