[eslint-plugin] properties not recognized

[olivierpascal]

The problem

The outlineOffset property is not recognized by the eslint-plugin.

How to reproduce

With the following code:

import * as stylex from '@stylexjs/stylex';

export const styles = stylex.create({
  container: {
    outlineOffset: '2px', // eslint(@stylexjs/valid-styles) error here
  },
});

I have the following eslint error from @stylex/valid-styles:

outlineOffset value must be one of:
'outlineOffset' is not supported yet. Please use 'outline' instead

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:

outline = 
  <'outline-color'>  ||
  <'outline-style'>  ||
  <'outline-width'>

Cf. https://developer.mozilla.org/en-US/docs/Web/CSS/outline

[olivierpascal]

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)

[nmn]

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

[olivierpascal]

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

[purohitdheeraj]

I can work on this , looks interesting

[IbraheemHaseeb7]

Seems fairly straightforward of an issue, can I contribute? Does it require assignee or just submit PR?

[nmn]

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

[xonx4l]

A Pr as per instructions of @nmn to add missing properties.

[olivierpascal]

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

lineHeight could be a string too

[olivierpascal]

I think transition should be allowed too (https://github.com/facebook/stylex/issues/207)

[nmn]

@olivierpascal Yes, as mentioned above, we're discussing adding support for the few shorthands we manually disallowed.

[olivierpascal]

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? ^^

[nmn]

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

[necolas]

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)

[steida]

Both scrollbarWidth and "::-webkit-scrollbar"

scrollbarWidth: "none", "::-webkit-scrollbar": { display: "none", },

[steida]

scrollSnapStop

[Daniel15]

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.

[steida]

@nmn This is perfect valid CSS.

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

[nmn]

Support for all the properties mentioned in this issue were added in v0.5.0 which was just released.

[steida]

@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)```

[nmn]

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