Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(react): performance improvement #1276

Merged
merged 3 commits into from
Jul 13, 2023
Merged

feat(react): performance improvement #1276

merged 3 commits into from
Jul 13, 2023

Conversation

Anber
Copy link
Collaborator

@Anber Anber commented Jul 12, 2023

Motivation

Breaking Change: Performance Optimization for styled

When a component is wrapped in styled, Linaria needs to determine if that component is already a styled component. To accomplish this, the wrapped component is included in the list of variables for evaluation, along with the interpolated values used in styles. The issue arises when a wrapped component, even if it is not styled, brings along a substantial dependency tree. This situation is particularly evident when using styled to style components from third-party UI libraries.

Summary

To address this problem, Linaria will now examine the import location of the component and check if there is an annotation in the package.json file of the package containing the components. This annotation indicates whether the package includes other Linaria components. If there is no such annotation, Linaria will refrain from evaluating the component.

Please note that this Breaking Change solely affects developers of component libraries. In order for users to style components from your library, you must include the linaria.components property in the library's package.json file. This property should have a mask that covers all imported files with components. Here's an example of how to specify it:

"linaria": {
  "components": "**/*"
}

Test plan

A bunch of new tests we added.

@changeset-bot
Copy link

changeset-bot bot commented Jul 12, 2023

🦋 Changeset detected

Latest commit: f61a572

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 29 packages
Name Type
@linaria/babel-preset Minor
@linaria/griffel Minor
@linaria/react Minor
@linaria/tags Minor
@linaria/testkit Minor
@linaria/utils Minor
@linaria/atomic Minor
@linaria/cli Minor
@linaria/core Minor
@linaria/esbuild Minor
@linaria/extractor Minor
@linaria/babel-plugin-interop Minor
linaria Minor
@linaria/logger Minor
@linaria/postcss-linaria Minor
@linaria/rollup Minor
@linaria/server Minor
@linaria/shaker Minor
@linaria/stylelint Minor
@linaria/stylelint-config-standard-linaria Minor
@linaria/vite Minor
@linaria/webpack-loader Minor
@linaria/webpack4-loader Minor
@linaria/webpack5-loader Minor
linaria-website Minor
vpssr-linaria-solid-example Patch
esbuild-example Patch
rollup-example Patch
vite-example Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@Anber Anber merged commit 16c057d into master Jul 13, 2023
4 checks passed
@Anber Anber deleted the styled-perf-boost branch July 13, 2023 11:21
@github-actions github-actions bot mentioned this pull request Jul 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant