uncss | Remove unused styles from CSS | Style Language library

by uncss JavaScript Version: 0.17.3 License: MIT

X-Ray Key Features Code Snippets(6)Community Discussions(10)Vulnerabilities Install Support

kandi X-RAY | uncss Summary

uncss is a JavaScript library typically used in User Interface, Style Language, Webpack applications. uncss has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can install using 'npm i uncss' or download it from GitHub, npm.

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

Support

Quality

Security

License

Reuse

Support

uncss has a medium active ecosystem.

It has 9329 star(s) with 437 fork(s). There are 143 watchers for this library.

It had no major release in the last 12 months.

There are 44 open issues and 256 have been closed. On average issues are closed in 204 days. There are 5 open pull requests and 0 closed requests.

It has a neutral sentiment in the developer community.

The latest version of uncss is 0.17.3

Quality

uncss has 0 bugs and 0 code smells.

Security

uncss has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

uncss code analysis shows 0 unresolved vulnerabilities.

There are 0 security hotspots that need review.

License

uncss is licensed under the MIT License. This license is Permissive.

Permissive licenses have the least restrictions, and you can use them in most projects.

Reuse

uncss releases are available to install and integrate.

Deployable package is available in npm.

Installation instructions are not available. Examples and code snippets are available.

It has 1542 lines of code, 0 functions and 110 files.

It has low code complexity. Code complexity directly impacts maintainability of the code.

Top functions reviewed by kandi - BETA

kandi has reviewed uncss and discovered the below as its top functions. This is intended to give you an instant insight into uncss implemented functionality, and help decide if they suit your requirements.

This function is used to find unused rules .
Initialize the package .
Processes the text from a CSS API
Fetch relative paths
Read stylesheets from files
Parse CSS message .
Get CSS from files
Filter ignore selector
Find all selected scripts .
Create a JSDoc from a given source .

Get all kandi verified functions for this library.

uncss Key Features

No Key Features are available at this moment for uncss.

uncss Examples and Code Snippets

Metalsmith UnCSS,<a rel="nofollow"></a>

JavaScript

Lines of Code : 17

License : No License

Copy

var Metalsmith = require('metalsmith');
var uncss = require('metalsmith-uncss');

