Skip to content
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

Fix px value not being recognized for some class groups #538

Merged
merged 2 commits into from
Feb 22, 2025
Merged

Fix px value not being recognized for some class groups #538

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
9cb92c4
put px value into spacing scale
dcastil Feb 22, 2025
6fcfdad
add test case for px value in spacing scale
dcastil Feb 22, 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
63 changes: 22 additions & 41 deletions src/lib/default-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,16 +74,9 @@ export const getDefaultConfig = () => {
] as const
const scaleOverflow = () => ['auto', 'hidden', 'clip', 'visible', 'scroll'] as const
const scaleOverscroll = () => ['auto', 'contain', 'none'] as const
const scaleInset = () =>
[
isFraction,
'px',
'full',
'auto',
isArbitraryVariable,
isArbitraryValue,
themeSpacing,
] as const
const scaleUnambiguousSpacing = () =>
[isArbitraryVariable, isArbitraryValue, themeSpacing] as const
const scaleInset = () => [isFraction, 'full', 'auto', ...scaleUnambiguousSpacing()] as const
const scaleGridTemplateColsRows = () =>
[isInteger, 'none', 'subgrid', isArbitraryVariable, isArbitraryValue] as const
const scaleGridColRowStartAndEnd = () =>
Expand All @@ -97,19 +90,14 @@ export const getDefaultConfig = () => {
[isInteger, 'auto', isArbitraryVariable, isArbitraryValue] as const
const scaleGridAutoColsRows = () =>
['auto', 'min', 'max', 'fr', isArbitraryVariable, isArbitraryValue] as const
const scaleGap = () => [isArbitraryVariable, isArbitraryValue, themeSpacing] as const
const scaleAlignPrimaryAxis = () =>
['start', 'end', 'center', 'between', 'around', 'evenly', 'stretch', 'baseline'] as const
const scaleAlignSecondaryAxis = () => ['start', 'end', 'center', 'stretch'] as const
const scaleUnambiguousSpacing = () =>
[isArbitraryVariable, isArbitraryValue, themeSpacing] as const
const scalePadding = () => ['px', ...scaleUnambiguousSpacing()]
const scaleMargin = () => ['px', 'auto', ...scaleUnambiguousSpacing()] as const
const scaleMargin = () => ['auto', ...scaleUnambiguousSpacing()] as const
const scaleSizing = () =>
[
isFraction,
'auto',
'px',
'full',
'dvw',
'dvh',
Expand All @@ -120,9 +108,7 @@ export const getDefaultConfig = () => {
'min',
'max',
'fit',
isArbitraryVariable,
isArbitraryValue,
themeSpacing,
...scaleUnambiguousSpacing(),
] as const
const scaleColor = () => [themeColor, isArbitraryVariable, isArbitraryValue] as const
const scaleGradientStopPosition = () => [isPercent, isArbitraryLength] as const
Expand Down Expand Up @@ -184,8 +170,7 @@ export const getDefaultConfig = () => {
const scaleRotate = () => ['none', isNumber, isArbitraryVariable, isArbitraryValue] as const
const scaleScale = () => ['none', isNumber, isArbitraryVariable, isArbitraryValue] as const
const scaleSkew = () => [isNumber, isArbitraryVariable, isArbitraryValue] as const
const scaleTranslate = () =>
[isFraction, 'full', 'px', isArbitraryVariable, isArbitraryValue, themeSpacing] as const
const scaleTranslate = () => [isFraction, 'full', ...scaleUnambiguousSpacing()] as const

return {
cacheSize: 500,
Expand Down Expand Up @@ -215,7 +200,7 @@ export const getDefaultConfig = () => {
perspective: ['dramatic', 'near', 'normal', 'midrange', 'distant', 'none'],
radius: [isTshirtSize],
shadow: [isTshirtSize],
spacing: [isNumber],
spacing: ['px', isNumber],
text: [isTshirtSize],
tracking: ['tighter', 'tight', 'normal', 'wide', 'wider', 'widest'],
},
Expand Down Expand Up @@ -442,10 +427,8 @@ export const getDefaultConfig = () => {
isFraction,
'full',
'auto',
isArbitraryVariable,
isArbitraryValue,
themeContainer,
themeSpacing,
...scaleUnambiguousSpacing(),
],
},
],
Expand Down Expand Up @@ -549,17 +532,17 @@ export const getDefaultConfig = () => {
* Gap
* @see https://tailwindcss.com/docs/gap
*/
gap: [{ gap: scaleGap() }],
gap: [{ gap: scaleUnambiguousSpacing() }],
/**
* Gap X
* @see https://tailwindcss.com/docs/gap
*/
'gap-x': [{ 'gap-x': scaleGap() }],
'gap-x': [{ 'gap-x': scaleUnambiguousSpacing() }],
/**
* Gap Y
* @see https://tailwindcss.com/docs/gap
*/
'gap-y': [{ 'gap-y': scaleGap() }],
'gap-y': [{ 'gap-y': scaleUnambiguousSpacing() }],
/**
* Justify Content
* @see https://tailwindcss.com/docs/justify-content
Expand Down Expand Up @@ -610,47 +593,47 @@ export const getDefaultConfig = () => {
* Padding
* @see https://tailwindcss.com/docs/padding
*/
p: [{ p: scalePadding() }],
p: [{ p: scaleUnambiguousSpacing() }],
/**
* Padding X
* @see https://tailwindcss.com/docs/padding
*/
px: [{ px: scalePadding() }],
px: [{ px: scaleUnambiguousSpacing() }],
/**
* Padding Y
* @see https://tailwindcss.com/docs/padding
*/
py: [{ py: scalePadding() }],
py: [{ py: scaleUnambiguousSpacing() }],
/**
* Padding Start
* @see https://tailwindcss.com/docs/padding
*/
ps: [{ ps: scalePadding() }],
ps: [{ ps: scaleUnambiguousSpacing() }],
/**
* Padding End
* @see https://tailwindcss.com/docs/padding
*/
pe: [{ pe: scalePadding() }],
pe: [{ pe: scaleUnambiguousSpacing() }],
/**
* Padding Top
* @see https://tailwindcss.com/docs/padding
*/
pt: [{ pt: scalePadding() }],
pt: [{ pt: scaleUnambiguousSpacing() }],
/**
* Padding Right
* @see https://tailwindcss.com/docs/padding
*/
pr: [{ pr: scalePadding() }],
pr: [{ pr: scaleUnambiguousSpacing() }],
/**
* Padding Bottom
* @see https://tailwindcss.com/docs/padding
*/
pb: [{ pb: scalePadding() }],
pb: [{ pb: scaleUnambiguousSpacing() }],
/**
* Padding Left
* @see https://tailwindcss.com/docs/padding
*/
pl: [{ pl: scalePadding() }],
pl: [{ pl: scaleUnambiguousSpacing() }],
/**
* Margin
* @see https://tailwindcss.com/docs/margin
Expand Down Expand Up @@ -881,11 +864,9 @@ export const getDefaultConfig = () => {
leading: [
{
leading: [
isArbitraryVariable,
isArbitraryValue,
/** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
themeLeading,
themeSpacing,
...scaleUnambiguousSpacing(),
],
},
],
Expand Down Expand Up @@ -978,7 +959,7 @@ export const getDefaultConfig = () => {
* Text Indent
* @see https://tailwindcss.com/docs/text-indent
*/
indent: [{ indent: ['px', ...scaleUnambiguousSpacing()] }],
indent: [{ indent: scaleUnambiguousSpacing() }],
/**
* Vertical Alignment
* @see https://tailwindcss.com/docs/vertical-align
Expand Down
1 change: 1 addition & 0 deletions tests/class-group-conflicts.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ test('merges classes from same group correctly', () => {
twMerge('overflow-x-auto hover:overflow-x-hidden hover:overflow-x-auto overflow-x-scroll'),
).toBe('hover:overflow-x-auto overflow-x-scroll')
expect(twMerge('col-span-1 col-span-full')).toBe('col-span-full')
expect(twMerge('gap-2 gap-px basis-px basis-3')).toBe('gap-px basis-3')
})

test('merges classes from Font Variant Numeric section correctly', () => {
Expand Down
Loading