search

digitoimistodude / air-light

💨 WordPress starter theme - designed to be minimal, ultra-lightweight (< 20 kB) and easy for all kinds of WordPress projects. 7+years/1000+hours of development and still updating daily! We prefer the original WordPress way of doing things so no strange templating languages or frameworks here.
https://airwptheme.com
MIT License
933 stars 142 forks source link

@supports not compiling into CSS #57

Closed kiwwwipl closed 3 years ago

kiwwwipl commented 3 years ago

Hi bros,

I've been a fan of Air for a while now and while playing with the current version I've noticed that @supports was not compiling into css. Turned out it was because of gulp-merge-media-queries. Just letting you know (or maybe it's just me).

Also, quick question: is there a specific reason why you mixed SASS variables with CSS ones?

Cheers!

ronilaukkarinen commented 3 years ago

Hello and thanks for taking the time to open an issue. We don't use @supports much so that's why haven't noticed it. It seems there is a open issue about this. I really don't know how to help in this, it's best for you to remove it completely from node_modules, gulp task and package.json if you use this. We may remove it ourselves if this becomes a problem.

For your quick question: Yes, there are many use cases where SCSS variables are more useful. You can't really use CSS vars in SCSS mixin parameters but you can use CSS variables inside them. Also, there is not that big of a difference when using variables with colors, so that's why all colors are SCSS variables, because they are easier to reuse (again, mixins). Also SCSS variables support cool things like modifiers like darken or lighten whereas CSS vars don't.

In spacings we have moved on completely to CSS variables as you can see in _spacings.scss. This is because they usually are manipulated within media queries. Colors still have mixed variables because of the use cases explained above. In some projects we use only CSS vars in colors as well if we need to change the color scheme in the user interface etc.

So yes, mixed vars are still needed. But as with other things, we might move away from them in some point. But using them together is currently like best from both worlds so why give that up? We are of course all open for suggestions.

ronilaukkarinen commented 3 years ago

This is still more of the gulp-combine-media-queries issue linked in my previous comment. No further discussion to this issue so closing as stale.

ronilaukkarinen commented 3 years ago

@kiwwwipl Please note: We have replaced gulp-merge-media-queries with mqpacker (postcss plugin) that should work better.