archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Fix missing unit in calc bug in space plugin

Browse Source
This commit is contained in:
Adam Wathan 2020-04-23 07:58:18 -04:00
parent 072c60c008
commit 5f05677edf
4 changed files with 55 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -608,14 +608,14 @@ video {
.space-y-0 > :not(template) ~ :not(template) {
--space-y-reverse: 0 !important;
margin-top: calc(0 * calc(1 - var(--space-y-reverse))) !important;
margin-bottom: calc(0 * var(--space-y-reverse)) !important;
margin-top: calc(0px * calc(1 - var(--space-y-reverse))) !important;
margin-bottom: calc(0px * var(--space-y-reverse)) !important;
}
.space-x-0 > :not(template) ~ :not(template) {
--space-x-reverse: 0 !important;
margin-right: calc(0 * var(--space-x-reverse)) !important;
margin-left: calc(0 * calc(1 - var(--space-x-reverse))) !important;
margin-right: calc(0px * var(--space-x-reverse)) !important;
margin-left: calc(0px * calc(1 - var(--space-x-reverse))) !important;
}
.space-y-1 > :not(template) ~ :not(template) {
@ -11897,14 +11897,14 @@ video {
@media (min-width: 640px) {
.sm\:space-y-0 > :not(template) ~ :not(template) {
--space-y-reverse: 0 !important;
margin-top: calc(0 * calc(1 - var(--space-y-reverse))) !important;
margin-bottom: calc(0 * var(--space-y-reverse)) !important;
margin-top: calc(0px * calc(1 - var(--space-y-reverse))) !important;
margin-bottom: calc(0px * var(--space-y-reverse)) !important;
}
.sm\:space-x-0 > :not(template) ~ :not(template) {
--space-x-reverse: 0 !important;
margin-right: calc(0 * var(--space-x-reverse)) !important;
margin-left: calc(0 * calc(1 - var(--space-x-reverse))) !important;
margin-right: calc(0px * var(--space-x-reverse)) !important;
margin-left: calc(0px * calc(1 - var(--space-x-reverse))) !important;
}
.sm\:space-y-1 > :not(template) ~ :not(template) {
@ -23187,14 +23187,14 @@ video {
@media (min-width: 768px) {
.md\:space-y-0 > :not(template) ~ :not(template) {
--space-y-reverse: 0 !important;
margin-top: calc(0 * calc(1 - var(--space-y-reverse))) !important;
margin-bottom: calc(0 * var(--space-y-reverse)) !important;
margin-top: calc(0px * calc(1 - var(--space-y-reverse))) !important;
margin-bottom: calc(0px * var(--space-y-reverse)) !important;
}
.md\:space-x-0 > :not(template) ~ :not(template) {
--space-x-reverse: 0 !important;
margin-right: calc(0 * var(--space-x-reverse)) !important;
margin-left: calc(0 * calc(1 - var(--space-x-reverse))) !important;
margin-right: calc(0px * var(--space-x-reverse)) !important;
margin-left: calc(0px * calc(1 - var(--space-x-reverse))) !important;
}
.md\:space-y-1 > :not(template) ~ :not(template) {
@ -34477,14 +34477,14 @@ video {
@media (min-width: 1024px) {
.lg\:space-y-0 > :not(template) ~ :not(template) {
--space-y-reverse: 0 !important;
margin-top: calc(0 * calc(1 - var(--space-y-reverse))) !important;
margin-bottom: calc(0 * var(--space-y-reverse)) !important;
margin-top: calc(0px * calc(1 - var(--space-y-reverse))) !important;
margin-bottom: calc(0px * var(--space-y-reverse)) !important;
}
.lg\:space-x-0 > :not(template) ~ :not(template) {
--space-x-reverse: 0 !important;
margin-right: calc(0 * var(--space-x-reverse)) !important;
margin-left: calc(0 * calc(1 - var(--space-x-reverse))) !important;
margin-right: calc(0px * var(--space-x-reverse)) !important;
margin-left: calc(0px * calc(1 - var(--space-x-reverse))) !important;
}
.lg\:space-y-1 > :not(template) ~ :not(template) {
@ -45767,14 +45767,14 @@ video {
@media (min-width: 1280px) {
.xl\:space-y-0 > :not(template) ~ :not(template) {
--space-y-reverse: 0 !important;
margin-top: calc(0 * calc(1 - var(--space-y-reverse))) !important;
margin-bottom: calc(0 * var(--space-y-reverse)) !important;
margin-top: calc(0px * calc(1 - var(--space-y-reverse))) !important;
margin-bottom: calc(0px * var(--space-y-reverse)) !important;
}
.xl\:space-x-0 > :not(template) ~ :not(template) {
--space-x-reverse: 0 !important;
margin-right: calc(0 * var(--space-x-reverse)) !important;
margin-left: calc(0 * calc(1 - var(--space-x-reverse))) !important;
margin-right: calc(0px * var(--space-x-reverse)) !important;
margin-left: calc(0px * calc(1 - var(--space-x-reverse))) !important;
}
.xl\:space-y-1 > :not(template) ~ :not(template) {

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

@ -608,14 +608,14 @@ video {
.space-y-0 > :not(template) ~ :not(template) {
--space-y-reverse: 0;
margin-top: calc(0 * calc(1 - var(--space-y-reverse)));
margin-bottom: calc(0 * var(--space-y-reverse));
margin-top: calc(0px * calc(1 - var(--space-y-reverse)));
margin-bottom: calc(0px * var(--space-y-reverse));
}
.space-x-0 > :not(template) ~ :not(template) {
--space-x-reverse: 0;
margin-right: calc(0 * var(--space-x-reverse));
margin-left: calc(0 * calc(1 - var(--space-x-reverse)));
margin-right: calc(0px * var(--space-x-reverse));
margin-left: calc(0px * calc(1 - var(--space-x-reverse)));
}
.space-y-1 > :not(template) ~ :not(template) {
@ -11897,14 +11897,14 @@ video {
@media (min-width: 640px) {
.sm\:space-y-0 > :not(template) ~ :not(template) {
--space-y-reverse: 0;
margin-top: calc(0 * calc(1 - var(--space-y-reverse)));
margin-bottom: calc(0 * var(--space-y-reverse));
margin-top: calc(0px * calc(1 - var(--space-y-reverse)));
margin-bottom: calc(0px * var(--space-y-reverse));
}
.sm\:space-x-0 > :not(template) ~ :not(template) {
--space-x-reverse: 0;
margin-right: calc(0 * var(--space-x-reverse));
margin-left: calc(0 * calc(1 - var(--space-x-reverse)));
margin-right: calc(0px * var(--space-x-reverse));
margin-left: calc(0px * calc(1 - var(--space-x-reverse)));
}
.sm\:space-y-1 > :not(template) ~ :not(template) {
@ -23187,14 +23187,14 @@ video {
@media (min-width: 768px) {
.md\:space-y-0 > :not(template) ~ :not(template) {
--space-y-reverse: 0;
margin-top: calc(0 * calc(1 - var(--space-y-reverse)));
margin-bottom: calc(0 * var(--space-y-reverse));
margin-top: calc(0px * calc(1 - var(--space-y-reverse)));
margin-bottom: calc(0px * var(--space-y-reverse));
}
.md\:space-x-0 > :not(template) ~ :not(template) {
--space-x-reverse: 0;
margin-right: calc(0 * var(--space-x-reverse));
margin-left: calc(0 * calc(1 - var(--space-x-reverse)));
margin-right: calc(0px * var(--space-x-reverse));
margin-left: calc(0px * calc(1 - var(--space-x-reverse)));
}
.md\:space-y-1 > :not(template) ~ :not(template) {
@ -34477,14 +34477,14 @@ video {
@media (min-width: 1024px) {
.lg\:space-y-0 > :not(template) ~ :not(template) {
--space-y-reverse: 0;
margin-top: calc(0 * calc(1 - var(--space-y-reverse)));
margin-bottom: calc(0 * var(--space-y-reverse));
margin-top: calc(0px * calc(1 - var(--space-y-reverse)));
margin-bottom: calc(0px * var(--space-y-reverse));
}
.lg\:space-x-0 > :not(template) ~ :not(template) {
--space-x-reverse: 0;
margin-right: calc(0 * var(--space-x-reverse));
margin-left: calc(0 * calc(1 - var(--space-x-reverse)));
margin-right: calc(0px * var(--space-x-reverse));
margin-left: calc(0px * calc(1 - var(--space-x-reverse)));
}
.lg\:space-y-1 > :not(template) ~ :not(template) {
@ -45767,14 +45767,14 @@ video {
@media (min-width: 1280px) {
.xl\:space-y-0 > :not(template) ~ :not(template) {
--space-y-reverse: 0;
margin-top: calc(0 * calc(1 - var(--space-y-reverse)));
margin-bottom: calc(0 * var(--space-y-reverse));
margin-top: calc(0px * calc(1 - var(--space-y-reverse)));
margin-bottom: calc(0px * var(--space-y-reverse));
}
.xl\:space-x-0 > :not(template) ~ :not(template) {
--space-x-reverse: 0;
margin-right: calc(0 * var(--space-x-reverse));
margin-left: calc(0 * calc(1 - var(--space-x-reverse)));
margin-right: calc(0px * var(--space-x-reverse));
margin-left: calc(0px * calc(1 - var(--space-x-reverse)));
}
.xl\:space-y-1 > :not(template) ~ :not(template) {

11
__tests__/plugins/space.test.js
View File

@ -5,6 +5,7 @@ test('generating space utilities', () => {
const config = {
theme: {
space: {
'0': '0',
'1': '1px',
'2': '2px',
'4': '4px',
@ -22,6 +23,16 @@ test('generating space utilities', () => {
expect(utilities).toEqual([
[
{
'.space-y-0 > :not(template) ~ :not(template)': {
'--space-y-reverse': '0',
'margin-top': 'calc(0px * calc(1 - var(--space-y-reverse)))',
'margin-bottom': 'calc(0px * var(--space-y-reverse))',
},
'.space-x-0 > :not(template) ~ :not(template)': {
'--space-x-reverse': '0',
'margin-right': 'calc(0px * var(--space-x-reverse))',
'margin-left': 'calc(0px * calc(1 - var(--space-x-reverse)))',
},
'.space-y-1 > :not(template) ~ :not(template)': {
'--space-y-reverse': '0',
'margin-top': 'calc(1px * calc(1 - var(--space-y-reverse)))',

8
src/plugins/space.js
View File

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