diff --git a/src/index.js b/src/index.js index 0cba8bd75a73..9e9e291eb797 100644 --- a/src/index.js +++ b/src/index.js @@ -13,7 +13,21 @@ module.exports = function tailwindcss(configOrPath) { return root }, function (root, result) { - processTailwindFeatures(setupTrackingContext(configOrPath))(root, result) + let context = setupTrackingContext(configOrPath) + + if (root.type === 'document') { + let roots = root.nodes.filter((node) => node.type === 'root') + + for (const root of roots) { + if (root.type === 'root') { + processTailwindFeatures(context)(root, result) + } + } + + return + } + + processTailwindFeatures(context)(root, result) }, env.DEBUG && function (root) { diff --git a/tests/variants.test.js b/tests/variants.test.js index 972801e2b700..3f3eea73a49d 100644 --- a/tests/variants.test.js +++ b/tests/variants.test.js @@ -1,5 +1,6 @@ import fs from 'fs' import path from 'path' +import postcss from 'postcss' import { run, css, html, defaults } from './util/run' @@ -568,3 +569,37 @@ test('The visited variant removes opacity support', () => { `) }) }) + +it('appends variants to the correct place when using postcss documents', () => { + let config = { + content: [{ raw: html`
` }], + plugins: [], + corePlugins: { preflight: false }, + } + + const doc = postcss.document() + doc.append(postcss.parse(`a {}`)) + doc.append(postcss.parse(`@tailwind base`)) + doc.append(postcss.parse(`@tailwind utilities`)) + doc.append(postcss.parse(`b {}`)) + + const result = doc.toResult() + + return run(result, config).then((result) => { + return expect(result.css).toMatchFormattedCss(css` + a { + } + ${defaults} + .underline { + text-decoration-line: underline; + } + @media (min-width: 640px) { + .sm\:underline { + text-decoration-line: underline; + } + } + b { + } + `) + }) +})