diff --git a/src/class-names/getUtilityConfigMap.js b/src/class-names/getUtilityConfigMap.js index 26ccac7..d7aaf1f 100644 --- a/src/class-names/getUtilityConfigMap.js +++ b/src/class-names/getUtilityConfigMap.js @@ -18,7 +18,12 @@ const proxyHandler = (base = []) => ({ }, }) -export async function getUtilityConfigMap({ cwd, resolvedConfig, postcss }) { +export async function getUtilityConfigMap({ + cwd, + resolvedConfig, + postcss, + browserslist, +}) { const builtInPlugins = await getBuiltInPlugins({ cwd, resolvedConfig }) const userPlugins = Array.isArray(resolvedConfig.plugins) ? resolvedConfig.plugins @@ -31,6 +36,7 @@ export async function getUtilityConfigMap({ cwd, resolvedConfig, postcss }) { ;[...builtInPlugins, ...userPlugins].forEach((plugin) => { runPlugin(plugin, { postcss, + browserslist, config: proxiedConfig, addUtilities: (utilities) => { Object.keys(utilities).forEach((util) => { diff --git a/src/class-names/getVariants.js b/src/class-names/getVariants.js index 9688ef4..da2488e 100644 --- a/src/class-names/getVariants.js +++ b/src/class-names/getVariants.js @@ -1,7 +1,12 @@ import semver from 'semver' import { runPlugin } from './runPlugin' -export default function getVariants({ config, version, postcss }) { +export default function getVariants({ + config, + version, + postcss, + browserslist, +}) { let variants = ['responsive', 'hover'] semver.gte(version, '0.3.0') && variants.push('focus', 'group-hover') semver.gte(version, '0.5.0') && variants.push('active') @@ -16,6 +21,7 @@ export default function getVariants({ config, version, postcss }) { plugins.forEach((plugin) => { runPlugin(plugin, { postcss, + browserslist, config, addVariant: (name) => { variants.push(name) diff --git a/src/class-names/index.js b/src/class-names/index.js index c18c93a..2aaec68 100644 --- a/src/class-names/index.js +++ b/src/class-names/index.js @@ -43,6 +43,7 @@ export default async function getClassNames( let configPath let postcss let tailwindcss + let browserslist let version configPath = await globSingle(CONFIG_GLOB, { @@ -58,6 +59,11 @@ export default async function getClassNames( tailwindcss = importFrom(configDir, 'tailwindcss') version = importFrom(configDir, 'tailwindcss/package.json').version + try { + // this is not required + browserslist = importFrom(configDir, 'browserslist') + } catch (_) {} + const sepLocation = semver.gte(version, '0.99.0') ? ['separator'] : ['options', 'separator'] @@ -103,11 +109,12 @@ export default async function getClassNames( classNames: await extractClassNames(ast), dependencies: hook.deps, plugins: getPlugins(config), - variants: getVariants({ config, version, postcss }), + variants: getVariants({ config, version, postcss, browserslist }), utilityConfigMap: await getUtilityConfigMap({ cwd: configDir, resolvedConfig, postcss, + browserslist, }), } } diff --git a/src/class-names/runPlugin.js b/src/class-names/runPlugin.js index 059b9a9..c53f4ce 100644 --- a/src/class-names/runPlugin.js +++ b/src/class-names/runPlugin.js @@ -1,7 +1,11 @@ import dlv from 'dlv' export function runPlugin(plugin, params = {}) { - const { config, ...rest } = params + const { config, browserslist, ...rest } = params + + const browserslistTarget = + browserslist && browserslist().includes('ie 11') ? 'ie11' : 'relaxed' + try { ;(plugin.handler || plugin)({ addUtilities: () => {}, @@ -13,6 +17,16 @@ export function runPlugin(plugin, params = {}) { theme: (path, defaultValue) => dlv(config, `theme.${path}`, defaultValue), variants: () => [], config: (path, defaultValue) => dlv(config, path, defaultValue), + target: (path) => { + if (typeof config.target === 'string') { + return config.target === 'browserslist' + ? browserslistTarget + : config.target + } + const [defaultTarget, targetOverrides] = dlv(config, 'target') + const target = dlv(targetOverrides, path, defaultTarget) + return target === 'browserslist' ? browserslistTarget : target + }, ...rest, }) } catch (_) {}