oyvindeh / ucss Goto Github PK

View Code? Open in Web Editor NEW

1.6K 1.6K 64.0 331 KB

Find unused and duplicate CSS

License: Other

JavaScript 97.67% CSS 1.80% HTML 0.53%

ucss's People

Contributors

Stargazers

Watchers

ucss's Issues

Wildcard in middle of exclude URL doesn't work

Example config:

module.exports = {
    pages: {
        crawl: "http://example.com/",
        exclude: [
            "http://example.com/*/list",
        ],
    },

    css: [
        "http://example.com/styles.css",
    ],
};

When I run ucss it still fetches URLs like http://example.com/thing/list

By extension this also means patterns with multiple wildcards - e.g. http://example.com/*/list/* - do not work either.

Custom login does not work

Specifying a login function in ucss.json does not work, as functions are not allowed in JSON files.

Problems with nested selectors, and selectors preceded by nested selectors

Example:

.foo {
    color: red;
}
@media all and (min-width: 500px) {
    .bar {
        background: blue;
    }
}
.qux { /* no match */
    float: left;
}

Here, ".bar" will not be caught. Furthermore, ".qux" will be "} .qux", which is wrong.

Skip mailto:url

Hi there,

Great tool you guys build here! Keep up the good work. The only thing I came across was the links with mailto: are followed too. Small thing to fix I guess.

Cheers!

Dear oyvindeh,
Thank you for your great work first. I really need this feature.
I have a question regarding config_ucss.js
I have a Wordpress site and I added username and password on this config file, however, the logged in feature is not working. Even I edited the file, login.js according to username id name and password id, however, it does not work.
Could you give some tips to use this feature on my wordpress site?
Thanks in advance.

Best regards,
David

UCSS trying to fetch anchor URLs

I have many pages with anchor links to sections of the page. But UCSS seems to be fetching all these as separate URLs. So I'm getting output like this:

HTTP 200 http://example.com/page 444c98520cbf7bc16f6c3bffb08e724b
HTTP 200 http://example.com/page#section1 3eb116f7347eeeab57e11ef2d3ac606c
HTTP 200 http://example.com/page#section2 33b6b5b8d856d726c9fb69820d28dba1

This means UCSS is fetching the same URL multiple times.

More detailed output for unused rules

When listing unused rules, it would be useful to give more detailed info (like with the -f option, but only for unused rules).

Refactor result object

The result object should be refactored as the structure is suboptimal.

Selector position

The position of a selector in the source files should be available in the results object. This will make it easier to implement support for e.g. source maps later.

Sort options

It should be possible to specify the sort order of rules. Currently, the only sort order is number of matches. It should also be possible to sort alphabetically.

Can’t run without config file

When trying to run the ucss without a config file execution will fail even if a CSS file is specified, saying:

Problems reading file '/Users/name/config_ucss.js'.
Error: Cannot find module '/Users/name//Users/name/config_ucss.js'
Please check that the file exists, and has the correct permissions.

This behavior is in conflict with the instructions one receives when running ucss with the --help flag:

Either a config file, or HTML and CSS files are required. If no arguments are
specified, uCSS will look for a config_ucss.js file in the current directory.

Follows links to binaries

Should not follow links to binaries etc., only html files.

Handle @document, and @supports

Currently crashes on these.

Make sure selectors in comma separated lists are handled properly

Make sure selectors in comma separated lists are handled properly.

Bug or outdated docs?

I'm following your README:

// css can be an array of strings, file paths, or URLs
var css = [".foo {} .bar {} .baz {}"];

// html can be an array of strings, file paths, or URLs
var html = ["<html><head></head><body class='foo'></body></html>"];

var context = {
    whitelist: [".baz"], // CSS selectors to ignore
    auth: null, // For login (please se example elsewhere)
    timeout: 400 // Request timeout (defaults to 400ms)
};
var logger = null; // Function for logging HTTP requests

