[RFC] shorthand properties & values should not be the default behavior

[siriwatknp]

What's the problem?

import { styled } from '@pigment-css/react';

const A = styled.div({
  width: 1,
})

produces CSS width: 100%.

This is too magical and is hard to debug where it comes from.

What are the requirements?

Pigment CSS should not have shorthand properties or values enabled by default. It should be configured explicitly based on the users.

What are our options?

Pigment CSS needs to expose an API to configure the shorthand. I lean toward following Tailwind config so that users can switch between Tailwind and Pigment CSS.

Proposed solution

Remove shorthand properties from the default behavior and let the users configure it explicitly. The API to configure is the next step to think about.

Resources and benchmarks

No response

Search keywords: