Comparing changes
Choose two branches to see what’s changed or to start a new pull request.
If you need to, you can also or
learn more about diff comparisons.
Open a pull request
Create a new pull request by comparing changes across two branches. If you need to, you can also .
Learn more about diff comparisons here.
...
- 7 commits
- 40 files changed
- 3 contributors
Commits on Mar 12, 2025
-
Do not extract candidates containing JS string interpolation pattern …
…`${` (#17142) This PR fixes an issue where often people run into issues where they try to use string interpolation and it doesn't work. Even worse, it could result in crashes because we will actually generate CSS. This fix only filters out candidates with a pattern like `${`. If this occurs in a string position it is fine. Another solution would be to add a pre processor for JS/TS (and all thousand file extension combinations) but the problem is that you can also write JS in HTML files so we would have to pre process HTML as well which would not be ideal. # Test plan 1. Added tests to prove this works in arbitrary values, arbitrary variables in both utilities and variants. 2. Existing tests pass. 3. Some screenshots with before / after situations: Given this input: ```ts let color = '#0088cc'; let opacity = 0.8; let name = 'variable-name'; let classes = [ // Arbitrary Properties `[color:${color}]` `[${property}:value]`, `[--img:url('https://example.com?q=${name}')]`, // WONT WORK BUT VALID CSS // Arbitrary Values `bg-[${color}]`, // Arbitrary Variables `bg-(--my-${color})`, `bg-(--my-color,${color})`, // Arbitrary Modifier `bg-red-500/[${opacity}]`, `bg-red-500/(--my-${name})`, `bg-red-500/(--my-opacity,${opacity})`, // Arbitrary Variant `data-[state=${name}]:flex`, `supports-(--my-${name}):flex`, `[@media(width>=${value})]:flex`, ]; ``` This is the result: | Before | After | | --- | --- | | <img width="908" alt="image" src="https://github.com/user-attachments/assets/c64d1b16-d39d-48a6-a098-bc4477cb4b0a" /> | <img width="908" alt="image" src="https://github.com/user-attachments/assets/d71aaf62-5e13-4174-82bb-690eb81aaeaf" /> | Fixes: #17054 Fixes: #15853 -
Add
@source inline(…)(#17147)This PR adds a new experimental feature that can be used to force-inline utilities based on an input string. The idea is that all utilities matching the source string will be included in your CSS: ```css /* input.css */ @source inline('underline'); /* output.css */ .underline { text-decoration: underline; } ``` Additionally, the source input is brace-expanded, meaning you can use one line to inline a whole namespace easily: ```css /* input.css */ @source inline('{hover:,}bg-red-{50,{100..900..100},950}'); /* output.css */ .bg-red-50 { background-color: var(--color-red-50); } .bg-red-100 { background-color: var(--color-red-100); } .bg-red-200 { background-color: var(--color-red-200); } .bg-red-300 { background-color: var(--color-red-300); } .bg-red-400 { background-color: var(--color-red-400); } .bg-red-500 { background-color: var(--color-red-500); } .bg-red-600 { background-color: var(--color-red-600); } .bg-red-700 { background-color: var(--color-red-700); } .bg-red-800 { background-color: var(--color-red-800); } .bg-red-900 { background-color: var(--color-red-900); } .bg-red-950 { background-color: var(--color-red-950); } @media (hover: hover) { .hover\\:bg-red-50:hover { background-color: var(--color-red-50); } .hover\\:bg-red-100:hover { background-color: var(--color-red-100); } .hover\\:bg-red-200:hover { background-color: var(--color-red-200); } .hover\\:bg-red-300:hover { background-color: var(--color-red-300); } .hover\\:bg-red-400:hover { background-color: var(--color-red-400); } .hover\\:bg-red-500:hover { background-color: var(--color-red-500); } .hover\\:bg-red-600:hover { background-color: var(--color-red-600); } .hover\\:bg-red-700:hover { background-color: var(--color-red-700); } .hover\\:bg-red-800:hover { background-color: var(--color-red-800); } .hover\\:bg-red-900:hover { background-color: var(--color-red-900); } .hover\\:bg-red-950:hover { background-color: var(--color-red-950); } } ``` This feature is also compatible with the `not` keyword that we're about to add to `@source "…"` in a follow-up PR. This can be used to set up an ignore list purely in CSS. The following code snippet, for example, will ensure that the `.container` utility is never created: ```css @theme { --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; } @source not inline("container"); @tailwind utilities; ``` ## Test plan - See added unit tests - The new brace expansion library was also benchmarked against the popular `braces` library: ``` clk: ~3.96 GHz cpu: Apple M4 Max runtime: bun 1.1.34 (arm64-darwin) benchmark avg (min … max) p75 / p99 (min … top 1%) ------------------------------------------- ------------------------------- braces 31.05 ms/iter 32.35 ms █ █ (28.14 ms … 36.35 ms) 35.14 ms ██ █ ( 0.00 b … 116.45 mb) 18.71 mb ██████▁▁▁██▁█▁██▁█▁▁█ ./brace-expansion 19.34 ms/iter 21.69 ms █ (12.53 ms … 26.63 ms) 25.53 ms ▅ ▅ █ █ ( 0.00 b … 114.13 mb) 11.86 mb █▁▅▁██▁▅█▅█▅▁█▅█▅▅▁▅█ ┌ ┐ ╷┌────┬─┐ ╷ braces ├┤ │ ├─────┤ ╵└────┴─┘ ╵ ╷ ┌────┬───┐ ╷ ./brace-expansion ├────────┤ │ ├───────┤ ╵ └────┴───┘ ╵ └ ┘ 12.53 ms 23.84 ms 35.14 ms ``` --------- Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
-
Fix variants with
<digit>.</digit>are extracted correctly (#17153)This PR fixes an issue where if you use a number with a decimal in a variant then it wasn't picked up correctly. E.g.: ``` <div class="2xl:flex 1.5xl:flex"></div> ^^^^^^^^ Picked up ^^^^^^^^^^ Not picket up ``` This PR fixes that behavior by applying the same rules for utilities where a `.` is valid if it is surrounded by numbers. # Test plan 1. Added test to ensure this is picked up 2. Existing tests pass 3. Ran the extractor on a real example with the following results: | Before | After | | --- | --- | | <img width="821" alt="image" src="https://github.com/user-attachments/assets/a77ed5e4-6848-4fe3-8cbf-cf61ff8db41d" /> | <img width="821" alt="image" src="https://github.com/user-attachments/assets/61aca66a-e38d-4b61-bf86-e6286a89a3d9" /> | They are crossed out just because it's not a default value we know in the system, but you can see that the `1.` part is also extracted now. Fixes: #17148
Commits on Mar 13, 2025
-
-
Upgrade
lightningcssto1.29.2in Standalone (#17169)Closes #17162 Closes #17163 Closes #17164 Closes #17165 Closes #17166 Closes #17167 Noticed that there was a second place pulling in the lightningcss version numbers that wasn't covered by the previous upgrade PR. Thankfully the APIs of the node bindings are still compatible. To avoid this mistake in the future I also exported these sub-packages as a workspace dependency so all the version strings appear right next to each other.
-
Ensure candidate extraction works as expected in Clojure/ClojureScript (
#17087) This PR adds a Clojure/ClojureScript pre processor to make sure that candidate extraction works as expected. | Before | After | | --- | --- | | <img width="908" alt="image" src="https://github.com/user-attachments/assets/98aba8b6-0c44-47c6-b87c-ecf955e5e007" /> | <img width="908" alt="image" src="https://github.com/user-attachments/assets/7a5ec3eb-1630-4b60-80bd-c07bc2381d3b" /> | You can see that the classes preceded by `:` are not properly extracted in the before case, but they are in the after case. We do extract a few more cases now like `:class` and `:className` itself, but at least we also retrieve all the `flex-*` classes. We could also always ignore `:class` and `:className` literals: <img width="908" alt="image" src="https://github.com/user-attachments/assets/f5a67cae-25d6-4811-b777-f72fdb5ef450" />
-
Loading
This comparison is taking too long to generate.
Unfortunately it looks like we can’t render this comparison for you right now. It might be too big, or there might be something weird with your repository.
You can try running this command locally to see the comparison on your machine:
git diff v4.0.13...v4.0.14