// Do the magic
ucss.analyze(html, css, context, logger, function(result) {
    // Do something to the result object
    console.log(result);
});

When I run this, I get:

> node index.js

{
  selectors: {
    '.foo': {
      ignored: false,
      whitelisted: false,
      matches_html: 0,
      matches_uris: [],
      occurences_css: 1,
      pos_css: [Object]
    },
    '.bar': {
      ignored: false,
      whitelisted: false,
      matches_html: 0,
      matches_uris: [],
      occurences_css: 1,
      pos_css: [Object]
    },
    '.baz': {
      ignored: false,
      whitelisted: true,
      matches_html: 0,
      matches_uris: [],
      occurences_css: 1,
      pos_css: [Object]
    }
  },
  total: 3,
  total_used: 0,
  total_unused: 2,
  total_duplicates: 0,
  total_ignored: 1,
  load_errors: []
}

This doesn't seem correct. Shouldn't there be 1 used?

Rewrite config to be node modules instead of JSON files

In order to be able to specify functions in configurations, the config files should be node modules instead of JSON files.

HTML inside <script>

Hi,

For AngularJs it's a common task to put html code (templates) into e.g. <script type="text/ng-template" id="support.html">..</script> tags. It seems that ucss doesn't find selectors used in html code inside script tags and thus reports all of them as unused.

Couldn't read dependencies

Hi! I have problem with install.

npm ERR! install Couldn't read dependencies
npm ERR! Error: ENOENT, open '/Users/ilya/package.json'
npm ERR! If you need help, you may report this log at:
npm ERR!     <http://github.com/isaacs/npm/issues>
npm ERR! or email it to:
npm ERR!     <[email protected]>

npm ERR! System Darwin 13.0.0
npm ERR! command "node" "/usr/local/bin/npm" "install"
npm ERR! cwd /Users/ilya
npm ERR! node -v v0.10.21
npm ERR! npm -v 1.3.11
npm ERR! path /Users/ilya/package.json
npm ERR! code ENOENT
npm ERR! errno 34
npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /Users/ilya/npm-debug.log
npm ERR! not ok code 0

What can i do?

Regards

Is the README out of date?

This doesnt work out for me. Theres an extra semi colon and the arguments dont match what the actual library accepts. Probably should update the README.

var css = ".foo {} .bar {} .baz {}";
var html = "<html><head></head><body class='foo'></body></html>";
var whitelist = [".baz"];
var auth = null;
ucss.analyze(css, html, whitelist, auth, function(result) {
    require('../lib/helpers/output').standard(
        result, false, false, false);
    };);

Whether an array is empty or not should be judged by its length, not its self.

In lib/helpers/output.js, line 128:

https://github.com/oyvindeh/ucss/blob/master/lib/helpers/output.js#L128

            if (result.load_errors) {
                console.log("\n" + RED + BOLD + "WARNING: " + RESET
                            + "Some resources were not loaded successfully. This "
                            + "affects the result. Please see crawler log for "
                            + "more information.");
            }

