Treeshake unused Astro scoped styles #10291

bluwy · 2024-03-01T15:00:36Z

Changes

Unused scoped styles from Astro components are removed by checking if the main Astro module (that owns the scoped styles) is also removed/treeshaken. The PR copies some code from vitejs/vite#16058 to fix this at the meantime.

There's currently a tradeoff with this approach (vitejs/vite#16058 (comment)), but it should be better than before, and also it could be better.

Testing

Added a test. Also tested on a starlight project.

Docs

n/a. internal improvement

changeset-bot · 2024-03-01T15:00:40Z

🦋 Changeset detected

Latest commit: 5fd71e7

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

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

bluwy · 2024-03-01T15:02:13Z

packages/astro/src/core/compile/compile.ts

-	const cssDeps: CompileCssResult['dependencies'][] = [];
+	const cssPartialCompileResults: PartialCompileCssResult[] = [];


Note: I refactored this from string[][] to { ... dependencies: string[] }[] because I needed to keep an extra isGlobal metadata whenever preprocessing is called.

bluwy · 2024-03-01T15:04:26Z

packages/astro/test/fixtures/css-order-dynamic-import/src/pages/one.astro

-await import('../components/Three.astro');
+await import('../components/Three.js');


This PR caused this test to fail because the Three.astro component was imported but it's never used, hence the scoped styles in Three.astro weren't injected. Previously it was testing if the scoped styles were injected which I don't think it's quite right.

This test comes from #6176, so to stay true to what it's testing, I changed it to a .js file so that the CSS is no longer scoped.

packages/astro/src/core/build/plugins/plugin-css.ts

packages/astro/src/core/compile/types.ts

bluwy · 2024-03-04T13:35:57Z

!preview treeshake-scoped-css

github-actions · 2024-03-04T13:38:35Z

Snapshots have been released for the following packages:

astro@experimental--treeshake-scoped-css

Publish Log

🦋  warn ===============================IMPORTANT!===============================
🦋  warn Packages will be released under the experimental--treeshake-scoped-css tag
🦋  warn ----------------------------------------------------------------------
🦋  info npm info astro
🦋  info npm info @astrojs/prism
🦋  info npm info @astrojs/rss
🦋  info npm info create-astro
🦋  info npm info @astrojs/db
🦋  info npm info @astrojs/alpinejs
🦋  info npm info @astrojs/lit
🦋  info npm info @astrojs/markdoc
🦋  info npm info @astrojs/mdx
🦋  info npm info @astrojs/node
🦋  info npm info @astrojs/partytown
🦋  info npm info @astrojs/preact
🦋  info npm info @astrojs/react
🦋  info npm info @astrojs/sitemap
🦋  info npm info @astrojs/solid-js
🦋  info npm info @astrojs/svelte
🦋  info npm info @astrojs/tailwind
🦋  info npm info @astrojs/vercel
🦋  info npm info @astrojs/vue
🦋  info npm info @astrojs/internal-helpers
🦋  info npm info @astrojs/markdown-remark
🦋  info npm info @astrojs/telemetry
🦋  info npm info @astrojs/underscore-redirects
🦋  info npm info @astrojs/upgrade
🦋  info astro is being published because our local version (0.0.0-treeshake-scoped-css-20240304133731) has not been published on npm
🦋  warn @astrojs/prism is not being published because version 3.0.0 is already published on npm
🦋  warn @astrojs/rss is not being published because version 4.0.5 is already published on npm
🦋  warn create-astro is not being published because version 4.7.3 is already published on npm
🦋  warn @astrojs/db is not being published because version 0.4.1 is already published on npm
🦋  warn @astrojs/alpinejs is not being published because version 0.4.0 is already published on npm
🦋  warn @astrojs/lit is not being published because version 4.0.1 is already published on npm
🦋  warn @astrojs/markdoc is not being published because version 0.9.0 is already published on npm
🦋  warn @astrojs/mdx is not being published because version 2.1.1 is already published on npm
🦋  warn @astrojs/node is not being published because version 8.2.3 is already published on npm
🦋  warn @astrojs/partytown is not being published because version 2.0.4 is already published on npm
🦋  warn @astrojs/preact is not being published because version 3.1.1 is already published on npm
🦋  warn @astrojs/react is not being published because version 3.0.10 is already published on npm
🦋  warn @astrojs/sitemap is not being published because version 3.1.1 is already published on npm
🦋  warn @astrojs/solid-js is not being published because version 4.0.1 is already published on npm
🦋  warn @astrojs/svelte is not being published because version 5.2.0 is already published on npm
🦋  warn @astrojs/tailwind is not being published because version 5.1.0 is already published on npm
🦋  warn @astrojs/vercel is not being published because version 7.3.4 is already published on npm
🦋  warn @astrojs/vue is not being published because version 4.0.8 is already published on npm
🦋  warn @astrojs/internal-helpers is not being published because version 0.2.1 is already published on npm
🦋  warn @astrojs/markdown-remark is not being published because version 4.2.1 is already published on npm
🦋  warn @astrojs/telemetry is not being published because version 3.0.4 is already published on npm
🦋  warn @astrojs/underscore-redirects is not being published because version 0.3.3 is already published on npm
🦋  warn @astrojs/upgrade is not being published because version 0.2.3 is already published on npm
🦋  info Publishing "astro" at "0.0.0-treeshake-scoped-css-20240304133731"
🦋  success packages published successfully:
🦋  astro@0.0.0-treeshake-scoped-css-20240304133731
🦋  Creating git tag...
🦋  New tag:  astro@0.0.0-treeshake-scoped-css-20240304133731

