Changelog

v1.9.0 adds support for component decorators, enabling you to wrap all components in your library with providers for global styles, CSS-in-JS libraries, or custom functionality.

Global decorators

Configure a global decorators file in your webflow.json to apply decorators across all components:

1
{
2
  "library": {
3
    "globals": "./src/globals.ts"
4
  }
5
}

The CLI will automatically wrap all components with the decorators exported from your globals file during the build process.

Learn more in the component decorators documentation.

This update introduces component decorators, a new pattern for applying global styles and wrapping components with providers. Configure globally to apply to every component in your library or locally to a single component.

Packages:

• @webflow/webflow-cli 1.9.0
• @webflow/react 1.1.0
• @webflow/data-types 1.1.0
• @webflow/emotion-utils 1.1.0
• @webflow/styled-components-utils 1.1.0

Global component decorators

Instead of importing styles or adding decorators to each component individually, you can now configure them once in a global decorators file.

Configure in webflow.json:

1
{
2
  "library": {
3
    "globals": "./src/globals.ts"
4
  }
5
}

Global styles

Import CSS once and apply it to all components:

1
import "./globals.css";

CSS-in-JS libraries

For Emotion and styled-components, export the pre-built decorators to inject styles into the Shadow DOM:

1
import { emotionShadowDomDecorator } from "@webflow/emotion-utils";
2
3
export const decorators = [emotionShadowDomDecorator];

Pre-built decorators:

• emotionShadowDomDecorator from @webflow/emotion-utils
• styledComponentsShadowDomDecorator from @webflow/styled-components-utils

See more on pre-built decorators in the frameworks and libraries guide.

Custom decorators

Create custom decorators for error handling, analytics, or other cross-cutting concerns:

1
import "./globals.css";
2
import { errorBoundaryDecorator } from "./ErrorBoundary";
3
4
export const decorators = [errorBoundaryDecorator];

Apply decorators to a single component

To apply decorators to a single component, add a decorators property to the declareComponent configuration object.

1
import { declareComponent } from '@webflow/react';
2
import { Button } from './Button';
3
import { errorBoundaryDecorator } from "./ErrorBoundary";
4
5
export default declareComponent({Button,{
6
  name: "Button",
7
  decorators: [errorBoundaryDecorator],
8
});

Learn more in the component decorators documentation.