uncss / postcss-uncss Goto Github PK

View Code? Open in Web Editor NEW

122.0 5.0 3.0 5 KB

Use uncss as a postcss plugin

License: MIT License

JavaScript 100.00%

uncss postcss css

postcss-uncss's Introduction

postcss-uncss

Use uncss as a PostCSS plugin.

About

UnCSS is a tool that removes unused CSS from your stylesheets. It works across multiple files and supports Javascript-injected CSS.

Example:

html:

<body>
  <p class="red">Hello World!</p>
</body>

css before:

.red {
  color: red;
}
.blue {
  color: blue;
}

css after:

.red {
  color: red;
}

How?

The HTML files are loaded by jsdom and JavaScript is executed. UnCSS filters out selectors that are not found in the HTML files.

See the UnCSS docs for more information.

Installation

postcss-uncss specifies UnCSS as a peerDependency, so you will have to install UnCSS as well.

npm install postcss-uncss uncss

postcss-uncss' MAJOR & MINOR version numbers correspond to UnCSS' version numbers; however, the PATCH version number may differ.

Usage

postcss([ require('postcss-uncss') ])

See PostCSS docs for examples for your environment.

Options

html (Array): provide a list of html files to parse for selectors and elements. Usage of globs is allowed.
ignore (Array): provide a list of selectors that should not be removed by UnCSS. For example, styles added by user interaction with the page (hover, click), since those are not detectable by UnCSS yet. Both literal names and regex patterns are recognized. Otherwise, you can add a comment before specific selectors in your css:
```
/* uncss:ignore */
.selector1 {
    /* this rule will be ignored */
}

.selector2 {
    /* this will NOT be ignored */
}
```

Example Configuration

{
  html: ['index.html', 'about.html', 'team/*.html'],
  ignore: ['.fade']
}

postcss-uncss's People

Contributors

Stargazers

Watchers

Forkers

alexviejo naeluh steph-ko

postcss-uncss's Issues

this plugin seems doesn't work with react

I've tried many ways, but none of them works.

module.exports = ({env}) => ({
  plugins: {
      'postcss-uncss':{
        "html": ['http://localhost:3456'],
        //   html: ['src/**/*.html'],
        //   html: ['src/index.html'],
      },
 }
});

the rest of two don't show any error ,but my output css file is empty.

jsdom is breaking when running this plugin

