sprymix / csscompressor Goto Github PK

View Code? Open in Web Editor NEW

92.0 92.0 8.0 254 KB

Port of YUI CSS Compressor to Python

License: Other

Python 100.00%

csscompressor's Issues

Are there plans to add tests for python 3.4 and 3.5?

It would be nice to see 3.4 and 3.5 covered. I like how fast it is.

Major breakage when using some calc statements

I noticed csscompressor completely breaks some css rules with + in them. For example:

`>>> csscompressor.compress("calc( (10vh - 100px) + 30px )");
'calc( (10vh - 100px)+30px)'

csscompressor.compress("calc( (10vh - 100px) / 4 + 30px )");
'calc( (10vh - 100px) / 4+30px)'
`

The + and - operators must always be surrounded by whitespace, according to the spec, and when compressed, this rule is now broken and doesn't work in the browser.

Considering calc should be well-supported by just about every browser updated in the last 4 years, calc is super handy... but unfortunately breaks if you decide to compress with csscompress.

Omitting the unit on a time value is invalid

Input: csscompressor.compress("transition: background-color 1s linear 0ms;")
Expected output: 'transition:background-color 1s linear 0ms;'
Actual output: 'transition:background-color 1s linear 0;'

According to the MDN page on , omitting the unit is only valid for , so when I use csscompressor, the declaration containing the 0ms or 0s is ignored by both Firefox and Chrome.

The same case is for <frequency>, and probably a few of the other ones, I think. Omitting the unit used to be valid in CSS2, but breaks in CSS3 unfortunately.

This is a fairly simple fix (removing the m?s from _zero_fmt_spec_re), and I'll create a PR and some tests.

Inline comments kills all the CSS following it

If my css file contains something like

body { 
    font-size:1em;
}
// my stuff
nav { 
    font-size:1.5em;
}

Then the minifying will remove the line return before nav, and comment out the rest of the CSS.

Incorrect removal of whitespace in svg

In [6]: compress('''.header.bubbles {
   ...:   background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 
   ...: 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90
   ...: c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-
   ...: 4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.
   ...: 24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-
   ...: .895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='white' fill-opacity='0.1' fill-ru
   ...: le='evenodd'/%3E%3C/svg%3E");
   ...: }
   ...: ''')
Out[6]: '.header.bubbles{background-image:url("data:image/svg+xml,%3Csvgwidth=\'100\'height=\'100\'viewBox=\'00100100\'xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpathd=\'M1118c3.86607-3.1347-7s-3.134-7-7-7-73.134-773.134777zm4825c3.86607-3.1347-7s-3.134-7-7-7-73.134-773.134777zm-43-7c1.65703-1.3433-3s-1.343-3-3-3-31.343-331.343333zm6331c1.65703-1.3433-3s-1.343-3-3-3-31.343-331.343333zM3490c1.65703-1.3433-3s-1.343-3-3-3-31.343-331.343333zm56-76c1.65703-1.3433-3s-1.343-3-3-3-31.343-331.343333zM1286c2.2104-1.794-4s-1.79-4-4-4-41.79-441.79444zm28-65c2.2104-1.794-4s-1.79-4-4-4-41.79-441.79444zm23-11c2.7605-2.245-5s-2.24-5-5-5-52.24-552.24555zm-660c2.2104-1.794-4s-1.79-4-4-4-41.79-441.79444zm2922c2.7605-2.245-5s-2.24-5-5-5-52.24-552.24555zM3263c2.7605-2.245-5s-2.24-5-5-5-52.24-552.24555zm57-13c2.7605-2.245-5s-2.24-5-5-5-52.24-552.24555zm-9-21c1.10502-.8952-2s-.895-2-2-2-2.895-22.895222zM6091c1.10502-.8952-2s-.895-2-2-2-2.895-22.895222zM3541c1.10502-.8952-2s-.895-2-2-2-2.895-22.895222zM1260c1.10502-.8952-2s-.895-2-2-2-2.895-22.895222z\'fill=\'white\'fill-opacity=\'0.1\'fill-rule=\'evenodd\'/%3E%3C/svg%3E")}'

I realize this is a hacky use case, but it'd be neat if it worked, nevertheless.

object-position zeroes are not collapsible

>>> csscompressor.compress('img {object-position: 0 0;}')
'img{object-position:0}'

This looks right, but actually breaks the property, which is defined to use the same values as background-position: https://drafts.csswg.org/css-images/#the-object-position. However, background-position is actually handled correctly:

>>> csscompressor.compress('img {background-position: 0 0;}')
'img{background-position:0 0}'

pyproject.toml

I think this package would be even better with modern setup using pyproject.toml
https://pip.pypa.io/en/stable/reference/build-system/pyproject-toml/

I would be interested in making PR, just it might take me couple of days.

sprymix / csscompressor Goto Github PK

csscompressor's Issues

Are there plans to add tests for python 3.4 and 3.5?

Major breakage when using some calc statements

Omitting the unit on a time value is invalid

Inline comments kills all the CSS following it

Incorrect removal of whitespace in svg

object-position zeroes are not collapsible

pyproject.toml

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent