zmoazeni / csscss Goto Github PK
View Code? Open in Web Editor NEWA CSS redundancy analyzer that analyzes redundancy.
Home Page: http://zmoazeni.github.io/csscss/
License: MIT License
A CSS redundancy analyzer that analyzes redundancy.
Home Page: http://zmoazeni.github.io/csscss/
License: MIT License
Terminal output:
$ csscss CSSCSS_DEBUG=true stylesheet.css
/usr/local/Cellar/ruby/2.0.0-p0/lib/ruby/2.0.0/open-uri.rb:36:in `initialize': No such file or directory - CSSCSS_DEBUG=true (Errno::ENOENT)
from /usr/local/Cellar/ruby/2.0.0-p0/lib/ruby/2.0.0/open-uri.rb:36:in `open'
from /usr/local/Cellar/ruby/2.0.0-p0/lib/ruby/2.0.0/open-uri.rb:36:in `open'
from /usr/local/Cellar/ruby/2.0.0-p0/lib/ruby/gems/2.0.0/gems/csscss-1.0.0/lib/csscss/cli.rb:42:in `block in execute'
from /usr/local/Cellar/ruby/2.0.0-p0/lib/ruby/gems/2.0.0/gems/csscss-1.0.0/lib/csscss/cli.rb:20:in `map'
from /usr/local/Cellar/ruby/2.0.0-p0/lib/ruby/gems/2.0.0/gems/csscss-1.0.0/lib/csscss/cli.rb:20:in `execute'
from /usr/local/Cellar/ruby/2.0.0-p0/lib/ruby/gems/2.0.0/gems/csscss-1.0.0/lib/csscss/cli.rb:15:in `run'
from /usr/local/Cellar/ruby/2.0.0-p0/lib/ruby/gems/2.0.0/gems/csscss-1.0.0/lib/csscss/cli.rb:142:in `run'
from /usr/local/Cellar/ruby/2.0.0-p0/lib/ruby/gems/2.0.0/gems/csscss-1.0.0/bin/csscss:4:in `<top (required)>'
from /usr/local/opt/ruby/bin/csscss:23:in `load'
from /usr/local/opt/ruby/bin/csscss:23:in `<main>'
Ruby/RubyGems version 2
Anyone got this available as a web app? Or looking to port to PHP or python? not a big Ruby guy but looks really handy!
Hey,
prelude -> I'm a JavaScript guy who rarely touched ruby before, so unfortunately I'm not able to implement this on my own :(
Basically, what CSSCSS does, can be considered as Copy & Paste Detection (http://en.wikipedia.org/wiki/Duplicate_code) there are other tools for other languages that can detect & report such issues (https://github.com/sebastianbergmann/phpcpd).
Those tools normally can output the results in a special XML format, that can be consumed by various CI Tools (like Jenkins for example).
They mostly convert it to some nice diagrams & can also fail the build if the
rate of copy-pasted code is above a user defined value.
The defacto standard pmd-cpd XML output would look like this:
<?xml version="1.0" encoding="utf-8"?>
<pmd-cpd>
<duplication lines="" tokens="5">
<file line="96" path="/Users/whatever/myproject/css/main.css"/>
<file line="159" path="/Users/whatever/myproject/css/main.css"/>
<codefragment><![CDATA[" display: block;
margin: 20px;
"]]></codefragment>
</duplication>
<duplication lines="" tokens="4">
<file line="24" path="/Users/whatever/myproject/css/main.css"/>
<file line="199" path="/Users/whatever/myproject/css/main.css"/>
<file line="312" path="/Users/whatever/myproject/css/main.css"/>
<codefragment><![CDATA[" display: none;
margin: 50px;
"]]></codefragment>
</duplication>
<duplication lines="" tokens="3">
<file line="64" path="/Users/whatever/myproject/css/main.css"/>
<file line="111" path="/Users/whatever/myproject/css/main.css"/>
<codefragment><![CDATA[" h1.my.super.overqualified.selector"]]></codefragment>
</duplication>
</pmd-cpd>
What do you think, could that reporter be easily integrated into the CSSCSS?
I think a lot people would benefit from this.
Hi,
The tool report the rules for ::selection
and ::-moz-selection
as duplicate.But for now we need to write the rules for both separately (https://developer.mozilla.org/en/docs/CSS/::selection).
Not a big issues, but thought I could share (awesome project btw and would love to fork but sadly I don't know ruby :( ).
Example with
::-moz-selection {
background: #000;
color: #fff;
text-shadow: none;
}
::selection {
background: #000;
color: #fff;
text-shadow: none;
}
we get the error:
{::-moz-selection} AND {::selection} share 3 rules`
When I tried this out for the very first time I just so happen to use a css file that didn't have any redundancies. The result? I thought I was either doing something wrong or that there was something wrong with csscss. Took me a while to realize everything was absolutely fine.
It'd be slick to colorize the output so it's easier on the eyes.
I'm still working on an issue where some rules aren't consolidated correctly.
Sorry in advance, because code and programming is a vast, confusing mystery to me -- but I wanted to start thinking about a user interface for this potentially great tool with a bit of UX rigor.
When run on SCSS mode, CSSCSS expands mixins before running the redundancy check. For instance, two of my selectors both include three of the same mixins, which end up expanding into 23 rules, and CSSCSS reports 25 shared rules between them.
I would think that using mixins should also count as having eliminated redundancy. A simple solution would be to ignore them, or more ideally the redundancy check could treat mixins just as a normal rule, so that it could detect using the same set of mixins in multiple places as redundancy.
My initial opinion is that even though your SCSS code is consolidated, the resulting CSS code is still duplicated all over the place. To me, that is a code smell. Particularly when I need to debug from the web developer tools.
Even though SCSS mixins end up being duplicated in the compiled CSS file, I think that it is more important to make the source code more readable and object-oriented. Consider the CSS to make text unselectable. This ends up being seven rules due to vendor prefixes. The three options for dealing with this style are:
It is true that the resulting CSS code ends up duplicated. I don't think it's a code smell because I consider the CSS output from SCSS to be akin to the output from a C compiler: necessary for things to work, but it doesn't have to be pretty. I'll admit there is a performance impact, but a complementary tool like CSSO should be able to deal with that.
I'm not sure why duplicated rules would be a problem in a web debugger. I would think it would actually be beneficial since you can tweak the styles for individual elements more easily, while in a deduplicated setting tweaking one element would affect others that happen to share the style.
Installed on Ruby 1.8.7 & Mac OS X 10.7.5, I get this error when trying to use csscss
/Library/Ruby/Site/1.8/rubygems/custom_require.rb:36:in `gem_original_require': no such file to load -- json (LoadError)
from /Library/Ruby/Site/1.8/rubygems/custom_require.rb:36:in `require'
from /Library/Ruby/Gems/1.8/gems/csscss-1.0.0/lib/csscss.rb:3
from /Library/Ruby/Site/1.8/rubygems/custom_require.rb:36:in `gem_original_require'
from /Library/Ruby/Site/1.8/rubygems/custom_require.rb:36:in `require'
from /Library/Ruby/Gems/1.8/gems/csscss-1.0.0/bin/csscss:3
from /usr/bin/csscss:23:in `load'
from /usr/bin/csscss:23
In RE to Zach's comment In reference to http://stackoverflow.com/questions/11161595/can-the-sass-minifier-remove-duplicate-styles/16020605?noredirect=1#comment22896233_16020605
Including csscss in the development profile of a Gemfile, along with something like the bootstrap-sass gem, the following include doesn't pick up the Bootstrap sass files:
@include "bootstrap/variables";
Gives the following error
test.css.scss:6: File to import not found or unreadable: bootstrap/variables. (Sass::SyntaxError)
Load path: testproject/app/assets/stylesheets/
from testproject/vendor/ruby/1.9.1/gems/sass-3.2.5/lib/sass/tree/import_node.rb:67:in `rescue in import'
Feature request
To have a grunt hook for for this project to allow automated checking of ones css during the code build process.
When using something similar to the following:
@font-face {
font-family: 'Museo Sans Rounded';
src: url('../fonts/museosansrounded-300-mmm.eot');
src: url('../fonts/museosansrounded-300-mmm.eot?#iefix') format('embedded-opentype'),
url('../fonts/museosansrounded-300-mmm.woff') format('woff'),
url('../fonts/museosansrounded-300-mmm.ttf') format('truetype'),
url('../fonts/museosansrounded-700-mmm.svg#museo') format('svg');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Museo Sans Rounded';
src: url('../fonts/museosansrounded-500-mmm.eot');
src: url('../fonts/museosansrounded-500-mmm.eot?#iefix') format('embedded-opentype'),
url('../fonts/museosansrounded-500-mmm.woff') format('woff'),
url('../fonts/museosansrounded-500-mmm.ttf') format('truetype'),
url('../fonts/museosansrounded-700-mmm.svg#museo') format('svg');
font-weight: 500;
font-style: normal;
}
.whatever {
font-family: 'Museo Sans Rounded';
font-weight: 300;
}
csscss -n 2 -v /path/to/file.css
would report that {@font-face} AND {.whatever} share 2 rules
. Yes, they do, but for necessary reasons.
.test {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAACECAYAAABRaEHiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHRJREFUeNqkUjESwCAIw+T/X/UHansdkLTQDnXgCAHNEW2tZbDz/Aq994bzqoY5Z8wEwiEcmmfwiRK+EGOMTVBrtz4mY9kEAyz6+E3sJ7MWBs1PaUy1lHLLmgTqElltNxLiINTBbWi0Vj5DZC9CaqZEOwQYAPhxY/7527NfAAAAAElFTkSuQmCC);
}
gives
Had a problem parsing the css at line: 1, column: 1
Failed to match sequence (SPACE? blocks:((COMMENT / NESTED_RULESET / RULESET){1, }) SPACE?) at line 1 char 1.
- Expected at least 1 of COMMENT / NESTED_RULESET / RULESET at line 1 char 1.
- Expected one of [COMMENT, NESTED_RULESET, RULESET] at line 1 char 1.
|- Failed to match sequence (SPACE? '/' (!'/' .){0, } '_/' SPACE?) at line 1 char 1.
| - Expected "/_", but got ".t" at line 1 char 1. |- Failed to match sequence ('@' [^{}]{1, } '{' (COMMENT / RULESET){0, } '}' SPACE?) at line 1 char 1. |
- Expected "@", but got "." at line 1 char 1.
\- Failed to match sequence (selector:([^{}]{1, }) '{' SPACE? properties:((COMMENT / ATTRIBUTE / BLANK_ATTRIBUTE){0, }) '}' SPACE?) at line 2 char 38.
- Expected "}", but got "b" at line 2 char 38.
The rule, cleaned up a little, was as follows. I was simply inlining an icon.
.class.anotherClass > section {
background: transparent url('data:image/svg+xml;base64,IMGDATAGOESHERE') no-repeat 4px 4px;
}
My first try and I got this
{←[0;31;49mpre←[0m} AND {←[0;31;49mtable, td←[0m} share ←[0;31;49m5←[0m rules {←[0;31;49mfieldset←[0m} AND {←[0;31;49mpre←[0m} share ←[0;31;49m4←[0m rules {←[0;31;49m.wp-smiley←[0m} AND {←[0;31;49mlegend←[0m} share ←[0;31;49m3←[0m rule s {←[0;31;49m::-moz-selection←[0m} AND {←[0;31;49m::selection←[0m} share ←[0;31;49 m3←[0m rules {←[0;31;49mhr←[0m} AND {←[0;31;49mtable, td←[0m} share ←[0;31;49m3←[0m rules {←[0;31;49m.wp-caption-text:before←[0m} AND {←[0;31;49mh6, .zeta←[0m} share ←[0; 31;49m3←[0m rules {←[0;31;49mtable, td←[0m} AND {←[0;31;49mth←[0m} share ←[0;31;49m3←[0m rules {←[0;31;49mfieldset←[0m}, {←[0;31;49mlegend←[0m} AND {←[0;31;49mtextarea, select, input[type="email"], input[type="password"], input[type="search"], input[type="text"], input[type="url"], input[class_="text"]←[0m} share ←[0;31;49m3←[0m rules {←[0;31;49m.wp-caption-text←[0m}, {←[0;31;49mfieldset←[0m}, {←[0;31;49mlabel←[0m } AND {←[0;31;49mtable←[0m} share ←[0;31;49m3←[0m rules {←[0;31;49minput[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus, select:focus, button:focus, input[type="reset"]:focus, input[type="submit"]:focus, input[type="button"]:focus←[0m}, {←[0;31;49minput[type="file"]:focus, input[type ="file"]:active, input[type="radio"]:focus, input[type="radio"]:active, input[type="checkbox"]:focus, input[type="checkbox"]:active←[0m} AND {←[0;31;49mtextarea, select, input[type="email"], input[type="password"], input[type="search"], input[type="text"], input[type="url"], input[class_="text"]←[0m} share ←[0;31;49m3←[0m rules
The parser gives an error (pasted below) whenever it hits an SCSS variable declaration.
Code to reproduce:
$foo:#666;
Error output:
Had a problem parsing the css at line: 1, column: 1
Failed to match sequence (SPACE? blocks:((COMMENT / NESTED_RULESET / RULESET){1, }) SPACE?) at line 1 char 1.
`- Expected at least 1 of COMMENT / NESTED_RULESET / RULESET at line 1 char 1.
`- Expected one of [COMMENT, NESTED_RULESET, RULESET] at line 1 char 1.
|- Failed to match sequence (SPACE? '/*' (!'*/' .){0, } '*/' SPACE?) at line 1 char 1.
| `- Premature end of input at line 1 char 1.
|- Failed to match sequence ('@' [^{}]{1, } '{' (COMMENT / RULESET){0, } '}' SPACE?) at line 1 char 1.
| `- Premature end of input at line 1 char 1.
`- Failed to match sequence (selector:([^{}]{1, }) '{' SPACE? properties:((COMMENT / ATTRIBUTE / BLANK_ATTRIBUTE){0, }) '}' SPACE?) at line 1 char 1.
`- Expected at least 1 of [^{}] at line 1 char 1.
`- Premature end of input at line 1 char 1.
Currently, when using csscss -v
to output to STDOUT, the text comes out like:
{#x} AND {#y} share 7 rules
- display: none
- padding-left: 0.8em
- padding-right: 0.8em
[... and so on ...]
To assist with refactoring, it might be nicer if the following conditions were met:
- display: none;
)display: none
)display: none;
)Rationale:
#x
and #y
are similar. To refactor them, it might be prudent to add a new class to both of them, call it .z
- the easiest way of doing this would be to copy-paste the csscss
output into a new class definition (or scss mixin/placeholder/whatever) and update the HTML. Currently that still involves tidying up each line, when the tool could basically do the work for us.
As I don't know if there's a specific reason for the formatting to be as it currently is, this may be best served as an additional flag to be passed to the cli csscss
It doesn't work with mixin functions or sprite images in SASS gem. For example: I have small snippet sass:
@import "icons/*.png";
#campaigns-container {
.campaign_row {
@include image-box();
display: block;
margin-bottom: 20px;
padding: 15px 10px;
border: 1px solid #CCC;
border-radius: 12px;
}
}
It will create exception at @import... and image-box.
Thanks for your contribution.
I have no knowledge of Ruby, but csscss terminates on my machine with the following error:
/usr/local/lib/site_ruby/1.8/rubygems/custom_require.rb:36:in `gem_original_require': /usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/lib/csscss/cli.rb:29: syntax error, unexpected tSYMBEG, expecting kDO or '{' or '(' (SyntaxError)
sass_options = {cache:false}
^
/usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/lib/csscss/cli.rb:45: syntax error, unexpected ':', expecting ')'
...ontents).redundancies(minimum: @minimum,
^
/usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/lib/csscss/cli.rb:46: syntax error, unexpected ':', expecting '='
... ignored_properties: @ignored_properties,
^
/usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/lib/csscss/cli.rb:47: syntax error, unexpected ':', expecting '='
... ignored_selectors: @ignored_selectors)
^
/usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/lib/csscss/cli.rb:63: syntax error, unexpected tSYMBEG, expecting kDO or '{' or '('
...eport(verbose:@verbose, color:true)
^
/usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/lib/csscss/cli.rb:67: syntax error, unexpected kRESCUE, expecting kEND
rescue Parslet::ParseFailed => e
^
/usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/lib/csscss/cli.rb:67: syntax error, unexpected tASSOC
rescue Parslet::ParseFailed => e
^
/usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/lib/csscss/cli.rb:79: syntax error, unexpected kDO_BLOCK, expecting kEND
opts = OptionParser.new do |opts|
^
/usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/lib/csscss/cli.rb:83: syntax error, unexpected kDO_BLOCK, expecting kEND
opts.on("-v", "--[no-]verbose", "Display each rule") do |v|
^
/usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/lib/csscss/cli.rb:87: syntax error, unexpected kDO_BLOCK, expecting kEND
opts.on("--[no-]color", "Colorizes output") do |c|
^
/usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/lib/csscss/cli.rb:91: syntax error, unexpected kDO_BLOCK, expecting kEND
...many rules. Defaults to 3") do |n|
^
/usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/lib/csscss/cli.rb:95: syntax error, unexpected kDO_BLOCK, expecting kEND
...ties when finding matches") do |ignored_properties|
^
/usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/lib/csscss/cli.rb:99: syntax error, unexpected kDO_BLOCK, expecting $end
...tors when finding matches") do |ignored_selectors|
^
from /usr/local/lib/site_ruby/1.8/rubygems/custom_require.rb:36:in `require'
from /usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/lib/csscss.rb:11
from /usr/local/lib/site_ruby/1.8/rubygems/custom_require.rb:36:in `gem_original_require'
from /usr/local/lib/site_ruby/1.8/rubygems/custom_require.rb:36:in `require'
from /usr/lib/ruby/gems/1.8/gems/csscss-1.0.0/bin/csscss:3
from /usr/bin/csscss:19:in `load'
from /usr/bin/csscss:19
I installed via sudo gem install csscss
, and Sass was already there.
If I run this tool against any of my SCSS files that use background-image: inline-image(...)
, I get the error listed below.
The compass option was enabled, and if I remove inline-image
rules, the file gets processed without issue.
Edit: Here's the exact line of code causing the problem: background-image: inline-image('texture.png');
/usr/local/lib/ruby/gems/1.9.1/gems/compass-0.12.2/lib/compass/sass_extensions/functions/inline_image.rb:5:in `join': can't convert nil into String (TypeError)
from /usr/local/lib/ruby/gems/1.9.1/gems/compass-0.12.2/lib/compass/sass_extensions/functions/inline_image.rb:5:in `inline_image'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/script/funcall.rb:106:in `_perform'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/script/node.rb:40:in `perform'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:298:in `visit_prop'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:37:in `visit'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:100:in `visit'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:53:in `block in visit_children'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:53:in `map'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:53:in `visit_children'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:109:in `block in visit_children'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:121:in `with_environment'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:108:in `visit_children'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:37:in `block in visit'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:320:in `visit_rule'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:37:in `visit'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:100:in `visit'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:227:in `block in visit_import'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:227:in `map'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:227:in `visit_import'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:37:in `visit'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:100:in `visit'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:53:in `block in visit_children'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:53:in `map'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:53:in `visit_children'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:109:in `block in visit_children'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:121:in `with_environment'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:108:in `visit_children'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:37:in `block in visit'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:128:in `visit_root'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:37:in `visit'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:100:in `visit'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:7:in `visit'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/root_node.rb:20:in `render'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/engine.rb:315:in `_render'
from /usr/local/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/engine.rb:262:in `render'
from /usr/local/lib/ruby/gems/1.9.1/gems/csscss-1.0.0/lib/csscss/cli.rb:32:in `block in execute'
from /usr/local/lib/ruby/gems/1.9.1/gems/csscss-1.0.0/lib/csscss/cli.rb:20:in `map'
from /usr/local/lib/ruby/gems/1.9.1/gems/csscss-1.0.0/lib/csscss/cli.rb:20:in `execute'
from /usr/local/lib/ruby/gems/1.9.1/gems/csscss-1.0.0/lib/csscss/cli.rb:15:in `run'
from /usr/local/lib/ruby/gems/1.9.1/gems/csscss-1.0.0/lib/csscss/cli.rb:142:in `run'
from /usr/local/lib/ruby/gems/1.9.1/gems/csscss-1.0.0/bin/csscss:4:in `<top (required)>'
from /usr/local/bin/csscss:23:in `load'
from /usr/local/bin/csscss:23:in `<main>'
This would be a fantastic addition to the toolkit if it parsed SASS/SCSS files. Clearly we'd have to exclude things like looping, etc.
Given this CSS:
@import url("f1/reset.css");
@import url("f1/base.css");
div.app-edit {
/*border: 2px solid #ddd;*/
padding: 2px 0px;
margin: 2px 0px;
background: url(../img/app-edit.png) no-repeat right top;
}
div.app-ide {
/*border: 2px solid #ddd;*/
padding: 2px 0px;
margin: 2px 0px;
background: url(../img/app-ide.png) no-repeat right top;
}
div.app-ide-edit {
/*border: 2px solid #ddd;*/
padding: 2px 0px;
margin: 2px 0px;
background: url(../img/app-ide-edit.png) no-repeat right top;
}
csscss 1.2.0 -v gives this output:
{@import url("f1/reset.css");
@import url("f1/base.css");
div.app-edit}, {div.app-ide} AND {div.app-ide-edit} share 4 rules
- background-position: right top
- background-repeat: no-repeat
- margin: 2px 0px
- padding: 2px 0px
No parsing errors with --show-parsing-errors
I should let the users ignore certain properties they don't care about being duplicated.
open-uri
against http://localhost:3000/assets/application.css
I have some specific things that I'd like PRs to hit. I should document that so people have an idea pre-review.
Given this CSS:
@import url("f1/reset.css");
@import url("f1/base.css");
/*
div.x {
padding: 3px;
}
*/
div.app-edit {
/*border: 2px solid #ddd;*/
padding: 2px 0px;
margin: 2px 0px;
background: url(../img/app-edit.png) no-repeat right top;
}
div.app-ide {
/*border: 2px solid #ddd;*/
padding: 2px 0px;
margin: 2px 0px;
background: url(../img/app-ide.png) no-repeat right top;
}
div.app-ide-edit {
/*border: 2px solid #ddd;*/
padding: 2px 0px;
margin: 2px 0px;
background: url(../img/app-ide-edit.png) no-repeat right top;
}
csscss 1.2.0 -v gives this output:
{*/
div.app-edit}, {div.app-ide} AND {div.app-ide-edit} share 4 rules
- background-position: right top
- background-repeat: no-repeat
- margin: 2px 0px
- padding: 2px 0px
Wouldn't it be nice if the gem was just able to remove all redundancy from from all stylesheets in the final compiled css file? Maybe that approach would be more usable / effortless, instead of the manual scan in each file.
It would be great to know in which scss file the duplicate rule is defined in.
{.content ul.outstanding li a} (/some/file/name.scss),
{.navigation ul h2, .navigation ul a} (/file/name._scss)
{h1, h2, h3, h4, h5, h6} (/another/file/name._scss)
share 3 rules
$ gem install csscss
ERROR: Loading command: install (LoadError)
cannot load such file -- openssl
ERROR: While executing gem ... (NoMethodError)
undefined method `invoke_with_build_args' for nil:NilClass
I do have openssl installed
My ruby version
$ ruby -v
ruby 2.0.0p111 (2013-04-08 revision 40208) [x86_64-linux]
Earlier discussion: oyvindeh/ucss#12
Must be a dumb bug by me. Gotta fix it and release an update.
When parsing scss files referencing the bourbon mixin, I receive error:
File to import not found or unreadable: bourbon. (Sass::SyntaxError)
I have a rule set that gained an extra semicolon somewhere along the way.
.danger { color: red;; }
csscss gets an error on that line:
Had a problem parsing the css
Failed to match sequence (SPACE? blocks:((COMMENT / NESTED_RULESET / RULESET){1, }) SPACE?) at line 3 char 1.
`- Don't know what to do with ".danger { " at line 3 char 1.
I don't know if the duplicated semicolon is valid CSS, but the rest of the stack hasn't complained. The CSS specification mentions ignoring invalid declarations; I'm not sure the extra semicolon qualifies. The PHP-CSS-Parser project had a similar issue: MyIntervals/PHP-CSS-Parser#42
Thanks to csscss, I've found some duplication already! 😉
line_and_column might be helpful.
May want to have a "DEBUG" switch to output parslet error.
So I'm using Foundation 4 for a project and am trying to run csscss against the whole shebang and I'm encountering the following error:
new-host-9:Prototype matthewforr$ csscss sass/app.scss --compass-with-config config.rb --show-parser-errors
Had a problem parsing the css at line: 3401, column: 1
Failed to match sequence (SPACE? blocks:((COMMENT / NESTED_RULESET / RULESET){1, }) SPACE?) at line 3401 char 1.
`- Don't know what to do with "@media onl" at line 3401 char 1.
I don't have a @media onl
line anywhere in my project which leads me to think that the output is possibly being truncated. Is this possible? Is there a way I could log the file that is generated?
Let me know and I can investigate. Thanks.
I personally disagree with csscss's implied suggestion that I refactor
something like
h1 {
padding: 2px 0px;
margin: 2px 0px;
background: url(../img/h1.png) no-repeat right top;
}
h2 {
padding: 2px 0px;
margin: 2px 0px;
background: url(../img/h2.png) no-repeat right top;
}
to
h1, h2 {
padding: 2px 0px;
margin: 2px 0px;
background-repeat: no-repeat;
background-position: right top;
}
h1 {
background-image: url(../img/h1.png)
}
h2 {
background-image: url(../img/h2.png)
}
As stylesheets get more complex, it becomes harder to determine
all the styles for a given selector. I would rather keep all the properties for
each selector together, and use a preprocessor like Less or SCSS/Sass to
eliminate the duplication via variables. However, csscss is silent with input
like this:
h1 {
padding: 2px 0px;
margin: 2px 0px;
background: url(../img/h1.png) no-repeat right top;
}
h1 {
padding: 6px 0px;
margin: 2px 0px;
background: url(../img/h1.png) no-repeat right top;
}
I'd like to know that I have some redundant declarations for the same
selector, as well as a conflicting declaration.
Are there plans for csscss to handle both these cases, or am I looking
for a different kind of tool?
{←[0;31;49m#comments←[0m} AND {←[0;31;49m.page-template-default #content .hentry
, .page-template-template-fullwidth-php #content .hentry,
.single #content .hentry←[0m} share ←[0;31;49m6←[0m rules
I have some feedback on the error messages.
After installing it & I was debugging an old CSS file & I got this error
I runned csscss -v body.css
I got this `Had a problem parsing the css at line: 1, column: 1
Run with CSSCSS_DEBUG=true for verbose parser errors'
I would prefer if the debug feature is a flag something like --debug
or --debug=true
instead cause when I wrote this csscss --help
it didn't say anything about how can I turn debug on.
secondly, after I tweeted you & you replied back that I need to run the command like this CSSCSS_DEBUG=true csscss -v body.css
I got another error Had a problem parsing the css at line: 1, column: 1 Failed to match sequence (SPACE? blocks:((COMMENT / NESTED_RULESET / RULESET) {1, }) SPACE?) at line 1957 char 1. - Don't know what to do with "p.contactu" at line 1957 char 1.
actually the selector was p.contactussubheading
excuse the bad selector name, apparently that's why I needed this tool so I can debug this file :) The problem actually was at line 1964.
Lastly, I think the output will be very helpful if it has line numbers, right now it looks like this
{.selector} AND {#selector} share 10 rules -moz-border-radius: 2px 0px 0px 2px another: rule; another-rule; ...
Maybe something like this will be better
L:20 {.selector} AND L:45 {#selector} share 10 rules -moz-border-radius: 2px 0px 0px 2px another: rule; another-rule; ...
Currently csscss doesn't do anything for @import
. Need to figure out if we should follow the chain and parse the resulting file too.
csscss had trouble with an Opera fix for a sticky footer:
Had a problem parsing the css at line: 88, column: 1 Failed to match sequence (SPACE? blocks:((COMMENT / NESTED_RULESET / RULESET){1, }) SPACE?) at line 88 char 1.
- Don't know what to do with "body:befor" at line 88 char 1.`
Here is the fix in question:
/*Opera Fix*/ body:before { content:""; height:100%; float:left; width:0; margin-top:-32767px;/ }
IT will be a great add-on to be able to specify an HTML and a CSS, and allow the script to tell which bits of CSS are unused in that HTML.
Of course it cannot handle partials in rails, or other framework specific use-cases.
But one can still live with the entire source of the result file and the included CSS file/files
I have something similar to the following:
@media (min-width: 30em) {
.m-label {
display: block;
}
}
/* because less than IE9
* doesn't support media queries */
.lt-ie9 .m-label {
display: block;
}
Although they are sharing the same declaration, there is no way around that as they are only sharing it if the media query applies.
Would it make more sense for the parser to report duplicated declarations outside media queries separately from those inside media queries?
there is no difference with 0 with and without units so they should be treated as duplicates
example css:
.foo {
padding: 0px;
}
.bar {
padding: 0;
}
doesn't return any duplicates
Usually CSS is separated in multiple files for development and than merged for production. It will be great if we could run csscss to compare all files from one folder by giving path to folder.
While running the command: CSSCSS_DEBUG=true csscss -v style.css
I get the following error:
Had a problem parsing the css at line: 1, column: 1
Failed to match sequence (SPACE? blocks:((COMMENT / NESTED_RULESET / RULESET){1, }) SPACE?) at line 6630 char 1.
`- Don't know what to do with "@media scr" at line 663 char 1.
The css for line 663 looks like the following:
@media screen and (max-width: 800px){
If I remove the whole section it with the media-query parseing works as expected.
What is wrong? Bug? Any feedback/help on this is very much appreciated :)
Related to #40 (sort of).
Not sure how high priority this should have, but the ability to in the call to the gem give a number of gems that are being used in the file(s), like the following:
csscss --compass --gems [breakpoint, bourbon, sass-getunicode]
This would for instance be useful if one does what I do: compile Sass through Grunt. I don't have a config.rb, all of my options are set in my Gruntfile.js, so the theory is that if there was support for supplying required gems, grunt-csscss
could fetch requirements from the file.
Error is:
$ export CSSCSS_DEBUG=true
$ csscss -v jquery-ui.css
Had a problem parsing the css at line: 1, column: 1
Failed to match sequence (SPACE? blocks:((COMMENT / NESTED_RULESET / RULESET){1, }) SPACE?) at line 798 char 52.
`- Don't know what to do with "*/;\n\tfont-" at line 798 char 52.
Example properties which cause the parse error:
.ui-widget {
font-family: Verdana,Arial,sans-serif/*{ffDefault}*/;
font-size: 1.1em/*{fsDefault}*/;
}
Steps to reproduce:
cd
to themes/base
csscss
tool.This originally came from #9 from @ahmedelgabri
Lastly, I think the output will be very helpful if it has line numbers, right now it looks like this
{.selector} AND {#selector} share 10 rules
-moz-border-radius: 2px 0px 0px 2px
another: rule;
another-rule;
...Maybe something like this will be better
L:20 {.selector} AND L:45 {#selector} share 10 rules
-moz-border-radius: 2px 0px 0px 2px
another: rule;
another-rule;
...
I agree that would be helpful. If we do this we'll need to also match up "line n from file x" since we accept multiple files.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.