this should be if (result.load_errors.length) {, otherwise it will always be true.

possible EventEmitter memory leak

I'm seeing a lot of: (node) warning: possible EventEmitter memory leak detected. 11 end listeners added. Use emitter.setMaxListeners() to increase limit.. Is this a real concern?

Support for CSS3-selectors

I like this tool!

But it would be great if it supported CSS3-selectors like prefixed pseudo-selectors, media queries etc (and +1 for font-face).
Might be related to the Sizzle-engine? I get this:

$ ucss --config config.json                                          

/usr/local/lib/node_modules/ucss/node_modules/jquery/lib/node-jquery.js:4292
    throw new Error( "Syntax error, unrecognized expression: " + msg );
          ^
Error: Syntax error, unrecognized expression: (max-width:860px)
    at Function.Sizzle.error (/usr/local/lib/node_modules/ucss/node_modules/jquery/lib/node-jquery.js:4292:8)
    at Function.Sizzle.filter (/usr/local/lib/node_modules/ucss/node_modules/jquery/lib/node-jquery.js:4278:12)
    at Function.Sizzle [as find] (/usr/local/lib/node_modules/ucss/node_modules/jquery/lib/node-jquery.js:4068:12)
    at jQuery.fn.extend.find (/usr/local/lib/node_modules/ucss/node_modules/jquery/lib/node-jquery.js:5456:11)
    at jQuery.fn.jQuery.init (/usr/local/lib/node_modules/ucss/node_modules/jquery/lib/node-jquery.js:212:38)
    at jQuery (/usr/local/lib/node_modules/ucss/node_modules/jquery/lib/node-jquery.js:52:10)
    at ucss.search.async.forEach.jsdom.env.done (/usr/local/lib/node_modules/ucss/lib/ucss.js:153:33)
    at exports.env.exports.jsdom.env.scriptComplete (/usr/local/lib/node_modules/ucss/node_modules/jsdom/lib/jsdom.js:199:39)
    at process.startup.processNextTick.process._tickCallback (node.js:244:9)

Cheers!

Crawler

It should be possible for uCSS to crawl a site.

Automatically clean out unused CSS

@oyvindeh , cleaning with regex can be a bit tricky so I might use cssom, but since ucss already parses with cssom I've been thinking about submitting a pull request to ucss with cleaning capabilities.

@ullmark although this would be a nice feature, I am not so sure how useful this is... At least not for bigger sites, where it would make the most sense.

For example, classes may be added/removed using JavaScript, and these styles would then be removed. They can of course be white-listed, but that requires manual work. The bigger and more complex the website, the more manual labor there will be, and I suspect there will have to be a lot of extra QA work when rules are automatically removed vs. when they are manually removed and tested individually.

Furthermore, if CSS is preprocessed, this does not make any sense. The same if you fetch CSS over network.

I'm a bit worried that this may make the code more complex than it needs to be, to add something of not much value, but perhaps you are able to convince me :)

Does not crawl if config provided

ucss -h http://www.host.com -c http://www.host.com/path/to.css crawls the page and outputs the urls as expected. however there are links to subdomains and youtube so this option is not suitable.

ucss -g config_ucss.js doesn't seem to crawl beyond the pages.crawl option in the config

content of config_ucss.js

module.exports = {
    "pages": {
        "crawl": "http://www.host.ca/",

        "exclude": [
            "http://www.youtube.com/",
            "http://sub1.host.ca/*",
            "http://sub2.host.ca/*"
        ]
    },

    "css": [
        "http://www.host.ca/css/style-min.css"
    ]
};

SASS support

Is it available or planned?

Analyse CSS without any HTML page

I think it would be helpful to be able to run the tool without having to provide any page, just CSS files.

Needs an option to crawl before and after login

Right now providing headers or a login function means login is immediately done. This means pages that respond to a user being logged in/out are not processed properly.

Easiest solution would be to provide an option that forces a scan before and after setting the headers and auth.

Handle jQuery throwing exceptions when matching elements

When checking to see if rules are used at around line ~150 in ucss.js, there are no safe-guards around jQuery perhaps throwing an exception when it sees what it deems an invalid expression.

In my case, I had a CSS attribute for input:invalid which node-jquery was throwing an exception when trying to locate.

Stops unexpectedly without any error message

When crawling, uCSS sometimes stops unexpectedly without giving any error message.

Whitelisted rules not output correctly

The idea with whitelisted rules is for them to be ignored, and thus not show up in the list of unused rules. Currently, they do show up.

@font-face support

Hi, first many thanks for creating this :)

I'am just testing it and seems that font-face css property is not supported :(

s$ ucss http://localhost:8000

/opt/local/lib/node_modules/ucss/node_modules/jquery/lib/node-jquery.js:4292
    throw new Error( "Syntax error, unrecognized expression: " + msg );
          ^