Build Log


> root@0.0.0 build /home/runner/work/astro/astro
> turbo run build --filter=astro --filter=create-astro --filter="@astrojs/*" --filter="@benchmark/*"

• Packages in scope: @astrojs/alpinejs, @astrojs/cloudflare, @astrojs/db, @astrojs/internal-helpers, @astrojs/lit, @astrojs/markdoc, @astrojs/markdown-remark, @astrojs/mdx, @astrojs/netlify, @astrojs/node, @astrojs/partytown, @astrojs/preact, @astrojs/prism, @astrojs/react, @astrojs/rss, @astrojs/sitemap, @astrojs/solid-js, @astrojs/svelte, @astrojs/tailwind, @astrojs/telemetry, @astrojs/underscore-redirects, @astrojs/upgrade, @astrojs/vercel, @astrojs/vue, @benchmark/timer, astro, create-astro
• Running build in 27 packages
• Remote caching enabled
::group::@astrojs/telemetry:build
cache hit, suppressing logs 975c2fc8d53fe7d5
::endgroup::
::group::@astrojs/prism:build
cache hit, suppressing logs 668058c0d893d9e5
::endgroup::
::group::@astrojs/internal-helpers:build
cache hit, suppressing logs 7bb0b44580b8ee4c
::endgroup::
::group::@astrojs/upgrade:build
cache hit, suppressing logs 2c0d76da53c441ae
::endgroup::
::group::create-astro:build
cache hit, suppressing logs e4a1971494ca8843
::endgroup::
::group::@astrojs/markdown-remark:build
cache hit, suppressing logs 2385a9d1e420d31d
::endgroup::
::group::astro:build
cache miss, executing c3b5468f9292adf1

> astro@0.0.0-treeshake-scoped-css-20240304133731 build /home/runner/work/astro/astro/packages/astro
> pnpm run prebuild && astro-scripts build "src/**/*.{ts,js}" && tsc && pnpm run postbuild


> astro@0.0.0-treeshake-scoped-css-20240304133731 prebuild /home/runner/work/astro/astro/packages/astro
> astro-scripts prebuild --to-string "src/runtime/server/astro-island.ts" "src/runtime/client/{idle,load,media,only,visible}.ts"


> astro@0.0.0-treeshake-scoped-css-20240304133731 postbuild /home/runner/work/astro/astro/packages/astro
> astro-scripts copy "src/**/*.astro" && astro-scripts copy "src/**/*.wasm"

::endgroup::
::group::@astrojs/alpinejs:build
cache miss, executing 784e3415c5979a3f

> @astrojs/alpinejs@0.4.0 build /home/runner/work/astro/astro/packages/integrations/alpinejs
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/lit:build
cache miss, executing a02de7e129d3c50e

> @astrojs/lit@4.0.1 build /home/runner/work/astro/astro/packages/integrations/lit
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@benchmark/timer:build
cache miss, executing cbe2170a4e81ccb3

> @benchmark/timer@0.0.0 build /home/runner/work/astro/astro/benchmark/packages/timer
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/react:build
cache miss, executing 2a6bf7d8f32ed2cb

> @astrojs/react@3.0.10 build /home/runner/work/astro/astro/packages/integrations/react
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/solid-js:build
cache miss, executing 2940d9f686b428d1

> @astrojs/solid-js@4.0.1 build /home/runner/work/astro/astro/packages/integrations/solid
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/node:build
cache miss, executing ec085f70af6e6b24

> @astrojs/node@8.2.3 build /home/runner/work/astro/astro/packages/integrations/node
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/vercel:build
cache miss, executing 68874d82667627d2

> @astrojs/vercel@7.3.4 build /home/runner/work/astro/astro/packages/integrations/vercel
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/tailwind:build
cache miss, executing ba65e0082fbc942a

