mattbasta / crass Goto Github PK
View Code? Open in Web Editor NEWA CSS minifier and utility library for JavaScript
Home Page: http://mattbasta.com/crass
License: MIT License
A CSS minifier and utility library for JavaScript
Home Page: http://mattbasta.com/crass
License: MIT License
The pretty()
methods need to keep track of indentation level.
This isn't a huge bug, but a bug nonetheless. Pseudo elements should be represented as pseudo classes when possible (see section 7 of the selector spec) to save a byte per PE.
The only other valid PEs are browser-prefixed PEs (::-webkit-search-decoration
, ::-moz-focus-inner
, etc.). These should not have their second colon removed.
The bug is caused because the grammar defines a pseudo class has having a leading colon with a second optional colon. It should instead require a single colon. The RulePseudoElement
class should decide when to use single and when to use double colons.
If two rulesets are being combined and there is one or more rulesets in between the two may not be combined fully if the rulesets in between have specificity greater than or equal to the outer rulesets, unless there is no intersection between the declarations of the left ruleset and all of the middle rulesets.
If a media query has a ruleset with an identical selector as a previous ruleset in the outer scope, it should remove the media query's intersecting declarations.
I.e.:
foo {
background: #fff;
background: -moz-gradient(foo, bar);
}
should not be optimized into
foo {
background: -moz-gradient(foo, bar);
}
X1
and X2
) that are not adjacent (and the rulesets between them are Y[]
), they can be merged into the second of the two rulesets iff:
set(X1.descriptors) & set(ruleset.descriptors for ruleset in Y)
is emptyY
are not shorthand or longhand for any descriptors used in X1
or X2
.Y
(@media
, @supports
, etc.)This optimization should be performed as a second pass, after reordering has taken place. The merged ruleset should be re-optimized afterward.
https://github.com/mattbasta/crass/blob/master/test/optimizations.js#L270
Consider:
.foo {
color: red !important;
}
p {
color: blue !important;
}
.foo {
font-weight: bold;
}
In this case, the first and third rulesets should NOT be combined into the second as usual:
p {
color: blue !important;
}
.foo {
color: red !important;
font-weight: bold;
}
<p class="foo">What color is this text?</p>
In the example above, the text would be blue with the original code and red with the changed code.
Certain optimizations are possible if we know that the CSS file provided is the only one loaded on the page.
Remove @keyframes
that are not referenced (O1 only)
Remove @font-face
that are not referenced
If two @keyframes
blocks are identical, replace references to the second and remove it
Rebase all of the z-index values in the file: http://cssnano.co/optimisations/zindex/
We truncate precision, but we should give the option to round numbers to remove precision. I.e.:
line-height: .69;
/* becomes */
line-height: .7;
Hello! I writing tool for minificators testing. It downloads several web sites, compresses them and does a screenshots to make sure that nothing been broken. And I found a minification bug of this file.
`Parse error on line 1:
...kit-linear-gradient();background-image:l
-----------------------^
Expecting 'STRING', 'IDENT', 'S', '(', 'TO', '+', 'HEX_SHORT', 'HEX_LONG', 'FUNCTION_IDENT', '-', 'UNICODE_RANGE', 'IE_EXPRESSION', 'URL_FULL', 'CALC', 'ATTR', 'INTEGER', 'SCINOT', 'FLOAT', got ')'`
Is this minificator error or I just don't use it correctly?
Similar to how colors are processed, angular units should be processed such that the smallest representation is generated during optimization.
E.g.:
foo {
transform: rotateX(360deg) rotateY(.25turn) rotateZ(200grad);
}
/* becomes */
foo {
transform: rotateX(1turn) rotateY(90deg) rotateZ(.5turn);
}
http://dev.w3.org/csswg/css-color/#the-hwb-notation
Should be generated only with a new --edge
parameter, but should be preserved when in shortest possible form in the original stylesheet.
#banner .main-banner-content .banner-des p {
margin-bottom: 20px !important;
margin-bottom: 19px\0 !important;
}
CSS grids introduce a new syntax for named grid lines:
@-webkit-keyframes spin {
0% {
-webkit-transform: scale(1);
left: -10px;
top: 0;
}
100% {
-webkit-transform: scale(1);
left: -10px;
top: 0;
}
12.5% {
-webkit-transform: scale(0.5);
}
25% {
-webkit-transform: scale(1);
left: 10px;
top: 0;
}
37.5% {
-webkit-transform: scale(0.5);
}
50% {
-webkit-transform: scale(1);
left: 10px;
top: 20px;
}
62.5% {
-webkit-transform: scale(0.5);
}
75% {
-webkit-transform: scale(1);
left: -10px;
top: 20px;
}
87.5% {
-webkit-transform: scale(0.5);
}
}
Consider the following:
meta.foundation-version {
font-family: "/5.2.2/"; }
meta.foundation-mq-small {
font-family: "/only screen/";
width: 0em; }
meta.foundation-mq-medium {
font-family: "/only screen and (min-width:40.063em)/";
width: 40.063em; }
meta.foundation-mq-large {
font-family: "/only screen and (min-width:64.063em)/";
width: 64.063em; }
meta.foundation-mq-xlarge {
font-family: "/only screen and (min-width:90.063em)/";
width: 90.063em; }
meta.foundation-mq-xxlarge {
font-family: "/only screen and (min-width:120.063em)/";
width: 120.063em; }
meta.foundation-data-attribute-namespace {
font-family: false; }
These styles will never be visible.
crass incorrectly strips the whitespace in calc
expressions:
calc(50%-38px),0 0;
and that makes the calc
not work at all.
this exact same bug we had on AMO with YUI Compressor like 4 years ago!
#my-id .class [attribute] {
color: #ffffff;
border-radius: 5px;
color: #fff;
}
results in
#my-id .class [attribute]{border-radius:5px;color:#fff;color:#fff}
with O1 on.
http://cssnano.co/optimisations/mergeLonghand/
margin
, padding
border-color
, border-width
, border-style
border-radius
border
font
background
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.