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.
What's the problem?
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: