Generate 1 class per styled block

[thany]

Description

Any method of writing styled has this problem, but this is what I used as an example:

const StyledHero = styled('header', {
  base: {
    backgroundColor: 'gainsboro',
    borderRadius: '9999px',
    fontSize: '13px',
    padding: '10px 15px',
  },
});

And the generated css, at least for this bit:

@layer utilities {
  .padding_10px_15px {
    padding: 10px 15px;
  }

  .border-radius_9999px {
    border-radius: 9999px;
  }

  .background-color_gainsboro {
    background-color: gainsboro;
  }

  .font-size_13px {
    font-size: 13px;
  }
}

Ehmmm. A little too much inspiration from tailwind, I presume?

This is terrible. Sorry. Couldn't this generate just 1 class? I mean sure, it's generated, but why generate classes that are like that? It's basically inline styles without actually inline styles.

Problem Statement/Justification

Ugly CSS. Anyone with a background of hand-writing CSS will know this is not a great way to generate CSS.

Proposed Solution or API

I would expect this:

@layer utilities {
  .header_some-rando-hash {
    padding: 10px 15px;
    border-radius: 9999px;
    background-color: gainsboro;
    font-size: 13px;
  }
}

Any particular reason why it's not this neat?

Alternatives

No response

Additional Information

No response