Fix cssesc from breaking browser code #10194

matthewp · 2024-02-22T13:50:04Z

Changes

Include astro > cssesc as an optimized dep
Fixes Issue with cssesc import in Transition.ts causing compatibility problems with postcss-preset-env #9880
Fixes Bundled <script>s do not work with Vercel ISR in development #10187
Loading astro:content loads a lot of Astro's internal server-side code. This includes the server-side portion of View Transitions. This code depends on cssesc which is used to correctly escape view-transition-name properties to what is valid in CSS. This code is CommonJS and doesn't work in the browser unless optimized. This change makes it so that this module can be optimized.
- Note that you should not be using astro:content in the browser. This is only being fixed because a significant number of people are doing so. This PR will be updated to warn.

Testing

Can't be tested in the monorepo, where dependencies are loaded differently.
Tested manually with a test project: https://stackblitz.com/edit/github-gqosvq?file=src%2Fcontent%2Fconfig.ts,src%2Fpages%2Findex.astro

Docs

N/A, bug fix

changeset-bot · 2024-02-22T13:50:09Z

🦋 Changeset detected

Latest commit: e16ffde

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

packages/astro/src/core/create-vite.ts

.changeset/quick-bottles-march.md

ematipico

I think the changeset should be more detailed. Sorry, I'm very confused by the whole PR

.changeset/quick-bottles-march.md

Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>

matthewp · 2024-02-22T15:03:16Z

I think the changeset should be more detailed. Sorry, I'm very confused by the whole PR

What do you think it should say? I can give a better description of what is going on in the PR comment, but I don't think the intent of changesets is to explain how the bug is fixed, just what is fixes.

EDIT: I've updated the PR comment to explain what is happening and how this fixes it.

bluwy

Will have to sign soon, so I'll preemptively approve this first! I think making it work and adding a warning is a good middleground for now. And we can add on Linear to remove this for 5.0.

matthewp · 2024-02-22T15:55:12Z

!preview allow-cc

github-actions · 2024-02-22T15:57:25Z

Snapshots have been released for the following packages:

@astrojs/vercel@experimental--allow-cc
astro@experimental--allow-cc

Publish Log

🦋  warn ===============================IMPORTANT!===============================
🦋  warn Packages will be released under the experimental--allow-cc 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/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-allow-cc-20240222155628) 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/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.0 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.0 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.0.3 is already published on npm
🦋  warn @astrojs/tailwind is not being published because version 5.1.0 is already published on npm
🦋  info @astrojs/vercel is being published because our local version (0.0.0-allow-cc-20240222155628) has not been 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-allow-cc-20240222155628"
🦋  info Publishing "@astrojs/vercel" at "0.0.0-allow-cc-20240222155628"
🦋  success packages published successfully:
🦋  astro@0.0.0-allow-cc-20240222155628
🦋  @astrojs/vercel@0.0.0-allow-cc-20240222155628
🦋  Creating git tags...
🦋  New tag:  astro@0.0.0-allow-cc-20240222155628
🦋  New tag:  @astrojs/vercel@0.0.0-allow-cc-20240222155628

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/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 26 packages
• Remote caching enabled
::group::@astrojs/telemetry:build
cache hit, suppressing logs 72e886d7fa165ccf
::endgroup::
::group::create-astro:build
cache hit, suppressing logs 72b6451ea23bedd9
::endgroup::
::group::@astrojs/upgrade:build
cache hit, suppressing logs 5ca9aa12d8793508
::endgroup::
::group::@astrojs/internal-helpers:build
cache hit, suppressing logs 2638344b812f409c
::endgroup::
::group::@astrojs/prism:build
cache hit, suppressing logs 963d3f791ad90f8a
::endgroup::
::group::@astrojs/markdown-remark:build
cache hit, suppressing logs 9fca00b6a6e227d7
::endgroup::
::group::astro:build
cache miss, executing 0e57917f1f6115c6

