PostCSS Port
custa1200 opened this issue · comments
Hi, It seems like PostCSS is starting to gain some momentum's what happens next after Sass, LESS, Stylus etc... Has there been any thinking around this from the Rupture team. Excellent work btw I'm loving using it.
Personally I don't have time for this at the moment, but if you'd like to work on one that would be awesome!
+1 for PostCSS 💃
+1
+1
Update: this is in the books for us now. We are transitioning fully to postcss, definitely porting axis, and will take a look at rupture afterwards.
Outside of the concept of putting breakpoints on a scale, I'm not sure porting Rupture (in its entirety) is necessary. We could possibly get away with just making a plugin pack (sticking as closely as possible to features you will find in CSS4 - check cssnext):
Mixin Equivalents:
With the CSS4 Media Min/Max plugin:
rupture.below(500px) equivalent:
@media screen and (width <= 500px) {}rupture.between(500px, 800px) equivalent:
@media screen and (500px <= width <= 800px) {}Using CSS4 var() and calc() in media queries
Check out media-variables
Preset/Custom Breakpoints
By combining the above plugin with CSS4 Custom Media Queries:
@custom-media --mobile (width <= 480px);
@custom-media --desktop (width >= 1000px);
@custom-media --tablet not (--mobile) and not (--desktop);
@media (--tablet) {}(the not keyword is not part of these plugins - this is a feature of media queries)
Anti-overlap
Using Media Query Gap
@media screen and (600px <= width <= 800px) {}Becomes
@media screen and (min-width: 600px) and (max-width: 799px) {}(This one might need some TLC to add more options to get feature-parity with Rupture)
em Conversion
Use em-media-query and pixels will be converted to ems.
Possible New Features
- Container Queries - if this element's parent is of a certain width, then...
Further Optimisations
These might not be necessary because they are an optimization step (check CSSNano)
| Plugin | Description |
|---|---|
| emptymediaqueries | Removes empty media queries |
| mq-optimize | Removes invalid media queries |
| mqpacker | Combines many media queries into one if they match |
| mq-keyframes | Moves @keyframe animations defined in media queries to the bottom of the file |
Just a checkin here -- agreed that it's not necessary. The improvements needed can be made through standards-compliant css alone.
I still think the sugar you put on media queries is hands down the best to code with. It's such a shame that its tied to Stylus :(
@custa1200 I don't disagree if we're purely looking at aesthetics, but there are many reasons why a standard-compliant approach is superior in regards to compilation time and build pipeline, feature set, and developer accessibility, so we're biting the bullet over here and going for it. Again, I very much welcome anyone else who wants to step up and continue working on this library for either stylus or css, it's just that I personally don't see enough of a compelling reason to sink more time into it.
Well should take a pause and thank you for your work on this project. Certainly something that has made things easier for myself, so I thank you for that effort.. Guess I should look at some of the suggestions above. :)
I know this ticket is ancient but in case anyone else is like me and always loved the way Rupture and Stylus allowed us to write concise code, some more recent PostCSS alternatives I've come across are:
- SugarSS - similar syntax to Stylus
- gulp-sass-to-postcss-mixins - allows Sass style
+mixin()syntax like Rupture had - postcss-easy-media-query - alternative syntax that was directly inspired by Rupture.
Anyway, I just wanted to document these because they aren't always that easy to find in the endless sea of packages.
I also want to add my thanks to you, @jescalan, for making my developer life more pleasant over the years :)