stylex: [Bug] Properties not recognized by eslint-plugin

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:

1. To encourage better styling practices. We’ve noticed that a lot of developers don’t understand what the various parts of some of these properties are.
2. To enable smaller CSS. transitions, animations, and background are all properties where many combinations of the same values may be used.
3. To align a bit with React Native for our future RN implementation.

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:

• all outline longhands
• placeItems
• placeContent
• textDecorationThickness

@nmn This is perfect valid CSS.

display: "-webkit-box",
WebkitBoxOrient: "vertical",
WebkitLineClamp: 2,

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.

scrollSnapStop

Both scrollbarWidth and “::-webkit-scrollbar”

scrollbarWidth: “none”, “::-webkit-scrollbar”: { display: “none”, },

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)

@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.

https://github.com/facebook/stylex/blob/f968076548895dd1adc9736f1bfc371057beb94e/packages/eslint-plugin/src/stylex-valid-styles.js#L932

lineHeight could be a string too

There’s a few other missing properties in the ESLint rule. You can find them and create a PR to add them.

I can work on this , looks interesting

Well noted, thanks. Maybe the eslint error message should be more explicit about it, encouraging using individual properties like transitionProperty, transitionDuration and transitionTimingFunction?

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)