| 1 | import log from '../util/log'
|
|---|
| 2 |
|
|---|
| 3 | export default function normalizeTailwindDirectives(root) {
|
|---|
| 4 | let tailwindDirectives = new Set()
|
|---|
| 5 | let layerDirectives = new Set()
|
|---|
| 6 | let applyDirectives = new Set()
|
|---|
| 7 |
|
|---|
| 8 | root.walkAtRules((atRule) => {
|
|---|
| 9 | if (atRule.name === 'apply') {
|
|---|
| 10 | applyDirectives.add(atRule)
|
|---|
| 11 | }
|
|---|
| 12 |
|
|---|
| 13 | if (atRule.name === 'import') {
|
|---|
| 14 | if (atRule.params === '"tailwindcss/base"' || atRule.params === "'tailwindcss/base'") {
|
|---|
| 15 | atRule.name = 'tailwind'
|
|---|
| 16 | atRule.params = 'base'
|
|---|
| 17 | } else if (
|
|---|
| 18 | atRule.params === '"tailwindcss/components"' ||
|
|---|
| 19 | atRule.params === "'tailwindcss/components'"
|
|---|
| 20 | ) {
|
|---|
| 21 | atRule.name = 'tailwind'
|
|---|
| 22 | atRule.params = 'components'
|
|---|
| 23 | } else if (
|
|---|
| 24 | atRule.params === '"tailwindcss/utilities"' ||
|
|---|
| 25 | atRule.params === "'tailwindcss/utilities'"
|
|---|
| 26 | ) {
|
|---|
| 27 | atRule.name = 'tailwind'
|
|---|
| 28 | atRule.params = 'utilities'
|
|---|
| 29 | } else if (
|
|---|
| 30 | atRule.params === '"tailwindcss/screens"' ||
|
|---|
| 31 | atRule.params === "'tailwindcss/screens'" ||
|
|---|
| 32 | atRule.params === '"tailwindcss/variants"' ||
|
|---|
| 33 | atRule.params === "'tailwindcss/variants'"
|
|---|
| 34 | ) {
|
|---|
| 35 | atRule.name = 'tailwind'
|
|---|
| 36 | atRule.params = 'variants'
|
|---|
| 37 | }
|
|---|
| 38 | }
|
|---|
| 39 |
|
|---|
| 40 | if (atRule.name === 'tailwind') {
|
|---|
| 41 | if (atRule.params === 'screens') {
|
|---|
| 42 | atRule.params = 'variants'
|
|---|
| 43 | }
|
|---|
| 44 | tailwindDirectives.add(atRule.params)
|
|---|
| 45 | }
|
|---|
| 46 |
|
|---|
| 47 | if (['layer', 'responsive', 'variants'].includes(atRule.name)) {
|
|---|
| 48 | if (['responsive', 'variants'].includes(atRule.name)) {
|
|---|
| 49 | log.warn(`${atRule.name}-at-rule-deprecated`, [
|
|---|
| 50 | `The \`@${atRule.name}\` directive has been deprecated in Tailwind CSS v3.0.`,
|
|---|
| 51 | `Use \`@layer utilities\` or \`@layer components\` instead.`,
|
|---|
| 52 | 'https://tailwindcss.com/docs/upgrade-guide#replace-variants-with-layer',
|
|---|
| 53 | ])
|
|---|
| 54 | }
|
|---|
| 55 | layerDirectives.add(atRule)
|
|---|
| 56 | }
|
|---|
| 57 | })
|
|---|
| 58 |
|
|---|
| 59 | if (
|
|---|
| 60 | !tailwindDirectives.has('base') ||
|
|---|
| 61 | !tailwindDirectives.has('components') ||
|
|---|
| 62 | !tailwindDirectives.has('utilities')
|
|---|
| 63 | ) {
|
|---|
| 64 | for (let rule of layerDirectives) {
|
|---|
| 65 | if (rule.name === 'layer' && ['base', 'components', 'utilities'].includes(rule.params)) {
|
|---|
| 66 | if (!tailwindDirectives.has(rule.params)) {
|
|---|
| 67 | throw rule.error(
|
|---|
| 68 | `\`@layer ${rule.params}\` is used but no matching \`@tailwind ${rule.params}\` directive is present.`
|
|---|
| 69 | )
|
|---|
| 70 | }
|
|---|
| 71 | } else if (rule.name === 'responsive') {
|
|---|
| 72 | if (!tailwindDirectives.has('utilities')) {
|
|---|
| 73 | throw rule.error('`@responsive` is used but `@tailwind utilities` is missing.')
|
|---|
| 74 | }
|
|---|
| 75 | } else if (rule.name === 'variants') {
|
|---|
| 76 | if (!tailwindDirectives.has('utilities')) {
|
|---|
| 77 | throw rule.error('`@variants` is used but `@tailwind utilities` is missing.')
|
|---|
| 78 | }
|
|---|
| 79 | }
|
|---|
| 80 | }
|
|---|
| 81 | }
|
|---|
| 82 |
|
|---|
| 83 | return { tailwindDirectives, applyDirectives }
|
|---|
| 84 | }
|
|---|