Numeric Literal Suffixes

[STRd6]

It would be neat to have units for numeric literals like so:

style =
  borderRadius: 2px
  padding: 1rem

They wouldn't be super useful until type aware operators but may be worth exploring even before that.

Phase 1

• Rudimentary type safety by using TS template literal types

const padding = 1rem
---
type Unit_rem = `${number}rem`
const padding = "1rem" as Unit_rem

Phase 2

• Fully type aware operations
• Compile time simplification
• CSS calc fun

let padding = 4px
let margin = 1rem
let total = margin + padding
console.log total // "calc(4px + 1rem)"

References

https://github.com/tc39/proposal-extended-numeric-literals

[edemaine]

Instead of generating strings, I wonder whether we should create CSSUnitValue, as created by these factory functions (linked from the proposal): https://drafts.css-houdini.org/css-typed-om/#numeric-factory

Sadly, Houdini remains in its infancy, though. Looks like this is supported on Chrome but not Firefox nor Safari. https://caniuse.com/mdn-api_cssunitvalue
Probably not Node etc either...

[STRd6]

a = new CSSUnitValue(12, "px")
b = new CSSUnitValue(1, "em")
c = new CSSMathSum(a, b)

It's kind of a heinous API and I wouldn't want to encourage them but we might be able to offer it as a directive. We could probably do a TS trick to get the equivalent type checking but I'm not sure how easy it would flow into React style APIs either. Worth exploring both for sure.

[edemaine]

I just bumped into the Frink programming language which seems to have extensive support for natural units. I also like how this enavles 1 million. Imagine setTimeout(..., 1 minute)!

If we add units, we should probably aim to support these too. Probably we need our own type/class for this. Civet standard library anyone?

[STRd6]

That syntax is neat because it's almost like an implicit application for numeric literals, we could do some interesting stuff with that.