|
| 1 | +--- |
| 2 | +# Copyright (c) Meta Platforms, Inc. and affiliates. |
| 3 | +# |
| 4 | +# This source code is licensed under the MIT license found in the |
| 5 | +# LICENSE file in the root directory of this source tree. |
| 6 | +slug: v0.17.1 |
| 7 | +title: Release 0.17.1 |
| 8 | +authors: [nmn, mellyeliu] |
| 9 | +tags: |
| 10 | + - release |
| 11 | +--- |
| 12 | + |
| 13 | +StyleX v0.17 introduces an all new unplugin package for improved integration with various modern bundlers, |
| 14 | +the ability to define custom markers for use with `stylex.when.*` APIs, and a slew of bug-fixes |
| 15 | +and improvements. |
| 16 | + |
| 17 | +## New `@stylexjs/unplugin` package |
| 18 | + |
| 19 | +Stylex 0.17 comes with a new `@stylexjs/unplugin` package that use the excellent `unplugin` library to create a near-universal bundler |
| 20 | +plugin that works with Vite, Rollup, Webpack, Rspack, Esbuild, and more. In supported project setups, this new package should offer |
| 21 | +the best developer experience and performance for StyleX integration. We've introduced new |
| 22 | +[examples](https://github.com/facebook/stylex/tree/main/examples) for |
| 23 | +Webpack, RSPack, and various Vite setups (RSCs, React-Router, Waky and RedwoodSDK) with testing for both production builds and HMR in development builds when applicable. For frameworks that are not yet supported by our unplugin package, we continue to maintain the `@stylexjs/postcss-plugin` and |
| 24 | +and `@stylexjs/cli` packages for maximum compatibitiy. |
| 25 | + |
| 26 | +We look forward to expanding this set of examples with more common frameworks and bundler setups. |
| 27 | + |
| 28 | +## Custom Markers for `stylex.when.*` APIs |
| 29 | + |
| 30 | +StyleX 0.16 introduced new set of APIs to observe the state of other elements: |
| 31 | + |
| 32 | +- `stylex.when.ancestor(pseudo, marker?)` |
| 33 | +- `stylex.when.descendant(pseudo, marker?)` |
| 34 | +- `stylex.when.siblingBefore(pseudo, marker?)` |
| 35 | +- `stylex.when.siblingAfter(pseudo, marker?)` |
| 36 | +- `stylex.when.anySibling(pseudo, marker?)` |
| 37 | +- `stylex.defaultMarker()` |
| 38 | + |
| 39 | +StyleX 0.17 introduces one new API to create custom named markers, `stylex.defineMarker()`. |
| 40 | + |
| 41 | +Using these APIs, a typical CSS selector such as `.parent:hover .child` can be implemented as: |
| 42 | + |
| 43 | +<WhenDemo /> |
| 44 | + |
| 45 | +```tsx |
| 46 | +// markers.stylex.ts |
| 47 | +import * as stylex from '@stylexjs/stylex'; |
| 48 | + |
| 49 | +export const cardMarker = stylex.defineMarker(); |
| 50 | +export const btn = stylex.defineMarker(); |
| 51 | +``` |
| 52 | + |
| 53 | +```tsx |
| 54 | +// Card.tsx |
| 55 | +import * as stylex from '@stylexjs/stylex'; |
| 56 | +import { cardMarker, btnMarker } from './markers.stylex'; |
| 57 | +import {tokens} from './tokens.stylex'; |
| 58 | + |
| 59 | +export function Card() { |
| 60 | + return ( |
| 61 | + <article {...stylex.props(styles.card, cardMarker)}> |
| 62 | + <p>Markers let siblings and ancestors opt into the same state.</p> |
| 63 | + <button {...stylex.props(btnMarker, styles.cta)}> |
| 64 | + Action |
| 65 | + <ArrowIcon style={styles.icon} /> |
| 66 | + </button> |
| 67 | + </article> |
| 68 | + ); |
| 69 | +} |
| 70 | + |
| 71 | +const styles = stylex.create({ |
| 72 | + card: { |
| 73 | + borderWidth: 1, |
| 74 | + borderStyle: 'solid', |
| 75 | + borderColor: tokens.borderColor, |
| 76 | + }, |
| 77 | + cta: { |
| 78 | + backgroundColor: { |
| 79 | + default: 'black', |
| 80 | + [stylex.when.ancestor(':hover', cardMarker)]: tokens.accent, |
| 81 | + }, |
| 82 | + color: 'white', |
| 83 | + }, |
| 84 | + icon: { |
| 85 | + opacity: { |
| 86 | + default: 0, |
| 87 | + [stylex.when.ancestor(':hover', cardMarker)]: 1, |
| 88 | + }, |
| 89 | + transform: { |
| 90 | + default: 'translateX(0)', |
| 91 | + [stylex.when.ancestor(':hover', btnMarker)]: 'translateX(4px)', |
| 92 | + } |
| 93 | + } |
| 94 | +}); |
| 95 | +``` |
| 96 | + |
| 97 | +Icon in the button appears when card is hovered, but it moves to the right when the button itself is hovered. |
| 98 | + |
| 99 | +## Updating default configuration options |
| 100 | + |
| 101 | +We are updating some of the default StyleX configuration options to help make the builds more consistent across development |
| 102 | +and production and improve the developer experience in many scenarios. |
| 103 | + |
| 104 | +### `enableDebugClassNames` is now disabled by default |
| 105 | + |
| 106 | +Enabling this option will emit classNames that reference the CSS property being applied, and CSS variable names |
| 107 | +that are prefixed with the name used in source. However, generating incompatible CSS in development and production |
| 108 | +can cause caching-related bugs in some setups and so we are disabling this option by default. |
| 109 | + |
| 110 | +### `data-style-src` prop now shows full file paths |
| 111 | + |
| 112 | +The `data-style-src` prop is injected in addition to `className` and `style` during development to help identify the |
| 113 | +list of style objects applied to to the element in order or application. Previously, it showed only the last two segments |
| 114 | +of the file path which can be confusing. |
| 115 | + |
| 116 | +Now, the it will include the full path relative to the nearest `package.json` file. For third-party package, we will also |
| 117 | +include the package name itself. |
| 118 | + |
| 119 | +### `enableDevClassNames` will now be enabled when `dev` is enabled |
| 120 | + |
| 121 | +The `dev` option inserts additional classNames that help identify where various classNames are coming from. |
| 122 | + |
| 123 | +### `enableMediaQueryOrder` is now enabled by default |
| 124 | + |
| 125 | +This config ensures that authored media query order is respected, with later queries taking precedence over earlier ones. |
| 126 | + |
| 127 | + |
| 128 | +## Other Improvements |
| 129 | + |
| 130 | +- Added support for handling `defineConsts` correctly when runtime injection is enabled. |
| 131 | +- Fixed a bug sometimes that caused invalid CSS output when media queries use `screen and` conditionals |
| 132 | +- Dependency updates, including Jest, to pick up the latest fixes. (Thanks [@vincentriemer](https://github.com/vincentriemer), [@jcperez-ch](https://github.com/jcperez-ch)!) |
| 133 | +- Specificity improvements when using `stylex.when.*` selectors alongside regular pseudo-classes. |
| 134 | +- Expand how often `stylex.props` is precompiled to improve performance. |
| 135 | +- Various improvements to Flow and Typescript types. (Thanks [@j-malt](https://github.com/j-malt), [@henryqdineen](https://github.com/henryqdineen)!) |
| 136 | +- Various improvements and fixes to the ESlint plugin, including support for `defineConsts` in `enforce-extension`, and improvements to `sort-key` ordering. (Thanks [@hiteshshetty-dev](https://github.com/hiteshshetty-dev), [@yjoer](https://github.com/yjoer), [@dwei-figma](https://github.com/dwei-figma)!) |
0 commit comments