wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Fix CS

Browse source
This commit is contained in:
Jordan Pittman 2022-05-18 11:35:53 -04:00
parent 52828f0100
commit f54152b19e
1 changed files with 66 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

88
tests/format-variant-selector.test.js
View file

@ -3,7 +3,9 @@ import { formatVariantSelector, finalizeSelector } from '../src/util/formatVaria
it('should be possible to add a simple variant to a simple selector', () => {
let selector = '.text-center'
let candidate = Array.from(parseCandidate('hover:text-center', { tailwindConfig: { separator: ':' } }))[0]
let candidate = Array.from(
parseCandidate('hover:text-center', { tailwindConfig: { separator: ':' } })
)[0]
let variants = ['&:hover']
@ -14,7 +16,9 @@ it('should be possible to add a simple variant to a simple selector', () => {
it('should be possible to add a multiple simple variants to a simple selector', () => {
let selector = '.text-center'
let candidate = Array.from(parseCandidate('focus:hover:text-center', { tailwindConfig: { separator: ':' } }))[0]
let candidate = Array.from(
parseCandidate('focus:hover:text-center', { tailwindConfig: { separator: ':' } })
)[0]
let variants = ['&:hover', '&:focus']
@ -25,7 +29,9 @@ it('should be possible to add a multiple simple variants to a simple selector',
it('should be possible to add a simple variant to a selector containing escaped parts', () => {
let selector = '.bg-\\[rgba\\(0\\,0\\,0\\)\\]'
let candidate = Array.from(parseCandidate('hover:bg-[rgba(0,0,0)]', { tailwindConfig: { separator: ':' } }))[0]
let candidate = Array.from(
parseCandidate('hover:bg-[rgba(0,0,0)]', { tailwindConfig: { separator: ':' } })
)[0]
let variants = ['&:hover']
@ -36,7 +42,9 @@ it('should be possible to add a simple variant to a selector containing escaped
it('should be possible to add a simple variant to a selector containing escaped parts (escape is slightly different)', () => {
let selector = '.bg-\\[rgba\\(0\\2c 0\\2c 0\\)\\]'
let candidate = Array.from(parseCandidate('hover:bg-[rgba(0,0,0)]', { tailwindConfig: { separator: ':' } }))[0]
let candidate = Array.from(
parseCandidate('hover:bg-[rgba(0,0,0)]', { tailwindConfig: { separator: ':' } })
)[0]
let variants = ['&:hover']
@ -47,7 +55,9 @@ it('should be possible to add a simple variant to a selector containing escaped
it('should be possible to add a simple variant to a more complex selector', () => {
let selector = '.space-x-4 > :not([hidden]) ~ :not([hidden])'
let candidate = Array.from(parseCandidate('hover:space-x-4', { tailwindConfig: { separator: ':' } }))[0]
let candidate = Array.from(
parseCandidate('hover:space-x-4', { tailwindConfig: { separator: ':' } })
)[0]
let variants = ['&:hover']
@ -58,7 +68,9 @@ it('should be possible to add a simple variant to a more complex selector', () =
it('should be possible to add multiple simple variants to a more complex selector', () => {
let selector = '.space-x-4 > :not([hidden]) ~ :not([hidden])'
let candidate = Array.from(parseCandidate('disabled:focus:hover:space-x-4', { tailwindConfig: { separator: ':' } }))[0]
let candidate = Array.from(
parseCandidate('disabled:focus:hover:space-x-4', { tailwindConfig: { separator: ':' } })
)[0]
let variants = ['&:hover', '&:focus', '&:disabled']
@ -69,7 +81,9 @@ it('should be possible to add multiple simple variants to a more complex selecto
it('should be possible to add a single merge variant to a simple selector', () => {
let selector = '.text-center'
let candidate = Array.from(parseCandidate('group-hover:text-center', { tailwindConfig: { separator: ':' } }))[0]
let candidate = Array.from(
parseCandidate('group-hover:text-center', { tailwindConfig: { separator: ':' } })
)[0]
let variants = [':merge(.group):hover &']
@ -80,7 +94,9 @@ it('should be possible to add a single merge variant to a simple selector', () =
it('should be possible to add multiple merge variants to a simple selector', () => {
let selector = '.text-center'
let candidate = Array.from(parseCandidate('group-focus:group-hover:text-center', { tailwindConfig: { separator: ':' } }))[0]
let candidate = Array.from(
parseCandidate('group-focus:group-hover:text-center', { tailwindConfig: { separator: ':' } })
)[0]
let variants = [':merge(.group):hover &', ':merge(.group):focus &']
@ -91,7 +107,9 @@ it('should be possible to add multiple merge variants to a simple selector', ()
it('should be possible to add a single merge variant to a more complex selector', () => {
let selector = '.space-x-4 ~ :not([hidden]) ~ :not([hidden])'
let candidate = Array.from(parseCandidate('group-hover:space-x-4', { tailwindConfig: { separator: ':' } }))[0]
let candidate = Array.from(
parseCandidate('group-hover:space-x-4', { tailwindConfig: { separator: ':' } })
)[0]
let variants = [':merge(.group):hover &']
@ -102,7 +120,9 @@ it('should be possible to add a single merge variant to a more complex selector'
it('should be possible to add multiple merge variants to a more complex selector', () => {
let selector = '.space-x-4 ~ :not([hidden]) ~ :not([hidden])'
let candidate = Array.from(parseCandidate('group-focus:group-hover:space-x-4', { tailwindConfig: { separator: ':' } }))[0]
let candidate = Array.from(
parseCandidate('group-focus:group-hover:space-x-4', { tailwindConfig: { separator: ':' } })
)[0]
let variants = [':merge(.group):hover &', ':merge(.group):focus &']
@ -113,7 +133,9 @@ it('should be possible to add multiple merge variants to a more complex selector
it('should be possible to add multiple unique merge variants to a simple selector', () => {
let selector = '.text-center'
let candidate = Array.from(parseCandidate('peer-focus:group-hover:text-center', { tailwindConfig: { separator: ':' } }))[0]
let candidate = Array.from(
parseCandidate('peer-focus:group-hover:text-center', { tailwindConfig: { separator: ':' } })
)[0]
let variants = [':merge(.group):hover &', ':merge(.peer):focus ~ &']
@ -124,7 +146,9 @@ it('should be possible to add multiple unique merge variants to a simple selecto
it('should be possible to add multiple unique merge variants to a simple selector', () => {
let selector = '.text-center'
let candidate = Array.from(parseCandidate('group-hover:peer-focus:text-center', { tailwindConfig: { separator: ':' } }))[0]
let candidate = Array.from(
parseCandidate('group-hover:peer-focus:text-center', { tailwindConfig: { separator: ':' } })
)[0]
let variants = [':merge(.peer):focus ~ &', ':merge(.group):hover &']
@ -150,7 +174,9 @@ it('should be possible to use multiple :merge() calls with different "arguments"
it('group hover and prose headings combination', () => {
let selector = '.text-center'
let candidate = Array.from(parseCandidate('group-hover:prose-headings:text-center', { tailwindConfig: { separator: ':' } }))[0]
let candidate = Array.from(
parseCandidate('group-hover:prose-headings:text-center', { tailwindConfig: { separator: ':' } })
)[0]
let variants = [
':where(&) :is(h1, h2, h3, h4)', // Prose Headings
':merge(.group):hover &', // Group Hover
@ -163,7 +189,9 @@ it('group hover and prose headings combination', () => {
it('group hover and prose headings combination flipped', () => {
let selector = '.text-center'
let candidate = Array.from(parseCandidate('prose-headings:group-hover:text-center', { tailwindConfig: { separator: ':' } }))[0]
let candidate = Array.from(
parseCandidate('prose-headings:group-hover:text-center', { tailwindConfig: { separator: ':' } })
)[0]
let variants = [
':merge(.group):hover &', // Group Hover
':where(&) :is(h1, h2, h3, h4)', // Prose Headings
@ -176,7 +204,11 @@ it('group hover and prose headings combination flipped', () => {
it('should be possible to handle a complex utility', () => {
let selector = '.space-x-4 > :not([hidden]) ~ :not([hidden])'
let candidate = Array.from(parseCandidate('peer-disabled:peer-first-child:group-hover:group-focus:focus:hover:space-x-4', { tailwindConfig: { separator: ':' } }))[0]
let candidate = Array.from(
parseCandidate('peer-disabled:peer-first-child:group-hover:group-focus:focus:hover:space-x-4', {
tailwindConfig: { separator: ':' },
})
)[0]
let variants = [
'&:hover', // Hover
'&:focus', // Focus
@ -194,7 +226,9 @@ it('should be possible to handle a complex utility', () => {
describe('real examples', () => {
it('example a', () => {
let selector = '.placeholder-red-500::placeholder'
let candidate = Array.from(parseCandidate('hover:placeholder-red-500', { tailwindConfig: { separator: ':' } }))[0]
let candidate = Array.from(
parseCandidate('hover:placeholder-red-500', { tailwindConfig: { separator: ':' } })
)[0]
let variants = ['&:hover']
@ -205,7 +239,9 @@ describe('real examples', () => {
it('example b', () => {
let selector = '.space-x-4 > :not([hidden]) ~ :not([hidden])'
let candidate = Array.from(parseCandidate('group-hover:hover:space-x-4', { tailwindConfig: { separator: ':' } }))[0]
let candidate = Array.from(
parseCandidate('group-hover:hover:space-x-4', { tailwindConfig: { separator: ':' } })
)[0]
let variants = ['&:hover', ':merge(.group):hover &']
@ -216,7 +252,9 @@ describe('real examples', () => {
it('should work for group-hover and class dark mode combinations', () => {
let selector = '.text-center'
let candidate = Array.from(parseCandidate('dark:group-hover:text-center', { tailwindConfig: { separator: ':' } }))[0]
let candidate = Array.from(
parseCandidate('dark:group-hover:text-center', { tailwindConfig: { separator: ':' } })
)[0]
let variants = [':merge(.group):hover &', '.dark &']
@ -227,7 +265,9 @@ describe('real examples', () => {
it('should work for group-hover and class dark mode combinations (reversed)', () => {
let selector = '.text-center'
let candidate = Array.from(parseCandidate('group-hover:dark:text-center', { tailwindConfig: { separator: ':' } }))[0]
let candidate = Array.from(
parseCandidate('group-hover:dark:text-center', { tailwindConfig: { separator: ':' } })
)[0]
let variants = ['.dark &', ':merge(.group):hover &']
@ -239,7 +279,9 @@ describe('real examples', () => {
describe('prose-headings', () => {
it('should be possible to use hover:prose-headings:text-center', () => {
let selector = '.text-center'
let candidate = Array.from(parseCandidate('hover:prose-headings:text-center', { tailwindConfig: { separator: ':' } }))[0]
let candidate = Array.from(
parseCandidate('hover:prose-headings:text-center', { tailwindConfig: { separator: ':' } })
)[0]
let variants = [':where(&) :is(h1, h2, h3, h4)', '&:hover']
@ -250,7 +292,9 @@ describe('real examples', () => {
it('should be possible to use prose-headings:hover:text-center', () => {
let selector = '.text-center'
let candidate = Array.from(parseCandidate('prose-headings:hover:text-center', { tailwindConfig: { separator: ':' } }))[0]
let candidate = Array.from(
parseCandidate('prose-headings:hover:text-center', { tailwindConfig: { separator: ':' } })
)[0]
let variants = ['&:hover', ':where(&) :is(h1, h2, h3, h4)']
@ -277,7 +321,7 @@ describe('pseudo elements', () => {
`('should translate "$before" into "$after"', ({ before, after }) => {
let result = finalizeSelector(formatVariantSelector('&', before), {
selector: '.a',
candidate: Array.from(parseCandidate('a', { tailwindConfig: { separator: ':'} }))[0],
candidate: Array.from(parseCandidate('a', { tailwindConfig: { separator: ':' } }))[0],
})
expect(result).toEqual(after.replace('&', '.a'))