> astro@0.0.0-allow-cc-20240222155628 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-allow-cc-20240222155628 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-allow-cc-20240222155628 postbuild /home/runner/work/astro/astro/packages/astro
> astro-scripts copy "src/**/*.astro" && astro-scripts copy "src/**/*.wasm"

::endgroup::
::group::@astrojs/partytown:build
cache miss, executing 0625b0e25d3cb974

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

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

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

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

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

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

> @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/rss:build
cache miss, executing 91ca7f0c30d12a67

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

::endgroup::
::group::@astrojs/markdoc:build
cache miss, executing 13da7b7c4ea48061

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

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

> @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 597849e846e1114b

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

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

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

::endgroup::
::group::@astrojs/mdx:build
cache miss, executing 20426b9367c1a235

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

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

> @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 aaa28a3a9020b11d

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

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

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

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

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

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

> @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::
::group::@astrojs/svelte:build
cache miss, executing 552cc7c00a6d36d1

> @astrojs/svelte@5.0.3 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/sitemap:build
cache miss, executing 86fbd00eec6d8b0e

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

::endgroup::

 Tasks:    24 successful, 24 total
Cached:    6 cached, 24 total
  Time:    37.832s

matthewp · 2024-02-22T16:08:33Z

Tested the preview release and it works:

* Fix cssesc from breaking browser code * Include specific thing instead * Update .changeset/quick-bottles-march.md Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev> * Fix ISR * Remove query stripping altogether * Warn on client usage * Fix build * oops --------- Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>

Fix cssesc from breaking browser code

289c6f2

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

Princesseuh reviewed Feb 22, 2024

View reviewed changes

packages/astro/src/core/create-vite.ts Outdated Show resolved Hide resolved

Include specific thing instead

b5ebf29

ematipico reviewed Feb 22, 2024

View reviewed changes

.changeset/quick-bottles-march.md Outdated Show resolved Hide resolved

ematipico reviewed Feb 22, 2024

View reviewed changes

florian-lefebvre reviewed Feb 22, 2024

View reviewed changes

.changeset/quick-bottles-march.md Outdated Show resolved Hide resolved

matthewp and others added 2 commits February 22, 2024 09:47

Update .changeset/quick-bottles-march.md

d8a2c63

Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>

Fix ISR

e77cb1c

github-actions bot added the pkg: integration Related to any renderer integration (scope) label Feb 22, 2024

Remove query stripping altogether

63f0efd

matthewp added 2 commits February 22, 2024 10:31

Warn on client usage

f251f78

Fix build

40deefa

bluwy approved these changes Feb 22, 2024

View reviewed changes

oops

e16ffde

ematipico approved these changes Feb 22, 2024

View reviewed changes

matthewp merged commit 3cc2010 into main Feb 22, 2024
13 checks passed

matthewp deleted the fix-cssesc branch February 22, 2024 16:11

astrobot-houston mentioned this pull request Feb 22, 2024

[ci] release #10192

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix cssesc from breaking browser code #10194

Fix cssesc from breaking browser code #10194

matthewp commented Feb 22, 2024 •

edited

Loading

changeset-bot bot commented Feb 22, 2024 •

edited

Loading

ematipico left a comment

matthewp commented Feb 22, 2024 •

edited

Loading

bluwy left a comment

matthewp commented Feb 22, 2024

github-actions bot commented Feb 22, 2024

matthewp commented Feb 22, 2024

Fix cssesc from breaking browser code #10194

Fix cssesc from breaking browser code #10194

Conversation

matthewp commented Feb 22, 2024 • edited Loading

Changes

Testing

Docs

changeset-bot bot commented Feb 22, 2024 • edited Loading

🦋 Changeset detected

ematipico left a comment

Choose a reason for hiding this comment

matthewp commented Feb 22, 2024 • edited Loading

bluwy left a comment

Choose a reason for hiding this comment

matthewp commented Feb 22, 2024

github-actions bot commented Feb 22, 2024

matthewp commented Feb 22, 2024

matthewp commented Feb 22, 2024 •

edited

Loading

changeset-bot bot commented Feb 22, 2024 •

edited

Loading

matthewp commented Feb 22, 2024 •

edited

Loading