diff --git a/resolveConfig.js b/resolveConfig.js index 2b8d5be2c9de..a9db71f4641e 100644 --- a/resolveConfig.js +++ b/resolveConfig.js @@ -2,10 +2,7 @@ const resolveConfigObjects = require('./lib/util/resolveConfig').default const getAllConfigs = require('./lib/util/getAllConfigs').default module.exports = function resolveConfig(...configs) { - // Make sure the correct config object is mutated to include flagged config plugins. - // This sucks, refactor soon. - const firstConfigWithPlugins = configs.find(c => Array.isArray(c.plugins)) || configs[0] - const [, ...defaultConfigs] = getAllConfigs(firstConfigWithPlugins) + const [, ...defaultConfigs] = getAllConfigs(configs[0]) return resolveConfigObjects([...configs, ...defaultConfigs]) } diff --git a/src/flagged/darkModeVariant.js b/src/flagged/darkModeVariant.js index 7d550c6f9663..b68ae116e45a 100644 --- a/src/flagged/darkModeVariant.js +++ b/src/flagged/darkModeVariant.js @@ -1,4 +1,3 @@ -import buildSelectorVariant from '../util/buildSelectorVariant' import defaultConfig from '../../defaultConfig' export default { @@ -11,42 +10,4 @@ export default { placeholderColor: [...defaultConfig.variants.placeholderColor, 'dark'], textColor: [...defaultConfig.variants.textColor, 'dark'], }, - plugins: [ - function({ addVariant, config, postcss, prefix }) { - addVariant('dark', ({ container, separator, modifySelectors }) => { - if (config('dark') === 'media') { - const modified = modifySelectors(({ selector }) => { - return buildSelectorVariant(selector, 'dark', separator, message => { - throw container.error(message) - }) - }) - const mediaQuery = postcss.atRule({ - name: 'media', - params: '(prefers-color-scheme: dark)', - }) - mediaQuery.append(modified) - container.append(mediaQuery) - return container - } - - if (config('dark') === 'class') { - const modified = modifySelectors(({ selector }) => { - return buildSelectorVariant(selector, 'dark', separator, message => { - throw container.error(message) - }) - }) - - modified.walkRules(rule => { - rule.selectors = rule.selectors.map(selector => { - return `${prefix('.dark')} ${selector}` - }) - }) - - return modified - } - - throw new Error("The `dark` config option must be either 'media' or 'class'.") - }) - }, - ], } diff --git a/src/flagged/darkModeVariantPlugin.js b/src/flagged/darkModeVariantPlugin.js new file mode 100644 index 000000000000..9550e2c7a401 --- /dev/null +++ b/src/flagged/darkModeVariantPlugin.js @@ -0,0 +1,38 @@ +import buildSelectorVariant from '../util/buildSelectorVariant' + +export default function({ addVariant, config, postcss, prefix }) { + addVariant('dark', ({ container, separator, modifySelectors }) => { + if (config('dark') === 'media') { + const modified = modifySelectors(({ selector }) => { + return buildSelectorVariant(selector, 'dark', separator, message => { + throw container.error(message) + }) + }) + const mediaQuery = postcss.atRule({ + name: 'media', + params: '(prefers-color-scheme: dark)', + }) + mediaQuery.append(modified) + container.append(mediaQuery) + return container + } + + if (config('dark') === 'class') { + const modified = modifySelectors(({ selector }) => { + return buildSelectorVariant(selector, 'dark', separator, message => { + throw container.error(message) + }) + }) + + modified.walkRules(rule => { + rule.selectors = rule.selectors.map(selector => { + return `${prefix('.dark')} ${selector}` + }) + }) + + return modified + } + + throw new Error("The `dark` config option must be either 'media' or 'class'.") + }) +} diff --git a/src/processTailwindFeatures.js b/src/processTailwindFeatures.js index c6a388e84f18..a93ad611db0a 100644 --- a/src/processTailwindFeatures.js +++ b/src/processTailwindFeatures.js @@ -14,7 +14,9 @@ import purgeUnusedStyles from './lib/purgeUnusedStyles' import corePlugins from './corePlugins' import processPlugins from './util/processPlugins' import cloneNodes from './util/cloneNodes' -import { issueFlagNotices } from './featureFlags.js' +import { issueFlagNotices, flagEnabled } from './featureFlags.js' + +import darkModeVariantPlugin from './flagged/darkModeVariantPlugin' import hash from 'object-hash' @@ -31,7 +33,15 @@ export default function(getConfig) { if (configChanged) { issueFlagNotices(config) - processedPlugins = processPlugins([...corePlugins(config), ...config.plugins], config) + processedPlugins = processPlugins( + [ + ...corePlugins(config), + ...[flagEnabled(config, 'darkModeVariant') ? darkModeVariantPlugin : () => {}], + ...config.plugins, + ], + config + ) + getProcessedPlugins = function() { return { ...processedPlugins, diff --git a/src/util/getAllConfigs.js b/src/util/getAllConfigs.js index cc3c76831ef2..da7b9b5f37a0 100644 --- a/src/util/getAllConfigs.js +++ b/src/util/getAllConfigs.js @@ -32,9 +32,6 @@ export default function getAllConfigs(config) { if (flagEnabled(config, 'darkModeVariant')) { configs.unshift(darkModeVariant) - if (Array.isArray(config.plugins)) { - config.plugins = [...darkModeVariant.plugins, ...config.plugins] - } } return [config, ...configs]