Skip to content

Commit

Permalink
Fix issue with returning postcss nodes in addVariant
Browse files Browse the repository at this point in the history
It’s not a supported use case but it didn’t use to break so let’s just fail silently
  • Loading branch information
thecrypticace committed Jun 12, 2022
1 parent a9c7e52 commit adf22c3
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 2 deletions.
7 changes: 5 additions & 2 deletions src/lib/setupContextUtils.js
Expand Up @@ -465,11 +465,14 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
}

if (Array.isArray(result)) {
return result.map((variant) => parseVariant(variant))
return result
.filter((variant) => typeof variant === 'string')
.map((variant) => parseVariant(variant))
}

// result may be undefined with legacy variants that use APIs like `modifySelectors`
return result && parseVariant(result)(api)
// result may also be a postcss node if someone was returning the result from `modifySelectors`
return result && typeof result === 'string' && parseVariant(result)(api)
}
}

Expand Down
48 changes: 48 additions & 0 deletions tests/variants.test.js
Expand Up @@ -461,6 +461,54 @@ test('before and after variants are a bit special, and forced to the end (2)', (
})
})

test('returning non-strings and non-selectors in addVariant', () => {
/** @type {import('../types/config').Config} */
let config = {
content: [
{
raw: html`
<div class="peer-aria-expanded:text-center"></div>
<div class="peer-aria-expanded-2:text-center"></div>
`,
},
],
plugins: [
function ({ addVariant, e }) {
addVariant('peer-aria-expanded', ({ modifySelectors, separator }) =>
// Returning anything other string | string[] | undefined here is not supported
// But we're trying to be lenient here and just throw it out
modifySelectors(
({ className }) =>
`.peer[aria-expanded="true"] ~ .${e(`peer-aria-expanded${separator}${className}`)}`
)
)

addVariant('peer-aria-expanded-2', ({ modifySelectors, separator }) => {
let nodes = modifySelectors(
({ className }) =>
`.peer[aria-expanded="false"] ~ .${e(`peer-aria-expanded${separator}${className}`)}`
)

return [
// Returning anything other than strings here is not supported
// But we're trying to be lenient here and just throw it out
nodes,
'.peer[aria-expanded="false"] ~ &',
]
})
},
],
}

return run('@tailwind components;@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
.peer[aria-expanded='true'] ~ .peer-aria-expanded\:text-center {
text-align: center;
}
`)
})
})

it('should not generate variants of user css if it is not inside a layer', () => {
let config = {
content: [{ raw: html`<div class="hover:foo"></div>` }],
Expand Down

0 comments on commit adf22c3

Please sign in to comment.