Revert "fix: tailwind config on docs (#1345)"

This reverts commit 265a01a.
vtex · Jun 9, 2022 · 9cfeeea · 9cfeeea
1 parent 779174d
commit 9cfeeea
Show file tree

Hide file tree

Showing 6 changed files with 5,416 additions and 388 deletions.
diff --git a/apps/docs/docusaurus.config.js b/apps/docs/docusaurus.config.js
@@ -218,17 +218,7 @@ module.exports = {
     ],
   ],
   plugins: [
-    async function myPlugin(context, options) {
-      return {
-        name: "docusaurus-tailwindcss",
-        configurePostCss(postcssOptions) {
-          // Appends TailwindCSS and AutoPrefixer.
-          postcssOptions.plugins.push(require("tailwindcss"));
-          postcssOptions.plugins.push(require("autoprefixer"));
-          return postcssOptions;
-        },
-      };
-    },
+    'docusaurus-tailwindcss-loader',
     require.resolve('docusaurus-plugin-image-zoom'),
     [
       'docusaurus-plugin-react-docgen-typescript',

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -23,13 +23,13 @@
     "@mdx-js/react": "^1.6.21",
     "@svgr/webpack": "^5.5.0",
     "@vtex/theme-b2c-tailwind": "^1.8.42",
-    "autoprefixer": "^10.4.7",
     "babel-loader": "^8.2.2",
     "clsx": "^1.1.1",
     "docusaurus-plugin-image-zoom": "^0.0.2",
     "docusaurus-plugin-react-docgen-typescript": "^0.1.0",
+    "docusaurus-tailwindcss-loader": "file:plugins/docusaurus-tailwindcss-loader",
     "file-loader": "^6.2.0",
-    "postcss": "^8.4.14",
+    "postcss": "^8.4.8",
     "postcss-import": "^14.0.2",
     "postcss-preset-env": "^7.4.2",
     "prism-react-renderer": "^1.2.1",
@@ -41,7 +41,7 @@
     "react-icons": "^4.2.0",
     "react-spring": "^9.2.4",
     "redocusaurus": "^0.9.0",
-    "tailwindcss": "^3.0.24",
+    "tailwindcss": "^3.0.23",
     "tinytime": "^0.2.6",
     "url-loader": "^4.1.1"
   },

diff --git a/apps/docs/plugins/docusaurus-tailwindcss-loader/index.js b/apps/docs/plugins/docusaurus-tailwindcss-loader/index.js
@@ -0,0 +1,18 @@
+module.exports = function (context, options) {
+  return {
+    name: 'postcss-tailwindcss-loader',
+    configurePostCss(postcssOptions) {
+      postcssOptions.plugins.push(
+        require('postcss-import'),
+        require('tailwindcss'),
+        require('postcss-preset-env')({
+          autoprefixer: {
+            flexbox: 'no-2009',
+          },
+          stage: 4,
+        }),
+      )
+      return postcssOptions
+    },
+  }
+}
diff --git a/apps/docs/postcss.config.js b/apps/docs/postcss.config.js
diff --git a/apps/docs/tailwind.config.js b/apps/docs/tailwind.config.js
@@ -3,30 +3,30 @@ function infima(variable) {
 }
 
 module.exports = {
-  content: ['./src/**/*.html', './src/**/*.js', './src/**/*.tsx'],
-  theme: {
-    extend: {
-      fontFamily: {
-        VTEXTrust: ['VTEX Trust', 'sans-serif'],
-        VTEXRegular: ['VTEX Trust Regular', 'sans-serif'],
-        VTEXMedium: ['VTEX Trust Medium', 'sans-serif']
-      },
-      colors: {
-        background: infima('--ifm-background-color'),
-        code: infima('--ifm-code-background'),
-        tag: infima('--ifm-tag-background'),
-        tagHighlight: infima('--ifm-tag-highlight'),
-        rebelPink: infima('--ifm-color-rebel-pink'),
-        seriousBlack: infima('--ifm-color-serious-black'),
-        secondary: infima('--ifm-color-secondary'),
-        fontSecondary: infima('--ifm-font-color-secondary'),
-        primary: infima('--ifm-color-primary'),
-        softPink: infima('--ifm-color-soft-pink'),
-        text: infima('--ifm-font-color-base'),
-        details: infima('--ifm-color-details'),
-        border: infima('--ifm-hr-border-color')
-      }
+content: ['./src/**/*.html', './src/**/*.js', './src/**/*.tsx'],
+theme: {
+  extend: {
+    fontFamily: {
+      VTEXTrust: ['VTEX Trust', 'sans-serif'],
+      VTEXRegular: ['VTEX Trust Regular', 'sans-serif'],
+      VTEXMedium: ['VTEX Trust Medium', 'sans-serif']
     },
+    colors: {
+      background: infima('--ifm-background-color'),
+      code: infima('--ifm-code-background'),    
+      tag: infima('--ifm-tag-background'),    
+      tagHighlight: infima('--ifm-tag-highlight'),    
+      rebelPink: infima('--ifm-color-rebel-pink'),
+      seriousBlack: infima('--ifm-color-serious-black'),
+      secondary: infima('--ifm-color-secondary'),     
+      fontSecondary: infima('--ifm-font-color-secondary'),     
+      primary: infima('--ifm-color-primary'),
+      softPink: infima('--ifm-color-soft-pink'),     
+      text: infima('--ifm-font-color-base'),     
+      details: infima('--ifm-color-details'),     
+      border: infima('--ifm-hr-border-color')
+    }
   },
-  plugins: [],
-}
+},
+plugins: [],
+}