Negative prop packs

[argyleink]

calc(-1 * var(--size-3)) is annoying to write and unintuitive to read. @felix-bohlin suggested in Discord to use var(--size-3-) with a trailing - to signify a negative value.

thoughts on this naming?
have alt naming suggestions?

These negative/inverted value props would be individual imports (aka not part of the main bundle) but would be included in the JS bundle for use with jit-props.

[felix-bohlin]

I of course support that suggestion 😉

Apart from the size-related stuff I don't really see a good use-case for negative/inverted props. Maybe I'm missing something. 🤔

[argyleink]

all the sizes yeah, fluid, relative and static (can skip the content ones) 👍🏻

there's one complication: props like var(--size-relative-00) represents a negative value. the naming pattern was that any 0, 00, 000 etc represent "dangerously tight" values that may have unwanted side effects. to solve this, these negative prop sizes could just not offer the 0, 00 and 000 variants?

[felix-bohlin]

Yes I agree. It wouldn't stir the pot too much and it makes sense. It blurs the lines though between what should go into the core lib and the prop pack, but it's not a big thing to iron out.

IF we want to stir the pot - replace 0, 00 and 000 with minus equivalents. It's probably a more flexible nomenclature but very much a breaking change 🤓🍯

[felix-bohlin]

I've thrown together a PR to get the ball rolling. Converted just relative, size and fluid (the other ones don't really make sense, correct me if I'm wrong).

Also, had trouble understanding why you would want negative fluid sizes so I threw together a demo here. NEAT!