From 351725d322d2acb97fb308af88b3448ae9f45168 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 26 Oct 2020 10:49:21 -0300
Subject: [PATCH] Old Config

---
 assets/main.css                               | 11 +++----
 .../core/Featurebar/Featurebar.module.css     |  6 +++-
 .../ProductSlider/ProductSlider.module.css    | 12 +++++--
 components/ui/Grid/Grid.module.css            | 33 +++++++++++++++----
 next.config.js                                |  8 ++---
 tailwind.config.js                            |  8 +++++
 6 files changed, 57 insertions(+), 21 deletions(-)

diff --git a/assets/main.css b/assets/main.css
index 37062ffdc..8e2a74c27 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -1,9 +1,8 @@
-/* purgecss start ignore */
-@import 'tailwindcss/base';
+@tailwind base;
 @import './font.css';
 @import './base.css';
-@import 'tailwindcss/components';
-@import './components.css';
-/* purgecss end ignore */
 
-@import 'tailwindcss/utilities';
+@tailwind components;
+@import './components.css';
+
+@tailwind utilities;
diff --git a/components/core/Featurebar/Featurebar.module.css b/components/core/Featurebar/Featurebar.module.css
index eb1fedf10..af5b4953e 100644
--- a/components/core/Featurebar/Featurebar.module.css
+++ b/components/core/Featurebar/Featurebar.module.css
@@ -1,3 +1,7 @@
 .root {
-  @apply text-center p-6 bg-primary text-base text-sm md:flex md:text-left flex-row justify-center items-center font-medium fixed bottom-0 w-full z-30;
+  @apply text-center p-6 bg-primary text-sm flex-row justify-center items-center font-medium fixed bottom-0 w-full z-30;
+
+  @screen md {
+    @apply flex text-left;
+  }
 }
diff --git a/components/product/ProductSlider/ProductSlider.module.css b/components/product/ProductSlider/ProductSlider.module.css
index 5dd1fd6e4..d0421e8e5 100644
--- a/components/product/ProductSlider/ProductSlider.module.css
+++ b/components/product/ProductSlider/ProductSlider.module.css
@@ -9,13 +9,21 @@
 }
 
 .leftControl {
-  @apply bg-cover left-10 md:left-6;
+  @apply bg-cover left-10;
   background-image: url('public/cursor-left.png');
+
+  @screen md {
+    @apply left-6;
+  }
 }
 
 .rightControl {
-  @apply bg-cover right-10 md:right-6;
+  @apply bg-cover right-10;
   background-image: url('public/cursor-right.png');
+
+  @screen md {
+    @apply right-6;
+  }
 }
 
 .control {
diff --git a/components/ui/Grid/Grid.module.css b/components/ui/Grid/Grid.module.css
index 4ab161221..8ffc1beab 100644
--- a/components/ui/Grid/Grid.module.css
+++ b/components/ui/Grid/Grid.module.css
@@ -1,13 +1,18 @@
 .root {
   --row-height: calc(100vh - 80px - 56px);
-  @apply grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-2 gap-0;
+  @apply grid grid-cols-1 gap-0;
+
+  @screen lg {
+    @apply grid-cols-3 grid-rows-2;
+  }
 
   & > * {
-    @apply row-span-1 lg:col-span-1 bg-transparent box-border overflow-hidden;
+    @apply row-span-1 bg-transparent box-border overflow-hidden;
     height: 500px;
     max-height: 800px;
 
     @screen lg {
+      @apply col-span-1;
       height: inherit;
     }
   }
@@ -30,8 +35,12 @@
 .layoutA {
   & > *:nth-child(6n + 1),
   & > *:nth-child(6n + 5) {
-    @apply row-span-2 lg:col-span-2;
+    @apply row-span-2;
     height: var(--row-height);
+
+    @screen lg {
+      @apply col-span-2;
+    }
   }
 
   &.filled {
@@ -57,8 +66,12 @@
 .layoutB {
   & > *:nth-child(6n + 2),
   & > *:nth-child(6n + 4) {
-    @apply row-span-2 lg:col-span-2;
+    @apply row-span-2;
     height: var(--row-height);
+
+    @screen lg {
+      @apply col-span-2;
+    }
   }
 
   &.filled {
@@ -83,8 +96,12 @@
 .layoutC {
   & > *:nth-child(12n + 1),
   & > *:nth-child(12n + 8) {
-    @apply row-span-2 lg:col-span-2;
+    @apply row-span-2;
     height: var(--row-height);
+
+    @screen lg {
+      @apply col-span-2;
+    }
   }
 
   &.filled {
@@ -107,8 +124,12 @@
 .layoutD {
   & > *:nth-child(12n + 2),
   & > *:nth-child(12n + 7) {
-    @apply row-span-2 lg:col-span-2;
+    @apply row-span-2;
     height: var(--row-height);
+
+    @screen lg {
+      @apply col-span-2;
+    }
   }
 
   &.filled {
diff --git a/next.config.js b/next.config.js
index f0cc9fbc0..471c7e404 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,8 +1,4 @@
-const withBundleAnalyzer = require('@next/bundle-analyzer')({
-  enabled: process.env.ANALYZE === 'true',
-})
-
-module.exports = withBundleAnalyzer({
+module.exports = {
   images: {
     sizes: [320, 480, 820, 1200, 1600],
     domains: ['cdn11.bigcommerce.com'],
@@ -40,4 +36,4 @@ module.exports = withBundleAnalyzer({
       },
     ]
   },
-})
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 51b5f003c..e6b14b11e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,8 @@
 module.exports = {
+  future: {
+    removeDeprecatedGapUtilities: true,
+    purgeLayersByDefault: true,
+  },
   purge: {
     content: [
       './pages/**/*.{js,ts,jsx,tsx}',
@@ -50,5 +54,9 @@ module.exports = {
       },
     },
   },
+  variants: {},
   plugins: [require('@tailwindcss/ui')],
+  experimental: {
+    applyComplexClasses: true,
+  },
 }