Error: Syntax error, unrecognized expression: @font-face
    at Function.Sizzle.error (/opt/local/lib/node_modules/ucss/node_modules/jquery/lib/node-jquery.js:4292:8)
    at Function.Sizzle.filter (/opt/local/lib/node_modules/ucss/node_modules/jquery/lib/node-jquery.js:4278:12)
    at Function.Sizzle [as find] (/opt/local/lib/node_modules/ucss/node_modules/jquery/lib/node-jquery.js:4068:12)
    at jQuery.fn.extend.find (/opt/local/lib/node_modules/ucss/node_modules/jquery/lib/node-jquery.js:5456:11)
    at jQuery.fn.jQuery.init (/opt/local/lib/node_modules/ucss/node_modules/jquery/lib/node-jquery.js:212:38)
    at jQuery (/opt/local/lib/node_modules/ucss/node_modules/jquery/lib/node-jquery.js:52:10)
    at ucss.search.async.forEach.jsdom.env.done (/opt/local/lib/node_modules/ucss/lib/ucss.js:153:33)
    at exports.env.exports.jsdom.env.scriptComplete (/opt/local/lib/node_modules/ucss/node_modules/jsdom/lib/jsdom.js:199:39)
    at process.startup.processNextTick.process._tickCallback (node.js:244:9)

Better error handling, with proper error messages

Better error handling and reporting is needed when a resouce (html or css file) cannot be found or downloaded.

There are some aspects complicating this: For example, if there is a list of ten CSS urls, and you get 404 on one of them, what should be done? Should the whole script be aborted, or should the other files be processed?

Better test coverage

More tests should be written. Currently, there are no tests for login and output functions, and there's no tests for the ucss.bin.js file.

Add support for URLs to CSS files

Currently, CSS is only accepted as strings, or as paths to local files. Support for giving URLs to CSS should be added.

Release v0.4.7 with the latest changes

Please make a new release to npm so that the recent fixes can be taken in to use.

Perhaps also drop the version from readme title..

Parsing Twitter Bootstrap.

Hello,
I've started to build a simple grunt-task to be able to run your package. The idea was to be able to clean away unused css as a step in your build process.

A use case for this would be for an example when you build a site using twitter bootstrap and want to clean away all the css you don't use. So as a test in my task I've been thinking of that exact scenario, although, I get an error when I try to analyze twitter bootstrap.

cli example
ucss -h http://twitter.github.com/bootstrap/ -c http://twitter.github.com/bootstrap/assets/css/bootstrap.css

error;

/usr/local/share/npm/lib/node_modules/ucss/lib/ucss.js:40
                    var selectorList = selectorGroup.split(",");
                                                     ^
TypeError: Cannot call method 'split' of undefined

My task can be found here btw, https://github.com/ullmark/grunt-ucss

Support for JavaScript-heavy pages

Look into how this could be implemented.

Some initial thoughs:
uCSS needs to be able to run JS on a page. Could e.g. Zombie be used, instead of Cheerio (which is currently used)?

uCSS must also be able to perform actions on the page. Perhaps a custom function for each link in the include list could be called to trigger actions on a page, before uCSS tries to match selectors on that page? It should probably be possible to do several actions on every page, and running selector matches for each action.

var headers = {
  "User-Agent": "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:25.0) Gecko/20100101 Firefox/25.0"
};

as a default headers in _getHtmlAsString method, got the server responding with HTTP 200.

The command used for revealing this:

ucss -h http://naginata-finland.jit.su -c http://naginata-finland.jit.su/css/naginata.min.css -f

This could be fixed by adding the ability to set either user agent or custom headers in command line options / config file.

oyvindeh / ucss Goto Github PK

ucss's People

Contributors

Stargazers

Watchers

Forkers

ucss's Issues

Recommend Projects

Recommend Topics

Recommend Org