fix: hydration mismatches by saving changed tokens

[tlgimenes]

Hi folks!

When using twind v1 on Deno's Fresh I faced this TBT performance issue. Taking a deeper look into the performance bottleneck, I noticed we had two main performance issues.

The first one was clearing the style sheet, which causes the browser to "recalculate the style", creating a long task. To fix this issue, I just stopped clearing the sheet on resume.

The second issue is a little more subtle. Turns out that this translate function takes a long time to execute. It's usually ok when dynamically changing styles, however, when running it alongside (P)react's hydration, it can greatly increase this task's blocking time. The puzzling piece is that this part of the code should never be reached if the sheet's resume process occurs successfully. Investigating further, I noticed that tokens like md:(w-full h-full) get translated into the final html as md:w-full md:h-full, so when the tw's cache is resumed, the initial tokens are missing. To address this issue I made this cache to be resumable too by adding a new extracted json parameter that can be added as a

<script type="application/json" data-twind-cache >{ "(md:(w-full h-full))": "md:w-full md:h-full" }</script>

The nice thing about it is that it only stores the tokens where tw(token) != token, not adding any unnecessary bloat to the final html.

After applying these two performance improvements, my app's blocking time went from: 700ish ms to 150ish ms on Google's Page Speed Insights.

Another solution to this problem would be to make this translate function much faster, however I could not really understand how to do this.

Let me know if you have a better idea than shipping the tw's cache to the final html.

Thanks!

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason.
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests

• Run the tests with pnpm test and verify the project with pnpm check

Changesets

• If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpx changeset and following the prompts. All changesets should be patch until Twind 1.0

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 0cb3dd8

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[socket-security]

New dependency changes detected. Learn more about Socket for GitHub ↗︎

---

🚨 Potential security issues found in this pull request. To accept the risk, merge this PR and you will not be notified again.

Bot Commands

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of package-name@version specifiers. e.g. @SocketSecurity ignore foo@1.0.0 bar@* or ignore all packages with @SocketSecurity ignore-all

• @SocketSecurity ignore svelte-preprocess@4.10.7
• @SocketSecurity ignore protobufjs@6.11.3
• @SocketSecurity ignore @sveltejs/kit@1.0.0
• @SocketSecurity ignore @swc/core@1.3.24
• @SocketSecurity ignore core-js@2.6.12
• @SocketSecurity ignore core-js@3.25.5
• @SocketSecurity ignore core-js-pure@3.25.5
• @SocketSecurity ignore gatsby@4.24.8
• @SocketSecurity ignore es5-ext@0.10.62
• @SocketSecurity ignore @parcel/watcher@2.0.5
• @SocketSecurity ignore ipfs-utils@9.0.7
• @SocketSecurity ignore next@12.3.4
• @SocketSecurity ignore next@13.0.7

📜 Install scripts

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Packages should not be running non-essential scripts during install and there are often solutions to problems people solve with install scripts that can be run at publish time instead.

