Use [hidden] instead of template in space/divide utilities

This commit is contained in:
Adam Wathan 2020-10-21 10:03:54 -04:00
parent e1ef99814e
commit 6e20880987
5 changed files with 15 additions and 15 deletions

View file

@ -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),
]
})

View file

@ -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,
},

View file

@ -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',
},
},

View file

@ -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',
},
},

View file

@ -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',
},
},