Open olivierpascal opened 9 months ago
Same for transition
:
export const styles = stylex.create({
container: {
transition: 'box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1)', // eslint(@stylexjs/valid-styles) error here
},
This is not a key that is allowed by stylex eslint(@stylexjs/valid-styles)
NOTE: A few properties are intentionally not allowed by the ESLint plugin even though they will work correctly in the Babel plugin:
background
transition
animation
border
, border[Direction]
.flex
This decision was made for a few reasons:
transitions
, animations
, and background
are all properties where many combinations of the same values may be used.We are going to be discussing and reconsidering this decision.
Any other missing property is an unknown bug so please report!
Here's a running list so far:
outline
longhandsplaceItems
placeContent
textDecorationThickness
Well noted, thanks. Maybe the eslint error message should be more explicit about it, encouraging using individual properties like transitionProperty, transitionDuration and transitionTimingFunction?
I can work on this , looks interesting
Seems fairly straightforward of an issue, can I contribute? Does it require assignee or just submit PR?
There's a few other missing properties in the ESLint rule. You can find them and create a PR to add them.
A Pr as per instructions of @nmn to add missing properties.
I think transition
should be allowed too (https://github.com/facebook/stylex/issues/207)
@olivierpascal Yes, as mentioned above, we're discussing adding support for the few shorthands we manually disallowed.
Css properties placeContent
and placeItems
are not supported. I guess that you are also discouraging shorthands? I am a big boy and I know what I am doing, can I use them please? ^^
@olivierpascal I'll add them to the list of missing properties in the ESLint plugin that should be allowed. placeContent
and placeItems
are not intentionally disallowed.
transition
won't be allowed becuase...
This decision was made for a few reasons:
One of the other reasons not mentioned is that we want to have consistent merging rules for properties (like React Native), and that doesn't mix with allowing shorthands that can set values for several different properties (which also has an impact on the usefulness of their Types).
outline
shouldn't be allowed in source code, and if there's a browser compat issue then the compiler can convert to outline
in the output.
flex
should be allowed, but only with support for a single numeric value >=0
(e.g., flex: 1
), as is done in React Native (excluding the -1
value allowed in RN)
Both scrollbarWidth and "::-webkit-scrollbar"
scrollbarWidth: "none", "::-webkit-scrollbar": { display: "none", },
scrollSnapStop
Any other missing property is an unknown bug so please report!
@nmn I posted about this on Workplace too, but we should probably add zoom
. It has some caveats but can be more useful than transform: scale(...)
because it also affects the layout size of the element. The CSS WG recognises the value it provides and are working on standardising it, and today it works in all major browsers, except Firefox where it's gated by an about:config
setting.
@nmn This is perfect valid CSS.
display: "-webkit-box",
WebkitBoxOrient: "vertical",
WebkitLineClamp: 2,
Support for all the properties mentioned in this issue were added in v0.5.0 which was just released.
@nmn lineHeight string is still not supported
Type 'StyleXClassNameFor<"lineHeight", string>' is not assignable to type '{ _opaque: unique symbol; _key: "lineHeight"; _value: Readonly<number | "initial" | "inherit" | "unset" | null | undefined>; }'.ts(2322)```
@steida Thanks for continuing to catch these issues. Found and updated a bunch of properties in #406 just now.
if you find any additional issues, keep posting them here. I'll see them and fix them.
The problem
The
outlineOffset
property is not recognized by the eslint-plugin.How to reproduce
With the following code:
I have the following eslint error from
@stylex/valid-styles
:https://github.com/facebook/stylex/blob/f968076548895dd1adc9736f1bfc371057beb94e/packages/eslint-plugin/src/stylex-valid-styles.js#L1948-L1950
But
outline
syntax does not allow an offset:Cf. https://developer.mozilla.org/en-US/docs/Web/CSS/outline