> @astrojs/tailwind@5.1.0 build /home/runner/work/astro/astro/packages/integrations/tailwind
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/svelte:build
cache miss, executing 4bb20d93abaa525f

> @astrojs/svelte@5.2.0 build /home/runner/work/astro/astro/packages/integrations/svelte
> astro-scripts build "src/index.ts" && astro-scripts build "src/editor.cts" --force-cjs --no-clean-dist && tsc

::endgroup::
::group::@astrojs/partytown:build
cache miss, executing 808cd9c5f4696d4a

> @astrojs/partytown@2.0.4 build /home/runner/work/astro/astro/packages/integrations/partytown
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/db:build
cache miss, executing 8c150ce5f55ffdbb

> @astrojs/db@0.4.1 build /home/runner/work/astro/astro/packages/db
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/rss:build
cache miss, executing 81d6be758b3675ac

> @astrojs/rss@4.0.5 build /home/runner/work/astro/astro/packages/astro-rss
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/underscore-redirects:build
cache miss, executing ddd69e44d82fdc1a

> @astrojs/underscore-redirects@0.3.3 build /home/runner/work/astro/astro/packages/underscore-redirects
> astro-scripts build "src/**/*.ts" && tsc -p tsconfig.json

::endgroup::
::group::@astrojs/markdoc:build
cache miss, executing 992401b74603eddc

> @astrojs/markdoc@0.9.0 build /home/runner/work/astro/astro/packages/integrations/markdoc
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/sitemap:build
cache miss, executing 0202d6b33de748cb

> @astrojs/sitemap@3.1.1 build /home/runner/work/astro/astro/packages/integrations/sitemap
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/preact:build
cache miss, executing 06cf114d9265585a

> @astrojs/preact@3.1.1 build /home/runner/work/astro/astro/packages/integrations/preact
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/mdx:build
cache miss, executing 1afd43283c39d112

> @astrojs/mdx@2.1.1 build /home/runner/work/astro/astro/packages/integrations/mdx
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/vue:build
cache miss, executing 56814bae2e086f57

> @astrojs/vue@4.0.8 build /home/runner/work/astro/astro/packages/integrations/vue
> astro-scripts build "src/index.ts" && astro-scripts build "src/editor.cts" --force-cjs --no-clean-dist && tsc

::endgroup::

 Tasks:    25 successful, 25 total
Cached:    6 cached, 25 total
  Time:    41.907s

matthewp

love it!

Treeshake unused Astro scoped styles

758663f

github-actions bot added the pkg: astro Related to the core `astro` package (scope) label Mar 1, 2024

bluwy commented Mar 1, 2024

View reviewed changes

bluwy force-pushed the treeshake-scoped-styles branch from e112e38 to 758663f Compare March 1, 2024 15:32

ematipico approved these changes Mar 4, 2024

View reviewed changes

packages/astro/src/core/build/plugins/plugin-css.ts Show resolved Hide resolved

packages/astro/src/core/compile/types.ts Outdated Show resolved Hide resolved

Merge branch 'main' into treeshake-scoped-styles

7310cbb

Update comments

555e64b

matthewp approved these changes Mar 8, 2024

View reviewed changes

Merge branch 'main' into treeshake-scoped-styles

5fd71e7

bluwy merged commit 8107a27 into main Mar 8, 2024
13 checks passed

bluwy deleted the treeshake-scoped-styles branch March 8, 2024 15:03

astrobot-houston mentioned this pull request Mar 8, 2024

[ci] release #10365

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Treeshake unused Astro scoped styles #10291

Treeshake unused Astro scoped styles #10291

bluwy commented Mar 1, 2024

changeset-bot bot commented Mar 1, 2024 •

edited

Loading

bluwy Mar 1, 2024

bluwy Mar 1, 2024

bluwy commented Mar 4, 2024

github-actions bot commented Mar 4, 2024

matthewp left a comment

		const cssDeps: CompileCssResult['dependencies'][] = [];
		const cssPartialCompileResults: PartialCompileCssResult[] = [];

		await import('../components/Three.astro');
		await import('../components/Three.js');

Treeshake unused Astro scoped styles #10291

Treeshake unused Astro scoped styles #10291

Conversation

bluwy commented Mar 1, 2024

Changes

Testing

Docs

changeset-bot bot commented Mar 1, 2024 • edited Loading

🦋 Changeset detected

bluwy Mar 1, 2024

Choose a reason for hiding this comment

bluwy Mar 1, 2024

Choose a reason for hiding this comment

bluwy commented Mar 4, 2024

github-actions bot commented Mar 4, 2024

matthewp left a comment

Choose a reason for hiding this comment

changeset-bot bot commented Mar 1, 2024 •

edited

Loading