core: `background` doesn't want to show up (without any errors)

In the playground, I tried adding this:

import { makeStyles, shorthands } from '@griffel/core';

export default makeStyles({
  root: {
    backgroundColor: 'red',
  },
  foo: {
    background: 'green'
  }
});

Expected: green shows up in the output.

Resulted:

.f3xbvq9 {
  background-color: red;
}

Changing background to backgroundColor fixes it. But this was the first thing I tried, and it failed to update or even show an error message. Would be good to expand shorthand.

[dzearing]

I think it’s fine to do that for performance and the css variable nondeterministic reasons, but I think there needs to be feedback to train developers to do the right thing; ideally in the IDE like lint rules which can add red squiggle lines under incorrect syntax with fixers to adjust. In the sandbox, there was no error. It just didn’t work, leaving curious people frustrated and moving on to other solutions.

The ideal would be to “just work” and manage this at runtime, but address performance costs by optimizing at babel transform time. I think that’s possible for expansion; just not for the padding: --var(--padding) scenario where the caller is providing shorthand values intended for shorthand properties. Maybe that could be avoided by providing helpers around defining variables. (Again some kind of linting, or even runtime name checks that get stripped in production.)

[dzearing]

I’ve been thinking about it. I think the most ideal would be to do something possibly expensive at runtime, but removable at build time, like:

if (name === 'padding') {
  expandedProps = padding(value)
}

…basically, call the helper to auto expand for the user so they don’t need to apply extra mental cycles on something they’ve used forever.

If you detect the value is a css variable, maybe you could do something special there:

// given this: { padding: '--var(--somePaddingShorthand)' } // 4px 4px 3px

if (name === 'padding') {
  if (isVariable(value)) {
    console.warn(`Using css variables for shorthand values has edge case issues and is discouraged. Use variables for atomic css properties only.`);
  }

Then at transform time, expand things and remove the runtime overhead.

Also consider removing the helpers themselves in retail/transformed output.

I think even if there are ts/lint/console errors about the usage, it’s going to create mental headaches for the dev experience. It’s a fine stopgap but the ideal is “it just works”