chore(deps): update dependency tailwindcss to v4#58
chore(deps): update dependency tailwindcss to v4#58renovate[bot] wants to merge 1 commit intomainfrom
Conversation
|
Renovate Ignore NotificationBecause you closed this PR without merging, Renovate will ignore this update. You will not get PRs for any future If you accidentally closed this PR, or if you changed your mind: rename this PR to get a fresh replacement PR. |
<!-- Thank you for submitting a pull request! We appreciate the time and effort you have invested in making these changes. Please ensure that you provide enough information to allow others to review your pull request. Upon submission, your pull request will be automatically assigned with reviewers. If you want to learn more about contributing to this project, please visit: https://github.com/lynx-family/lynx-stack/blob/main/CONTRIBUTING.md. --> <!-- The AI summary below will be auto-generated - feel free to replace it with your own. --> Solves #2045 An example log from our examples/react package is as below. First screen: <details> ```log [BackgroundThread Component Render] name: Fragment, uniqID: undefined, __id: undefined main-thread.js:3421 [ReactLynxDebug] FiberElement API call #1: __CreatePage("0", 0) => page#10 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #2: __GetElementUniqueID(page#10) => 10 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #3: __SetCSSId([page#10], 0) main-thread.js:3460 [MainThread Component Render] name: App main-thread.js:3421 [ReactLynxDebug] FiberElement API call #4: __CreateView(10) => view#11 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #5: __CreateView(10) => view#12 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #6: __SetClasses(view#12, "Background") main-thread.js:3421 [ReactLynxDebug] FiberElement API call #7: __AppendElement(view#11, view#12) => view#12 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #8: __CreateView(10) => view#13 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #9: __SetClasses(view#13, "App") main-thread.js:3421 [ReactLynxDebug] FiberElement API call #10: __AppendElement(view#11, view#13) => view#13 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #11: __CreateView(10) => view#14 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #12: __SetClasses(view#14, "Banner") main-thread.js:3421 [ReactLynxDebug] FiberElement API call #13: __AppendElement(view#13, view#14) => view#14 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #14: __CreateWrapperElement(10) => wrapper#15 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #15: __AppendElement(view#14, wrapper#15) => wrapper#15 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #16: __CreateText(10) => text#16 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #17: __SetClasses(text#16, "Title") main-thread.js:3421 [ReactLynxDebug] FiberElement API call #18: __SetAttribute(text#16, "text", "React") main-thread.js:3421 [ReactLynxDebug] FiberElement API call #19: __AppendElement(view#14, text#16) => text#16 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #20: __CreateText(10) => text#17 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #21: __SetClasses(text#17, "Subtitle") main-thread.js:3421 [ReactLynxDebug] FiberElement API call #22: __SetAttribute(text#17, "text", "on Lynx") main-thread.js:3421 [ReactLynxDebug] FiberElement API call #23: __AppendElement(view#14, text#17) => text#17 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #24: __CreateView(10) => view#18 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #25: __SetClasses(view#18, "Content") main-thread.js:3421 [ReactLynxDebug] FiberElement API call #26: __AppendElement(view#13, view#18) => view#18 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #27: __CreateImage(10) => image#19 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #28: __SetClasses(image#19, "Arrow") main-thread.js:3421 [ReactLynxDebug] FiberElement API call #29: __AppendElement(view#18, image#19) => image#19 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #30: __CreateText(10) => text#20 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #31: __SetClasses(text#20, "Description") main-thread.js:3421 [ReactLynxDebug] FiberElement API call #32: __SetAttribute(text#20, "text", "Tap the logo and have fun!") main-thread.js:3421 [ReactLynxDebug] FiberElement API call #33: __AppendElement(view#18, text#20) => text#20 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #34: __CreateText(10) => text#21 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #35: __SetClasses(text#21, "Hint") main-thread.js:3421 [ReactLynxDebug] FiberElement API call #36: __AppendElement(view#18, text#21) => text#21 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #37: __CreateRawText("Edit") => raw-text#22 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #38: __AppendElement(text#21, raw-text#22) => raw-text#22 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #39: __CreateWrapperElement(10) => wrapper#23 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #40: __AppendElement(text#21, wrapper#23) => wrapper#23 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #41: __CreateRawText("to see updates!") => raw-text#24 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #42: __AppendElement(text#21, raw-text#24) => raw-text#24 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #43: __CreateView(10) => view#25 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #44: __SetInlineStyles(view#25, "flex:1") main-thread.js:3421 [ReactLynxDebug] FiberElement API call #45: __AppendElement(view#13, view#25) => view#25 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #46: __AppendElement(page#10, view#11) => view#11 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #47: __SetAttribute(image#19, "src", "http://1.1.1.1:3000/static/image/arrow.aee54ba7.png") main-thread.js:3421 [ReactLynxDebug] FiberElement API call #48: __CreateView(10) => view#26 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #49: __SetClasses(view#26, "Logo") main-thread.js:3421 [ReactLynxDebug] FiberElement API call #50: __ReplaceElement(view#26, wrapper#15) main-thread.js:3421 [ReactLynxDebug] FiberElement API call #51: __AddEvent(view#26, "bindEvent", "tap", "-3:0:") main-thread.js:3421 [ReactLynxDebug] FiberElement API call #52: __CreateImage(10) => image#27 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #53: __SetClasses(image#27, "Logo--lynx") main-thread.js:3421 [ReactLynxDebug] FiberElement API call #54: __AppendElement(view#26, image#27) => image#27 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #55: __SetAttribute(image#27, "src", "http://1.1.1.1:3000/static/image/lynx-logo.620eb8d1.png") main-thread.js:3421 [ReactLynxDebug] FiberElement API call #56: __CreateText(10) => text#28 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #57: __SetInlineStyles(text#28, "font-style:italic;color:rgba(255, 255, 255, 0.85)") main-thread.js:3421 [ReactLynxDebug] FiberElement API call #58: __ReplaceElement(text#28, wrapper#23) main-thread.js:3421 [ReactLynxDebug] FiberElement API call #59: __CreateRawText("") => raw-text#29 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #60: __SetAttribute(raw-text#29, "text", " src/App.tsx ") main-thread.js:3421 [ReactLynxDebug] FiberElement API call #61: __AppendElement(text#28, raw-text#29) => raw-text#29 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #62: __OnLifecycleEvent(["rLynxFirstScreen", {"root":"{\"id\":-1,\"type\":\"root\",\"children\":[{\"id\":-5,\"type\":\"__snapshot_835da_b8ae7_1\",\"values\":[\"http://1.1.1.1:3000/static/image/arrow.aee54ba7.png\"],\"children\":[{\"id\":-3,\"type\":\"__snapshot_835da_b8ae7_2\",\"values\":[\"-3:0:\"],\"children\":[{\"id\":-2,\"type\":\"__snapshot_835da_b8ae7_4\",\"values\":[\"http://1.1.1.1:3000/static/image/lynx-logo.620eb8d1.png\"]}]},{\"id\":-4,\"type\":\"__snapshot_835da_b8ae7_5\",\"children\":[{\"id\":-6,\"type\":null,\"values\":[\" src/App.tsx \"]}]}]}]}","jsReadyEventIdSwap":{}}]) background.js:11351 [rspeedy-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay disabled. background.js:3564 [HMR] Waiting for update signal from WDS... background.js:4476 [BackgroundThread Component Render] name: App, uniqID: __snapshot_835da_b8ae7_1, __id: 2 background.js:4476 [BackgroundThread Component Render] name: Fragment, uniqID: __snapshot_835da_b8ae7_1, __id: 2 background.js:214 Hello, ReactLynx background.js:8011 [ReactLynxDebug] MTS -> BTS OnLifecycleEvent: { "root": { "id": -1, "type": "root", "children": [ { "id": -5, "type": "__snapshot_835da_b8ae7_1", "values": [ "http://1.1.1.1:3000/static/image/arrow.aee54ba7.png" ], "children": [ { "id": -3, "type": "__snapshot_835da_b8ae7_2", "values": [ "-3:0:" ], "children": [ { "id": -2, "type": "__snapshot_835da_b8ae7_4", "values": [ "http://1.1.1.1:3000/static/image/lynx-logo.620eb8d1.png" ] } ] }, { "id": -4, "type": "__snapshot_835da_b8ae7_5", "children": [ { "id": -6, "type": null, "values": [ " src/App.tsx " ] } ] } ] } ] }, "jsReadyEventIdSwap": {} } main-thread.js:5801 [ReactLynxDebug] BTS -> MTS updateMainThread: { "data": { "patchList": [ { "snapshotPatch": [], "id": 2 } ] }, "patchOptions": { "isHydration": true, "reloadVersion": 0, "pipelineOptions": { "pipelineID": "0x16c567000_29", "needTimestamps": true, "pipelineOrigin": "reactLynxHydrate", "dsl": "reactLynx", "stage": "hydrate" } } } main-thread.js:3421 [ReactLynxDebug] FiberElement API call #63: __FlushElementTree(page#10, {"pipelineOptions":{"pipelineID":"0x16c567000_29","needTimestamps":true,"pipelineOrigin":"reactLynxHydrate","dsl":"reactLynx","stage":"hydrate"}}) ``` </details> Next update: <details> ```log [BackgroundThread Component Render] name: App, uniqID: __snapshot_835da_b8ae7_1, __id: -5 main-thread.js:5801 [ReactLynxDebug] BTS -> MTS updateMainThread: { "data": { "patchList": [ { "id": 3, "snapshotPatch": [ { "op": "RemoveChild", "parentId": -3, "childId": -2 }, { "op": "CreateElement", "type": "__snapshot_835da_b8ae7_3", "id": 7 }, { "op": "SetAttributes", "id": 7, "values": [ "http://1.1.1.1:3000/static/image/react-logo.75eb3837.png" ] }, { "op": "InsertBefore", "parentId": -3, "childId": 7, "beforeId": null } ] } ] }, "patchOptions": { "reloadVersion": 0, "pipelineOptions": { "pipelineID": "0x16c567000_30", "needTimestamps": false, "pipelineOrigin": "updateTriggeredByBts", "dsl": "reactLynx", "stage": "update" } } } main-thread.js:3421 [ReactLynxDebug] FiberElement API call #64: __RemoveElement(view#26, image#27) => image#27 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #65: __CreateImage(10) => image#30 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #66: __SetClasses(image#30, "Logo--react") main-thread.js:3421 [ReactLynxDebug] FiberElement API call #67: __SetAttribute(image#30, "src", "http://1.1.1.1:3000/static/image/react-logo.75eb3837.png") main-thread.js:3421 [ReactLynxDebug] FiberElement API call #68: __AppendElement(view#26, image#30) => image#30 main-thread.js:3421 [ReactLynxDebug] FiberElement API call #69: __FlushElementTree(page#10, {"pipelineOptions":{"pipelineID":"0x16c567000_30","needTimestamps":false,"pipelineOrigin":"updateTriggeredByBts","dsl":"reactLynx","stage":"update"}}) ``` </details> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Enhanced debug logging: structured, dual-thread API-call, lifecycle and hydration traces when debug mode is enabled. * **Tests** * Added and expanded tests and snapshots to validate richer logging, API-call sequences, and hydration traces. * **Chores** * Development-only error messages now include a troubleshooting hint recommending the debug-mode option for easier diagnosis. <sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub> <!-- end of auto-generated comment: release notes by coderabbit.ai --> ## Checklist <!--- Check and mark with an "x" --> - [x] Tests updated (or not required). - [ ] Documentation updated (or not required). - [x] Changeset added, and when a BREAKING CHANGE occurs, it needs to be clearly marked (or not required).
This PR contains the following updates:
^3.4.17->^4.0.9Release Notes
tailwindlabs/tailwindcss (tailwindcss)
v4.0.9Compare Source
Fixed
.css(#16780)@reference "…"would sometimes omit keyframe animations (#16774)z-*!utilities are properly marked as!important(#16795)Changed
@reference "…"instead of duplicate CSS variable declarations (#16774)v4.0.8Compare Source
Added
@importwiththeme(…)options for stylesheets that contain more than just@themerules (#16514)Fixed
!importantto CSS variable declarations when using the important modifier (#16668).gitignorefile when using automatic source detection(#16631)translate-z-pxutilities once in compiled CSS (#16718)Changed
v4.0.7Compare Source
Fixed
tailwindcss/lib/util/flattenColorPalette.jsfor backward compatibility (#16411)_in suggested theme keys (#16433)--default-outline-widthcan be used to change theoutline-widthvalue of theoutlineutility (#16469)tailwindcss/pluginfor backward compatibility (#16505)@tailwindcss/oxideWindows builds (#16602)tailwindcssin@tailwindcss/*packages (#16623)darkModeJS config setting with block syntax converts to use@slot(#16507)tailwindcssand@tailwindcss/postcssare installed when upgrading (#16620)v4.0.6Compare Source
Fixed
blurtoblur-smwhen used with Next.js<Image placeholder="blur" />(#16405)v4.0.5Compare Source
Added
@theme staticoption for always including theme variables in compiled CSS (#16211)Fixed
console.logfrom@tailwindcss/vite(#16307)Changed
v4.0.4Compare Source
Fixed
null(#16210)containersJS theme key is added to the--container-*namespace (#16169)@keyframesare generated even if an--animation-*variable spans multiple lines (#16237)?commonjs-proxyflag (#16238)order-firstandorder-lastfor Firefox (#16266)NODE_PATHis respected when resolving JavaScript and CSS files (#16274)@variantinside a referenced stylesheet could cause a stack overflow (#16300)v4.0.3Compare Source
Fixed
@import url();(#16144)v4.0.2Compare Source
Fixed
grid-cols-*andgrid-rows-*utilities (#16020)@referenceor@variant(#16057)<style>blocks in HTML files (#16069)@keyframesin@theme reference(#16120)@variantwhen at the top-level of a stylesheet (#16129)v4.0.1Compare Source
Added
:openpseudo-class in existingopenvariant (#15349)Fixed
min-w/h-noneutilities (#15845)nonemodifier have a line-height set e.g.text-sm/none(#15921)--spacingvariable (#15857)@tailwindcss/browserdoes not pollute the global namespace (#15978)tailwind-mergeis not scanned when using the Vite plugin (#16005)/directory (#15988)leading-[1]toleading-none(#16004)v4.0.0Compare Source
Added
@property, andcolor-mix().color-scheme,field-sizing, complex shadows,inert, and more.Start using Tailwind CSS v4.0 today by installing it in a new project, or playing with it directly in the browser on Tailwind Play.
For existing projects, we've published a comprehensive upgrade guide and built an automated upgrade tool to get you on the latest version as quickly and painlessly as possible.
For a deep-dive into everything that's new, check out the announcement post.
Configuration
📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).
🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.
♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about this update again.
This PR was generated by Mend Renovate. View the repository job log.