fix: preprocess nested css correctly

thraizz · Jan 27, 2024 · ab9c357 · ab9c357
1 parent 4a9230e
commit ab9c357
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 22 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@headlessui/vue": "^1.7.17",
     "@heroicons/vue": "^2.1.1",
+    "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
     "axios": "^1.6.5",
     "firebase": "^10.7.2",
     "pinia": "^2.1.7",

diff --git a/postcss.config.js b/postcss.config.js
@@ -1,6 +1,9 @@
 export default {
   plugins: {
+    "tailwindcss/nesting": {},
     tailwindcss: {},
     autoprefixer: {},
+    // eslint-disable-next-line no-undef
+    ...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {}),
   },
 };
diff --git a/src/style.css b/src/style.css
@@ -23,24 +23,23 @@
   h6 {
     @apply font-montserrat text-md;
   }
-}
-
-.input {
-  @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6;
-}
-.button {
-  @apply flex justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
-  &.primary {
-    @apply bg-indigo-600  text-white shadow-sm hover:bg-indigo-500;
-  }
-  &.secondary {
-    @apply bg-white text-indigo-600 shadow-sm hover:bg-indigo-50 hover:text-indigo-900;
+  .input {
+    @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6;
+  }
+  .button {
+    @apply flex justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
+    &.primary {
+      @apply bg-indigo-600  text-white shadow-sm hover:bg-indigo-500;
+    }
+    &.secondary {
+      @apply bg-white text-indigo-600 shadow-sm hover:bg-indigo-50 hover:text-indigo-900;
+    }
+    &.outlined {
+      @apply border-2 border-indigo-600 text-indigo-600 shadow-sm hover:bg-indigo-100;
+    }
   }
-  &.outlined {
-    @apply border-2 border-indigo-600 text-indigo-600 shadow-sm hover:bg-indigo-100;
-  }
-}
 
-.error {
-  @apply text-red-600;
+  .error {
+    @apply text-red-600;
+  }
 }