mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Use [hidden] instead of template in space/divide utilities (#2642)
* Use [hidden] instead of template in space/divide utilities * Update tests
This commit is contained in:
parent
e1ef99814e
commit
cecb07824e
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -18,7 +18,7 @@ test('defining color as a function', () => {
|
||||
expect(utilities).toEqual([
|
||||
[
|
||||
{
|
||||
'.divide-black > :not(template) ~ :not(template)': {
|
||||
'.divide-black > :not([hidden]) ~ :not([hidden])': {
|
||||
'border-color': 'black',
|
||||
},
|
||||
},
|
||||
|
||||
@ -21,50 +21,50 @@ test('generating divide width utilities', () => {
|
||||
expect(utilities).toEqual([
|
||||
[
|
||||
{
|
||||
'.divide-y > :not(template) ~ :not(template)': {
|
||||
'.divide-y > :not([hidden]) ~ :not([hidden])': {
|
||||
'--divide-y-reverse': '0',
|
||||
'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 > :not([hidden]) ~ :not([hidden])': {
|
||||
'--divide-x-reverse': '0',
|
||||
'border-inline-end-width': 'calc(1px * var(--divide-x-reverse))',
|
||||
'border-inline-start-width': 'calc(1px * calc(1 - var(--divide-x-reverse)))',
|
||||
},
|
||||
'.divide-y-0 > :not(template) ~ :not(template)': {
|
||||
'.divide-y-0 > :not([hidden]) ~ :not([hidden])': {
|
||||
'--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-0 > :not([hidden]) ~ :not([hidden])': {
|
||||
'--divide-x-reverse': '0',
|
||||
'border-inline-end-width': 'calc(0px * var(--divide-x-reverse))',
|
||||
'border-inline-start-width': 'calc(0px * calc(1 - var(--divide-x-reverse)))',
|
||||
},
|
||||
'.divide-y-2 > :not(template) ~ :not(template)': {
|
||||
'.divide-y-2 > :not([hidden]) ~ :not([hidden])': {
|
||||
'--divide-y-reverse': '0',
|
||||
'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-2 > :not([hidden]) ~ :not([hidden])': {
|
||||
'--divide-x-reverse': '0',
|
||||
'border-inline-end-width': 'calc(2px * var(--divide-x-reverse))',
|
||||
'border-inline-start-width': 'calc(2px * calc(1 - var(--divide-x-reverse)))',
|
||||
},
|
||||
'.divide-y-4 > :not(template) ~ :not(template)': {
|
||||
'.divide-y-4 > :not([hidden]) ~ :not([hidden])': {
|
||||
'--divide-y-reverse': '0',
|
||||
'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-4 > :not([hidden]) ~ :not([hidden])': {
|
||||
'--divide-x-reverse': '0',
|
||||
'border-inline-end-width': 'calc(4px * var(--divide-x-reverse))',
|
||||
'border-inline-start-width': 'calc(4px * calc(1 - var(--divide-x-reverse)))',
|
||||
},
|
||||
'.divide-y-reverse > :not(template) ~ :not(template)': {
|
||||
'.divide-y-reverse > :not([hidden]) ~ :not([hidden])': {
|
||||
'--divide-y-reverse': '1',
|
||||
},
|
||||
'.divide-x-reverse > :not(template) ~ :not(template)': {
|
||||
'.divide-x-reverse > :not([hidden]) ~ :not([hidden])': {
|
||||
'--divide-x-reverse': '1',
|
||||
},
|
||||
},
|
||||
|
||||
@ -23,70 +23,70 @@ test('generating space utilities', () => {
|
||||
expect(utilities).toEqual([
|
||||
[
|
||||
{
|
||||
'.space-y-0 > :not(template) ~ :not(template)': {
|
||||
'.space-y-0 > :not([hidden]) ~ :not([hidden])': {
|
||||
'--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-0 > :not([hidden]) ~ :not([hidden])': {
|
||||
'--space-x-reverse': '0',
|
||||
'margin-inline-end': 'calc(0px * var(--space-x-reverse))',
|
||||
'margin-inline-start': 'calc(0px * calc(1 - var(--space-x-reverse)))',
|
||||
},
|
||||
'.space-y-1 > :not(template) ~ :not(template)': {
|
||||
'.space-y-1 > :not([hidden]) ~ :not([hidden])': {
|
||||
'--space-y-reverse': '0',
|
||||
'margin-top': 'calc(1px * calc(1 - var(--space-y-reverse)))',
|
||||
'margin-bottom': 'calc(1px * var(--space-y-reverse))',
|
||||
},
|
||||
'.space-x-1 > :not(template) ~ :not(template)': {
|
||||
'.space-x-1 > :not([hidden]) ~ :not([hidden])': {
|
||||
'--space-x-reverse': '0',
|
||||
'margin-inline-end': 'calc(1px * var(--space-x-reverse))',
|
||||
'margin-inline-start': 'calc(1px * calc(1 - var(--space-x-reverse)))',
|
||||
},
|
||||
'.space-y-2 > :not(template) ~ :not(template)': {
|
||||
'.space-y-2 > :not([hidden]) ~ :not([hidden])': {
|
||||
'--space-y-reverse': '0',
|
||||
'margin-top': 'calc(2px * calc(1 - var(--space-y-reverse)))',
|
||||
'margin-bottom': 'calc(2px * var(--space-y-reverse))',
|
||||
},
|
||||
'.space-x-2 > :not(template) ~ :not(template)': {
|
||||
'.space-x-2 > :not([hidden]) ~ :not([hidden])': {
|
||||
'--space-x-reverse': '0',
|
||||
'margin-inline-end': 'calc(2px * var(--space-x-reverse))',
|
||||
'margin-inline-start': 'calc(2px * calc(1 - var(--space-x-reverse)))',
|
||||
},
|
||||
'.space-y-4 > :not(template) ~ :not(template)': {
|
||||
'.space-y-4 > :not([hidden]) ~ :not([hidden])': {
|
||||
'--space-y-reverse': '0',
|
||||
'margin-top': 'calc(4px * calc(1 - var(--space-y-reverse)))',
|
||||
'margin-bottom': 'calc(4px * var(--space-y-reverse))',
|
||||
},
|
||||
'.space-x-4 > :not(template) ~ :not(template)': {
|
||||
'.space-x-4 > :not([hidden]) ~ :not([hidden])': {
|
||||
'--space-x-reverse': '0',
|
||||
'margin-inline-end': 'calc(4px * var(--space-x-reverse))',
|
||||
'margin-inline-start': 'calc(4px * calc(1 - var(--space-x-reverse)))',
|
||||
},
|
||||
'.-space-y-2 > :not(template) ~ :not(template)': {
|
||||
'.-space-y-2 > :not([hidden]) ~ :not([hidden])': {
|
||||
'--space-y-reverse': '0',
|
||||
'margin-top': 'calc(-2px * calc(1 - var(--space-y-reverse)))',
|
||||
'margin-bottom': 'calc(-2px * var(--space-y-reverse))',
|
||||
},
|
||||
'.-space-x-2 > :not(template) ~ :not(template)': {
|
||||
'.-space-x-2 > :not([hidden]) ~ :not([hidden])': {
|
||||
'--space-x-reverse': '0',
|
||||
'margin-inline-end': 'calc(-2px * var(--space-x-reverse))',
|
||||
'margin-inline-start': 'calc(-2px * calc(1 - var(--space-x-reverse)))',
|
||||
},
|
||||
'.-space-y-1 > :not(template) ~ :not(template)': {
|
||||
'.-space-y-1 > :not([hidden]) ~ :not([hidden])': {
|
||||
'--space-y-reverse': '0',
|
||||
'margin-top': 'calc(-1px * calc(1 - var(--space-y-reverse)))',
|
||||
'margin-bottom': 'calc(-1px * var(--space-y-reverse))',
|
||||
},
|
||||
'.-space-x-1 > :not(template) ~ :not(template)': {
|
||||
'.-space-x-1 > :not([hidden]) ~ :not([hidden])': {
|
||||
'--space-x-reverse': '0',
|
||||
'margin-inline-end': 'calc(-1px * var(--space-x-reverse))',
|
||||
'margin-inline-start': 'calc(-1px * calc(1 - var(--space-x-reverse)))',
|
||||
},
|
||||
'.space-y-reverse > :not(template) ~ :not(template)': {
|
||||
'.space-y-reverse > :not([hidden]) ~ :not([hidden])': {
|
||||
'--space-y-reverse': '1',
|
||||
},
|
||||
'.space-x-reverse > :not(template) ~ :not(template)': {
|
||||
'.space-x-reverse > :not([hidden]) ~ :not([hidden])': {
|
||||
'--space-x-reverse': '1',
|
||||
},
|
||||
},
|
||||
|
||||
@ -23,7 +23,7 @@ export default function () {
|
||||
const utilities = _.fromPairs(
|
||||
_.map(_.omit(colors, 'DEFAULT'), (value, modifier) => {
|
||||
return [
|
||||
`${nameClass('divide', modifier)} > :not(template) ~ :not(template)`,
|
||||
`${nameClass('divide', modifier)} > :not([hidden]) ~ :not([hidden])`,
|
||||
getProperties(value),
|
||||
]
|
||||
})
|
||||
|
||||
@ -6,7 +6,7 @@ export default function () {
|
||||
const utilities = _.fromPairs(
|
||||
_.map(theme('divideOpacity'), (value, modifier) => {
|
||||
return [
|
||||
`${nameClass('divide-opacity', modifier)} > :not(template) ~ :not(template)`,
|
||||
`${nameClass('divide-opacity', modifier)} > :not([hidden]) ~ :not([hidden])`,
|
||||
{
|
||||
'--divide-opacity': value,
|
||||
},
|
||||
|
||||
@ -2,19 +2,19 @@ export default function () {
|
||||
return function ({ addUtilities, variants }) {
|
||||
addUtilities(
|
||||
{
|
||||
'.divide-solid > :not(template) ~ :not(template)': {
|
||||
'.divide-solid > :not([hidden]) ~ :not([hidden])': {
|
||||
'border-style': 'solid',
|
||||
},
|
||||
'.divide-dashed > :not(template) ~ :not(template)': {
|
||||
'.divide-dashed > :not([hidden]) ~ :not([hidden])': {
|
||||
'border-style': 'dashed',
|
||||
},
|
||||
'.divide-dotted > :not(template) ~ :not(template)': {
|
||||
'.divide-dotted > :not([hidden]) ~ :not([hidden])': {
|
||||
'border-style': 'dotted',
|
||||
},
|
||||
'.divide-double > :not(template) ~ :not(template)': {
|
||||
'.divide-double > :not([hidden]) ~ :not([hidden])': {
|
||||
'border-style': 'double',
|
||||
},
|
||||
'.divide-none > :not(template) ~ :not(template)': {
|
||||
'.divide-none > :not([hidden]) ~ :not([hidden])': {
|
||||
'border-style': 'none',
|
||||
},
|
||||
},
|
||||
|
||||
@ -7,12 +7,12 @@ export default function () {
|
||||
(_size, modifier) => {
|
||||
const size = _size === '0' ? '0px' : _size
|
||||
return {
|
||||
[`${nameClass('divide-y', modifier)} > :not(template) ~ :not(template)`]: {
|
||||
[`${nameClass('divide-y', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
|
||||
'--divide-y-reverse': '0',
|
||||
'border-top-width': `calc(${size} * calc(1 - var(--divide-y-reverse)))`,
|
||||
'border-bottom-width': `calc(${size} * var(--divide-y-reverse))`,
|
||||
},
|
||||
[`${nameClass('divide-x', modifier)} > :not(template) ~ :not(template)`]: {
|
||||
[`${nameClass('divide-x', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
|
||||
'--divide-x-reverse': '0',
|
||||
'border-inline-end-width': `calc(${size} * var(--divide-x-reverse))`,
|
||||
'border-inline-start-width': `calc(${size} * calc(1 - var(--divide-x-reverse)))`,
|
||||
@ -27,10 +27,10 @@ export default function () {
|
||||
return generator(value, modifier)
|
||||
}),
|
||||
{
|
||||
'.divide-y-reverse > :not(template) ~ :not(template)': {
|
||||
'.divide-y-reverse > :not([hidden]) ~ :not([hidden])': {
|
||||
'--divide-y-reverse': '1',
|
||||
},
|
||||
'.divide-x-reverse > :not(template) ~ :not(template)': {
|
||||
'.divide-x-reverse > :not([hidden]) ~ :not([hidden])': {
|
||||
'--divide-x-reverse': '1',
|
||||
},
|
||||
},
|
||||
|
||||
@ -7,12 +7,12 @@ export default function () {
|
||||
(_size, modifier) => {
|
||||
const size = _size === '0' ? '0px' : _size
|
||||
return {
|
||||
[`${nameClass('space-y', modifier)} > :not(template) ~ :not(template)`]: {
|
||||
[`${nameClass('space-y', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
|
||||
'--space-y-reverse': '0',
|
||||
'margin-top': `calc(${size} * calc(1 - var(--space-y-reverse)))`,
|
||||
'margin-bottom': `calc(${size} * var(--space-y-reverse))`,
|
||||
},
|
||||
[`${nameClass('space-x', modifier)} > :not(template) ~ :not(template)`]: {
|
||||
[`${nameClass('space-x', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
|
||||
'--space-x-reverse': '0',
|
||||
'margin-inline-end': `calc(${size} * var(--space-x-reverse))`,
|
||||
'margin-inline-start': `calc(${size} * calc(1 - var(--space-x-reverse)))`,
|
||||
@ -25,10 +25,10 @@ export default function () {
|
||||
return [
|
||||
..._.flatMap(theme('space'), generator),
|
||||
{
|
||||
'.space-y-reverse > :not(template) ~ :not(template)': {
|
||||
'.space-y-reverse > :not([hidden]) ~ :not([hidden])': {
|
||||
'--space-y-reverse': '1',
|
||||
},
|
||||
'.space-x-reverse > :not(template) ~ :not(template)': {
|
||||
'.space-x-reverse > :not([hidden]) ~ :not([hidden])': {
|
||||
'--space-x-reverse': '1',
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user