mattbasta / crass Goto Github PK

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.

http://cssnano.co/optimisations/reducePositions/

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);
}

http://cssnano.co/optimisations/minifyGradients/

• Any two identical rulesets can be merged if adjacent.
• If there are two identical rulesets (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 empty
  • All descriptors in all rulesets in Y are not shorthand or longhand for any descriptors used in X1 or X2.
  • There are no blocks in 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.

• csso
• cssshrink

Update clean-css benchmark

http://cssnano.co/optimisations/reduceTimingFunctions/

https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-range

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;

http://cssnano.co/optimisations/reduceBackgroundRepeat/

https://github.com/ben-eb/postcss-reduce-initial

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://cssnano.co/optimisations/discardOverridden/

http://dev.w3.org/csswg/css-counter-styles/#the-counter-style-rule

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.

http://cssnano.co/optimisations/orderedValues/

http://dev.w3.org/csswg/css-color/#simple-hues

http://dev.w3.org/csswg/css-color/#grays

CSS grids introduce a new syntax for named grid lines:

https://www.w3.org/TR/css-grid-1/#named-lines

http://dev.w3.org/csswg/css-color/#modifying-colors

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!

https://github.com/svg/svgo/blob/master/lib/svgo.js

#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

See https://github.com/ben-eb/cssnano/blob/master/src/lib/reduceDisplayValues.js

https://drafts.csswg.org/selectors-4/#attribute-case