Package	Script field	Source
svelte-preprocess@4.10.7 (added)	postinstall	pnpm-lock.yaml, examples/with-sveltekit/package.json, pnpm-lock.yaml via svelte-check@2.10.2, sites/twind.run/package.json via svelte-check@2.10.2, sites/twind.style/package.json via svelte-check@2.10.2
protobufjs@6.11.3 (added)	postinstall	pnpm-lock.yaml, sites/twind.run/package.json via @jspm/generator@1.0.0-beta.38
@sveltejs/kit@1.0.0 (added)	postinstall	pnpm-lock.yaml, examples/with-sveltekit/package.json, pnpm-lock.yaml via @sveltejs/adapter-node@1.0.0, packages/with-sveltekit/package.json, pnpm-lock.yaml, pnpm-lock.yaml, sites/twind.run/package.json via @sveltejs/adapter-cloudflare@1.0.0, pnpm-lock.yaml, sites/twind.style/package.json via @sveltejs/adapter-static@1.0.0
@swc/core@1.3.24 (added)	postinstall	pnpm-lock.yaml via distilt@0.19.2
core-js@2.6.12 (added)	postinstall	pnpm-lock.yaml, examples/with-gatsby/package.json via gatsby-plugin-offline@5.24.0
core-js@3.25.5 (added)	postinstall	pnpm-lock.yaml, examples/with-gatsby/package.json via gatsby@4.24.8, gatsby-plugin-manifest@4.24.0, gatsby-plugin-offline@5.24.0, gatsby-plugin-react-helmet@5.24.0, packages/with-gatsby/package.json via gatsby@4.24.8
core-js-pure@3.25.5 (added)	postinstall	pnpm-lock.yaml, examples/with-gatsby/package.json via gatsby@4.24.8, gatsby-plugin-manifest@4.24.0, gatsby-plugin-offline@5.24.0, gatsby-plugin-react-helmet@5.24.0, packages/with-gatsby/package.json via gatsby@4.24.8
gatsby@4.24.8 (added)	postinstall	pnpm-lock.yaml, examples/with-gatsby/package.json, pnpm-lock.yaml via gatsby-plugin-manifest@4.24.0, gatsby-plugin-offline@5.24.0, gatsby-plugin-react-helmet@5.24.0, packages/with-gatsby/package.json, pnpm-lock.yaml
es5-ext@0.10.62 (added)	postinstall	pnpm-lock.yaml, examples/with-gatsby/package.json via gatsby@4.24.8, gatsby-plugin-manifest@4.24.0, gatsby-plugin-offline@5.24.0, gatsby-plugin-react-helmet@5.24.0, packages/with-gatsby/package.json via gatsby@4.24.8

🫣 Native code

Contains native code which could be a vector to obscure malicious code, and generally decrease the likelihood of reproducible or reliable installs.

Ensure that native code bindings are expected. Consumers may consider pure JS and functionally similar alternatives to avoid the challenges and risks associated with native code bindings.

Package	Location	Source
@parcel/watcher@2.0.5 (added)	binding.gyp	pnpm-lock.yaml, examples/with-gatsby/package.json via gatsby@4.24.8, gatsby-plugin-manifest@4.24.0, gatsby-plugin-offline@5.24.0, gatsby-plugin-react-helmet@5.24.0, packages/with-gatsby/package.json via gatsby@4.24.8

🥩 HTTP dependency

Contains a dependency which resolves to a remote HTTP URL which could be used to inject untrusted code and reduce overall package reliability.

Publish the HTTP URL dependency to npm or a private package repository and consume it from there.

Package	Dependency	Location	Source
ipfs-utils@9.0.7 (added)	node-fetch@https://registry.npmjs.org/@achingbrain/node-fetch/-/node-fetch-2.6.7.tgz	package.json	pnpm-lock.yaml, sites/twind.run/package.json via @jspm/generator@1.0.0-beta.38

📞 Telemetry

This package contains telemetry which tracks you.

Package	Note	Source
next@12.3.4 (added)	Can be disabled by setting the environment variable NEXT_TELEMETRY_DISABLED=1	pnpm-lock.yaml, examples/with-next/package.json, pnpm-lock.yaml
next@13.0.7 (added)	Can be disabled by setting the environment variable NEXT_TELEMETRY_DISABLED=1	pnpm-lock.yaml, packages/with-next/package.json, pnpm-lock.yaml

🧌 Protestware/Troll package

This package is a joke, parody, or includes undocumented or hidden behavior unrelated to its primary function.

Package	Note	Source
es5-ext@0.10.62 (added)	This package prints a protestware console message on install regarding Ukraine for users with Russian language locale	pnpm-lock.yaml, examples/with-gatsby/package.json via gatsby@4.24.8, gatsby-plugin-manifest@4.24.0, gatsby-plugin-offline@5.24.0, gatsby-plugin-react-helmet@5.24.0, packages/with-gatsby/package.json via gatsby@4.24.8

Pull request alert summary

Issue	Status
Install scripts	⚠️ 9 issues
Native code	⚠️ 1 issue
Bin script shell injection	✅ 0 issues
Unresolved require	✅ 0 issues
Invalid package.json	✅ 0 issues
HTTP dependency	⚠️ 1 issue
Git dependency	✅ 0 issues
Potential typo squat	✅ 0 issues
Known Malware	✅ 0 issues
Telemetry	⚠️ 2 issues
Protestware/Troll package	⚠️ 1 issue

