wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Fix bug where divide-x/y-0 didn't work due to missing unit in calc

Browse source
This commit is contained in:
Adam Wathan 2020-04-21 16:08:39 -04:00
parent e262218b87
commit b0c78726ac
4 changed files with 59 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

40
__tests__/fixtures/tailwind-output-important.css
View file

@ -1060,14 +1060,14 @@ video {
.divide-y-0 > :not(template) ~ :not(template) {
--divide-y-reverse: 0 !important;
border-top-width: calc(0 * calc(1 - var(--divide-y-reverse))) !important;
border-bottom-width: calc(0 * var(--divide-y-reverse)) !important;
border-top-width: calc(0px * calc(1 - var(--divide-y-reverse))) !important;
border-bottom-width: calc(0px * var(--divide-y-reverse)) !important;
}
.divide-x-0 > :not(template) ~ :not(template) {
--divide-x-reverse: 0 !important;
border-right-width: calc(0 * var(--divide-x-reverse)) !important;
border-left-width: calc(0 * calc(1 - var(--divide-x-reverse))) !important;
border-right-width: calc(0px * var(--divide-x-reverse)) !important;
border-left-width: calc(0px * calc(1 - var(--divide-x-reverse))) !important;
}
.divide-y-2 > :not(template) ~ :not(template) {
@ -12349,14 +12349,14 @@ video {
.sm\:divide-y-0 > :not(template) ~ :not(template) {
--divide-y-reverse: 0 !important;
border-top-width: calc(0 * calc(1 - var(--divide-y-reverse))) !important;
border-bottom-width: calc(0 * var(--divide-y-reverse)) !important;
border-top-width: calc(0px * calc(1 - var(--divide-y-reverse))) !important;
border-bottom-width: calc(0px * var(--divide-y-reverse)) !important;
}
.sm\:divide-x-0 > :not(template) ~ :not(template) {
--divide-x-reverse: 0 !important;
border-right-width: calc(0 * var(--divide-x-reverse)) !important;
border-left-width: calc(0 * calc(1 - var(--divide-x-reverse))) !important;
border-right-width: calc(0px * var(--divide-x-reverse)) !important;
border-left-width: calc(0px * calc(1 - var(--divide-x-reverse))) !important;
}
.sm\:divide-y-2 > :not(template) ~ :not(template) {
@ -23639,14 +23639,14 @@ video {
.md\:divide-y-0 > :not(template) ~ :not(template) {
--divide-y-reverse: 0 !important;
border-top-width: calc(0 * calc(1 - var(--divide-y-reverse))) !important;
border-bottom-width: calc(0 * var(--divide-y-reverse)) !important;
border-top-width: calc(0px * calc(1 - var(--divide-y-reverse))) !important;
border-bottom-width: calc(0px * var(--divide-y-reverse)) !important;
}
.md\:divide-x-0 > :not(template) ~ :not(template) {
--divide-x-reverse: 0 !important;
border-right-width: calc(0 * var(--divide-x-reverse)) !important;
border-left-width: calc(0 * calc(1 - var(--divide-x-reverse))) !important;
border-right-width: calc(0px * var(--divide-x-reverse)) !important;
border-left-width: calc(0px * calc(1 - var(--divide-x-reverse))) !important;
}
.md\:divide-y-2 > :not(template) ~ :not(template) {
@ -34929,14 +34929,14 @@ video {
.lg\:divide-y-0 > :not(template) ~ :not(template) {
--divide-y-reverse: 0 !important;
border-top-width: calc(0 * calc(1 - var(--divide-y-reverse))) !important;
border-bottom-width: calc(0 * var(--divide-y-reverse)) !important;
border-top-width: calc(0px * calc(1 - var(--divide-y-reverse))) !important;
border-bottom-width: calc(0px * var(--divide-y-reverse)) !important;
}
.lg\:divide-x-0 > :not(template) ~ :not(template) {
--divide-x-reverse: 0 !important;
border-right-width: calc(0 * var(--divide-x-reverse)) !important;
border-left-width: calc(0 * calc(1 - var(--divide-x-reverse))) !important;
border-right-width: calc(0px * var(--divide-x-reverse)) !important;
border-left-width: calc(0px * calc(1 - var(--divide-x-reverse))) !important;
}
.lg\:divide-y-2 > :not(template) ~ :not(template) {
@ -46219,14 +46219,14 @@ video {
.xl\:divide-y-0 > :not(template) ~ :not(template) {
--divide-y-reverse: 0 !important;
border-top-width: calc(0 * calc(1 - var(--divide-y-reverse))) !important;
border-bottom-width: calc(0 * var(--divide-y-reverse)) !important;
border-top-width: calc(0px * calc(1 - var(--divide-y-reverse))) !important;
border-bottom-width: calc(0px * var(--divide-y-reverse)) !important;
}
.xl\:divide-x-0 > :not(template) ~ :not(template) {
--divide-x-reverse: 0 !important;
border-right-width: calc(0 * var(--divide-x-reverse)) !important;
border-left-width: calc(0 * calc(1 - var(--divide-x-reverse))) !important;
border-right-width: calc(0px * var(--divide-x-reverse)) !important;
border-left-width: calc(0px * calc(1 - var(--divide-x-reverse))) !important;
}
.xl\:divide-y-2 > :not(template) ~ :not(template) {

40
__tests__/fixtures/tailwind-output.css
View file

@ -1060,14 +1060,14 @@ video {
.divide-y-0 > :not(template) ~ :not(template) {
--divide-y-reverse: 0;
border-top-width: calc(0 * calc(1 - var(--divide-y-reverse)));
border-bottom-width: calc(0 * var(--divide-y-reverse));
border-top-width: calc(0px * calc(1 - var(--divide-y-reverse)));
border-bottom-width: calc(0px * var(--divide-y-reverse));
}
.divide-x-0 > :not(template) ~ :not(template) {
--divide-x-reverse: 0;
border-right-width: calc(0 * var(--divide-x-reverse));
border-left-width: calc(0 * calc(1 - var(--divide-x-reverse)));
border-right-width: calc(0px * var(--divide-x-reverse));
border-left-width: calc(0px * calc(1 - var(--divide-x-reverse)));
}
.divide-y-2 > :not(template) ~ :not(template) {
@ -12349,14 +12349,14 @@ video {
.sm\:divide-y-0 > :not(template) ~ :not(template) {
--divide-y-reverse: 0;
border-top-width: calc(0 * calc(1 - var(--divide-y-reverse)));
border-bottom-width: calc(0 * var(--divide-y-reverse));
border-top-width: calc(0px * calc(1 - var(--divide-y-reverse)));
border-bottom-width: calc(0px * var(--divide-y-reverse));
}
.sm\:divide-x-0 > :not(template) ~ :not(template) {
--divide-x-reverse: 0;
border-right-width: calc(0 * var(--divide-x-reverse));
border-left-width: calc(0 * calc(1 - var(--divide-x-reverse)));
border-right-width: calc(0px * var(--divide-x-reverse));
border-left-width: calc(0px * calc(1 - var(--divide-x-reverse)));
}
.sm\:divide-y-2 > :not(template) ~ :not(template) {
@ -23639,14 +23639,14 @@ video {
.md\:divide-y-0 > :not(template) ~ :not(template) {
--divide-y-reverse: 0;
border-top-width: calc(0 * calc(1 - var(--divide-y-reverse)));
border-bottom-width: calc(0 * var(--divide-y-reverse));
border-top-width: calc(0px * calc(1 - var(--divide-y-reverse)));
border-bottom-width: calc(0px * var(--divide-y-reverse));
}
.md\:divide-x-0 > :not(template) ~ :not(template) {
--divide-x-reverse: 0;
border-right-width: calc(0 * var(--divide-x-reverse));
border-left-width: calc(0 * calc(1 - var(--divide-x-reverse)));
border-right-width: calc(0px * var(--divide-x-reverse));
border-left-width: calc(0px * calc(1 - var(--divide-x-reverse)));
}
.md\:divide-y-2 > :not(template) ~ :not(template) {
@ -34929,14 +34929,14 @@ video {
.lg\:divide-y-0 > :not(template) ~ :not(template) {
--divide-y-reverse: 0;
border-top-width: calc(0 * calc(1 - var(--divide-y-reverse)));
border-bottom-width: calc(0 * var(--divide-y-reverse));
border-top-width: calc(0px * calc(1 - var(--divide-y-reverse)));
border-bottom-width: calc(0px * var(--divide-y-reverse));
}
.lg\:divide-x-0 > :not(template) ~ :not(template) {
--divide-x-reverse: 0;
border-right-width: calc(0 * var(--divide-x-reverse));
border-left-width: calc(0 * calc(1 - var(--divide-x-reverse)));
border-right-width: calc(0px * var(--divide-x-reverse));
border-left-width: calc(0px * calc(1 - var(--divide-x-reverse)));
}
.lg\:divide-y-2 > :not(template) ~ :not(template) {
@ -46219,14 +46219,14 @@ video {
.xl\:divide-y-0 > :not(template) ~ :not(template) {
--divide-y-reverse: 0;
border-top-width: calc(0 * calc(1 - var(--divide-y-reverse)));
border-bottom-width: calc(0 * var(--divide-y-reverse));
border-top-width: calc(0px * calc(1 - var(--divide-y-reverse)));
border-bottom-width: calc(0px * var(--divide-y-reverse));
}
.xl\:divide-x-0 > :not(template) ~ :not(template) {
--divide-x-reverse: 0;
border-right-width: calc(0 * var(--divide-x-reverse));
border-left-width: calc(0 * calc(1 - var(--divide-x-reverse)));
border-right-width: calc(0px * var(--divide-x-reverse));
border-left-width: calc(0px * calc(1 - var(--divide-x-reverse)));
}
.xl\:divide-y-2 > :not(template) ~ :not(template) {

11
__tests__/plugins/divideWidth.test.js
View file

@ -6,6 +6,7 @@ test('generating divide width utilities', () => {
theme: {
divideWidth: {
default: '1px',
'0': '0',
'2': '2px',
'4': '4px',
},
@ -30,6 +31,16 @@ test('generating divide width utilities', () => {
'border-right-width': 'calc(1px * var(--divide-x-reverse))',
'border-left-width': 'calc(1px * calc(1 - var(--divide-x-reverse)))',
},
'.divide-y-0 > :not(template) ~ :not(template)': {
'--divide-y-reverse': '0',
'border-top-width': 'calc(0px * calc(1 - var(--divide-y-reverse)))',
'border-bottom-width': 'calc(0px * var(--divide-y-reverse))',
},
'.divide-x-0 > :not(template) ~ :not(template)': {
'--divide-x-reverse': '0',
'border-right-width': 'calc(0px * var(--divide-x-reverse))',
'border-left-width': 'calc(0px * calc(1 - var(--divide-x-reverse)))',
},
'.divide-y-2 > :not(template) ~ :not(template)': {
'--divide-y-reverse': '0',
'border-top-width': 'calc(2px * calc(1 - var(--divide-y-reverse)))',

12
src/plugins/divideWidth.js
View file

@ -6,13 +6,17 @@ export default function() {
(size, modifier) => ({
[`.${e(`divide-y${modifier}`)} > :not(template) ~ :not(template)`]: {
'--divide-y-reverse': '0',
'border-top-width': `calc(${size} * calc(1 - var(--divide-y-reverse)))`,
'border-bottom-width': `calc(${size} * var(--divide-y-reverse))`,
'border-top-width': `calc(${
size === '0' ? '0px' : size
} * calc(1 - var(--divide-y-reverse)))`,
'border-bottom-width': `calc(${size === '0' ? '0px' : size} * var(--divide-y-reverse))`,
},
[`.${e(`divide-x${modifier}`)} > :not(template) ~ :not(template)`]: {
'--divide-x-reverse': '0',
'border-right-width': `calc(${size} * var(--divide-x-reverse))`,
'border-left-width': `calc(${size} * calc(1 - var(--divide-x-reverse)))`,
'border-right-width': `calc(${size === '0' ? '0px' : size} * var(--divide-x-reverse))`,
'border-left-width': `calc(${
size === '0' ? '0px' : size
} * calc(1 - var(--divide-x-reverse)))`,
},
}),
]