WIP

Author: adamwathan

package.json

@@ -56,7 +56,8 @@
     "postcss-selector-parser": "^6.0.0",
     "pretty-hrtime": "^1.0.3",
     "reduce-css-calc": "^2.1.6",
-    "resolve": "^1.14.2"
+    "resolve": "^1.14.2",
+    "specificity": "^0.4.1"
   },
   "browserslist": [
     "> 1%"

scripts/build.js

@@ -39,10 +39,10 @@ function buildDistFile(filename) {
 console.info('Building Tailwind!')
 
 Promise.all([
-  buildDistFile('base'),
-  buildDistFile('components'),
+  // buildDistFile('base'),
+  // buildDistFile('components'),
   buildDistFile('utilities'),
-  buildDistFile('tailwind'),
+  // buildDistFile('tailwind'),
 ]).then(() => {
   console.log('Finished Building Tailwind!')
 })

src/processTailwindFeatures.js

@@ -11,6 +11,8 @@ import substituteClassApplyAtRules from './lib/substituteClassApplyAtRules'
 import corePlugins from './corePlugins'
 import processPlugins from './util/processPlugins'
 
+import { calculate } from 'specificity'
+
 export default function(getConfig) {
   return function(css) {
     const config = getConfig()
@@ -20,6 +22,34 @@ export default function(getConfig) {
       substituteTailwindAtRules(config, processedPlugins),
       evaluateTailwindFunctions(config),
       substituteVariantsAtRules(config, processedPlugins),
+      function(css) {
+        function buildSpecificityTable(css) {
+          const classTable = {}
+
+          css.walkRules(rule => {
+            rule.selectors.forEach(selector => {
+              if (!_.has(classTable, selector)) {
+                classTable[selector] = calculate(selector)[0].specificityArray[2]
+              }
+            })
+          })
+
+          return classTable
+        }
+
+        const specificityTable = buildSpecificityTable(css)
+        const maxSpecificity = Math.max(
+          ...Object.entries(specificityTable).map(([key, value]) => value)
+        )
+
+        css.walkRules(rule => {
+          rule.selectors = rule.selectors.map(selector => {
+            const multiplier = maxSpecificity - specificityTable[selector]
+
+            return `${':root'.repeat(multiplier)} ${selector}`.trim()
+          })
+        })
+      },
       substituteResponsiveAtRules(config),
       substituteScreenAtRules(config),
       substituteClassApplyAtRules(config, processedPlugins.utilities),

yarn.lock

@@ -4803,6 +4803,11 @@ source-map@^0.7.3:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
 
+specificity@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/specificity/-/specificity-0.4.1.tgz#aab5e645012db08ba182e151165738d00887b019"
+  integrity sha512-1klA3Gi5PD1Wv9Q0wUoOQN1IWAuPu0D1U03ThXTr0cJ20+/iq2tHSDnK7Kk/0LXJ1ztUB2/1Os0wKmfyNgUQfg==
+
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"