Metalsmith(__dirname)
	.source('./src')
	.destination('./dest')
	.use(uncss({
		css: ['bootstrap.css','app.css'],	// CSS files to run through UnCSS
		html: ['index.html

React Redux Boilerplate,PostCSS,Useful other Plugins

JavaScript

Lines of Code : 2

License : No License

Copy

$yarn add --dev cssnano

$yarn add --dev uncss

Metalsmith UnCSS,<a rel="nofollow"></a>

JavaScript

Lines of Code : 2

License : No License

Copy

npm install --save metalsmith-uncss

var uncss = require('metalsmith-uncss');

Run a gulp plugin that requires the current file path and name

JavaScript

Lines of Code : 57

License : Strong Copyleft (CC BY-SA 4.0)

Copy

const gulp = require("gulp"),
    appRoot = require("app-root-path"),
    sass = require("gulp-sass"),
    path = require("path"),
    utilities = require(appRoot + "/Tools/Utilities-Functions/utilities-functions.js"),
    fs = require("fs

How to stop purging tailwind components

JavaScript

Lines of Code : 71

License : Strong Copyleft (CC BY-SA 4.0)

Copy

const uncss = require('postcss-uncss');

mix.js('js/dev/app.js', 'js/build/app.js')
    .sass('css/dev/app.scss', 'css/build')
    .options({
        processCssUrls: false,
        postCss: [
            tailwindcss('./tailwind.config.js')

How does grunt uncss task work internally

JavaScript

Lines of Code : 40

License : Strong Copyleft (CC BY-SA 4.0)

Copy

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

Community Discussions

Trending Discussions on uncss

How to include @media in Grunt-Uncss Ignore Function

Setting Up a config file for PostCSS

Node App works on Heroku Local but crashes on Heroku server. using simple Foundation template project

Configuring postcss-uncss for Laravel Mix

UnCSS for Node.js 10 - dependency missing for Canvas

Running uncss against Angular templates?

Critical CSS for multiple pages and breakpoints

Why gulp-inject comment was removed when I minify HTML with gulp

How to bind multiple values with amp-selector?

Foundation 6.4 JavaScript within project not working, but external JS does

QUESTION

How to include @media in Grunt-Uncss Ignore Function

Asked 2019-Sep-11 at 16:25

I'm using Grunt to remove unused CSS on my page. Everything works pretty good, but unfortunately sometimes a few code snippets get removed, although being crucial for the website.

I would like Grunt to ignore all @media (min-width: ...) CSS Rules, but I don't know how to phrase that in my Gruntfile.JS.

For Example:

styles.css

...

ANSWER

Answered 2019-Sep-11 at 15:56

Add the comment: /* uncss:ignore start */ to the line preceding your @media ... query in the styles.css file, and also add the closing comment /* uncss:ignore end */ to the next line following the end of the @media query.

Any rule(s) between those two comments will be ignored.

Example of styles.css:

Source https://stackoverflow.com/questions/57877026

QUESTION

Setting Up a config file for PostCSS

Asked 2019-Jul-13 at 23:00

I'm using PostCSS and I want to add Post-uncss. I use no task runners, just Postcss-cli. My package.json looks like this right now:

...

ANSWER

Answered 2018-Nov-29 at 01:59

You can pass plugin parameters within a postcss.config.js file like so:

Source https://stackoverflow.com/questions/52782050

QUESTION

Node App works on Heroku Local but crashes on Heroku server. using simple Foundation template project

Asked 2019-Jul-10 at 18:18

I am trying to deploy a Foundation web app based on Yarn, Gulp and Node.js on Heroku. It works with heroku local web but crashes on the Heroku server.

I have set the port correctly. I am trying to remove Browsersync and use gulp-connect instead. In my gulpfile.js I have set the connectHeroku task which is run after build. I have set the yarn start command in the environment for Heroku.

Here is my gulp.babel.js:

...

ANSWER

Answered 2019-Jul-10 at 18:18

OK so here is what I've managed to do and it worked (pls note that I am very new to this): Stack: Zurb Foundation template (zurb foundation) which uses yarn and gulp for packet management and build. Outputs to a folder called dist (changeable in the config.yml); Expressjs; NodeJS.

Source https://stackoverflow.com/questions/56922271

QUESTION

Configuring postcss-uncss for Laravel Mix

Asked 2019-Jul-02 at 16:29

I am trying to remove unused css rules from one or more of my sass files.

Research led me to postcss-uncss as the best option for removing unused css if you do not use server-side rendering (see: https://www.purgecss.com/comparison)

https://github.com/uncss/postcss-uncss

Now, postcss-uncss is a wrapper for uncss: https://github.com/uncss/uncss However, the uncss documentation is confusing to me, and the example configuration here is not useful: https://github.com/uncss/postcss-uncss#example-configuration

How does one configure postcss-uncss for Laravel Mix?

THis is what I have so far:

...

ANSWER

Answered 2019-Jul-02 at 06:47

Perhaps you might try the Spatie package?

Let's install it.

Source https://stackoverflow.com/questions/56568348

QUESTION

UnCSS for Node.js 10 - dependency missing for Canvas

Asked 2019-Jan-25 at 01:49

I get the following error. I've tried to force the installing of the canvas package but with no luck. Does the following error mean that I have to find a way to install the dependency of uncss?

...

ANSWER

Answered 2019-Jan-25 at 01:49

This is an open issue still for uncss (Issue) , but for other packages that use canvas it seems this could be sorted out by using

Source https://stackoverflow.com/questions/54352948

QUESTION

Running uncss against Angular templates?

Asked 2018-Dec-07 at 18:42

With uncss we can remove unused css from our stylesheets. It works by looking at the html files to be deployed and only packaging the css rules used.

Angular 4 has directives that apply conditional css like this:

...

ANSWER

Answered 2017-May-19 at 05:31

I am building a tool that can that. It is still in beta though but would love to try it against your app. The tool uses a snippet of JavaScript to detect the CSS selectors being used. Every time a user is interacting with the page, it triggers a new cycle of test.

A server aggregates the results. Finally, the tool can trigger pull-request against your code to actually remove the unused CSS once it evaluate that a selector can be safely removed, aka not being used in X days.

If you want to try it, go to https://www.bleachcss.com

Source https://stackoverflow.com/questions/44036057

QUESTION

Critical CSS for multiple pages and breakpoints

Asked 2018-May-18 at 09:30

I have a CSS file that I need to optimize for loading. It's big with many different components that are used on many different pages (start page, category pages, detail pages) on different breakpoints (mobile, table, desktop), thus manual optimization is complicated. At least extracting the most important parts would help load times (as it's blocking rendering) - the current big file can be loaded async.

What I've tried is using the various critical css extractors and uncss. But all of them can only extract the CSS for one page in one breakpoint.

Is there any tool that I've missed? I'm looking for something that can do

magic-used-css-extractor 400px,1024px,2048px http://example.com/ http://example.com/category1/ http://example.com/category2/ http://example.com/detail1/ http://example.com/detail2/

and returns a CSS that matches the used CSS on all of these pages. Or a tool that can merge a couple of critical CSS in correct order with at-rules.

...

ANSWER

Answered 2018-May-18 at 09:30

Just yesterday I've seen a trick done by https://github.com/addyosmani/critical

It supports multiple dimensions, but not multiple pages. Still the same trick might be applied to merge the critical css after running it on a couple of important pages.

The tool critical is using is https://github.com/jakubpawlowicz/clean-css, which would remove duplicate rules and therefor merge multiple css files.

See here for reference: https://github.com/addyosmani/critical/blob/master/lib/core.js#L30

Source https://stackoverflow.com/questions/42200103

QUESTION

Why gulp-inject comment was removed when I minify HTML with gulp

Asked 2018-May-14 at 05:03

Here is to minify html file inside gulp as follow

...

ANSWER

Answered 2018-May-14 at 04:52

Which plugin are you using? Gulp-minify-html? That is deprecated. If you are using that try the option "comments: true" as in :

Source https://stackoverflow.com/questions/50323059

QUESTION

How to bind multiple values with amp-selector?

Asked 2018-Mar-08 at 12:37

How would you show the results from multiple selected options using amp-selector?

For example in the code below,

If you select both US & Europe, the list should show:

US
US
US & Europe
Europe
Europe
Australia & US & Europe

...

ANSWER

Answered 2018-Mar-08 at 06:18

As I know amp-selector just allow single select. I think in this case try using checkbox

Source https://stackoverflow.com/questions/49163971

QUESTION

Foundation 6.4 JavaScript within project not working, but external JS does

Asked 2018-Feb-12 at 12:13

I am losing my mind with javascript in Foundation 6.4. I have no idea what's going on with this Webpack thing. It seems like some libraries/plugins work and some do not. My latest issue is with plyr (https://plyr.io/). I do not understand why TweenMax works 100% fine and plyr.js does not. What am I doing wrong?

This is the error I get..

app.js:23026 Uncaught ReferenceError: plyr is not defined

This is what my app.js looks like..

...

ANSWER

Answered 2018-Feb-04 at 05:26

You might need to use something like expose-loader so that plyr is available globally on window. Here's more info on how we used expose-loader in our project.

Source https://stackoverflow.com/questions/48526790

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install uncss

You can install using 'npm i uncss' or download it from GitHub, npm.

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

Find more information at: