Repository: maizzle/framework
Pull request #277 (2020-08-20 12:31:49)

Update Tailwind CSS to 1.7.x


Patch:
diff --git a/package-lock.json b/package-lock.json
index 727e47b..a5111b4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1070,25 +1070,25 @@
       },
       "dependencies": {
         "browserslist": {
-          "version": "4.13.0",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.13.0.tgz",
-          "integrity": "sha512-MINatJ5ZNrLnQ6blGvePd/QOz9Xtu+Ne+x29iQSCHfkU5BugKVJwZKn/iiL8UbpIpa3JhviKjz+XxMo0m2caFQ==",
+          "version": "4.14.0",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.0.tgz",
+          "integrity": "sha512-pUsXKAF2lVwhmtpeA3LJrZ76jXuusrNyhduuQs7CDFf9foT4Y38aQOserd2lMe5DSSrjf3fx34oHwryuvxAUgQ==",
           "requires": {
-            "caniuse-lite": "^1.0.30001093",
-            "electron-to-chromium": "^1.3.488",
-            "escalade": "^3.0.1",
-            "node-releases": "^1.1.58"
+            "caniuse-lite": "^1.0.30001111",
+            "electron-to-chromium": "^1.3.523",
+            "escalade": "^3.0.2",
+            "node-releases": "^1.1.60"
           }
         },
         "caniuse-lite": {
-          "version": "1.0.30001110",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001110.tgz",
-          "integrity": "sha512-KqJWeat4rhSHF0ito4yz9q/JuZHkvn71SsBnxge4azjPDbowIjOUnS8i1xpKGxZxU6BFiPqO2hSV2eiCpFQVRw=="
+          "version": "1.0.30001116",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001116.tgz",
+          "integrity": "sha512-f2lcYnmAI5Mst9+g0nkMIznFGsArRmZ0qU+dnq8l91hymdc2J3SFbiPhOJEeDqC1vtE8nc1qNQyklzB8veJefQ=="
         },
         "electron-to-chromium": {
-          "version": "1.3.518",
-          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.518.tgz",
-          "integrity": "sha512-IspiwXYDKZMxo+qc3Vof4WtwbG9BMDbJfati8PYj7uS4DJmJ67pwjCKZxlTBSAuCZSMcbRnj2Xz2H14uiKT7bQ=="
+          "version": "1.3.539",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.539.tgz",
+          "integrity": "sha512-rM0LWDIstdqfaRUADZetNrL6+zd/0NBmavbMEhBXgc2u/CC1d1GaDyN5hho29fFvBiOVFwrSWZkzmNcZnCEDog=="
         },
         "node-releases": {
           "version": "1.1.60",
@@ -8079,6 +8079,11 @@
         }
       }
     },
+    "object-hash": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.0.3.tgz",
+      "integrity": "sha512-JPKn0GMu+Fa3zt3Bmr66JhokJU5BaNBIh4ZeTlaCBzrBsOeXzwcKKAK1tbLiPKgvwmPXsDvvLHoWh5Bm7ofIYg=="
+    },
     "object-inspect": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.8.0.tgz",
@@ -10961,9 +10966,9 @@
       }
     },
     "tailwindcss": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.6.2.tgz",
-      "integrity": "sha512-Cpa0kElG8Sg5sJSvTYi2frmIQZq0w37RLNNrYyy/W6HIWKspqSdTfb9tIN6X1gm4KV5a+TE/n7EKmn5Q9C7EUQ==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.7.2.tgz",
+      "integrity": "sha512-O1RQtVpE0KbyZDZDBjCKpph6WOROijC2qc0iPsPpft9R43lhvGDL7vJXGuhb2NVXQew9FVPW+6G61f8naJnyCg==",
       "requires": {
         "@fullhuman/postcss-purgecss": "^2.1.2",
         "autoprefixer": "^9.4.5",
@@ -10976,11 +10981,13 @@
         "lodash": "^4.17.15",
         "node-emoji": "^1.8.1",
         "normalize.css": "^8.0.1",
+        "object-hash": "^2.0.3",
         "postcss": "^7.0.11",
         "postcss-functions": "^3.0.0",
         "postcss-js": "^2.0.0",
         "postcss-nested": "^4.1.1",
         "postcss-selector-parser": "^6.0.0",
+        "postcss-value-parser": "^4.1.0",
         "pretty-hrtime": "^1.0.3",
         "reduce-css-calc": "^2.1.6",
         "resolve": "^1.14.2"
@@ -10996,20 +11003,20 @@
           }
         },
         "browserslist": {
-          "version": "4.13.0",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.13.0.tgz",
-          "integrity": "sha512-MINatJ5ZNrLnQ6blGvePd/QOz9Xtu+Ne+x29iQSCHfkU5BugKVJwZKn/iiL8UbpIpa3JhviKjz+XxMo0m2caFQ==",
+          "version": "4.14.0",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.0.tgz",
+          "integrity": "sha512-pUsXKAF2lVwhmtpeA3LJrZ76jXuusrNyhduuQs7CDFf9foT4Y38aQOserd2lMe5DSSrjf3fx34oHwryuvxAUgQ==",
           "requires": {
-            "caniuse-lite": "^1.0.30001093",
-            "electron-to-chromium": "^1.3.488",
-            "escalade": "^3.0.1",
-            "node-releases": "^1.1.58"
+            "caniuse-lite": "^1.0.30001111",
+            "electron-to-chromium": "^1.3.523",
+            "escalade": "^3.0.2",
+            "node-releases": "^1.1.60"
           }
         },
         "caniuse-lite": {
-          "version": "1.0.30001110",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001110.tgz",
-          "integrity": "sha512-KqJWeat4rhSHF0ito4yz9q/JuZHkvn71SsBnxge4azjPDbowIjOUnS8i1xpKGxZxU6BFiPqO2hSV2eiCpFQVRw=="
+          "version": "1.0.30001116",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001116.tgz",
+          "integrity": "sha512-f2lcYnmAI5Mst9+g0nkMIznFGsArRmZ0qU+dnq8l91hymdc2J3SFbiPhOJEeDqC1vtE8nc1qNQyklzB8veJefQ=="
         },
         "chalk": {
           "version": "4.1.0",
@@ -11034,9 +11041,9 @@
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
         },
         "electron-to-chromium": {
-          "version": "1.3.518",
-          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.518.tgz",
-          "integrity": "sha512-IspiwXYDKZMxo+qc3Vof4WtwbG9BMDbJfati8PYj7uS4DJmJ67pwjCKZxlTBSAuCZSMcbRnj2Xz2H14uiKT7bQ=="
+          "version": "1.3.539",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.539.tgz",
+          "integrity": "sha512-rM0LWDIstdqfaRUADZetNrL6+zd/0NBmavbMEhBXgc2u/CC1d1GaDyN5hho29fFvBiOVFwrSWZkzmNcZnCEDog=="
         },
         "fs-extra": {
           "version": "8.1.0",
@@ -11071,6 +11078,11 @@
           "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.60.tgz",
           "integrity": "sha512-gsO4vjEdQaTusZAEebUWp2a5d7dF5DYoIpDG7WySnk7BuZDW+GPpHXoXXuYawRBr/9t5q54tirPz79kFIWg4dA=="
         },
+        "postcss-value-parser": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+          "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
+        },
         "resolve": {
           "version": "1.17.0",
           "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
diff --git a/package.json b/package.json
index d310ed6..0e32570 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,7 @@
     "prevent-widows": "^1.0.2",
     "query-string": "^6.12.1",
     "string-strip-html": "^5.0.0",
-    "tailwindcss": "^1.4.6"
+    "tailwindcss": "^1.7.0"
   },
   "devDependencies": {
     "ava": "^3.8.2",
diff --git a/src/generators/tailwind.js b/src/generators/tailwind.js
index ab81eb0..6668aad 100644
--- a/src/generators/tailwind.js
+++ b/src/generators/tailwind.js
@@ -48,7 +48,10 @@ module.exports = {
     const mergeLonghandPlugin = maizzleConfig.env === 'local' ? () => {} : mergeLonghand()
 
     const tailwindPlugin = isEmptyObject(tailwindConfigObject) ? tailwind() : tailwind({
-      target: 'ie11',
+      important: true,
+      future: {
+        removeDeprecatedGapUtilities: true
+      },
       ...tailwindConfigObject,
       purge: {
         enabled: false


Test patch:
diff --git a/test/expected/email-comb.html b/test/expected/email-comb.html
index 4c1f224..952d98b 100644
--- a/test/expected/email-comb.html
+++ b/test/expected/email-comb.html
@@ -2,10 +2,10 @@
 <html>
 <head>
     <style>.w-full {
-  width: 100%
+  width: 100% !important
 }
 .text-center {
-  text-align: center
+  text-align: center !important
 }
       /*
         @tab Page
diff --git a/test/expected/inline.html b/test/expected/inline.html
index bcc76e4..7a097a7 100644
--- a/test/expected/inline.html
+++ b/test/expected/inline.html
@@ -3,47 +3,47 @@
 <head>
 
     <style>.w-full {
-  width: 100%
+  width: 100% !important
 }
 
 .align-middle {
-  vertical-align: middle
+  vertical-align: middle !important
 }
 
 .text-center {
-  text-align: center
+  text-align: center !important
 }
 
 .px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem
+  padding-left: 0.5rem !important;
+  padding-right: 0.5rem !important
 }
 
 .py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important
 }
 
 .mx-2 {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem
+  margin-left: 0.5rem !important;
+  margin-right: 0.5rem !important
 }
 
 .my-4 {
-  margin-top: 1rem;
-  margin-bottom: 1rem
+  margin-top: 1rem !important;
+  margin-bottom: 1rem !important
 }
 
 .h-full {
-  height: 100%
+  height: 100% !important
 }
 
 .table {
-  display: table
+  display: table !important
 }
 
 .cursor-move {
-  cursor: move
+  cursor: move !important
 }</style>
   </head>
 <body>
diff --git a/test/expected/minify.html b/test/expected/minify.html
index ac225a2..e173475 100644
--- a/test/expected/minify.html
+++ b/test/expected/minify.html
@@ -1,2 +1,2 @@
-<!DOCTYPE html><html><head><style>.w-full{width:100%}.table{display:table}</style></head><body>
+<!DOCTYPE html><html><head><style>.w-full{width:100%!important}.table{display:table!important}</style></head><body>
 <table class="w-full" cellpadding="0" cellspacing="0" role="presentation"><tr><td>Test</td></tr></table></body></html>
diff --git a/test/expected/prettify.html b/test/expected/prettify.html
index 8f262eb..ab2e693 100644
--- a/test/expected/prettify.html
+++ b/test/expected/prettify.html
@@ -5,11 +5,11 @@
 
     <style>
       .w-full {
-        width: 100%
+        width: 100% !important
       }
 
       .table {
-        display: table
+        display: table !important
       }
     </style>
   </head>
diff --git a/test/expected/tailwind/default.css b/test/expected/tailwind/default.css
index 475f3b3..cbe1c2c 100644
--- a/test/expected/tailwind/default.css
+++ b/test/expected/tailwind/default.css
@@ -1,19 +1,10 @@
 @keyframes spin {
-  from {
-    transform: rotate(0deg)
-  }
-
   to {
     transform: rotate(360deg)
   }
 }
 
 @keyframes ping {
-  0% {
-    transform: scale(1);
-    opacity: 1
-  }
-
   75%, 100% {
     transform: scale(2);
     opacity: 0
@@ -21,10 +12,6 @@
 }
 
 @keyframes pulse {
-  0%, 100% {
-    opacity: 1
-  }
-
   50% {
     opacity: .5
   }
@@ -37,7 +24,7 @@
   }
 
   50% {
-    transform: translateY(0);
+    transform: none;
     animation-timing-function: cubic-bezier(0,0,0.2,1)
   }
 }
diff --git a/test/test-tailwind.js b/test/test-tailwind.js
index 384ae24..03f4d34 100644
--- a/test/test-tailwind.js
+++ b/test/test-tailwind.js
@@ -30,7 +30,7 @@ test('uses CSS file provided in environment config', async t => {
   const css = await Tailwind.compile('', '<div class="text-center foo">test</div>', {corePlugins: {animation: false}}, config)
 
   t.not(css, undefined)
-  t.is(css.trim(), '.text-center {\n  text-align: center;\n}\n\n.foo {\n  color: red;\n}')
+  t.is(css.trim(), '.text-center {\n  text-align: center !important;\n}\n\n.foo {\n  color: red;\n}')
 })
 
 test('uses purgeCSS options provided in the config', async t => {
@@ -43,7 +43,7 @@ test('uses purgeCSS options provided in the config', async t => {
 
   const css = await Tailwind.compile('', '', {corePlugins: {animation: false}}, config)
 
-  t.is(css.trim(), '.z-0 {\n  z-index: 0\n}\n\n.z-10 {\n  z-index: 10\n}')
+  t.is(css.trim(), '.z-0 {\n  z-index: 0 !important\n}\n\n.z-10 {\n  z-index: 10 !important\n}')
 })
 
 test('uses postcss plugins from the config when compiling from string', async t => {