Skip to content

Commit

Permalink
Don't override explicit leading-*, tracking-*, or font-weight utiliti…
Browse files Browse the repository at this point in the history 
…es with font-size utility defaults
  • Loading branch information
@adamwathan @RobinMalfait
adamwathan authored and RobinMalfait committed Sep 12, 2024
1 parent 0eff7e7 commit 38047a3
Show file tree
Hide file tree
Showing 6 changed files with 301 additions and 52 deletions.
16 changes: 15 additions & 1 deletion packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -586,7 +586,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
@layer utilities {
.text-2xl {
font-size: var(--font-size-2xl, 1.5rem);
line-height: var(--font-size-2xl--line-height, 2rem);
line-height: var(--tw-leading, var(--font-size-2xl--line-height, 2rem));
}
.text-black\\/50 {
Expand All @@ -599,11 +599,20 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
@media (width >= 96rem) {
.\\32 xl\\:font-bold {
--tw-font-weight: 700;
font-weight: 700;
}
}
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-font-weight: initial;
}
}
}
@keyframes spin {
to {
transform: rotate(360deg);
Expand Down Expand Up @@ -633,5 +642,10 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
animation-timing-function: cubic-bezier(0, 0, .2, 1);
transform: none;
}
}
@property --tw-font-weight {
syntax: "*";
inherits: false
}"
`;
2 changes: 1 addition & 1 deletion packages/tailwindcss/src/ast.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export function rule(selector: string, nodes: AstNode[]): Rule {
}
}

export function decl(property: string, value: string): Declaration {
export function decl(property: string, value: string | undefined): Declaration {
return {
kind: 'declaration',
property,
Expand Down
60 changes: 37 additions & 23 deletions packages/tailwindcss/src/compat/config.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -301,35 +301,49 @@ describe('theme callbacks', () => {

expect(compiler.build(['leading-base', 'leading-md', 'leading-xl', 'prose']))
.toMatchInlineSnapshot(`
":root {
--font-size-base: 100rem;
--font-size-md--line-height: 101rem;
}
.prose {
[class~=lead-base] {
font-size: 100rem;
":root {
--font-size-base: 100rem;
--font-size-md--line-height: 101rem;
}
.prose {
[class~=lead-base] {
font-size: 100rem;
line-height: 201rem;
}
[class~=lead-md] {
font-size: 200rem;
line-height: 101rem;
}
[class~=lead-xl] {
font-size: 200rem;
line-height: 201rem;
}
}
.leading-base {
--tw-leading: 201rem;
line-height: 201rem;
}
[class~=lead-md] {
font-size: 200rem;
.leading-md {
--tw-leading: 101rem;
line-height: 101rem;
}
[class~=lead-xl] {
font-size: 200rem;
.leading-xl {
--tw-leading: 201rem;
line-height: 201rem;
}
}
.leading-base {
line-height: 201rem;
}
.leading-md {
line-height: 101rem;
}
.leading-xl {
line-height: 201rem;
}
"
`)
@supports (-moz-orient: inline) {
@layer base {
*, ::before, ::after, ::backdrop {
--tw-leading: initial;
}
}
}
@property --tw-leading {
syntax: "*";
inherits: false;
}
"
`)
})
})

Expand Down
100 changes: 82 additions & 18 deletions packages/tailwindcss/src/utilities.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -872,26 +872,26 @@ test('col-start', async () => {
expect(
await run(['col-start-auto', 'col-start-4', 'col-start-99', 'col-start-[123]', '-col-start-4']),
).toMatchInlineSnapshot(`
".-col-start-4 {
grid-column-start: calc(4 * -1);
}
".-col-start-4 {
grid-column-start: calc(4 * -1);
}
.col-start-4 {
grid-column-start: 4;
}
.col-start-4 {
grid-column-start: 4;
}
.col-start-99 {
grid-column-start: 99;
}
.col-start-99 {
grid-column-start: 99;
}
.col-start-\\[123\\] {
grid-column-start: 123;
}
.col-start-\\[123\\] {
grid-column-start: 123;
}
.col-start-auto {
grid-column-start: auto;
}"
`)
.col-start-auto {
grid-column-start: auto;
}"
`)
expect(
await run([
'col-start',
Expand Down Expand Up @@ -11446,19 +11446,36 @@ test('font', async () => {
}
.font-\\[--my-family\\] {
--tw-font-weight: var(--my-family);
font-weight: var(--my-family);
}
.font-\\[100\\] {
--tw-font-weight: 100;
font-weight: 100;
}
.font-\\[number\\:--my-weight\\] {
--tw-font-weight: var(--my-weight);
font-weight: var(--my-weight);
}
.font-bold {
--tw-font-weight: 700;
font-weight: 700;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-font-weight: initial;
}
}
}
@property --tw-font-weight {
syntax: "*";
inherits: false
}"
`)
expect(
Expand Down Expand Up @@ -13067,15 +13084,31 @@ test('leading', async () => {
}
.leading-6 {
--tw-leading: var(--line-height-6, 1.5rem);
line-height: var(--line-height-6, 1.5rem);
}
.leading-\\[--value\\] {
--tw-leading: var(--value);
line-height: var(--value);
}
.leading-none {
--tw-leading: var(--line-height-none, 1);
line-height: var(--line-height-none, 1);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-leading: initial;
}
}
}
@property --tw-leading {
syntax: "*";
inherits: false
}"
`)
expect(
Expand Down Expand Up @@ -13110,19 +13143,36 @@ test('tracking', async () => {
}
.-tracking-\\[--value\\] {
--tw-tracking: calc(var(--value) * -1);
letter-spacing: calc(var(--value) * -1);
}
.tracking-\\[--value\\] {
--tw-tracking: var(--value);
letter-spacing: var(--value);
}
.tracking-normal {
--tw-tracking: var(--letter-spacing-normal, 0em);
letter-spacing: var(--letter-spacing-normal, 0em);
}
.tracking-wide {
--tw-tracking: var(--letter-spacing-wide, .025em);
letter-spacing: var(--letter-spacing-wide, .025em);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-leading: initial;
}
}
}
@property --tw-leading {
syntax: "*";
inherits: false
}"
`)
expect(
Expand Down Expand Up @@ -13697,7 +13747,7 @@ test('text', async () => {
.text-sm {
font-size: var(--font-size-sm, .875rem);
line-height: var(--font-size-sm--line-height, 1.25rem);
line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem));
}
.text-\\[12px\\]\\/6 {
Expand Down Expand Up @@ -15193,7 +15243,7 @@ describe('custom utilities', () => {
"@layer utilities {
.text-sm {
font-size: var(--font-size-sm, .875rem);
line-height: var(--font-size-sm--line-height, 1.25rem);
line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem));
font-size: var(--font-size-sm, .8755rem);
line-height: var(--font-size-sm--line-height, 1.255rem);
text-rendering: optimizeLegibility;
Expand Down Expand Up @@ -15355,6 +15405,7 @@ describe('custom utilities', () => {
),
).toMatchInlineSnapshot(`
".bar {
--tw-font-weight: 700;
font-weight: 700;
}
Expand All @@ -15364,6 +15415,19 @@ describe('custom utilities', () => {
text-decoration-line: underline;
display: flex;
}
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-font-weight: initial;
}
}
}
@property --tw-font-weight {
syntax: "*";
inherits: false
}"
`)
})
Expand Down
Loading

0 comments on commit 38047a3

Please sign in to comment.