Skip to content

Commit

Permalink
Use border-width for divide, not border
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamwathan
adamwathan committed Apr 20, 2020
1 parent 0653659 commit a14ea02
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 56 deletions.
40 changes: 20 additions & 20 deletions __tests__/fixtures/tailwind-output-important.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
40 changes: 20 additions & 20 deletions __tests__/fixtures/tailwind-output.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
24 changes: 12 additions & 12 deletions __tests__/plugins/divideWidth.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
8 changes: 4 additions & 4 deletions src/plugins/divideWidth.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)))`,
},
}),
]
Expand Down

0 comments on commit a14ea02

Please sign in to comment.