I'm running postcss as part of a Gulp workflow, and when I add this plugin, I get the following error:

Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)
    at module.exports (/Users/jf065530/_repos/scouting247/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
    at HTMLCanvasElementImpl.getContext (/Users/jf065530/_repos/scouting247/node_modules/jsdom/lib/jsdom/living/nodes/HTMLCanvasElement-impl.js:42:5)
    at HTMLCanvasElement.getContext (/Users/jf065530/_repos/scouting247/node_modules/jsdom/lib/jsdom/living/generated/HTMLCanvasElement.js:50:45)
    at Object.M.canvas (https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js:1:3612)
    at https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js:1:8079
    at https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js:1:11064
    at ContextifyScript.Script.runInContext (vm.js:59:29)
    at Object.runInContext (vm.js:120:6)
    at processJavaScript (/Users/jf065530/_repos/scouting247/node_modules/jsdom/lib/jsdom/living/nodes/HTMLScriptElement-impl.js:190:10)
    at HTMLScriptElementImpl._innerEval (/Users/jf065530/_repos/scouting247/node_modules/jsdom/lib/jsdom/living/nodes/HTMLScriptElement-impl.js:122:5) undefined

When I comment the uncss plugin out, the workflow runs just fine.

My options follow:
uncss({ html: [paths.build + '*.html'], ignore: ['.on'] })

paths.build is defined. There are HTML files in that directory.

NPM dependency warning message

When installing postcss-uncss, npm installs the latest version of uncss 0.17.0. There's a warning message asking for 0.16.1.

npm WARN [email protected] requires a peer of uncss@^0.16.1 but none is installed. You must install peer dependencies yourself.

One could manually install 0.16.1, but this pluging works well with 0.17.0, so there's no need for that.

Easy fix is to update the package.json file to requeste version 0.17.0 of uncss.

I'll submit a PR.

How to pass postcss options to this plugin?

Hi,

Could you explain how to set up postcss configuration options with this plugin?

I would like to use postcss with bootstrap and preserve media queries for mobile devices.

I use postcss -c postcss.json.

postcss.json:

{
    "use": ["postcss-uncss", "cssnano"],
    "output": "_includes/main.css",
    "autoprefixer": {
        "browsers": "> 5%"
    },
    "postcss-uncss": {
    "html": ["http://localhost:4000"],
    "options": {
        "media": ["(min-width: 768px)", "(min-width: 992px)", "(min-width: 1200px)"]
    }
    }
}

{
    "use": ["postcss-uncss", "cssnano"],
    "output": "_includes/main.css",
    "autoprefixer": {
        "browsers": "> 5%"
    },
    "postcss-uncss": {
    "html": ["http://localhost:4000"],
    "media": ["(min-width: 768px)", "(min-width: 992px)", "(min-width: 1200px)"]
    }
}

Unfortunately media queries are removed from output css in both cases.

Postcss v7.0.2 compatibility

How can I make it to work on the version of postcss described in the title?

option htmlroot missing?

The option htmlroot supported by gulp-uncss seems to be missing.

It is required for proper processing of relative links to javascript code within the html files.

css.walkRules is not a function

Hi, I've setup my gulp build to use gulp-postcss and postcss-uncss (8.0.0 and 0.16.1 respectively).

When trying to run uncss I get the following error:

[16:07:44] Using gulpfile C:\xampp\htdocs\site\gulpfile.js
[16:07:44] Starting 'ampSass'...

events.js:136
throw er; // Unhandled 'error' event
^
TypeError: css.walkRules is not a function
at getUsedSelectors (C:\xampp\htdocs\site\node_modules\uncss\src\lib.js:134:9)
at Promise.all.pages.map (C:\xampp\htdocs\site\node_modules\uncss\src\lib.js:234:44)
at Array.map ()
at uncss (C:\xampp\htdocs\site\node_modules\uncss\src\lib.js:234:30)
at processAsPostCss (C:\xampp\htdocs\site\node_modules\uncss\src\uncss.js:214:12)
at resource.then (C:\xampp\htdocs\site\node_modules\uncss\src\uncss.js:226:20)
at

Any ideas what this could be?

Wrote a Blog Article also outlining usage

https://medium.com/@ole.ersoy/filtering-unused-css-selectors-with-postcss-3504002b7c82
In case you wanted to include it with the documentation.

uncssrc doesn't seem to work

Hi,

I would like to use .uncssrc file to define a list of ignored patterns.
However, even when I set uncssrc: '.uncssrc' in the options object, it doesn't seem to affect the uncss process.
Could you please help me out?

Thanks!

Ignore with RegEx?

Is it possible to set ignore patterns as regex?

I want to ignore any selector in CSS sheets that includes ".open"

By the way, this uncss fails with Bootstrap where navigation panel is displayed on press/click, it only adds a class ".open". This class is not used otherwise.

Are globbing patterns supported?

Before I was using the gulp uncss plugin like this:

  return gulp.src(PLI.SRC_MAIN_CSS)
    .pipe(pc(pre_uncss_processors))
    .pipe(uncss({
      html: [PLI.TARGET_MAIN_HTML]
    }))

The PLI.TARGET_MAIN_HTML is just a globbing string like this PLI.TARGET_MAIN_HTML = path.join(PLI.target.main.html, GLOB.ALL_HTML);. It selects all the html in the main directory.

I'm trying to switch over to the postcss uncss plugin. I have the processors configured like this:

var pc_uncss = require('postcss-uncss');

var uncss_processors = [..., autoprefixer, pc_uncss({html: [PLI.TARGET_MAIN_HTML]}), pc_reporter({
  clearMessages: true
})];

So I moved the globbing string from the plugin configuration to the postcss plugin configuration, but now I get messages like this:

[15:19:07] Using gulpfile ~/Junk/@superflycss/component-link/gulpfile.js
[15:19:07] Starting 'deploy:test:css'...

events.js:182
      throw er; // Unhandled 'error' event
      ^
Error: UnCSS: no HTML files found
    at getHTML (/home/ole/Junk/@superflycss/component-link/node_modules/uncss/src/uncss.js:32:31)
    at process (/home/ole/Junk/@superflycss/component-link/node_modules/uncss/src/uncss.js:223:20)
    at /home/ole/Junk/@superflycss/component-link/node_modules/uncss/src/uncss.js:249:16
    at LazyResult.run (/home/ole/Junk/@superflycss/component-link/node_modules/postcss/lib/lazy-result.js:270:20)
    at LazyResult.asyncTick (/home/ole/Junk/@superflycss/component-link/node_modules/postcss/lib/lazy-result.js:185:32)
    at LazyResult.asyncTick (/home/ole/Junk/@superflycss/component-link/node_modules/postcss/lib/lazy-result.js:197:22)
    at LazyResult.asyncTick (/home/ole/Junk/@superflycss/component-link/node_modules/postcss/lib/lazy-result.js:197:22)
    at LazyResult.asyncTick (/home/ole/Junk/@superflycss/component-link/node_modules/postcss/lib/lazy-result.js:197:22)
    at LazyResult.asyncTick (/home/ole/Junk/@superflycss/component-link/node_modules/postcss/lib/lazy-result.js:197:22)
    at LazyResult.asyncTick (/home/ole/Junk/@superflycss/component-link/node_modules/postcss/lib/lazy-result.js:197:22)
    at LazyResult.asyncTick (/home/ole/Junk/@superflycss/component-link/node_modules/postcss/lib/lazy-result.js:197:22)
    at LazyResult.asyncTick (/home/ole/Junk/@superflycss/component-link/node_modules/postcss/lib/lazy-result.js:197:22)
    at LazyResult.asyncTick (/home/ole/Junk/@superflycss/component-link/node_modules/postcss/lib/lazy-result.js:197:22)
    at LazyResult.asyncTick (/home/ole/Junk/@superflycss/component-link/node_modules/postcss/lib/lazy-result.js:197:22)
    at LazyResult.asyncTick (/home/ole/Junk/@superflycss/component-link/node_modules/postcss/lib/lazy-result.js:197:22)