---

📊 Modified Dependency Overview:

➕ Added Package	Capability Access	+/- Transitive Count	Publisher
next@12.3.4	eval, network, filesystem, shell, environment	+7	vercel-release-bot
next@13.0.7	eval, network, filesystem, shell, environment	+7	vercel-release-bot
@jsenv/logger@4.1.1	None	+0	jsenv-admin
@sastan/svelte-headlessui@1.0.2	None	+0	sastan
@jsenv/importmap@1.2.1	None	+0	jsenv-admin
distilt@0.19.2	None	+30	sastan
typedoc-plugin-resolve-crossmodule-references@0.3.2	filesystem, environment	+6	nicolas.lepage
@jspm/generator@1.0.0-beta.38	network, filesystem, environment	+142	guybedford
vitest@0.25.8	eval, filesystem, shell, environment	+16	oreanno
@size-limit/file@8.1.0	filesystem	+1	ai
@size-limit/esbuild@8.1.0	filesystem	+1	ai
eslint-plugin-svelte3@3.4.1	None	+2	conduitry
svelte-preprocess@4.10.7	filesystem, shell, environment	+7	dummdidumm
typedoc-plugin-mdn-links@2.0.0	filesystem, environment	+6	gerrit0
@remix-run/node@1.8.2	network, filesystem	+58	mjackson
react-helmet@6.1.0	environment	+4	cwelch5
@rollup/pluginutils@5.0.2	None	+2	shellscape
@sveltejs/kit@1.0.0	eval, network, filesystem	+48	svelte-admin
svelte-check@2.10.2	eval, network, filesystem, shell, environment	+24	svelte-language-tools-deploy
eslint-config-prettier@8.5.0	None	+2	lydell
eslint-plugin-prettier@4.2.1	None	+4	jounqin
@remix-run/serve@1.8.2	environment	+146	mjackson
@remix-run/dev@1.8.2	network, filesystem, shell, environment	+794	mjackson
gatsby-plugin-react-helmet@5.24.0	None	+636	marvinjudehk
@sveltejs/adapter-cloudflare@1.0.0	filesystem	+16	svelte-admin
@sveltejs/adapter-static@1.0.0	filesystem, environment	+13	svelte-admin
gatsby@4.24.8	network, filesystem, environment	+1264	pieh
react-dom@18.2.0	environment	+3	gnoff
rollup-plugin-polyfill-node@0.10.2	None	+6	fredkschott
@vitest/coverage-c8@0.25.8	filesystem, environment	+22	oreanno
@typescript-eslint/parser@5.42.1	None	+7	jameshenry
@sveltejs/adapter-node@1.0.0	network, filesystem, environment	+29	svelte-admin
react-dom@17.0.2	environment	+5	gaearon
gatsby-plugin-offline@5.24.0	network, filesystem, environment	+675	marvinjudehk
typedoc-plugin-markdown@3.13.6	filesystem, environment	+8	tgreyuk
@remix-run/react@1.8.2	network, environment	+10	mjackson
gatsby-plugin-manifest@4.24.0	filesystem	+633	marvinjudehk
@rollup/plugin-commonjs@23.0.2	filesystem	+9	shellscape
monaco-editor@0.34.1	network, environment	+0	alexandrudima
prettier-plugin-svelte@2.8.0	environment	+0	dummdidumm
prettier@2.8.1	None	+0	prettier-bot
@typescript-eslint/eslint-plugin@5.42.1	None	+13	jameshenry
typedoc@0.23.22	filesystem, shell, environment	+5	typedoc-bot

🚮 Removed packages: @twind/core@1.1.3, @twind/intellisense@1.1.3, @twind/preset-autoprefix@1.0.7, @twind/preset-ext@1.0.7, @twind/preset-line-clamp@1.0.7, @twind/preset-radix-ui@1.0.7, @twind/preset-tailwind@1.1.4, @twind/preset-tailwind-forms@1.1.2, @twind/preset-typography@1.0.7, @twind/with-next@1.2.2, @twind/with-react@1.1.3, @twind/with-sveltekit@1.1.3, @twind/with-web-components@1.1.3, gatsby-plugin-twind@1.1.4