v10 plans

[MartijnCuppens]

For v10, I'm planning to use a function instead of a mixin. The main reason is the min() technique described in #110 doesn't need to generate a media query any more. I'm thinking about a function called rfs() or responsive() (which might be a bit clearer). Or maybe work with an alias like we do now.

Other positive side effects are:

• We can use the same syntax in every language (sass, scss, less, stylus & PostCSS)
• The function can be used with every property, like height, padding or margin.
• It's a bit more predictable than the mixin because you know it's going to a value and not "some lines of code"
• Mixins don't work with plugins like stylelint-order, the function would fix this.
• Custom properties (css variables) can be set to a value which can be reused in css.

Only downside is that the disabled/enabled classes won't work anymore, but I don't think that's really an issue.

So what would this look like?

.title {
  padding: rfs(2rem);
  font-size: rfs(4rem);
}

would generate:

.title {
  padding: min(2rem, calc(1.325rem + 0.9vw));
  font-size: min(4rem, calc(1.525rem + 3.3vw));
}

Browser support

Browser support is still an issue. Browser support so far:

• Safari
• Chrome
• Firefox
• Edge

[mblackritter]

True, the current browser support is still a pity, but compared to the ancient topic for a so called "parent selector", which is at least raving for 19 years now, I guess we might see min(), max() and even clamp() still within our life time. 🥳

[MartijnCuppens]

Closing this since #110 also addresses this.