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

Merge branch 'stack-divide-utilities'

Browse Source
This commit is contained in:
Adam Wathan 2020-04-20 14:18:12 -04:00
commit 8df2cd57a0
4 changed files with 56 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -844,62 +844,62 @@ video {
.divide-y-0 > :not(template) ~ :not(template) {
--divide-y-reverse: 0 !important;
border-top: calc(0 * calc(1 - var(--divide-y-reverse))) !important;
border-bottom: calc(0 * var(--divide-y-reverse)) !important;
border-top-width: calc(0 * calc(1 - var(--divide-y-reverse))) !important;
border-bottom-width: calc(0 * var(--divide-y-reverse)) !important;
}
.divide-x-0 > :not(template) ~ :not(template) {
--divide-x-reverse: 0 !important;
border-right: calc(0 * var(--divide-y-reverse)) !important;
border-left: calc(0 * calc(1 - var(--divide-y-reverse))) !important;
border-right-width: calc(0 * var(--divide-y-reverse)) !important;
border-left-width: calc(0 * calc(1 - var(--divide-y-reverse))) !important;
}
.divide-y-2 > :not(template) ~ :not(template) {
--divide-y-reverse: 0 !important;
border-top: calc(2px * calc(1 - var(--divide-y-reverse))) !important;
border-bottom: calc(2px * var(--divide-y-reverse)) !important;
border-top-width: calc(2px * calc(1 - var(--divide-y-reverse))) !important;
border-bottom-width: calc(2px * var(--divide-y-reverse)) !important;
}
.divide-x-2 > :not(template) ~ :not(template) {
--divide-x-reverse: 0 !important;
border-right: calc(2px * var(--divide-y-reverse)) !important;
border-left: calc(2px * calc(1 - var(--divide-y-reverse))) !important;
border-right-width: calc(2px * var(--divide-y-reverse)) !important;
border-left-width: calc(2px * calc(1 - var(--divide-y-reverse))) !important;
}
.divide-y-4 > :not(template) ~ :not(template) {
--divide-y-reverse: 0 !important;
border-top: calc(4px * calc(1 - var(--divide-y-reverse))) !important;
border-bottom: calc(4px * var(--divide-y-reverse)) !important;
border-top-width: calc(4px * calc(1 - var(--divide-y-reverse))) !important;
border-bottom-width: calc(4px * var(--divide-y-reverse)) !important;
}
.divide-x-4 > :not(template) ~ :not(template) {
--divide-x-reverse: 0 !important;
border-right: calc(4px * var(--divide-y-reverse)) !important;
border-left: calc(4px * calc(1 - var(--divide-y-reverse))) !important;
border-right-width: calc(4px * var(--divide-y-reverse)) !important;
border-left-width: calc(4px * calc(1 - var(--divide-y-reverse))) !important;
}
.divide-y-8 > :not(template) ~ :not(template) {
--divide-y-reverse: 0 !important;
border-top: calc(8px * calc(1 - var(--divide-y-reverse))) !important;
border-bottom: calc(8px * var(--divide-y-reverse)) !important;
border-top-width: calc(8px * calc(1 - var(--divide-y-reverse))) !important;
border-bottom-width: calc(8px * var(--divide-y-reverse)) !important;
}
.divide-x-8 > :not(template) ~ :not(template) {
--divide-x-reverse: 0 !important;
border-right: calc(8px * var(--divide-y-reverse)) !important;
border-left: calc(8px * calc(1 - var(--divide-y-reverse))) !important;
border-right-width: calc(8px * var(--divide-y-reverse)) !important;
border-left-width: calc(8px * calc(1 - var(--divide-y-reverse))) !important;
}
.divide-y > :not(template) ~ :not(template) {
--divide-y-reverse: 0 !important;
border-top: calc(1px * calc(1 - var(--divide-y-reverse))) !important;
border-bottom: calc(1px * var(--divide-y-reverse)) !important;
border-top-width: calc(1px * calc(1 - var(--divide-y-reverse))) !important;
border-bottom-width: calc(1px * var(--divide-y-reverse)) !important;
}
.divide-x > :not(template) ~ :not(template) {
--divide-x-reverse: 0 !important;
border-right: calc(1px * var(--divide-y-reverse)) !important;
border-left: calc(1px * calc(1 - var(--divide-y-reverse))) !important;
border-right-width: calc(1px * var(--divide-y-reverse)) !important;
border-left-width: calc(1px * calc(1 - var(--divide-y-reverse))) !important;
}
.divide-y-reverse > :not(template) ~ :not(template) {

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

@ -844,62 +844,62 @@ video {
.divide-y-0 > :not(template) ~ :not(template) {
--divide-y-reverse: 0;
border-top: calc(0 * calc(1 - var(--divide-y-reverse)));
border-bottom: calc(0 * var(--divide-y-reverse));
border-top-width: calc(0 * calc(1 - var(--divide-y-reverse)));
border-bottom-width: calc(0 * var(--divide-y-reverse));
}
.divide-x-0 > :not(template) ~ :not(template) {
--divide-x-reverse: 0;
border-right: calc(0 * var(--divide-y-reverse));
border-left: calc(0 * calc(1 - var(--divide-y-reverse)));
border-right-width: calc(0 * var(--divide-y-reverse));
border-left-width: calc(0 * calc(1 - var(--divide-y-reverse)));
}
.divide-y-2 > :not(template) ~ :not(template) {
--divide-y-reverse: 0;
border-top: calc(2px * calc(1 - var(--divide-y-reverse)));
border-bottom: calc(2px * var(--divide-y-reverse));
border-top-width: calc(2px * calc(1 - var(--divide-y-reverse)));
border-bottom-width: calc(2px * var(--divide-y-reverse));
}
.divide-x-2 > :not(template) ~ :not(template) {
--divide-x-reverse: 0;
border-right: calc(2px * var(--divide-y-reverse));
border-left: calc(2px * calc(1 - var(--divide-y-reverse)));
border-right-width: calc(2px * var(--divide-y-reverse));
border-left-width: calc(2px * calc(1 - var(--divide-y-reverse)));
}
.divide-y-4 > :not(template) ~ :not(template) {
--divide-y-reverse: 0;
border-top: calc(4px * calc(1 - var(--divide-y-reverse)));
border-bottom: calc(4px * var(--divide-y-reverse));
border-top-width: calc(4px * calc(1 - var(--divide-y-reverse)));
border-bottom-width: calc(4px * var(--divide-y-reverse));
}
.divide-x-4 > :not(template) ~ :not(template) {
--divide-x-reverse: 0;
border-right: calc(4px * var(--divide-y-reverse));
border-left: calc(4px * calc(1 - var(--divide-y-reverse)));
border-right-width: calc(4px * var(--divide-y-reverse));
border-left-width: calc(4px * calc(1 - var(--divide-y-reverse)));
}
.divide-y-8 > :not(template) ~ :not(template) {
--divide-y-reverse: 0;
border-top: calc(8px * calc(1 - var(--divide-y-reverse)));
border-bottom: calc(8px * var(--divide-y-reverse));
border-top-width: calc(8px * calc(1 - var(--divide-y-reverse)));
border-bottom-width: calc(8px * var(--divide-y-reverse));
}
.divide-x-8 > :not(template) ~ :not(template) {
--divide-x-reverse: 0;
border-right: calc(8px * var(--divide-y-reverse));
border-left: calc(8px * calc(1 - var(--divide-y-reverse)));
border-right-width: calc(8px * var(--divide-y-reverse));
border-left-width: calc(8px * calc(1 - var(--divide-y-reverse)));
}
.divide-y > :not(template) ~ :not(template) {
--divide-y-reverse: 0;
border-top: calc(1px * calc(1 - var(--divide-y-reverse)));
border-bottom: calc(1px * var(--divide-y-reverse));
border-top-width: calc(1px * calc(1 - var(--divide-y-reverse)));
border-bottom-width: calc(1px * var(--divide-y-reverse));
}
.divide-x > :not(template) ~ :not(template) {
--divide-x-reverse: 0;
border-right: calc(1px * var(--divide-y-reverse));
border-left: calc(1px * calc(1 - var(--divide-y-reverse)));
border-right-width: calc(1px * var(--divide-y-reverse));
border-left-width: calc(1px * calc(1 - var(--divide-y-reverse)));
}
.divide-y-reverse > :not(template) ~ :not(template) {

24
__tests__/plugins/divideWidth.test.js
View File

@ -22,33 +22,33 @@ test('generating divide width utilities', () => {
{
'.divide-y > :not(template) ~ :not(template)': {
'--divide-y-reverse': '0',
'border-top': 'calc(1px * calc(1 - var(--divide-y-reverse)))',
'border-bottom': 'calc(1px * var(--divide-y-reverse))',
'border-top-width': 'calc(1px * calc(1 - var(--divide-y-reverse)))',
'border-bottom-width': 'calc(1px * var(--divide-y-reverse))',
},
'.divide-x > :not(template) ~ :not(template)': {
'--divide-x-reverse': '0',
'border-right': 'calc(1px * var(--divide-y-reverse))',
'border-left': 'calc(1px * calc(1 - var(--divide-y-reverse)))',
'border-right-width': 'calc(1px * var(--divide-y-reverse))',
'border-left-width': 'calc(1px * calc(1 - var(--divide-y-reverse)))',
},
'.divide-y-2 > :not(template) ~ :not(template)': {
'--divide-y-reverse': '0',
'border-top': 'calc(2px * calc(1 - var(--divide-y-reverse)))',
'border-bottom': 'calc(2px * var(--divide-y-reverse))',
'border-top-width': 'calc(2px * calc(1 - var(--divide-y-reverse)))',
'border-bottom-width': 'calc(2px * var(--divide-y-reverse))',
},
'.divide-x-2 > :not(template) ~ :not(template)': {
'--divide-x-reverse': '0',
'border-right': 'calc(2px * var(--divide-y-reverse))',
'border-left': 'calc(2px * calc(1 - var(--divide-y-reverse)))',
'border-right-width': 'calc(2px * var(--divide-y-reverse))',
'border-left-width': 'calc(2px * calc(1 - var(--divide-y-reverse)))',
},
'.divide-y-4 > :not(template) ~ :not(template)': {
'--divide-y-reverse': '0',
'border-top': 'calc(4px * calc(1 - var(--divide-y-reverse)))',
'border-bottom': 'calc(4px * var(--divide-y-reverse))',
'border-top-width': 'calc(4px * calc(1 - var(--divide-y-reverse)))',
'border-bottom-width': 'calc(4px * var(--divide-y-reverse))',
},
'.divide-x-4 > :not(template) ~ :not(template)': {
'--divide-x-reverse': '0',
'border-right': 'calc(4px * var(--divide-y-reverse))',
'border-left': 'calc(4px * calc(1 - var(--divide-y-reverse)))',
'border-right-width': 'calc(4px * var(--divide-y-reverse))',
'border-left-width': 'calc(4px * calc(1 - var(--divide-y-reverse)))',
},
'.divide-y-reverse > :not(template) ~ :not(template)': {
'--divide-y-reverse': '1',

8
src/plugins/divideWidth.js
View File

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