Skip to content

Upgrade lightningcss to 1.29.0 #15576

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jan 9, 2025
Merged

Upgrade lightningcss to 1.29.0 #15576

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
77ecc58
Upgrade `lightningcss` to `1.29.0`
philipp-spiess Jan 9, 2025
238062a
Work around `list-style: none` bug
philipp-spiess Jan 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
"packageManager": "[email protected]",
"pnpm": {
"patchedDependencies": {
"lightningcss@1.26.0": "patches/lightningcss@1.26.0.patch",
"lightningcss@1.29.0": "patches/lightningcss@1.29.0.patch",
"@parcel/[email protected]": "patches/@[email protected]"
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/@tailwindcss-cli/src/commands/build/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -445,7 +445,7 @@ function optimizeCss(
deepSelectorCombinator: true,
},
include: Features.Nesting,
exclude: Features.LogicalProperties | Features.DirSelector,
exclude: Features.LogicalProperties | Features.DirSelector | Features.LightDark,
targets: {
safari: (16 << 16) | (4 << 8),
ios_saf: (16 << 16) | (4 << 8),
Expand Down
6 changes: 3 additions & 3 deletions packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -400,9 +400,9 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
}

hr {
height: 0;
color: inherit;
border-top-width: 1px;
height: 0;
}

abbr:where([title]) {
Expand Down Expand Up @@ -472,7 +472,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
}

ol, ul, menu {
list-style: none;
list-style-type: none;
}

img, svg, video, canvas, audio, iframe, embed, object {
Expand Down Expand Up @@ -533,8 +533,8 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
}

::-webkit-date-and-time-value {
text-align: inherit;
min-height: 1lh;
text-align: inherit;
}

::-webkit-datetime-edit {
Expand Down
5 changes: 4 additions & 1 deletion packages/@tailwindcss-postcss/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -317,7 +317,10 @@ function optimizeCss(
deepSelectorCombinator: true,
},
include: LightningCssFeatures.Nesting,
exclude: LightningCssFeatures.LogicalProperties | LightningCssFeatures.DirSelector,
exclude:
LightningCssFeatures.LogicalProperties |
LightningCssFeatures.DirSelector |
LightningCssFeatures.LightDark,
targets: {
safari: (16 << 16) | (4 << 8),
ios_saf: (16 << 16) | (4 << 8),
Expand Down
5 changes: 4 additions & 1 deletion packages/@tailwindcss-vite/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -375,7 +375,10 @@ function optimizeCss(
deepSelectorCombinator: true,
},
include: LightningCssFeatures.Nesting,
exclude: LightningCssFeatures.LogicalProperties | LightningCssFeatures.DirSelector,
exclude:
LightningCssFeatures.LogicalProperties |
LightningCssFeatures.DirSelector |
LightningCssFeatures.LightDark,
targets: {
safari: (16 << 16) | (4 << 8),
ios_saf: (16 << 16) | (4 << 8),
Expand Down
2 changes: 1 addition & 1 deletion packages/tailwindcss/preflight.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ summary {
ol,
ul,
menu {
list-style: none;
list-style-type: none;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if this is enough. The list-style: none; expands to:

list-style-position: initial;
list-style-image: initial;
list-style-type: none;

So if another stylesheet sets the list-style-position or list-style-image to something else then this would be a breaking change technically.

However, I think our main goal was to use list-style-type: none; in the first place to get rid of the visual dot/number.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@RobinMalfait Not sure I understand, preflight is for normalizing user-agent styling and there initial is the default anyways, right? Any other stylesheets that could change this are probably in a different layer/unlyaered so they'd take presedence or am I missing somehting?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just wanted to be 100% sure that this is the correct fix without causing other (subtle) issues since the computed styles would be different.

I think a lot of people will use @layer base for their preflight resets as well. I was trying to come up with an example where this change would not be enough/cause issues. E.g.:

If the setup looks like this:

/* ./styles.css */
@import "tailwindcss";
@import "./my-base.css";

/* ./my-base.css */
@layer base {
  ul {
    list-style-position: inside;
  }
}

If you then inspect a ul on the page, before this change, the styles would look like:
image

After this change, the styles would look like:
image

So while there is a difference in the computed values (the list-style-image is gone) I don't think there is an actual issue. I was trying to come up with an example where this wouldn't be the case but couldn't find any so far (which is good 😄)

Copy link
Member

@RobinMalfait RobinMalfait Jan 9, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, it's just the devtools that hide the list-style-image, window.getComputedStyle() does have a none value for list-style-image.

Copy link
Member Author

@philipp-spiess philipp-spiess Jan 9, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm I think it would only be an issue if the initial CSS looks like this, right?

/* ./styles.css */
@import "./my-base.css";
@import "tailwindcss";

i.e. the overwrite comes before our resets. However, that also meant you had CSS in there before that was overwritten anyways so chances are that they'd have reordered this already otherwise this has had no effects I think?

}

/*
Expand Down
2 changes: 1 addition & 1 deletion packages/tailwindcss/src/test-utils/run.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export function optimizeCss(
deepSelectorCombinator: true,
},
include: Features.Nesting,
exclude: Features.LogicalProperties | Features.DirSelector,
exclude: Features.LogicalProperties | Features.DirSelector | Features.LightDark,
targets: {
safari: (16 << 16) | (4 << 8),
ios_saf: (16 << 16) | (4 << 8),
Expand Down
31 changes: 2 additions & 29 deletions packages/tailwindcss/src/utilities.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6839,53 +6839,26 @@ test('color-scheme', async () => {
]),
).toMatchInlineSnapshot(`
".scheme-dark {
--lightningcss-light: ;
--lightningcss-dark: initial;
--lightningcss-light: ;
--lightningcss-dark: initial;
Comment on lines -6842 to -6845
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😍

color-scheme: dark;
}

.scheme-light {
--lightningcss-light: initial;
--lightningcss-dark: ;
--lightningcss-light: initial;
--lightningcss-dark: ;
color-scheme: light;
}

.scheme-light-dark {
--lightningcss-light: initial;
--lightningcss-dark: ;
--lightningcss-light: initial;
--lightningcss-dark: ;
color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
.scheme-light-dark {
--lightningcss-light: ;
--lightningcss-dark: initial;
}
}

.scheme-normal {
color-scheme: normal;
}

.scheme-only-dark {
--lightningcss-light: ;
--lightningcss-dark: initial;
--lightningcss-light: ;
--lightningcss-dark: initial;
color-scheme: dark only;
}

.scheme-only-light {
--lightningcss-light: initial;
--lightningcss-dark: ;
--lightningcss-light: initial;
--lightningcss-dark: ;
color-scheme: light only;
}"
`)
Expand Down Expand Up @@ -14376,7 +14349,7 @@ test('transition', async () => {
}

.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, -webkit-backdrop-filter, -webkit-backdrop-filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wew, finally!

transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
Expand Down Expand Up @@ -14443,7 +14416,7 @@ test('transition', async () => {
}

.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, -webkit-backdrop-filter, -webkit-backdrop-filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
transition-timing-function: var(--tw-ease, ease);
transition-duration: var(--tw-duration, .1s);
}
Expand Down
24 changes: 18 additions & 6 deletions packages/tailwindcss/src/variants.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,11 @@ test('first-line', async () => {

test('marker', async () => {
expect(await run(['marker:flex'])).toMatchInlineSnapshot(`
".marker\\:flex ::marker, .marker\\:flex::marker {
".marker\\:flex ::marker {
display: flex;
}

.marker\\:flex::marker {
display: flex;
}"
`)
Expand Down Expand Up @@ -1533,25 +1537,25 @@ test('not', async () => {
}
}

@media not (width < 640px) {
@media (width >= 640px) {
.not-max-sm\\:flex {
display: flex;
}
}

@media not (width < 130px) {
@media (width >= 130px) {
.not-max-\\[130px\\]\\:flex {
display: flex;
}
}

@media not (width >= 130px) {
@media (width < 130px) {
.not-min-\\[130px\\]\\:flex {
display: flex;
}
}

@media not (width >= 640px) {
@media (width < 640px) {
.not-min-sm\\:flex, .not-sm\\:flex {
display: flex;
}
Expand Down Expand Up @@ -2165,7 +2169,15 @@ test('variant order', async () => {
}
}

.first-letter\\:flex:first-letter, .first-line\\:flex:first-line, .marker\\:flex ::marker, .marker\\:flex::marker {
.first-letter\\:flex:first-letter, .first-line\\:flex:first-line {
display: flex;
}

.marker\\:flex ::marker {
display: flex;
}

.marker\\:flex::marker {
display: flex;
}

Expand Down
0 patches/[email protected] → patches/[email protected]
View file
Open in desktop
File renamed without changes.
Loading