CSS reduce specificity on <pre> elements

3 files changed, 10 insertions, 23 deletions

diff --git a/src/code.css b/src/code.css
index 48636d7..28109c3 100644
--- a/src/code.css
+++ b/src/code.css
@@ -1,20 +1,11 @@
 .cdata {
   /* <code>:wrap */
-  & > pre,
-  & > pre + *,
-  & > .highlight,
-  & > .highlight + * {
-    @apply mt-10;
-  }
-
-  & > pre,
-  & > .highlight pre {
+  & pre {
     @apply rounded;
   }
 
    /* <code>:block */
-  & > pre code,
-  & > .highlight code {
+  & pre > code {
     @apply block p-4 whitespace-pre break-normal;
     @apply overflow-auto scrolling-touch subpixel-antialiased;
 
@@ -31,8 +22,7 @@
   }
 
   /* <code>:shared */
-  & > pre code,
-  & > .highlight code,
+  & pre > code,
   & :not(pre) > code {
     @apply font-mono font-normal leading-normal text-left text-base;
 
@@ -44,17 +34,16 @@
   }
 
   /* line numbers */
-  & > .highlight .ln {
+  & .highlight code .ln {
     @apply mr-4;
   }
 
   /* highlight line */
-  & > .highlight .hl {
+  & .highlight code .hl {
   }
 
   @screen sm {
-    & > pre code,
-    & > .highlight code,
+    & pre > code,
     & :not(pre) > code {
       @apply text-sm;
     }
diff --git a/src/syntax-dark.css b/src/syntax-dark.css
index da09cb3..bdde7d8 100644
--- a/src/syntax-dark.css
+++ b/src/syntax-dark.css
@@ -1,7 +1,6 @@
 .cdata {
-  /* <code>:pre */
-  & > pre,
-  & > .highlight pre {
+  /* <code>:wrap */
+  & pre {
     @apply text-gray-200 bg-gray-800;
   }
 
diff --git a/src/syntax-light.css b/src/syntax-light.css
index 0bd4f07..15901d0 100644
--- a/src/syntax-light.css
+++ b/src/syntax-light.css
@@ -1,7 +1,6 @@
 .cdata {
-  /* <code>:pre */
-  & > pre,
-  & > .highlight pre {
+  /* <code>:wrap */
+  & pre {
     @apply text-gray-700 bg-gray-100;
   }