sprymix / csscompressor Goto Github PK
View Code? Open in Web Editor NEWPort of YUI CSS Compressor to Python
License: Other
Port of YUI CSS Compressor to Python
License: Other
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.
>>> 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}'
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.
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.
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.
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.
It would be nice to see 3.4 and 3.5 covered. I like how fast it is.
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.