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

ensure that divide utilities inject a default border color (#5438)

Browse Source
This commit is contained in:
Robin Malfait 2021-09-08 11:39:32 +02:00 committed by GitHub
parent a5425abd86
commit eb3fe8fe27
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 125 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/plugins/divideWidth.js
View File

@ -7,6 +7,7 @@ export default function () {
return {
'& > :not([hidden]) ~ :not([hidden])': {
'@defaults border-width': {},
'--tw-divide-x-reverse': '0',
'border-right-width': `calc(${value} * var(--tw-divide-x-reverse))`,
'border-left-width': `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`,
@ -18,6 +19,7 @@ export default function () {
return {
'& > :not([hidden]) ~ :not([hidden])': {
'@defaults border-width': {},
'--tw-divide-y-reverse': '0',
'border-top-width': `calc(${value} * calc(1 - var(--tw-divide-y-reverse)))`,
'border-bottom-width': `calc(${value} * var(--tw-divide-y-reverse))`,
@ -35,9 +37,11 @@ export default function () {
addUtilities(
{
'.divide-y-reverse > :not([hidden]) ~ :not([hidden])': {
'@defaults border-width': {},
'--tw-divide-y-reverse': '1',
},
'.divide-x-reverse > :not([hidden]) ~ :not([hidden])': {
'@defaults border-width': {},
'--tw-divide-x-reverse': '1',
},
},

121
tests/plugins/divide.test.js Normal file
View File

@ -0,0 +1,121 @@
import { run, html, css } from '../util/run'
it('should add the divide styles for divide-y and a default border color', () => {
let config = {
content: [{ raw: html`<div class="divide-y"></div>` }],
corePlugins: { preflight: false },
}
return run('@tailwind base; @tailwind utilities;', config).then((result) => {
expect(result.css).toMatchCss(css`
*,
::before,
::after {
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 0;
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
`)
})
})
it('should add the divide styles for divide-x and a default border color', () => {
let config = {
content: [{ raw: html`<div class="divide-x"></div>` }],
corePlugins: { preflight: false },
}
return run('@tailwind base; @tailwind utilities;', config).then((result) => {
expect(result.css).toMatchCss(css`
*,
::before,
::after {
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}
.divide-x > :not([hidden]) ~ :not([hidden]) {
--tw-divide-x-reverse: 0;
border-right-width: calc(1px * var(--tw-divide-x-reverse));
border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}
`)
})
})
it('should add the divide styles for divide-y-reverse and a default border color', () => {
let config = {
content: [{ raw: html`<div class="divide-y-reverse"></div>` }],
corePlugins: { preflight: false },
}
return run('@tailwind base; @tailwind utilities;', config).then((result) => {
expect(result.css).toMatchCss(css`
*,
::before,
::after {
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}
.divide-y-reverse > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 1;
}
`)
})
})
it('should add the divide styles for divide-x-reverse and a default border color', () => {
let config = {
content: [{ raw: html`<div class="divide-x-reverse"></div>` }],
corePlugins: { preflight: false },
}
return run('@tailwind base; @tailwind utilities;', config).then((result) => {
expect(result.css).toMatchCss(css`
*,
::before,
::after {
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}
.divide-x-reverse > :not([hidden]) ~ :not([hidden]) {
--tw-divide-x-reverse: 1;
}
`)
})
})
it('should only inject the base styles once if we use divide and border at the same time', () => {
let config = {
content: [{ raw: html`<div class="divide-y border-r"></div>` }],
corePlugins: { preflight: false },
}
return run('@tailwind base; @tailwind utilities;', config).then((result) => {
expect(result.css).toMatchCss(css`
*,
::before,
::after {
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 0;
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.border-r {
border-right-width: 1px;
}
`)
})
})