You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
--- original|https://github.com/mantinedev/mantine/tree/85c7938ee3c0463cc4b51e600b6a525c2d974ccd/apps/mantine.dev/src/pages/getting-started.mdx+++ alternative|apps/mantine.dev/src/pages/getting-started.mdx@@ -180,11 +180,9 @@ Contribute financially by [sponsoring the project on OpenCollective](https://ope
Your sponsorship will help us to maintain the project and develop new features.
<Button
- rightSection={<HeartIcon- weight="fill"- size={22}- color="var(--mantine-color-red-7)"- />}+ rightSection={+ <HeartIcon weight="fill" size={22} color="var(--mantine-color-red-7)" />+ }
size="lg"
miw={300}
justify="space-between"
--- original|https://github.com/facebook/stylex/tree/fe0be7f0e76ccc585385f0fa56d9b50053ff9ca2/packages/docs/content/blog/2024-06-25-Release-v0.7.0.mdx+++ alternative|packages/docs/content/blog/2024-06-25-Release-v0.7.0.mdx@@ -53,8 +53,9 @@ const vars = stylex.defineVars({
});
```
-:::info[Note] When using literals for variable names, StyleX cannot guarantee-uniqueness. :::+:::info[Note]+When using literals for variable names, StyleX cannot guarantee uniqueness.+:::
## Bug Fixes and improvements
--- original|https://github.com/facebook/stylex/tree/fe0be7f0e76ccc585385f0fa56d9b50053ff9ca2/packages/docs/content/blog/2024-10-06-Release-v0.8.0.mdx+++ alternative|packages/docs/content/blog/2024-10-06-Release-v0.8.0.mdx@@ -56,7 +56,9 @@ const styles = stylex({
These opinions guide you towards the most consistent and most re-usable CSS.
-:::tip This rule offers an autofix for all disallowed properties. :::+:::tip+This rule offers an autofix for all disallowed properties.+:::
### New `enforce-extension` rule
--- original|https://github.com/facebook/stylex/tree/fe0be7f0e76ccc585385f0fa56d9b50053ff9ca2/packages/docs/content/blog/2024-11-01-Release-v0.9.3.mdx+++ alternative|packages/docs/content/blog/2024-11-01-Release-v0.9.3.mdx@@ -81,9 +81,10 @@ making it easy to create "reset" themes:
const reset = stylex.createTheme(varGroup, {});
```
-:::tip You can define this "reset" theme multiple times within your app and they-will all be de-duplicated by the compiler. We encourage you to "repeat-yourself"! :::+:::tip+You can define this "reset" theme multiple times within your app and they will+all be de-duplicated by the compiler. We encourage you to "repeat yourself"!+:::
### `rootDir` is now optional!
@@ -99,16 +100,18 @@ Now, the `rootDir` option is optional, and StyleX will use the nearest
`package.json` file to determine the canonical path, automatically. This should
make theming APIs work more reliably.
-:::note When determining the canonical path, StyleX will use the `name` field-from the nearest `package.json` file and the relative path to the `.stylex.js`-file. We intentionally ignore the `version` number.+:::note+When determining the canonical path, StyleX will use the `name` field from the+nearest `package.json` file and the relative path to the `.stylex.js` file. We+intentionally ignore the `version` number.
This means that your project happens to contain multiple versions of the same
package, StyleX will only generate a single set of variables for them. This will
usually be the desired behavior, but you may see some unexpected results if the
variables within the two versions are different.
-We will be making further improvements to minimize any such edge-cases. :::+We will be making further improvements to minimize any such edge-cases.+:::
### More reliable ESM resolution
@@ -156,11 +159,13 @@ const styles = stylex.create({
});
```
-:::warning The `@stylexjs/dev-runtime` only exists as a convenience for-development purposes. It does not completely match the behavior of the StyleX-compiler and will always lack certain features.+:::warning+The `@stylexjs/dev-runtime` only exists as a convenience for development+purposes. It does not completely match the behavior of the StyleX compiler and+will always lack certain features.-**DO NOT** use it in production. :::+**DO NOT** use it in production.+:::
## Improved handling of nested pseudo-elements and pseudo-classes
--- original|https://github.com/facebook/stylex/tree/fe0be7f0e76ccc585385f0fa56d9b50053ff9ca2/packages/docs/content/docs/api/javascript/atoms.mdx+++ alternative|packages/docs/content/docs/api/javascript/atoms.mdx@@ -11,10 +11,8 @@ Atoms are StyleX styles. They can be passed to
styles, and dynamic styles.
<Callout type="info">
--`@stylexjs/atoms` must be compiled by `@stylexjs/babel-plugin`. The package-throws at runtime if an atom is accessed without compilation.-+ `@stylexjs/atoms` must be compiled by `@stylexjs/babel-plugin`. The package+ throws at runtime if an atom is accessed without compilation.
</Callout>
## Installation
--- original|https://github.com/facebook/stylex/tree/fe0be7f0e76ccc585385f0fa56d9b50053ff9ca2/packages/docs/content/docs/api/javascript/env.mdx+++ alternative|packages/docs/content/docs/api/javascript/env.mdx@@ -6,9 +6,7 @@ Allows the user to configure shareable tokens and functions to be used within
StyleX APIs. Values are configured through the babel config.
<Callout type="info">
--`env` is an experimental API that is subject to change.-+ `env` is an experimental API that is subject to change.
</Callout>
```ts
--- original|https://github.com/facebook/stylex/tree/fe0be7f0e76ccc585385f0fa56d9b50053ff9ca2/packages/docs/content/docs/api/javascript/props.mdx+++ alternative|packages/docs/content/docs/api/javascript/props.mdx@@ -68,14 +68,12 @@ You can rename or disable this syntax with the
### Not using React?
<Callout type="tip" title="For Solid, Svelte, Qwik, Vue">
+ Use [`stylex.attrs()`](/docs/api/javascript/attrs) to get `class` and a string+ `style` value directly.-Use [`stylex.attrs()`](/docs/api/javascript/attrs) to get `class` and a string-`style` value directly.--Example use:--```js-<div {...stylex.attrs(styles.root, condition && styles.active)} />-```+ Example use:+ ```js+ <div {...stylex.attrs(styles.root, condition && styles.active)} />+ ```
</Callout>
--- original|https://github.com/facebook/stylex/tree/fe0be7f0e76ccc585385f0fa56d9b50053ff9ca2/packages/docs/content/docs/api/javascript/viewTransitionClass.mdx+++ alternative|packages/docs/content/docs/api/javascript/viewTransitionClass.mdx@@ -7,10 +7,8 @@ name which can be utilized for customizing the animations in a
[View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API).
<Callout type="info">
--The styles that `viewTransitionClass` accepts don't currently support media-queries but adding support for them is a planned enhancement.-+ The styles that `viewTransitionClass` accepts don't currently support media+ queries but adding support for them is a planned enhancement.
</Callout>
```ts
--- original|https://github.com/facebook/stylex/tree/fe0be7f0e76ccc585385f0fa56d9b50053ff9ca2/packages/docs/content/docs/api/types/StaticStyles.mdx+++ alternative|packages/docs/content/docs/api/types/StaticStyles.mdx@@ -32,12 +32,10 @@ type Props = {
Any key not defined in the object type will be disallowed.
<Callout type="danger" title="Only known keys are checked">
+ Due to a+ [TypeScript limitation](https://github.com/Microsoft/TypeScript/issues/12936),+ any key not in your custom object type will only be disallowed if it's one of+ the known style properties in the internal StyleX types.-Due to a-[TypeScript limitation](https://github.com/Microsoft/TypeScript/issues/12936),-any key not in your custom object type will only be disallowed if it's one of-the known style properties in the internal StyleX types.--TypeScript will not error if you pass an additional unknown key.-+ TypeScript will not error if you pass an additional unknown key.
</Callout>
--- original|https://github.com/facebook/stylex/tree/fe0be7f0e76ccc585385f0fa56d9b50053ff9ca2/packages/docs/content/docs/api/types/StyleXStyles.mdx+++ alternative|packages/docs/content/docs/api/types/StyleXStyles.mdx@@ -31,12 +31,10 @@ type Props = {
Any key not defined in the object type will be disallowed.
<Callout type="danger" title="Only known keys are checked">
+ Due to a+ [TypeScript limitation](https://github.com/Microsoft/TypeScript/issues/12936),+ any key not in your custom object type will only be disallowed if it's one of+ the known style properties in the internal StyleX types.-Due to a-[TypeScript limitation](https://github.com/Microsoft/TypeScript/issues/12936),-any key not in your custom object type will only be disallowed if it's one of-the known style properties in the internal StyleX types.--TypeScript will not error if you pass an additional unknown key.-+ TypeScript will not error if you pass an additional unknown key.
</Callout>
--- original|https://github.com/facebook/stylex/tree/fe0be7f0e76ccc585385f0fa56d9b50053ff9ca2/packages/docs/content/docs/api/types/Theme.mdx+++ alternative|packages/docs/content/docs/api/types/Theme.mdx@@ -29,27 +29,25 @@ While it's not needed in most cases, `Theme` also accepts an optional second
type argument.
<Accordion title="Advanced use-case: unique type identity for a Theme">
--Two themes for the same `VarGroup` have the same type by default. In most cases,-this is the desired behavior. However, in some cases, you may want each theme to-have a unique type identity to constrain the themes that can be passed into a-particular component.--```tsx-import * as stylex from '@stylexjs/stylex';-import type { Theme } from '@stylexjs/stylex';-import { vars } from './vars.stylex';--declare const Tag: unique symbol;-export const theme1: Theme<typeof vars, Tag> = stylex.createTheme(vars, {- color: 'red', // OK- backgroundColor: 'blue', // OK-});-```--Now, `theme1` has a unique type identity and a different `Theme` for `vars`-would not satisfy `typeof theme1`.--This advanced use-case should be rarely needed, but it's available when it is.-+ Two themes for the same `VarGroup` have the same type by default. In most+ cases, this is the desired behavior. However, in some cases, you may want each+ theme to have a unique type identity to constrain the themes that can be+ passed into a particular component.++ ```tsx+ import * as stylex from '@stylexjs/stylex';+ import type { Theme } from '@stylexjs/stylex';+ import { vars } from './vars.stylex';++ declare const Tag: unique symbol;+ export const theme1: Theme<typeof vars, Tag> = stylex.createTheme(vars, {+ color: 'red', // OK+ backgroundColor: 'blue', // OK+ });+ ```++ Now, `theme1` has a unique type identity and a different `Theme` for `vars`+ would not satisfy `typeof theme1`.++ This advanced use-case should be rarely needed, but it's available when it is.
</Accordion>
--- original|https://github.com/facebook/stylex/tree/fe0be7f0e76ccc585385f0fa56d9b50053ff9ca2/packages/docs/content/docs/api/types/VarGroup.mdx+++ alternative|packages/docs/content/docs/api/types/VarGroup.mdx@@ -71,58 +71,54 @@ While it's not needed in most cases, `VarGroup` also accepts an optional second
type argument.
<Details>
--<Summary>Advanced use-case: unique type identity for a `VarGroup`</Summary>--TypeScript (and Flow) use structural typing, which means that two objects with-the same shape are considered to be the same type. However, each usage of-`defineVars` results in a new set of variables.--It can be useful to have a unique type identity for each `VarGroup` created to-be able to distinguish between them and accept themes for only a specific-`VarGroup`. This is also known as "nominal typing" and can be achieved by using-a unique symbol as the second type argument to `VarGroup`.--The complete type signature of `VarGroup` is:--```tsx-type VarGroup<Tokens extends {}, ID extends symbol = symbol>-```--It can be used like this:--```tsx-import * as stylex from '@stylexjs/stylex';-import type { VarGroup } from '@stylexjs/stylex';--type Shape = {- color: string;- backgroundColor: string;-};--declare const BaseColors: unique symbol;-export const baseColors: VarGroup<Shape, typeof BaseColors> = stylex.defineVars(- {- color: 'red',- backgroundColor: 'blue',- },-);--declare const CardColors: unique symbol;-export const cardColors: VarGroup<Shape, typeof CardColors> = stylex.defineVars(- {- color: 'red',- backgroundColor: 'blue',- },-);-```--Here `baseColors` and `cardColors` are `VarGroup` objects of the same shape, but-with two distinct type identities. This ensures that a `Theme` for one can't be-used with the other.--It should be rare that two separate `VarGroup` objects are defined with the same-shape and so this feature is not needed in most cases. In the rare cases where-it _is_ needed, it is available.-+ <Summary>Advanced use-case: unique type identity for a `VarGroup`</Summary>++ TypeScript (and Flow) use structural typing, which means that two objects with+ the same shape are considered to be the same type. However, each usage of+ `defineVars` results in a new set of variables.++ It can be useful to have a unique type identity for each `VarGroup` created to+ be able to distinguish between them and accept themes for only a specific+ `VarGroup`. This is also known as "nominal typing" and can be achieved by+ using a unique symbol as the second type argument to `VarGroup`.++ The complete type signature of `VarGroup` is:++ ```tsx+ type VarGroup<Tokens extends {}, ID extends symbol = symbol>+ ```++ It can be used like this:++ ```tsx+ import * as stylex from '@stylexjs/stylex';+ import type { VarGroup } from '@stylexjs/stylex';++ type Shape = {+ color: string;+ backgroundColor: string;+ };++ declare const BaseColors: unique symbol;+ export const baseColors: VarGroup<Shape, typeof BaseColors> =+ stylex.defineVars({+ color: 'red',+ backgroundColor: 'blue',+ });++ declare const CardColors: unique symbol;+ export const cardColors: VarGroup<Shape, typeof CardColors> =+ stylex.defineVars({+ color: 'red',+ backgroundColor: 'blue',+ });+ ```++ Here `baseColors` and `cardColors` are `VarGroup` objects of the same shape,+ but with two distinct type identities. This ensures that a `Theme` for one+ can't be used with the other.++ It should be rare that two separate `VarGroup` objects are defined with the+ same shape and so this feature is not needed in most cases. In the rare cases+ where it _is_ needed, it is available.
</Details>
--- original|https://github.com/facebook/stylex/tree/fe0be7f0e76ccc585385f0fa56d9b50053ff9ca2/packages/docs/content/docs/learn/index.mdx+++ alternative|packages/docs/content/docs/learn/index.mdx@@ -25,50 +25,49 @@ superior to what could be authored and maintained by hand.
}
/>
-<Card- title="Predictable"- description={- <ul>- <li>No "style at a distance"</li>- <li>No specificity issues</li>- <li>Last applied style wins for the same property</li>- </ul>- }-/>--<Card- title="Composable"- description={- <ul>- <li>Apply styles conditionally</li>- <li>Merge and compose arbitrary styles</li>- <li>Pass around styles as props</li>- </ul>- }-/>--<Card- title="Fast"- description={- <ul>- <li>No runtime style injection</li>- <li>Generate a static CSS file at compile-time</li>- <li>Tiny and fast runtime for merging class names</li>- </ul>- }-/>--<Card- title="Type-Safe"- description={- <ul>- <li>Type-safe APIs</li>- <li>Type-safe styles</li>- <li>Type-safe themes</li>- </ul>- }-/>+ <Card+ title="Predictable"+ description={+ <ul>+ <li>No "style at a distance"</li>+ <li>No specificity issues</li>+ <li>Last applied style wins for the same property</li>+ </ul>+ }+ />++ <Card+ title="Composable"+ description={+ <ul>+ <li>Apply styles conditionally</li>+ <li>Merge and compose arbitrary styles</li>+ <li>Pass around styles as props</li>+ </ul>+ }+ />+ <Card+ title="Fast"+ description={+ <ul>+ <li>No runtime style injection</li>+ <li>Generate a static CSS file at compile-time</li>+ <li>Tiny and fast runtime for merging class names</li>+ </ul>+ }+ />++ <Card+ title="Type-Safe"+ description={+ <ul>+ <li>Type-safe APIs</li>+ <li>Type-safe styles</li>+ <li>Type-safe themes</li>+ </ul>+ }+ />
</Cards>
## Using StyleX
--- original|https://github.com/facebook/stylex/tree/fe0be7f0e76ccc585385f0fa56d9b50053ff9ca2/packages/docs/content/docs/learn/static-types.mdx+++ alternative|packages/docs/content/docs/learn/static-types.mdx@@ -8,59 +8,53 @@ StyleX comes with full support for Static Types. The most common utility type is
`StyleXStyles` which is used to accept any arbitrary StyleX styles.
<Tabs defaultValue={0}>
-<TabItem label="TypeScript" default>--```tsx-import type { StyleXStyles } from '@stylexjs/stylex';-import * as stylex from '@stylexjs/stylex';--type Props = {- ...- style?: StyleXStyles,-};--function MyComponent({style, ...otherProps}: Props) {- return (- <div- {...stylex.props(localStyles.foo, localStyles.bar, style)}- >- {/* ... */}- </div>- );-}-```--</TabItem>-<TabItem label="Flow">--```tsx-import type { StyleXStyles } from '@stylexjs/stylex';-import * as stylex from '@stylexjs/stylex';--type Props = $ReadOnly<{- ...- style?: StyleXStyles<>,-}>;--function MyComponent({style, ...otherProps}: Props) {- return (- <div- {...stylex.props(localStyles.foo, localStyles.bar, style)}- >- {/* ... */}- </div>- );-}-```--</TabItem>+ <TabItem label="TypeScript" default>+ ```tsx+ import type { StyleXStyles } from '@stylexjs/stylex';+ import * as stylex from '@stylexjs/stylex';++ type Props = {+ ...+ style?: StyleXStyles,+ };++ function MyComponent({style, ...otherProps}: Props) {+ return (+ <div+ {...stylex.props(localStyles.foo, localStyles.bar, style)}+ >+ {/* ... */}+ </div>+ );+ }+ ```+ </TabItem>+ <TabItem label="Flow">+ ```tsx+ import type { StyleXStyles } from '@stylexjs/stylex';+ import * as stylex from '@stylexjs/stylex';++ type Props = $ReadOnly<{+ ...+ style?: StyleXStyles<>,+ }>;++ function MyComponent({style, ...otherProps}: Props) {+ return (+ <div+ {...stylex.props(localStyles.foo, localStyles.bar, style)}+ >+ {/* ... */}+ </div>+ );+ }+ ```+ </TabItem>
</Tabs>
<Callout type="tip" title="Disallowing dynamic styles">
--`StaticStyles` can be used instead of `StyleXStyles` to accept arbitrary static-styles, but disallow dynamic styles.-+ `StaticStyles` can be used instead of `StyleXStyles` to accept arbitrary+ static styles, but disallow dynamic styles.
</Callout>
## Constraining accepted styles
@@ -74,64 +68,56 @@ To limit the accepted style properties to a given set, an object type with the
allowed properties can be used:
<Tabs defaultValue={0}>
-<TabItem label="TypeScript" default>--```tsx-import type { StyleXStyles } from '@stylexjs/stylex';--type Props = {- // ...- style?: StyleXStyles<{- color?: string;- backgroundColor?: string;- borderColor?: string;- borderTopColor?: string;- borderEndColor?: string;- borderBottomColor?: string;- borderStartColor?: string;- }>;-};-```--</TabItem>-<TabItem label="Flow">--```tsx-import type { StyleXStyles } from '@stylexjs/stylex';--type Props = $ReadOnly<{- // ...- style?: StyleXStyles<{- color?: string;- backgroundColor?: string;- borderColor?: string;- borderTopColor?: string;- borderEndColor?: string;- borderBottomColor?: string;- borderStartColor?: string;- }>;-}>;-```--</TabItem>+ <TabItem label="TypeScript" default>+ ```tsx+ import type { StyleXStyles } from '@stylexjs/stylex';++ type Props = {+ // ...+ style?: StyleXStyles<{+ color?: string;+ backgroundColor?: string;+ borderColor?: string;+ borderTopColor?: string;+ borderEndColor?: string;+ borderBottomColor?: string;+ borderStartColor?: string;+ }>;+ };+ ```+ </TabItem>+ <TabItem label="Flow">+ ```tsx+ import type { StyleXStyles } from '@stylexjs/stylex';++ type Props = $ReadOnly<{+ // ...+ style?: StyleXStyles<{+ color?: string;+ backgroundColor?: string;+ borderColor?: string;+ borderTopColor?: string;+ borderEndColor?: string;+ borderBottomColor?: string;+ borderStartColor?: string;+ }>;+ }>;+ ```+ </TabItem>
</Tabs>
The `style` prop will now accept only the properties defined but disallow
anything else.
<Callout type="tip" title="Good default styles">
--It is a good practice to make the keys of the style types optional and have-baseline styles in the component itself.-+ It is a good practice to make the keys of the style types optional and have+ baseline styles in the component itself.
</Callout>
<Callout type="danger" title="TypeScript may not catch extra style properties">
--TypeScript object types don’t error when given objects with extra properties.-We’ve taken steps to mitigate this issue, but there may be edge-cases where-you’ll be able to pass in extra, disallowed styles without a type error.-+ TypeScript object types don’t error when given objects with extra properties.+ We’ve taken steps to mitigate this issue, but there may be edge-cases where+ you’ll be able to pass in extra, disallowed styles without a type error.
</Callout>
### Limiting the possible values for styles
@@ -140,38 +126,34 @@ In addition to the accepted style properties, the values for those properties
can be constrained too.
<Tabs>
-<TabItem value="typescript" label="TypeScript" default>--```tsx-import type { StyleXStyles } from '@stylexjs/stylex';--type Props = {- ...- // Only accept styles for marginTop and nothing else.- // The value for marginTop can only be 0, 4, 8 or 16.- style?: StyleXStyles<{- marginTop: 0 | 4 | 8 | 16- }>,-};-```--</TabItem>-<TabItem value="flow" label="Flow">--```tsx-import type { StyleXStyles } from '@stylexjs/stylex';--type Props = $ReadOnly<{- ...- // Only accept styles for marginTop and nothing else.- // The value for marginTop can only be 0, 4, 8 or 16.- style?: StyleXStyles<{- marginTop: 0 | 4 | 8 | 16- }>,-}>;-```--</TabItem>+ <TabItem value="typescript" label="TypeScript" default>+ ```tsx+ import type { StyleXStyles } from '@stylexjs/stylex';++ type Props = {+ ...+ // Only accept styles for marginTop and nothing else.+ // The value for marginTop can only be 0, 4, 8 or 16.+ style?: StyleXStyles<{+ marginTop: 0 | 4 | 8 | 16+ }>,+ };+ ```+ </TabItem>+ <TabItem value="flow" label="Flow">+ ```tsx+ import type { StyleXStyles } from '@stylexjs/stylex';++ type Props = $ReadOnly<{+ ...+ // Only accept styles for marginTop and nothing else.+ // The value for marginTop can only be 0, 4, 8 or 16.+ style?: StyleXStyles<{+ marginTop: 0 | 4 | 8 | 16+ }>,+ }>;+ ```+ </TabItem>
</Tabs>
Now, this component only accepts styles that have a `marginTop` property and no
@@ -183,110 +165,106 @@ other properties. The value for `marginTop` can only be one of `0`, `4`, `8`, or
It is sometimes more convenient to define a blocklist instead of an allowlist.
<Tabs>
-<TabItem value="typescript" label="TypeScript" default>--```tsx-import type { StyleXStylesWithout } from '@stylexjs/stylex';-import * as stylex from '@stylexjs/stylex';--type NoLayout = StyleXStylesWithout<{- position: unknown;- display: unknown;- top: unknown;- start: unknown;- end: unknown;- bottom: unknown;- border: unknown;- borderWidth: unknown;- borderBottomWidth: unknown;- borderEndWidth: unknown;- borderStartWidth: unknown;- borderTopWidth: unknown;- margin: unknown;- marginBottom: unknown;- marginEnd: unknown;- marginStart: unknown;- marginTop: unknown;- padding: unknown;- paddingBottom: unknown;- paddingEnd: unknown;- paddingStart: unknown;- paddingTop: unknown;- width: unknown;- height: unknown;- flexBasis: unknown;- overflow: unknown;- overflowX: unknown;- overflowY: unknown;-}>;--type Props = {- // ...- style?: NoLayout;-};--function MyComponent({ style, ...otherProps }: Props) {- return (- <div {...stylex.props(localStyles.foo, localStyles.bar, style)}>- {/* ... */}- </div>- );-}-```--</TabItem>-<TabItem value="flow" label="Flow">--```tsx-import type { StyleXStylesWithout } from '@stylexjs/stylex';-import * as stylex from '@stylexjs/stylex';--type NoLayout = StyleXStylesWithout<{- position: mixed;- display: mixed;- top: mixed;- start: mixed;- end: mixed;- bottom: mixed;- border: mixed;- borderWidth: mixed;- borderBottomWidth: mixed;- borderEndWidth: mixed;- borderStartWidth: mixed;- borderTopWidth: mixed;- margin: mixed;- marginBottom: mixed;- marginEnd: mixed;- marginStart: mixed;- marginTop: mixed;- padding: mixed;- paddingBottom: mixed;- paddingEnd: mixed;- paddingStart: mixed;- paddingTop: mixed;- width: mixed;- height: mixed;- flexBasis: mixed;- overflow: mixed;- overflowX: mixed;- overflowY: mixed;-}>;--type Props = $ReadOnly<{- // ...- style?: NoLayout;-}>;--function MyComponent({ style, ...otherProps }: Props) {- return (- <div {...stylex.props(localStyles.foo, localStyles.bar, style)}>- {/* ... */}- </div>- );-}-```--</TabItem>+ <TabItem value="typescript" label="TypeScript" default>+ ```tsx+ import type { StyleXStylesWithout } from '@stylexjs/stylex';+ import * as stylex from '@stylexjs/stylex';++ type NoLayout = StyleXStylesWithout<{+ position: unknown;+ display: unknown;+ top: unknown;+ start: unknown;+ end: unknown;+ bottom: unknown;+ border: unknown;+ borderWidth: unknown;+ borderBottomWidth: unknown;+ borderEndWidth: unknown;+ borderStartWidth: unknown;+ borderTopWidth: unknown;+ margin: unknown;+ marginBottom: unknown;+ marginEnd: unknown;+ marginStart: unknown;+ marginTop: unknown;+ padding: unknown;+ paddingBottom: unknown;+ paddingEnd: unknown;+ paddingStart: unknown;+ paddingTop: unknown;+ width: unknown;+ height: unknown;+ flexBasis: unknown;+ overflow: unknown;+ overflowX: unknown;+ overflowY: unknown;+ }>;++ type Props = {+ // ...+ style?: NoLayout;+ };++ function MyComponent({ style, ...otherProps }: Props) {+ return (+ <div {...stylex.props(localStyles.foo, localStyles.bar, style)}>+ {/* ... */}+ </div>+ );+ }+ ```+ </TabItem>+ <TabItem value="flow" label="Flow">+ ```tsx+ import type { StyleXStylesWithout } from '@stylexjs/stylex';+ import * as stylex from '@stylexjs/stylex';++ type NoLayout = StyleXStylesWithout<{+ position: mixed;+ display: mixed;+ top: mixed;+ start: mixed;+ end: mixed;+ bottom: mixed;+ border: mixed;+ borderWidth: mixed;+ borderBottomWidth: mixed;+ borderEndWidth: mixed;+ borderStartWidth: mixed;+ borderTopWidth: mixed;+ margin: mixed;+ marginBottom: mixed;+ marginEnd: mixed;+ marginStart: mixed;+ marginTop: mixed;+ padding: mixed;+ paddingBottom: mixed;+ paddingEnd: mixed;+ paddingStart: mixed;+ paddingTop: mixed;+ width: mixed;+ height: mixed;+ flexBasis: mixed;+ overflow: mixed;+ overflowX: mixed;+ overflowY: mixed;+ }>;++ type Props = $ReadOnly<{+ // ...+ style?: NoLayout;+ }>;++ function MyComponent({ style, ...otherProps }: Props) {+ return (+ <div {...stylex.props(localStyles.foo, localStyles.bar, style)}>+ {/* ... */}+ </div>+ );+ }+ ```+ </TabItem>
</Tabs>
Here the listed properties in the object type will be disallowed, but all other
--- original|https://github.com/facebook/stylex/tree/fe0be7f0e76ccc585385f0fa56d9b50053ff9ca2/packages/docs/content/docs/learn/styling-ui/defining-styles.mdx+++ alternative|packages/docs/content/docs/learn/styling-ui/defining-styles.mdx@@ -87,11 +87,9 @@ const styles = stylex.create({
## Pseudo-elements
<Callout type="info" title="Avoid unnecessary pseudo elements">
--We recommend avoiding pseudo-elements when possible and relying on actual HTML-elements instead, i.e., replace `::before` and `::after` with elements like-`div` or `span`. This helps reduce the size of your CSS bundle.-+ We recommend avoiding pseudo-elements when possible and relying on actual HTML+ elements instead, i.e., replace `::before` and `::after` with elements like+ `div` or `span`. This helps reduce the size of your CSS bundle.
</Callout>
Pseudo-elements are a way of targeting shadow DOM elements contained within the
@@ -159,14 +157,12 @@ const styles = stylex.create({
```
<Callout type="info">
+ The `default` case is required when authoring contextual styles. If you don't+ want any style to be applied in the default case, you can use `null` as the+ value.-The `default` case is required when authoring contextual styles. If you don't-want any style to be applied in the default case, you can use `null` as the-value.--Using `null` for a non-`default` condition has no effect and should be-considered invalid.-+ Using `null` for a non-`default` condition has no effect and should be+ considered invalid.
</Callout>
## Fallback styles
@@ -220,12 +216,10 @@ const styles = stylex.create({
## Dynamic styles
<Callout type="warning" title="Use sparingly">
--Dynamic styles are an advanced feature and should be used sparingly. For the-majority of use-cases,-[conditional styles](/docs/learn/styling-ui/using-styles#conditional-styles)-should be sufficient.-+ Dynamic styles are an advanced feature and should be used sparingly. For the+ majority of use-cases,+ [conditional styles](/docs/learn/styling-ui/using-styles#conditional-styles)+ should be sufficient.
</Callout>
StyleX generates all styles at compile-time which means you need to _know_ all
--- original|https://github.com/facebook/stylex/tree/fe0be7f0e76ccc585385f0fa56d9b50053ff9ca2/packages/docs/content/docs/learn/theming/creating-themes.mdx+++ alternative|packages/docs/content/docs/learn/theming/creating-themes.mdx@@ -3,12 +3,10 @@ title: 'Creating themes'
---
<Callout type="info" title="Note">
--The-[`unstable_moduleResolution`](/docs/api/configuration/babel-plugin/#unstable_moduleresolution)-option needs to be enabled in the StyleX Babel configuration to enable theming-APIs.-+ The+ [`unstable_moduleResolution`](/docs/api/configuration/babel-plugin/#unstable_moduleresolution)+ option needs to be enabled in the StyleX Babel configuration to enable theming+ APIs.
</Callout>
Once variables have been defined, alternate “themes” can be created to override
@@ -65,8 +63,6 @@ Unlike when defining and using variables, themes can be created with
components.
<Callout type="info">
--If multiple themes for the same variable group are applied on the same HTML-element, the last applied theme wins.-+ If multiple themes for the same variable group are applied on the same HTML+ element, the last applied theme wins.
</Callout>
--- original|https://github.com/facebook/stylex/tree/fe0be7f0e76ccc585385f0fa56d9b50053ff9ca2/packages/docs/content/docs/learn/theming/defining-variables.mdx+++ alternative|packages/docs/content/docs/learn/theming/defining-variables.mdx@@ -3,12 +3,10 @@ title: 'Defining variables'
---
<Callout type="info" title="Note">
--The-[`unstable_moduleResolution`](/docs/api/configuration/babel-plugin/#unstable_moduleresolution)-option needs to be enabled in the StyleX Babel configuration to enable theming-APIs.-+ The+ [`unstable_moduleResolution`](/docs/api/configuration/babel-plugin/#unstable_moduleresolution)+ option needs to be enabled in the StyleX Babel configuration to enable theming+ APIs.
</Callout>
In addition to authoring styles for your components that generate atomic styles,
--- original|https://github.com/facebook/stylex/tree/fe0be7f0e76ccc585385f0fa56d9b50053ff9ca2/packages/docs/content/docs/learn/theming/using-variables.mdx+++ alternative|packages/docs/content/docs/learn/theming/using-variables.mdx@@ -3,12 +3,10 @@ title: 'Using variables'
---
<Callout type="info" title="Note">
--The-[`unstable_moduleResolution`](/docs/api/configuration/babel-plugin/#unstable_moduleresolution)-option needs to be enabled in the StyleX Babel configuration to enable theming-APIs.-+ The+ [`unstable_moduleResolution`](/docs/api/configuration/babel-plugin/#unstable_moduleresolution)+ option needs to be enabled in the StyleX Babel configuration to enable theming+ APIs.
</Callout>
Once [variables have been defined](/docs/learn/theming/defining-variables), they
@@ -67,8 +65,6 @@ There are a few rules to keep in mind when using variables:
them.
<Callout type="tip">
--Remember that StyleX variables are comprised of CSS identifiers. They cannot be-used as values within JavaScript code.-+ Remember that StyleX variables are comprised of CSS identifiers. They cannot+ be used as values within JavaScript code.
</Callout>
--- original|https://github.com/facebook/stylex/tree/fe0be7f0e76ccc585385f0fa56d9b50053ff9ca2/packages/docs/content/docs/learn/theming/variable-types.mdx+++ alternative|packages/docs/content/docs/learn/theming/variable-types.mdx@@ -3,19 +3,15 @@ title: 'Types for Variables'
---
<Callout type="info" title="Note">
--The-[`unstable_moduleResolution`](/docs/api/configuration/babel-plugin/#unstable_moduleresolution)-option needs to be enabled in the StyleX Babel configuration to enable theming-APIs.-+ The+ [`unstable_moduleResolution`](/docs/api/configuration/babel-plugin/#unstable_moduleresolution)+ option needs to be enabled in the StyleX Babel configuration to enable theming+ APIs.
</Callout>
<Callout type="warning" title="Advanced use-case">
--Declaring types for variables is an advanced use-case. It is not necessary for-the majority of use-cases.-+ Declaring types for variables is an advanced use-case. It is not necessary for+ the majority of use-cases.
</Callout>
By default, variables values are strings. This is the correct choice for the
--- original|https://github.com/facebook/stylex/tree/fe0be7f0e76ccc585385f0fa56d9b50053ff9ca2/packages/docs/content/docs/learn/thinking-in-stylex.mdx+++ alternative|packages/docs/content/docs/learn/thinking-in-stylex.mdx@@ -66,24 +66,20 @@ let a = stylex.props(styles.red);
Compiles down to:
<Tabs>
-<TabItem label="JS Output" value="js-output">--```tsx-import * as stylex from '@stylexjs/stylex';--let a = { className: 'x1e2nbdu' };-```--</TabItem>-<TabItem label="CSS Output" value="css-output">--```css-.x1e2nbdu {- color: red;-}-```--</TabItem>+ <TabItem label="JS Output" value="js-output">+ ```tsx+ import * as stylex from '@stylexjs/stylex';++ let a = { className: 'x1e2nbdu' };+ ```+ </TabItem>+ <TabItem label="CSS Output" value="css-output">+ ```css+ .x1e2nbdu {+ color: red;+ }+ ```+ </TabItem>
</Tabs>
There is no runtime overhead here.
@@ -117,40 +113,36 @@ function MyComponent({ style }) {
Compiles down to:
<Tabs>
-<TabItem label="JS Output" value="js-output">--```tsx-import * as stylex from '@stylexjs/stylex';--const styles = {- foo: {- color: 'x1e2nbdu',- $$css: true,- },- bar: {- backgroundColor: 'x1t391ir',- $$css: true,- },-};--function MyComponent({ style }) {- return <div {...stylex.props(styles.foo, styles.bar, style)} />;-}-```--</TabItem>-<TabItem label="CSS Output" value="css-output">--```css-.x1e2nbdu {- color: red;-}-.x1t391ir {- background-color: blue;-}-```--</TabItem>+ <TabItem label="JS Output" value="js-output">+ ```tsx+ import * as stylex from '@stylexjs/stylex';++ const styles = {+ foo: {+ color: 'x1e2nbdu',+ $$css: true,+ },+ bar: {+ backgroundColor: 'x1t391ir',+ $$css: true,+ },+ };++ function MyComponent({ style }) {+ return <div {...stylex.props(styles.foo, styles.bar, style)} />;+ }+ ```+ </TabItem>+ <TabItem label="CSS Output" value="css-output">+ ```css+ .x1e2nbdu {+ color: red;+ }+ .x1t391ir {+ background-color: blue;+ }+ ```+ </TabItem>
</Tabs>
This is a little more code, but the runtime cost is still minimal because of how
@@ -331,15 +323,13 @@ HTML element a semantic name can communicate a lot more than the styles
themselves.
<Callout type="info">
+ One side benefit of using references to styles rather than using the styles+ inline is **testability**. In a unit-testing environment, StyleX can be+ configured to remove all atomic styles and only output single debugging class+ names to indicate the source location of styles rather than the actual styles.-One side benefit of using references to styles rather than using the styles-inline is **testability**. In a unit-testing environment, StyleX can be-configured to remove all atomic styles and only output single debugging class-names to indicate the source location of styles rather than the actual styles.--Among other benefits, it makes snapshot tests more resilient as they won't-change for every style change.-+ Among other benefits, it makes snapshot tests more resilient as they won't+ change for every style change.
</Callout>
### Modularity and composability
--- original|https://github.com/mantinedev/mantine/tree/f38933cb4f1c534600f4ff59ee3ddbb4685a4bc4/apps/help.mantine.dev/src/pages/q/color-scheme-hydration-warning.mdx+++ alternative|apps/help.mantine.dev/src/pages/q/color-scheme-hydration-warning.mdx@@ -21,7 +21,9 @@ export default Layout(meta);
## Example hydration warning
-<ErrorMessage error="Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used. > -data-mantine-color-scheme='light'" />+<ErrorMessage+ error="Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used. > -data-mantine-color-scheme='light'"+/>
Minimal Next.js code that has this warning (Next.js used as an example, the same logic can be applied to any other framework with server-side rendering):
--- original|https://github.com/mantinedev/mantine/tree/f38933cb4f1c534600f4ff59ee3ddbb4685a4bc4/apps/help.mantine.dev/src/pages/q/mantine-provider-missing.mdx+++ alternative|apps/help.mantine.dev/src/pages/q/mantine-provider-missing.mdx@@ -12,7 +12,9 @@ export const meta = {
export default Layout(meta);
-<ErrorMessage error="@mantine/core: MantineProvider was not found in component tree, make sure you have it in your app." />+<ErrorMessage+ error="@mantine/core: MantineProvider was not found in component tree, make sure you have it in your app."+/>
The error above occurs in the following cases:
--- original|https://github.com/mantinedev/mantine/tree/f38933cb4f1c534600f4ff59ee3ddbb4685a4bc4/apps/help.mantine.dev/src/pages/q/server-components.mdx+++ alternative|apps/help.mantine.dev/src/pages/q/server-components.mdx@@ -46,7 +46,9 @@ same way as server components, the only difference is that client components are
## Error: hook is not a function
-<ErrorMessage error="Error: (0 , _barrel_optimize_names_useDisclosure_mantine_hooks__WEBPACK_IMPORTED_MODULE_1__.useDisclosure) is not a function or its return value is not iterable" />+<ErrorMessage+ error="Error: (0 , _barrel_optimize_names_useDisclosure_mantine_hooks__WEBPACK_IMPORTED_MODULE_1__.useDisclosure) is not a function or its return value is not iterable"+/>
This error happens when you try to use hooks in server components. In the example above, you are trying to use
the `useDisclosure` hook without the `'use client';` directive. To fix it, add the `'use client';` directive to the top of the file.
@@ -79,7 +81,9 @@ function Demo() {
## Error: function cannot be passed as children
-<ErrorMessage error="Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with 'use server'." />+<ErrorMessage+ error="Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with 'use server'."+/>
This error happens when you try to pass a callback function as children to a server component.
If you need to pass a callback function as children, you need to add `'use client';` to the top of the file.
@@ -126,7 +130,9 @@ function Demo() {
## Error: hook usage in server component
-<ErrorMessage error="You're importing a component that needs useRef. It only works in a Client Component but none of its parents are marked with 'use client', so they're Server Components by default." />+<ErrorMessage+ error="You're importing a component that needs useRef. It only works in a Client Component but none of its parents are marked with 'use client', so they're Server Components by default."+/>
The error above occurs when you try to use a hook (`useState`, `useRef`, `useReducer`, `useEffect`, any other hook) in a server component.
To fix it, add the `'use client';` directive to the top of the file.
@@ -157,7 +163,9 @@ function Demo() {
## Error: compound components in server component
-<ErrorMessage error="Could not find the module 'x/node_modules/@mantine/core/esm/components/Popover/Popover.mjs#Popover#Target' in the React Client Manifest. This is probably a bug in the React Server Components bundler." />+<ErrorMessage+ error="Could not find the module 'x/node_modules/@mantine/core/esm/components/Popover/Popover.mjs#Popover#Target' in the React Client Manifest. This is probably a bug in the React Server Components bundler."+/>
The error above occurs when you try to use a compound component (`<Tabs.Tab />`, `<Popover.Dropdown />`, etc.) in a server component.
To fix it, add the `'use client';` directive to the top of the file or replace compound components with regular components (`TabsTab`, `PopoverDropdown`, etc.).
@@ -217,7 +225,9 @@ function Demo() {
## Error: Attempted to call extend() from the server
-<ErrorMessage error="Error: Attempted to call extend() from the server but extend is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component." />+<ErrorMessage+ error="Error: Attempted to call extend() from the server but extend is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component."+/>
The error above occurs when you try to call the `Component.extend` function without the `'use client';` directive.
To fix it, add the `'use client';` directive to the top of the file.
--- original|https://github.com/mantinedev/mantine/tree/f38933cb4f1c534600f4ff59ee3ddbb4685a4bc4/apps/help.mantine.dev/src/pages/q/ten-shades-per-color.mdx+++ alternative|apps/help.mantine.dev/src/pages/q/ten-shades-per-color.mdx@@ -65,12 +65,8 @@ and `light` variants that use different shades of `theme.colors` depending on th
color scheme:
<Group>
- <Button size="lg" radius="md">- Filled Button- </Button>- <Button size="lg" radius="md" variant="light">- Filled Button- </Button>+ <Button size="lg" radius="md">Filled Button</Button>+ <Button size="lg" radius="md" variant="light">Filled Button</Button>
</Group>
In the above example:
--- original|https://github.com/mantinedev/mantine/tree/f38933cb4f1c534600f4ff59ee3ddbb4685a4bc4/apps/mantine.dev/src/pages/changelog/7-16-0.mdx+++ alternative|apps/mantine.dev/src/pages/changelog/7-16-0.mdx@@ -106,5 +106,5 @@ form.isTouched("a"); // -> true
## Other changes
- [Autocomplete](/core/autocomplete) now supports `clearable` prop
-- [where-\* mixins](/styles/postcss-preset/#where--mixins) documentation has been added+- [where-* mixins](/styles/postcss-preset/#where--mixins) documentation has been added
- [use-local-storage](/hooks/use-local-storage) hook now supports `sync` option which allows disabling synchronization between browser tabs
--- original|https://github.com/mantinedev/mantine/tree/f38933cb4f1c534600f4ff59ee3ddbb4685a4bc4/apps/mantine.dev/src/pages/styles/emotion.mdx+++ alternative|apps/mantine.dev/src/pages/styles/emotion.mdx@@ -52,7 +52,9 @@ consider using [CSS modules](/styles/css-modules/) instead.
Install dependencies:
-<InstallScript packages="@mantine/emotion @emotion/react @emotion/cache @emotion/serialize @emotion/utils" />+<InstallScript+ packages="@mantine/emotion @emotion/react @emotion/cache @emotion/serialize @emotion/utils"+/>
Create `emotion.d.ts` file in `src` directory to add types support for `sx` and `styles` props:
@@ -119,7 +121,9 @@ function Demo() {
Install dependencies:
-<InstallScript packages="@mantine/emotion @emotion/react @emotion/cache @emotion/serialize @emotion/utils @emotion/server" />+<InstallScript+ packages="@mantine/emotion @emotion/react @emotion/cache @emotion/serialize @emotion/utils @emotion/server"+/>
Create `emotion` folder with `cache.ts` and `emotion.d.ts` files.
@@ -237,7 +241,9 @@ function Demo() {
Install dependencies:
-<InstallScript packages="@mantine/emotion @emotion/react @emotion/cache @emotion/serialize @emotion/utils @emotion/server" />+<InstallScript+ packages="@mantine/emotion @emotion/react @emotion/cache @emotion/serialize @emotion/utils @emotion/server"+/>
Create `app/emotion.d.ts` file with the following content:
--- original|https://github.com/mantinedev/mantine/tree/f38933cb4f1c534600f4ff59ee3ddbb4685a4bc4/apps/mantine.dev/src/pages/x/carousel.mdx+++ alternative|apps/mantine.dev/src/pages/x/carousel.mdx@@ -6,7 +6,9 @@ export default Layout(MDX_DATA.Carousel);
## Installation
-<InstallScript packages="embla-carousel@^8.5.2 embla-carousel-react@^8.5.2 @mantine/carousel" />+<InstallScript+ packages="embla-carousel@^8.5.2 embla-carousel-react@^8.5.2 @mantine/carousel"+/>
After installation import package styles at the root of your application:
--- original|https://github.com/mantinedev/mantine/tree/f38933cb4f1c534600f4ff59ee3ddbb4685a4bc4/apps/mantine.dev/src/pages/x/lightbox.mdx+++ alternative|apps/mantine.dev/src/pages/x/lightbox.mdx@@ -6,7 +6,9 @@ export default Layout(MDX_DATA.Lightbox);
## Installation
-<InstallScript packages="embla-carousel@^8.5.2 embla-carousel-react@^8.5.2 @mantine/lightbox" />+<InstallScript+ packages="embla-carousel@^8.5.2 embla-carousel-react@^8.5.2 @mantine/lightbox"+/>
After installation import package styles at the root of your application:
--- original|https://github.com/mantinedev/mantine/tree/f38933cb4f1c534600f4ff59ee3ddbb4685a4bc4/apps/mantine.dev/src/pages/x/tiptap.mdx+++ alternative|apps/mantine.dev/src/pages/x/tiptap.mdx@@ -8,7 +8,9 @@ export default Layout(MDX_DATA.TipTap);
Install with yarn:
-<InstallScript packages="@mantine/tiptap @mantine/core @mantine/hooks @tiptap/react @tiptap/pm @tiptap/extension-link @tiptap/starter-kit" />+<InstallScript+ packages="@mantine/tiptap @mantine/core @mantine/hooks @tiptap/react @tiptap/pm @tiptap/extension-link @tiptap/starter-kit"+/>
After installation import package styles at the root of your application:
@@ -167,7 +169,9 @@ function Demo() {
To use text color, you will need to install additional packages:
-<InstallScript packages="@tiptap/extension-color @tiptap/extension-text-style" />+<InstallScript+ packages="@tiptap/extension-color @tiptap/extension-text-style"+/>
You can use the following controls to change text color:
@@ -197,7 +201,9 @@ You can use the following control to see and edit the source code of editor cont
To use tasks, you will need to install additional packages:
-<InstallScript packages="@tiptap/extension-task-item @tiptap/extension-task-list" />+<InstallScript+ packages="@tiptap/extension-task-item @tiptap/extension-task-list"+/>
<Demo data={TipTapDemos.tasks} />
--- original|https://github.com/excalidraw/excalidraw/tree/1919728724a1b71af73cb7e6d2d1a418a1415b1c/dev-docs/docs/@excalidraw/excalidraw/api/children-components/welcome-screen.mdx+++ alternative|dev-docs/docs/@excalidraw/excalidraw/api/children-components/welcome-screen.mdx@@ -18,7 +18,7 @@ function App() {
You can also customize the welcome screen by passing children to the `WelcomeScreen` component. See below.
-## <WelcomeScreen/>+## <WelcomeScreen />
This is the main component. If you render it without any children, we will render the default welcome screen.
--- original|https://github.com/excalidraw/excalidraw/tree/1919728724a1b71af73cb7e6d2d1a418a1415b1c/dev-docs/docs/@excalidraw/excalidraw/api/props/initialdata.mdx+++ alternative|dev-docs/docs/@excalidraw/excalidraw/api/props/initialdata.mdx@@ -1,15 +1,7 @@
# initialData
<pre>
- { elements?:{" "}- <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">- ExcalidrawElement[]- </a>- , appState?:{" "}- <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">- AppState- </a>{" "}- }+ { elements?: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ExcalidrawElement[]</a>, appState?: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">AppState</a> }
</pre>
This helps to load Excalidraw with `initialData`. It must be an object or a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) which resolves to an object containing the below optional fields.
--- original|https://github.com/excalidraw/excalidraw/tree/1919728724a1b71af73cb7e6d2d1a418a1415b1c/dev-docs/docs/@excalidraw/excalidraw/api/props/ui-options.mdx+++ alternative|dev-docs/docs/@excalidraw/excalidraw/api/props/ui-options.mdx@@ -3,10 +3,7 @@
This prop can be used to customise UI of Excalidraw. Currently we support customising [`canvasActions`](#canvasactions), [`dockedSidebarBreakpoint`](#dockedsidebarbreakpoint) [`welcomeScreen`](#welcmescreen) and [`tools`](#tools).
<pre>
- {- <br /> canvasActions?: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L372">- CanvasActions- </a>, <br /> dockedSidebarBreakpoint?: number, <br /> welcomeScreen?: boolean <br />+ { <br /> canvasActions?: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L372"> CanvasActions </a>, <br /> dockedSidebarBreakpoint?: number, <br /> welcomeScreen?: boolean <br />
}
</pre>
--- original|https://github.com/excalidraw/excalidraw/tree/1919728724a1b71af73cb7e6d2d1a418a1415b1c/dev-docs/docs/@excalidraw/excalidraw/api/utils/restore.mdx+++ alternative|dev-docs/docs/@excalidraw/excalidraw/api/utils/restore.mdx@@ -8,7 +8,7 @@ id: "restore"
**_Signature_**
<pre>
-restoreAppState(appState: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L34">ImportedDataState["appState"]</a>,<br/> localAppState: Partial<<a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">AppState</a>> | null): <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">AppState</a>+ restoreAppState(appState: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L34">ImportedDataState["appState"]</a>,<br /> localAppState: Partial<<a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">AppState</a>> | null): <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">AppState</a>
</pre>
**_How to use_**
@@ -27,11 +27,7 @@ Use this as a way to not override user's defaults if you persist them. You can p
**_Signature_**
<pre>
-restoreElements(- elements: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ImportedDataState["elements"]</a>,<br/> - localElements: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ExcalidrawElement[]</a> | null | undefined): <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ExcalidrawElement[]</a>,<br/> - opts: { refreshDimensions?: boolean, repairBindings?: boolean, normalizeIndices?: boolean }<br/>-)+ restoreElements( elements: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ImportedDataState["elements"]</a>,<br /> localElements: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ExcalidrawElement[]</a> | null | undefined): <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ExcalidrawElement[]</a>,<br /> opts: { refreshDimensions?: boolean, repairBindings?: boolean, normalizeIndices?: boolean }<br /> )
</pre>
| Prop | Type | Description |
@@ -70,13 +66,9 @@ Parameter `refreshDimensions` indicates whether we should also `recalculate` tex
**_Signature_**
<pre>
-restore(- data: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L34">ImportedDataState</a>,<br/> - localAppState: Partial<<a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">AppState</a>> | null | undefined,<br/> - localElements: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ExcalidrawElement[]</a> | null | undefined<br/>): <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L4">DataState</a><br/>- opts: { refreshDimensions?: boolean, repairBindings?: boolean, normalizeIndices?: boolean }<br/>+ restore( data: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L34">ImportedDataState</a>,<br /> localAppState: Partial<<a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">AppState</a>> | null | undefined,<br /> localElements: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ExcalidrawElement[]</a> | null | undefined<br />): <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L4">DataState</a><br /> opts: { refreshDimensions?: boolean, repairBindings?: boolean, normalizeIndices?: boolean }<br />-)+ )
</pre>
See [`restoreAppState()`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/packages/excalidraw/README.md#restoreAppState) about `localAppState`, and [`restoreElements()`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/packages/excalidraw/README.md#restoreElements) about `localElements`.
@@ -94,12 +86,7 @@ This function makes sure elements and state is set to appropriate values and set
**_Signature_**
<pre>
- restoreLibraryItems(libraryItems:{" "}- <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L34">- ImportedDataState["libraryItems"]- </a>- ,<br />- defaultStatus: "published" | "unpublished")+ restoreLibraryItems(libraryItems: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L34">ImportedDataState["libraryItems"]</a>,<br /> defaultStatus: "published" | "unpublished")
</pre>
**_How to use_**
--- original|https://github.com/excalidraw/excalidraw/tree/1919728724a1b71af73cb7e6d2d1a418a1415b1c/dev-docs/docs/@excalidraw/excalidraw/faq.mdx+++ alternative|dev-docs/docs/@excalidraw/excalidraw/faq.mdx@@ -12,14 +12,12 @@ We strongly recommend turning it off. You can follow the steps below on how to d
1. Open [excalidraw.com](https://excalidraw.com) in Brave and click on the **Shield** button 
-<div style={{width:'30rem'}}>+<div style={{ width: "30rem" }}>+ 2. Once opened, look for **Aggressively Block Fingerprinting** -2. Once opened, look for **Aggressively Block Fingerprinting** --3. Switch to **Block Fingerprinting** --4. Thats all. All text elements should be fixed now 🎉+ 3. Switch to **Block Fingerprinting** + 4. Thats all. All text elements should be fixed now 🎉
</div>
If disabling this setting doesn't fix the display of text elements, please consider opening an [issue](https://github.com/excalidraw/excalidraw/issues/new) on our GitHub, or message us on [Discord](https://discord.gg/UexuTaE).
--- original|https://github.com/excalidraw/excalidraw/tree/1919728724a1b71af73cb7e6d2d1a418a1415b1c/dev-docs/docs/@excalidraw/excalidraw/integration.mdx+++ alternative|dev-docs/docs/@excalidraw/excalidraw/integration.mdx@@ -55,78 +55,73 @@ However the above component only works for named component exports. If you want
If you are using `pages router` then importing the wrapper dynamically would work, where as if you are using `app router` then you will have to also add `useClient` directive on top of the file in addition to dynamically importing the wrapper as shown :point_down:
<Tabs>
- <TabItem value="Excalidraw Wrapper" label="Excalidraw Wrapper" >--```jsx showLineNumbers-"use client";-import { Excalidraw, convertToExcalidrawElements } from "@excalidraw/excalidraw";--import "@excalidraw/excalidraw/index.css";--const ExcalidrawWrapper: React.FC = () => {- console.info(convertToExcalidrawElements([{- type: "rectangle",- id: "rect-1",- width: 186.47265625,- height: 141.9765625,- },]));- return (- <div style={{height:"500px", width:"500px"}}>- <Excalidraw />- </div>- );-};-export default ExcalidrawWrapper;-```-+ <TabItem value="Excalidraw Wrapper" label="Excalidraw Wrapper">+ ```jsx showLineNumbers+ "use client";+ import { Excalidraw, convertToExcalidrawElements } from "@excalidraw/excalidraw";++ import "@excalidraw/excalidraw/index.css";++ const ExcalidrawWrapper: React.FC = () => {+ console.info(convertToExcalidrawElements([{+ type: "rectangle",+ id: "rect-1",+ width: 186.47265625,+ height: 141.9765625,+ },]));+ return (+ <div style={{height:"500px", width:"500px"}}>+ <Excalidraw />+ </div>+ );+ };+ export default ExcalidrawWrapper;+ ```
</TabItem>
<TabItem value="pages" label="Pages router">
+ ```jsx showLineNumbers+ import dynamic from "next/dynamic";-```jsx showLineNumbers-import dynamic from "next/dynamic";--// Since client components get prerenderd on server as well hence importing-// the excalidraw stuff dynamically with ssr false+ // Since client components get prerenderd on server as well hence importing+ // the excalidraw stuff dynamically with ssr false-const ExcalidrawWrapper = dynamic(- async () => (await import("../excalidrawWrapper")).default,- {- ssr: false,- },-);--export default function Page() {- return <ExcalidrawWrapper />;-}-```+ const ExcalidrawWrapper = dynamic(+ async () => (await import("../excalidrawWrapper")).default,+ {+ ssr: false,+ },+ );+ export default function Page() {+ return <ExcalidrawWrapper />;+ }+ ```
</TabItem>
<TabItem value="app" label="App router">
+ ```jsx showLineNumbers+ import dynamic from "next/dynamic";-```jsx showLineNumbers-import dynamic from "next/dynamic";--// Since client components get prerenderd on server as well hence importing-// the excalidraw stuff dynamically with ssr false+ // Since client components get prerenderd on server as well hence importing+ // the excalidraw stuff dynamically with ssr false-const ExcalidrawWrapper = dynamic(- async () => (await import("../excalidrawWrapper")).default,- {- ssr: false,- },-);--export default function Page() {- return <ExcalidrawWrapper />;-}-```+ const ExcalidrawWrapper = dynamic(+ async () => (await import("../excalidrawWrapper")).default,+ {+ ssr: false,+ },+ );+ export default function Page() {+ return <ExcalidrawWrapper />;+ }+ ```
</TabItem>
</Tabs>
-{/* Link should be updated to point to the latest! */} Here is a [source code](https://github.com/excalidraw/excalidraw/tree/master/examples/with-nextjs) for the example with app and pages router. You you can try it out [here](https://excalidraw-package-example-with-nextjs.vercel.app/).+{/* Link should be updated to point to the latest! */}+Here is a [source code](https://github.com/excalidraw/excalidraw/tree/master/examples/with-nextjs) for the example with app and pages router. You you can try it out [here](https://excalidraw-package-example-with-nextjs.vercel.app/).
The `types` are available at `@excalidraw/excalidraw/types`, check [CodeSandbox](https://codesandbox.io/p/sandbox/github/excalidraw/excalidraw/tree/master/examples/with-script-in-browser) example for details.
@@ -149,7 +144,6 @@ Since Vite removes env variables by default, you can update the vite config to e
"process.env.IS_PREACT": JSON.stringify("true"),
},
```
-
:::
## Browser
@@ -163,75 +157,74 @@ import TabItem from "@theme/TabItem";
<Tabs>
<TabItem value="html" label="html">
--```html-<!DOCTYPE html>-<html>- <head>- <title>Excalidraw in browser</title>- <meta charset="UTF-8" />- <link- rel="stylesheet"- href="https://esm.sh/@excalidraw/excalidraw@0.18.0/dist/dev/index.css"- />- <link rel="stylesheet" href="./index.css" />- <script>- window.EXCALIDRAW_ASSET_PATH =- "https://esm.sh/@excalidraw/excalidraw@0.18.0/dist/prod/";- </script>- <script type="importmap">- {- "imports": {- "react": "https://esm.sh/react@19.0.0",- "react/jsx-runtime": "https://esm.sh/react@19.0.0/jsx-runtime",- "react-dom": "https://esm.sh/react-dom@19.0.0"- }- }- </script>- </head>-- <body>- <div class="container">- <h1>Excalidraw Embed Example</h1>- <div id="app"></div>- </div>- <script type="text/javascript" src="packages/excalidraw/index.js"></script>- </body>-</html>-```--</TabItem>-<TabItem value="js" label="Javascript">--```js showLineNumbers-// See https://www.npmjs.com/package/@excalidraw/excalidraw documentation.-import * as ExcalidrawLib from "https://esm.sh/@excalidraw/excalidraw@0.18.0/dist/dev/index.js?external=react,react-dom";-import React from "https://esm.sh/react@19.0.0";-import ReactDOM from "https://esm.sh/react-dom@19.0.0";--window.ExcalidrawLib = ExcalidrawLib;-console.log("Excalidraw library", ExcalidrawLib);--const App = () => {- return React.createElement(- React.Fragment,- null,- React.createElement(- "div",- {- style: { height: "500px" },- },- React.createElement(ExcalidrawLib.Excalidraw),- ),- );-};--const excalidrawWrapper = document.getElementById("app");-const root = ReactDOM.createRoot(excalidrawWrapper);-root.render(React.createElement(App));-```--</TabItem>+ ```html+ <!DOCTYPE html>+ <html>+ <head>+ <title>Excalidraw in browser</title>+ <meta charset="UTF-8" />+ <link+ rel="stylesheet"+ href="https://esm.sh/@excalidraw/excalidraw@0.18.0/dist/dev/index.css"+ />+ <link rel="stylesheet" href="./index.css" />+ <script>+ window.EXCALIDRAW_ASSET_PATH =+ "https://esm.sh/@excalidraw/excalidraw@0.18.0/dist/prod/";+ </script>+ <script type="importmap">+ {+ "imports": {+ "react": "https://esm.sh/react@19.0.0",+ "react/jsx-runtime": "https://esm.sh/react@19.0.0/jsx-runtime",+ "react-dom": "https://esm.sh/react-dom@19.0.0"+ }+ }+ </script>+ </head>++ <body>+ <div class="container">+ <h1>Excalidraw Embed Example</h1>+ <div id="app"></div>+ </div>+ <script+ type="text/javascript"+ src="packages/excalidraw/index.js"+ ></script>+ </body>+ </html>+ ```+ </TabItem>+ <TabItem value="js" label="Javascript">+ ```js showLineNumbers+ // See https://www.npmjs.com/package/@excalidraw/excalidraw documentation.+ import * as ExcalidrawLib from "https://esm.sh/@excalidraw/excalidraw@0.18.0/dist/dev/index.js?external=react,react-dom";+ import React from "https://esm.sh/react@19.0.0";+ import ReactDOM from "https://esm.sh/react-dom@19.0.0";++ window.ExcalidrawLib = ExcalidrawLib;+ console.log("Excalidraw library", ExcalidrawLib);++ const App = () => {+ return React.createElement(+ React.Fragment,+ null,+ React.createElement(+ "div",+ {+ style: { height: "500px" },+ },+ React.createElement(ExcalidrawLib.Excalidraw),+ ),+ );+ };++ const excalidrawWrapper = document.getElementById("app");+ const root = ReactDOM.createRoot(excalidrawWrapper);+ root.render(React.createElement(App));+ ```+ </TabItem>
</Tabs>
You can try it out [here](https://jsfiddle.net/vfn6dm14/3/).
--- original|https://github.com/excalidraw/excalidraw/tree/1919728724a1b71af73cb7e6d2d1a418a1415b1c/dev-docs/docs/introduction/contributing.mdx+++ alternative|dev-docs/docs/introduction/contributing.mdx@@ -48,7 +48,9 @@ It's also a good idea to consider if your change should include additional tests
Finally - always manually test your changes using the convenient staging environment deployed for each pull request. As much as local development attempts to replicate production, there can still be subtle differences in behavior. For larger features consider testing your change in multiple browsers as well.
-:::note Some checks, such as the `lint` and `test`, require approval from the maintainers to run. They will appear as `Expected — Waiting for status to be reported` in the PR checks when they are waiting for approval. :::+:::note+Some checks, such as the `lint` and `test`, require approval from the maintainers to run. They will appear as `Expected — Waiting for status to be reported` in the PR checks when they are waiting for approval.+:::
## Translating
Activity
fisker commentedon Jun 10, 2026
RUN #18533 on facebook/docusaurus
fisker commentedon Jun 10, 2026
RUN #18533 ON facebook/docusaurus
github-actions commentedon Jun 10, 2026
prettier/prettier#18533 VS prettier@prettier/prettier (prettier/prettier)
[1/1] facebook/docusaurus@96b32dd
fisker commentedon Jul 12, 2026
RUN #19343 ON facebook/docusaurus
github-actions commentedon Jul 12, 2026
prettier/prettier#19343 VS prettier@prettier/prettier (prettier/prettier)
[1/1] facebook/docusaurus@5d162a4
Visit this link to download
fisker commentedon Jul 12, 2026
RUN #19343 ON facebook/docusaurus
github-actions commentedon Jul 12, 2026
prettier/prettier#19343 VS prettier@prettier/prettier (prettier/prettier)
[1/1] facebook/docusaurus@5d162a4
Visit this link to download
fisker commentedon Jul 12, 2026
RUN #19343 ON facebook/docusaurus
github-actions commentedon Jul 12, 2026
prettier/prettier#19343 VS prettier@prettier/prettier (prettier/prettier)
[1/1] facebook/docusaurus@5d162a4
Visit this link to download
fisker commentedon Sep 14, 2026
RUN #20060 VS #18533
github-actions commentedon Sep 14, 2026
prettier/prettier#20060 VS prettier/prettier#18533
[1/24] excalidraw/excalidraw@e1bb9ff
[2/24] facebook/docusaurus@016cbb6
[3/24] facebook/stylex@dac821c
Diff (85 lines)
[4/24] mantinedev/mantine@85c7938
[5/24] shoelace-style/webawesome@2dfbd26
diff --git original|https://github.com/shoelace-style/webawesome/tree/2dfbd2624f09ab38a2078335dd5ffbfdff619efa/.yarn/install-state.gz alternative|.yarn/install-state.gz deleted file mode 100644 index 1f94e2f..0000000 Binary files original|https://github.com/shoelace-style/webawesome/tree/2dfbd2624f09ab38a2078335dd5ffbfdff619efa/.yarn/install-state.gz and /dev/null differ[6/24] angular/angular@87d38ec
The diff is empty.
[7/24] babel/babel@3fbcec1
The diff is empty.
[8/24] eslint/eslint@c6cc6c5
The diff is empty.
[9/24] facebook/relay@5cd08cb
The diff is empty.
[10/24] formio/angular@1f3a1ac
The diff is empty.
[11/24] gitlabhq/gitlabhq@820ecb3
The diff is empty.
[12/24] marmelab/react-admin@ee3493e
The diff is empty.
[13/24] mdn/content@4e73555
The diff is empty.
[14/24] microsoft/vscode@717304b
The diff is empty.
[15/24] NG-ZORRO/ng-zorro-antd@6d3169b
The diff is empty.
[16/24] prettier/prettier@5fd5b69
The diff is empty.
[17/24] react/metro@fce4f29
The diff is empty.
[18/24] react/react@065bc84
The diff is empty.
[19/24] typescript-eslint/typescript-eslint@9a6e546
The diff is empty.
[20/24] vbenjs/vue-vben-admin@2d70876
The diff is empty.
[21/24] vega/vega-lite@91eeeb8
The diff is empty.
[22/24] vitejs/vite@238ad81
The diff is empty.
[23/24] vuejs/core@d63616c
The diff is empty.
[24/24] vuejs/eslint-plugin-vue@f3a0276
The diff is empty.
fisker commentedon Sep 28, 2026
RUN #20154 VS 3.9.9 ON facebook/docusaurus
github-actions commentedon Sep 28, 2026
prettier/prettier#20154 VS prettier@3.9.9 (3.9.9)
[1/1] facebook/docusaurus@016cbb6
Visit this link to download
fisker commentedon Oct 2, 2026
RUN #18533
github-actions commentedon Oct 2, 2026
prettier/prettier#18533 VS prettier@prettier/prettier (prettier/prettier)
[1/25] typescript-eslint/typescript-eslint@338fad9
Visit this link to download
[2/25] facebook/docusaurus@baaa906
Visit this link to download
[3/25] facebook/stylex@fe0be7f
Diff (1232 lines)
github-actions commentedon Oct 2, 2026
prettier/prettier#18533 VS prettier@prettier/prettier (prettier/prettier)
[4/25] excalidraw/excalidraw@1919728
[5/25] mantinedev/mantine@f38933c
Diff (205 lines)
[6/25] shoelace-style/webawesome@8094c69
diff --git original|https://github.com/shoelace-style/webawesome/tree/8094c691d208bf2e54bcb7eec1fe4d52d7c1d4ea/.yarn/install-state.gz alternative|.yarn/install-state.gz deleted file mode 100644 index 2f34cb3..0000000 Binary files original|https://github.com/shoelace-style/webawesome/tree/8094c691d208bf2e54bcb7eec1fe4d52d7c1d4ea/.yarn/install-state.gz and /dev/null differ[7/25] angular/angular@3f91911
The diff is empty.
[8/25] babel/babel@7c1dcfa
The diff is empty.
[9/25] eslint/eslint@d166567
The diff is empty.
[10/25] facebook/relay@5e15cb0
The diff is empty.
[11/25] formio/angular@390bcbd
The diff is empty.
[12/25] gitlabhq/gitlabhq@b7f8d72
The diff is empty.
[13/25] marmelab/react-admin@e699865
The diff is empty.
[14/25] mdn/content@bacd00c
The diff is empty.
[15/25] microsoft/vscode@0726170
The diff is empty.
[16/25] NG-ZORRO/ng-zorro-antd@10a07e4
The diff is empty.
[17/25] prettier/prettier@a777bd8
The diff is empty.
[18/25] react/metro@0cd1641
The diff is empty.
[19/25] react/react@7c6ac13
The diff is empty.
[20/25] ultralytics/ultralytics@46f7dd3
The diff is empty.
[21/25] vbenjs/vue-vben-admin@50f4ede
The diff is empty.
[22/25] vega/vega-lite@37e3b5c
The diff is empty.
[23/25] vitejs/vite@6894f5c
The diff is empty.
[24/25] vuejs/core@4ab865a
The diff is empty.
[25/25] vuejs/eslint-plugin-vue@01af9fe
The diff is empty.
fisker commentedon Oct 2, 2026
RUN #18533 ON excalidraw/excalidraw
github-actions commentedon Oct 2, 2026
prettier/prettier#18533 VS prettier@prettier/prettier (prettier/prettier)
[1/1] excalidraw/excalidraw@1919728
Diff (417 lines)