Use [hidden] instead of template in space/divide utilities (#2642)

adamwathan · web-flow · commit cecb07824e5b · 2020-10-21T16:09:02.000-04:00
* Use [hidden] instead of template in space/divide utilities

* Update tests
diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css
diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
diff --git a/__tests__/plugins/divideColor.test.js b/__tests__/plugins/divideColor.test.js
@@ -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',
         },
       },
diff --git a/__tests__/plugins/divideWidth.test.js b/__tests__/plugins/divideWidth.test.js
@@ -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',
         },
       },
diff --git a/__tests__/plugins/space.test.js b/__tests__/plugins/space.test.js
@@ -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',
         },
       },
diff --git a/src/plugins/divideColor.js b/src/plugins/divideColor.js
@@ -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),
         ]
       })
diff --git a/src/plugins/divideOpacity.js b/src/plugins/divideOpacity.js
@@ -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,
           },
diff --git a/src/plugins/divideStyle.js b/src/plugins/divideStyle.js
@@ -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',
         },
       },
diff --git a/src/plugins/divideWidth.js b/src/plugins/divideWidth.js
@@ -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',
           },
         },
diff --git a/src/plugins/space.js b/src/plugins/space.js
@@ -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',
           },
         },

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ test('defining color as a function', () => {`
`18`	`18`	`expect(utilities).toEqual([`
`19`	`19`	`[`
`20`	`20`	`{`
`21`		`- '.divide-black > :not(template) ~ :not(template)': {`
	`21`	`+ '.divide-black > :not([hidden]) ~ :not([hidden])': {`
`22`	`22`	`'border-color': 'black',`
`23`	`23`	`},`
`24`	`24`	`},`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ export default function () {`
`23`	`23`	`const utilities = _.fromPairs(`
`24`	`24`	`_.map(_.omit(colors, 'DEFAULT'), (value, modifier) => {`
`25`	`25`	`return [`
`26`		- `${nameClass('divide', modifier)} > :not(template) ~ :not(template)`,
	`26`	+ `${nameClass('divide', modifier)} > :not([hidden]) ~ :not([hidden])`,
`27`	`27`	`getProperties(value),`
`28`	`28`	`]`
`29`	`29`	`})`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ export default function () {`
`6`	`6`	`const utilities = _.fromPairs(`
`7`	`7`	`_.map(theme('divideOpacity'), (value, modifier) => {`
`8`	`8`	`return [`
`9`		- `${nameClass('divide-opacity', modifier)} > :not(template) ~ :not(template)`,
	`9`	+ `${nameClass('divide-opacity', modifier)} > :not([hidden]) ~ :not([hidden])`,
`10`	`10`	`{`
`11`	`11`	`'--divide-opacity': value,`
`12`	`12`	`},`