Breakpoint Generator (CLI support)

[zehfernandes]

Hey,

To solve the problem of creating new breakpoints and update them along the project. I try to create the most unobtrusive breakpoint generator. I love the simplicity and the independence of each tachyons step. So I try to respect that:

1. The generator is outside of CSS files, is optionally available in the tachyons-cli
2. you can parse a single file or an entire directory (works for the modules or the entire build)
3. The CLI extract the @customMedias from the file. You can use with _variables.css, _media-queries or the module css file
4. Per default, the code don't overwrite media queries already on file, so if you modify _typography.css and forget some breakpoint, the code will maintain your code and add the new media query.
5. The build by tachyons-css remain. Everything happens pre-build.

How it works

I wrote a generic postcss plugin called postcss-update-media-queries a specific wrap module tachyons-build-mediaquerie to help the tachyons-cli functions.

Usage

$ tachyons /src --customMedia --variables=src/_variables.css --overwrite=false

input

/*Variable.css*/
@custom-media --breakpoint-not-small screen and (min-width: 30em);

.underline { text-decoration: underline; }
.strike { text-decoration: line-through; }

output

.underline { text-decoration: underline; }
.strike { text-decoration: line-through; }
@media (--breakpoint-not-small) {
 .underline-ns { text-decoration: underline; }
 .strike-ns { text-decoration: line-through; }
}

Look at tachyons-bulild-mediaqueries to see more.

Future thoughts

Has a lot of things to improve like error messages, return promises (to have a better control), ES6 standard, decent tests, naming...

But taking a look and see if is useful for the major project.

P.S: @johnotander I read a lot of your code to have insights to do that. Thanks :)

[johno]

@zehfernandes 100% absolutely love this. I've only just had a quick glance at the code and the concept, but this is exactly what we'd like to incorporate into the project (via options of course). We've come across use cases to not only change media queries, but to add them as well. If a project wants to have 4, 5, or even more breakpoints we would love to provide an official mechanism. Tachyons should be able to target watches and televisions, too 😎 .

This will especially fit in nicely for some future Tachyons projects we're working on:

• https://github.com/johnotander/tachyons-generator
• https://github.com/johnotander/tachyons-generator-app

It will be a day or two before I can give a thorough review and start the process of adding this to the next version of the cli. But, I wanted to let you know that I love where this is headed and that you can expect a more formal response with review in the next 24 to 72 hours.

Thanks! 🍻 💯

[zehfernandes]

OHH! This JSON config file is amazing. 😍

[zehfernandes]

Update:

The output code of tachyons --customMedia contains whitespace in variable name

.pa0 { padding: var( --spacing-none ); }

The plugin postcss-css-variable has an issue https://github.com/MadLittleMods/postcss-css-variables/issues/27 about the CSS4 spec considering --spacing : different from --spacing:

FIXED using Perfectionist compressed option to remove whitespaces.