add target plugin helper

Author: Brad Cornes

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) => {

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)

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,
       }),
     }
   }

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 (_) {}