From 9fba0b7292d39c070ce0a417e14df451890a1d08 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 17 Dec 2020 01:51:53 +0000
Subject: [PATCH] Wrap all custom components in layers

---
 .../opdavies/assets/css/components/block.pcss |  6 ++--
 .../assets/css/components/button.pcss         | 16 ++++++-----
 .../assets/css/components/container.pcss      |  6 ++--
 .../opdavies/assets/css/components/lead.pcss  |  6 ++--
 .../opdavies/assets/css/components/logo.pcss  |  8 ++----
 .../opdavies/assets/css/components/note.pcss  | 16 ++++++-----
 .../assets/css/components/recommendation.pcss |  8 ++++--
 .../opdavies/assets/css/components/table.pcss | 28 ++++++++++---------
 .../opdavies/assets/css/components/video.pcss | 14 ++++++----
 .../assets/css/components/widget.pcss         |  6 ++--
 .../opdavies/assets/css/components/wrap.pcss  | 10 ++++---
 11 files changed, 70 insertions(+), 54 deletions(-)

diff --git a/web/themes/custom/opdavies/assets/css/components/block.pcss b/web/themes/custom/opdavies/assets/css/components/block.pcss
index d607abe..6a2738c 100644
--- a/web/themes/custom/opdavies/assets/css/components/block.pcss
+++ b/web/themes/custom/opdavies/assets/css/components/block.pcss
@@ -1,3 +1,5 @@
-.sidebar .block {
-  @apply p-6 rounded bg-gray-100 dark:bg-gray-750
+@layer components {
+  .sidebar .block {
+    @apply p-6 rounded bg-gray-100 dark:bg-gray-750
+  }
 }
diff --git a/web/themes/custom/opdavies/assets/css/components/button.pcss b/web/themes/custom/opdavies/assets/css/components/button.pcss
index 3b83537..2dd6faf 100644
--- a/web/themes/custom/opdavies/assets/css/components/button.pcss
+++ b/web/themes/custom/opdavies/assets/css/components/button.pcss
@@ -1,10 +1,12 @@
-.button {
-  @apply py-2 px-3 inline-block border border-blue-600;
-  @apply text-sm text-white no-underline bg-blue-600 rounded;
+@layer components {
+  .button {
+    @apply py-2 px-3 inline-block border border-blue-600;
+    @apply text-sm text-white no-underline bg-blue-600 rounded;
 
-  &:active,
-  &:focus,
-  &:hover {
-    @apply bg-white text-blue-600
+    &:active,
+    &:focus,
+    &:hover {
+      @apply bg-white text-blue-600
+    }
   }
 }
diff --git a/web/themes/custom/opdavies/assets/css/components/container.pcss b/web/themes/custom/opdavies/assets/css/components/container.pcss
index b2096cc..1be3827 100644
--- a/web/themes/custom/opdavies/assets/css/components/container.pcss
+++ b/web/themes/custom/opdavies/assets/css/components/container.pcss
@@ -1,3 +1,5 @@
-.container {
-  @apply w-full max-w-5xl px-4 mx-auto
+@layer components {
+  .container {
+    @apply w-full max-w-5xl px-4 mx-auto
+  }
 }
diff --git a/web/themes/custom/opdavies/assets/css/components/lead.pcss b/web/themes/custom/opdavies/assets/css/components/lead.pcss
index 7805fa4..f0d137d 100644
--- a/web/themes/custom/opdavies/assets/css/components/lead.pcss
+++ b/web/themes/custom/opdavies/assets/css/components/lead.pcss
@@ -1,5 +1,5 @@
-p.lead {
-  @screen md {
-    @apply text-lg
+@layer components {
+  p.lead {
+    @apply md:text-lg
   }
 }
diff --git a/web/themes/custom/opdavies/assets/css/components/logo.pcss b/web/themes/custom/opdavies/assets/css/components/logo.pcss
index 7b78107..4fc89e6 100644
--- a/web/themes/custom/opdavies/assets/css/components/logo.pcss
+++ b/web/themes/custom/opdavies/assets/css/components/logo.pcss
@@ -1,7 +1,5 @@
-#block-opdavies-branding img {
-  @apply h-8;
-
-  @screen md {
-    @apply h-12
+@layer components {
+  #block-opdavies-branding img {
+    @apply h-8 md:h-12
   }
 }
diff --git a/web/themes/custom/opdavies/assets/css/components/note.pcss b/web/themes/custom/opdavies/assets/css/components/note.pcss
index 41537b4..3f311e8 100644
--- a/web/themes/custom/opdavies/assets/css/components/note.pcss
+++ b/web/themes/custom/opdavies/assets/css/components/note.pcss
@@ -1,11 +1,13 @@
-.note {
-  @apply max-w-full prose bg-blue-200 border-blue-600 border-l-4 mb-4 p-4 rounded dark:prose-dark;
+@layer components {
+  .note {
+    @apply max-w-full prose bg-blue-200 border-blue-600 border-l-4 mb-4 p-4 rounded dark:prose-dark;
 
-  * {
-    @apply dark:text-gray-700
-  }
+    * {
+      @apply dark:text-gray-700
+    }
 
-  p a {
-    @apply underline hover:no-underline
+    p a {
+      @apply underline hover:no-underline
+    }
   }
 }
diff --git a/web/themes/custom/opdavies/assets/css/components/recommendation.pcss b/web/themes/custom/opdavies/assets/css/components/recommendation.pcss
index 759089c..aa63819 100644
--- a/web/themes/custom/opdavies/assets/css/components/recommendation.pcss
+++ b/web/themes/custom/opdavies/assets/css/components/recommendation.pcss
@@ -1,5 +1,7 @@
-.recommendation {
-  .photo img {
-    @apply rounded-full
+@layer components {
+  .recommendation {
+    .photo img {
+      @apply rounded-full
+    }
   }
 }
diff --git a/web/themes/custom/opdavies/assets/css/components/table.pcss b/web/themes/custom/opdavies/assets/css/components/table.pcss
index d3c6f59..8af8b5c 100644
--- a/web/themes/custom/opdavies/assets/css/components/table.pcss
+++ b/web/themes/custom/opdavies/assets/css/components/table.pcss
@@ -1,18 +1,20 @@
-.table {
-  @apply w-full;
+@layer components {
+  .table {
+    @apply w-full;
 
-  th {
-    @apply bg-gray-200 text-left
+    th {
+      @apply bg-gray-200 text-left
+    }
+
+    th,
+    td {
+      @apply px-4 py-2 border border-solid border-gray-200
+    }
   }
 
-  th,
-  td {
-    @apply px-4 py-2 border border-solid border-gray-200
-  }
-}
-
-table.is-striped {
-  tbody > tr:not(:nth-child(odd)) td {
-    @apply bg-gray-100
+  table.is-striped {
+    tbody > tr:not(:nth-child(odd)) td {
+      @apply bg-gray-100
+    }
   }
 }
diff --git a/web/themes/custom/opdavies/assets/css/components/video.pcss b/web/themes/custom/opdavies/assets/css/components/video.pcss
index b03da98..87d8b87 100644
--- a/web/themes/custom/opdavies/assets/css/components/video.pcss
+++ b/web/themes/custom/opdavies/assets/css/components/video.pcss
@@ -1,9 +1,11 @@
-.video-full {
-  @apply w-full relative;
-  padding-top: 56.25%;
+@layer components {
+  .video-full {
+    @apply w-full relative;
+    padding-top: 56.25%;
 
-  iframe,
-  embed {
-    @apply absolute h-full left-0 top-0 w-full
+    iframe,
+    embed {
+      @apply absolute h-full left-0 top-0 w-full
+    }
   }
 }
diff --git a/web/themes/custom/opdavies/assets/css/components/widget.pcss b/web/themes/custom/opdavies/assets/css/components/widget.pcss
index fdcc356..71ac18b 100644
--- a/web/themes/custom/opdavies/assets/css/components/widget.pcss
+++ b/web/themes/custom/opdavies/assets/css/components/widget.pcss
@@ -1,3 +1,5 @@
-.widget {
-  @apply block mb-6
+@layer components {
+  .widget {
+    @apply block mb-6
+  }
 }
diff --git a/web/themes/custom/opdavies/assets/css/components/wrap.pcss b/web/themes/custom/opdavies/assets/css/components/wrap.pcss
index 9fe5fde..296190a 100644
--- a/web/themes/custom/opdavies/assets/css/components/wrap.pcss
+++ b/web/themes/custom/opdavies/assets/css/components/wrap.pcss
@@ -1,7 +1,9 @@
-.wrap {
-  @apply w-full max-w-3xl mx-auto;
+@layer components {
+  .wrap {
+    @apply w-full max-w-3xl mx-auto;
 
-  &.is-wide {
-    @apply max-w-5xl
+    &.is-wide {
+      @apply max-w-5xl
+    }
   }
 }