contivero / hasmin Goto Github PK
View Code? Open in Web Editor NEWHasmin - A Haskell CSS Minifier
License: BSD 3-Clause "New" or "Revised" License
Hasmin - A Haskell CSS Minifier
License: BSD 3-Clause "New" or "Revised" License
hasmin 1.0.3 can build with the latest bytestring and attoparsec packages!
quickcheck-instances 0.3.19 has been released, which adds MaybeT
instances. This is the version currently in nixpkgs, and hasmin's cabal file only accepts versions < 0.3.19
, making hasmin unusable.
Could you please publish a version with relaxed bounds? Even if it's not worth making a full new release, a hackage metadata revision would help.
Hello again, its been some time.
So, grouping media queries, why would that be useful?
Here is an example (Limited to two per breakpoint) from a site I built using my tool, Cell.
As you can see these could be easily combined. Now you might be thinking, surely only generated
CSS would have such waste when it comes to media queries, however anyone using a modular CSS component library or organizing their code by class likely has such repetition. This is mostly due to the common use of a limited set of breakpoints
that are used as the cutoffs for all media queries in a codebase. For example, one designer may use Large, Medium and Small sizes (each with rem or pixel values) while another may prefer more granularity. Whatever the case, the practice of using a limited set of breakpoints is widespread.
@media all and (min-width: 24rem) {
.Fz\(s2\)\@xs {font-size: 1.2rem;}
}
@media all and (min-width: 24rem) {
.Px\(s04\)\@xs {padding-left: .25rem; padding-right: .25rem;}
}
@media all and (min-width: 32rem) {
.D\(ib\)\@sm {display: inline-block;}
}
@media all and (min-width: 32rem) {
.Fz\(s1\)\@sm {font-size: 1rem;}
}
@media all and (min-width: 48rem) {
.D\(b\)\@md {display: block;}
}
@media all and (min-width: 48rem) {
.D\(ib\)\@md {display: inline-block;}
}
@media all and (min-width: 64rem) {
.Pos\(s\)\@lg {position: static;}
}
@media all and (min-width: 64rem) {
.Px\(s1\)\@lg {padding-left: 1rem; padding-right: 1rem;}
}
@media all and (min-width: 80rem) {
.D\(b\)\@xl {display: block;}
}
@media all and (min-width: 80rem) {
.D\(n\)\@xl {display: none;}
}
So technique is to combine media queries that use the same condition. For example:
@media all and (min-width: 24rem) {
.Fz\(s2\)\@xs {font-size: 1.2rem;}
.Px\(s04\)\@xs {padding-left: .25rem; padding-right: .25rem;}
}
@media all and (min-width: 32rem) {
.D\(ib\)\@sm {display: inline-block;}
.Fz\(s1\)\@sm {font-size: 1rem;}
}
@media all and (min-width: 48rem) {
.D\(b\)\@md {display: block;}
.D\(ib\)\@md {display: inline-block;}
}
@media all and (min-width: 64rem) {
.Pos\(s\)\@lg {position: static;}
.Px\(s1\)\@lg {padding-left: 1rem; padding-right: 1rem;}
}
@media all and (min-width: 80rem) {
.D\(b\)\@xl {display: block;}
.D\(n\)\@xl {display: none;}
}
I never noticed your request for an issue and since you so promptly libraryfied your code I
feel I owe this to you now that I have noticed,
Cheers!
unicode-range
is mangled:
Hasmin> minifyCSS "@font-face { font-family: serif; unicode-range: U+0-FF, U+2?? }"
Right "@font-face{font-family:serif;unicode-range:U 0 -FF,U 2 ?? }"
The latter syntax is not valid, and so the rule is ignored.
Also, font-weight
inside of @font-face
accepts two-argument values, but using the syntax causes an error:
Hasmin> minifyCSS "@font-face { font-family: serif; font-weight: 400 700; }"
Left "'{': Failed reading: satisfy"
I have written a haskell CSS tool called Cell. I would love to use this as a libary to minify Cell's output as It is better than the other implementations I have found. Have you considered converting this into a libary and implementing the tool using it?
Currently, use of CSS variables causes a parse error.
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.