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!

[Deufel]

I don't mind the verbose;

calc(-1 * var(--size-3)

[felix-bohlin]

I don't mind the verbose;

calc(-1 * var(--size-3)

It's a nice trick and I'm kind of ok with it too. I would however expect something like this to exist in OP if I knew nothing about it and opened it up for the first time. Idk but there doesn't seem like much of a penalty to add it, especially if you don't as it to the core library, but as a prop pack. I'm a bit too eager about stuff generally though so I might be missing an angle 🙃😄

[argyleink]

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

lovely demo, ty for it! speaks 1000 words.

in general, i'm not opposed, but i'm also not in a rush 😅

the naming kinda blends in yeah? where it was obvious before it was being negated, seeing * -1, but with this it's a bit hidden behind a trailing -?

/* snippet from demo */
margin-block: var(--font-size-fluid-1);
margin-inline: var(--size-fluid-3-);
padding: var(--font-size-fluid-1);

but it's also like, super easy to negate one, you just add that trailing -. tradeoffs!

there's also scenarios where like, you need to double a prop, like calc(var(--size-fluid-3) * 2), we dont want those to be in props right?

i think what we really want are custom css functions, so we could just write invert(var(--size-fluid-3)) or double(var(--size-fluid-3)). then it reads well and is manageable right? chromium engineers worked on it a bit last year and i believe they intend to work on it again this year. thoughts on waiting and just managing a quick calc() in the meantime?

[felix-bohlin]

Yeah, fair! It will also be easier to find and replace the calc(-1 * ...) in your code when the CSS functions lands, as opposed to the minus props. Can't wait for the functions to land! I don't have much else to add then, we can close this and the corresponding PR 👍

[argyleink]

also, CSS @function gonna get love in Chrome this year, we'll be able to:

@function --negative (--value) {
  result: calc(-1 * var(--value));
}

section {
  padding-inline: var(--size-5);
  margin-inline: --negative(var(--size-5));
}

maybe we should hold out?

[felix-bohlin]

Yeah, that is so clean 🧼👌 Yep, let's do that!

Additionally, it'll be nice to showcase a feature like CSS functions with a pragmatic example like this. I wonder what else in OP that would work well with functions? 🤓