Replies: 6 comments 1 reply
-
I think that the TypeScript part of this can be solved by changing the definition of export type PropertyValue<T extends string> =
+ (
T extends keyof PropertyTypes
? ConditionalValue<PropertyTypes[T]${strictText}>
: T extends keyof CssProperties
? ConditionalValue<CssProperties[T]>
: ConditionalValue<string | number>
+ ) | ArbitraryValue;
+ type ArbitraryValue = \`[\${string | number\}]\` I'm not sure if this is the most appropriate place to make this change, and not sure where's the code that extracts the value itself, but that would also need to be changed, of course, but I hope the above is a start at a solution to this. |
Beta Was this translation helpful? Give feedback.
-
Another way to fix this is to create an identity function that satisfies the type system and Panda knows to analyse statically // in styled-system/css
type ArbitraryValue = string & { __arbitraryValueBrand: "" }; // make this a branded type
// name could probably be improved
css.arbitrary = (value: string) => value as ArbitraryValue; And then to use <div className={css({ width: css.arbitrary("5px") })} /> Like |
Beta Was this translation helpful? Give feedback.
-
Chiming in here to support this discussion (I started a similar one, #909). As mentioned, turning on |
Beta Was this translation helpful? Give feedback.
-
It's related to #1400 Strict tokens by token type in config, In my mind I see the best of both worlds like so : Allow in the config : {
...config,
tokenPolicies: {
base: "strict",
sizing: "relaxed",
color: "semi-strict"
}
} Allow at usage : <div className={css({
bg: 'red.500', // works in strict, it's in my config
width: '123px', // works only because sizing is "relaxed" in the config.
color: 'red', // works because color is "semi-strict" and red isn't part of my config but is a legit css value.
__tokenPolicies: {
relaxed: {
maxWidth: '20ch' // works because the arbitrary value is treated as "relaxed" because of the condition.
}
}
}) /> |
Beta Was this translation helpful? Give feedback.
-
Another use-case is here, I'm writing css with I strongly love the |
Beta Was this translation helpful? Give feedback.
-
Hey, we've been watching this thread and others on GH or Discord for a while and you're right, the DX with |
Beta Was this translation helpful? Give feedback.
-
The
strictTokens
setting is great, and can catch typos like:But with it turned on, using arbitrary values isn't possible. e.g.:
Fails to compile.
I'm suggesting a syntax similar to Tailwind:
Would generate:
The exact syntax can be discussed, the main point is the possibility to use one-off styles when needed, without having to resort to turning off
strictTokens
entirely.The TypeScript type to describe this would be:
This would be beneficial over just inline styles especially when integration with 3rd party libraries, which don't always allow passing in
style
, but almost always allow passing inclassName
(or similar props).FYI @astahmer
Beta Was this translation helpful? Give feedback.
All reactions