Release 0.8.0

StyleX v0.8.0 is now available with a bunch of fixes and new ESlint rules.

Linting Enhancements

We've been making a lot of improvements to our ESLint plugin. We've both improved our existing rules and added new ones. Thanks to Melissa Liu!

Here are some of the highlights:

New valid-shorthands rule

This rule enforces our opinions on when and how you should use CSS shorthand properties. It disallows the use of multi-value shorthands for shorthands, and disallows certain properties altogether.

const styles = stylex({
  invalidShorthands: {
    // border shorthands are entirely disallowed
    // Use `borderWidth`, `borderStyle`, and `borderColor` instead
    border: '1px solid black',
    // Multiple values for different sides within the same shorthand are disallowed
    borderWidth: '1px 2px 3px 4px',
    margin: '10px 20px 30px',
    padding: '10px 20px',
  },
  validShorthands: {
    borderBottomWidth: 3,
    borderColor: 'black',
    borderInlineEndWidth: 2,
    borderInlineStartWidth: 4,
    borderStyle: 'solid',
    borderTopWidth: 1,
    marginBottom: 30,
    marginInline: 20,
    marginTop: 10,
    paddingBlock: 10,
    paddingInline: 20,
  },
});

These opinions guide you towards the most consistent and most re-usable CSS.

tip

This rule offers an autofix for all disallowed properties.

New enforce-extension rule

This new rule enforces the rules when defining variables._createMdxContent It enforces that usages of stylex.defineVars are named exports within a file with a .stylex.js (or '.ts' or '.jsx' or '.tsx') extension, and that such a file does not have any other exports.

Other Lint fixes

We've updated the ESLint rule to include additional missing properties and values. Notably, the valid-styles rule should now understand:

• fieldSizing as a valid prop
• @starting-style as a valid at-rule.

Using lightningcss for post-processing

StyleX's compilation process is conceptually a three step process:

1. Transform JavaScript source files to replace usages of stylex.create etc. with the resulting classNames and collect the generated CSS.
2. De-duplicate and sort all the collected CSS.
3. Write the CSS to a file.

However, often it's useful to post-process the CSS before writing it to a file. This post-processing can include minification, prefixing, or other transformations. After much discussion we have decided to standardize on lightningcss for this post-processing.

As a first step, we're add lightningcss by default for our Rollup Plugin. We will be rolling out support for our other bundler plugins next.

Thanks Prakshal Jain for his work on this!

Theming Improvements

We've made two small but important improvements for theming in StyleX.

Use stylex.firstThatWorks to define fallback values for CSS variables.

StyleX has a stylex.firstThatWorks function that can be used to define fallback values for CSS property. This is akin to using the same property multiple times with different values in CSS.

/* Represent this */
.my-class {
  background-color: #808080;
  background-color: oklab(0.5 0.5 0.5);
}

const styles = stylex.create({
  myClass: {
    // as:
    backgroundColor: stylex.firstThatWorks(
      'oklab(0.5 0.5 0.5)',
      '#808080',
    ),
  },
});

Now, the same API will also work for CSS variables.

/* Represent this */
.my-class {
  background-color: var(--bg-color, #808080);
}

const styles = stylex.create({
  myClass: {
    // as:
    backgroundColor: stylex.firstThatWorks(
      'var(--bg-color)',
      '#808080',
    ),
  },
});

Themes have higher specificity than default var values

The CSS rule created with stylex.createTheme now has higher specificity than the rule created with stylex.defineVars.

This should not have been issue in the vast majority of cases already, as we always sorted the rules in the correct order. However, in extreme edge-cases where you may be loading multiple StyleX CSS files on the same page, this fix will ensure consistency.

Other fixes

We've made some other fixes in various parts of StyleX:

• fix: Logical values for textAlign are no longer converted to left and right.
• fix: [CLI] Handle errors while deleting files gracefully (#695)
• feat: Expand configuration options to CLI (#638)
• fix: Don't add 'px' units for number values used for variables (#694)
  • fix: Don't add 'px' units for additional properties that accept raw numbers as values (#705)

Documentation Improvements

We've added documentation for options of our various bundler plugin and added additional projects to our ecosystem page.

We've also updated the search on our website to be much more comprehensive and accurate. (Powered by Algolia)