Add support for browserslist as target

Author: adamwathan

__tests__/targetMode.test.js

@@ -5,6 +5,7 @@ import postcss from 'postcss'
 import tailwind from '../src/index'
 import config from '../stubs/defaultConfig.stub.js'
 import processPlugins from '../src/util/processPlugins'
+import runInTempDirectory from '../jest/runInTempDirectory'
 
 function css(nodes) {
   return postcss.root({ nodes }).toString()
@@ -81,3 +82,70 @@ test('plugins can request the target for a specific plugin key', () => {
     }
     `)
 })
+
+test('browserslist target is translated to a target preset', () => {
+  return runInTempDirectory(() => {
+    fs.writeFileSync(
+      path.resolve('./.browserslistrc'),
+      `
+      last 2 versions
+      IE 11
+      `
+    )
+    const { utilities } = processPlugins(
+      [
+        function({ addUtilities, target }) {
+          addUtilities({
+            '.testA': {
+              target: target('testPluginA'),
+            },
+          })
+        },
+        function({ addUtilities, target }) {
+          addUtilities({
+            '.testB': {
+              target: target('testPluginB'),
+            },
+          })
+        },
+        function({ addUtilities, target }) {
+          addUtilities({
+            '.testC': {
+              target: target('testPluginC'),
+            },
+          })
+        },
+      ],
+      {
+        ...config,
+        target: [
+          'browserslist',
+          {
+            testPluginA: 'modern',
+            testPluginB: 'relaxed',
+          },
+        ],
+      }
+    )
+
+    expect(css(utilities)).toMatchCss(`
+          @variants {
+            .testA {
+              target: modern
+            }
+          }
+          @variants {
+            .testB {
+              target: relaxed
+            }
+          }
+          @variants {
+            .testC {
+              target: ie11
+            }
+          }
+    `)
+
+    return Promise.resolve()
+  })
+})

package.json

@@ -43,6 +43,7 @@
   "dependencies": {
     "@fullhuman/postcss-purgecss": "^2.1.2",
     "autoprefixer": "^9.4.5",
+    "browserslist": "^4.12.0",
     "bytes": "^3.0.0",
     "chalk": "^4.0.0",
     "color": "^3.1.2",

src/util/processPlugins.js

@@ -1,5 +1,6 @@
 import _ from 'lodash'
 import postcss from 'postcss'
+import browserslist from 'browserslist'
 import Node from 'postcss/lib/node'
 import isFunction from 'lodash/isFunction'
 import escapeClassName from '../util/escapeClassName'
@@ -27,6 +28,7 @@ export default function(plugins, config) {
     return prefixSelector(config.prefix, selector)
   }
   const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue)
+  const browserslistTarget = browserslist().includes('ie 11') ? 'ie11' : 'relaxed'
 
   plugins.forEach(plugin => {
     if (plugin.__isOptionsFunction) {
@@ -53,7 +55,9 @@ export default function(plugins, config) {
 
         const [defaultTarget, targetOverrides] = getConfigValue('target')
 
-        return _.get(targetOverrides, path, defaultTarget)
+        const target = _.get(targetOverrides, path, defaultTarget)
+
+        return target === 'browserslist' ? browserslistTarget : target
       },
       e: escapeClassName,
       prefix: applyConfiguredPrefix,

yarn.lock

@@ -1501,6 +1501,16 @@ browserslist@^4.11.1, browserslist@^4.8.3, browserslist@^4.9.1:
     node-releases "^1.1.53"
     pkg-up "^2.0.0"
 
+browserslist@^4.12.0:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.12.0.tgz#06c6d5715a1ede6c51fc39ff67fd647f740b656d"
+  integrity sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==
+  dependencies:
+    caniuse-lite "^1.0.30001043"
+    electron-to-chromium "^1.3.413"
+    node-releases "^1.1.53"
+    pkg-up "^2.0.0"
+
 bser@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.0.tgz#65fc784bf7f87c009b973c12db6546902fa9c7b5"
@@ -1553,6 +1563,11 @@ caniuse-lite@^1.0.30001038, caniuse-lite@^1.0.30001039:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001042.tgz#c91ec21ec2d270bd76dbc2ce261260c292b8c93c"
   integrity sha512-igMQ4dlqnf4tWv0xjaaE02op9AJ2oQzXKjWf4EuAHFN694Uo9/EfPVIPJcmn2WkU9RqozCxx5e2KPcVClHDbDw==
 
+caniuse-lite@^1.0.30001043:
+  version "1.0.30001048"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001048.tgz#4bb4f1bc2eb304e5e1154da80b93dee3f1cf447e"
+  integrity sha512-g1iSHKVxornw0K8LG9LLdf+Fxnv7T1Z+mMsf0/YYLclQX4Cd522Ap0Lrw6NFqHgezit78dtyWxzlV2Xfc7vgRg==
+
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -1996,6 +2011,11 @@ electron-to-chromium@^1.3.390:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.410.tgz#00e0ec61c22933daa8b4de172c03932678783adc"
   integrity sha512-DbCBdwtARI0l3e3m6ZIxVaTNahb6dSsmGjuag/twiVcWuM4MSpL5IfsJsJSyqLqxosE/m0CXlZaBmxegQW/dAg==
 
+electron-to-chromium@^1.3.413:
+  version "1.3.421"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.421.tgz#4abfe7e49070b5b437ec2ce442543add8eb66800"
+  integrity sha512-ogxgmvHGfDuLA+GtgfK0jkFWlBb4MCZK2U1MM+l98sf4U3Ixtrfw1iC9w4mQqNvo+lHgM4pR62TqoT4QrvKJCw==
+
 emoji-regex@^7.0.1:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"