From bd7e486debdb530280752e58288140c1ba7d2764 Mon Sep 17 00:00:00 2001
From: dragonish <no.web.developer@outlook.com>
Date: Mon, 31 Mar 2025 14:27:31 +0800
Subject: [PATCH] fix(styles): fix some issues that could not be rendered in
 live preview

In live preview, if the heading contains tags, the decorator cannot be
rendered.

Fixed: #3
---
 styles.css | 64 +++++++++++++++++++++++++++---------------------------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/styles.css b/styles.css
index ce6998b..13e2f86 100644
--- a/styles.css
+++ b/styles.css
@@ -83,10 +83,10 @@
 .is-live-preview
   .preview-custom-heading-decorator.before-heading-decorator:not(
     .cm-active
-  ):not(:has(.cm-header.cm-formatting))::before,
+  ):not(:has(.cm-header.cm-formatting-header))::before,
 .is-live-preview
   .preview-custom-heading-decorator.after-heading-decorator:not(.cm-active):not(
-    :has(.cm-header.cm-formatting)
+    :has(.cm-header.cm-formatting-header)
   )::after {
   display: inline-block;
   content: attr(data-heading-decorator);
@@ -97,51 +97,51 @@
 .is-live-preview
   .preview-custom-heading-decorator.before-heading-decorator:not(
     .cm-active
-  ):not(:has(.cm-header.cm-formatting))::before {
+  ):not(:has(.cm-header.cm-formatting-header))::before {
   margin-inline-end: var(--size-2-3);
 }
 
 .is-live-preview
   .preview-custom-heading-decorator.before-heading-decorator:not(
     .cm-active
-  ):not(:has(.cm-header.cm-formatting)):has(> .is-collapsed)::before,
+  ):not(:has(.cm-header.cm-formatting-header)):has(> .is-collapsed)::before,
 .is-live-preview
   .preview-custom-heading-decorator.before-heading-decorator[dir="auto"]:not(
     .cm-active
-  ):not(:has(.cm-header.cm-formatting)):has(> .is-collapsed)::before,
+  ):not(:has(.cm-header.cm-formatting-header)):has(> .is-collapsed)::before,
 .is-live-preview
   .preview-custom-heading-decorator.before-heading-decorator[dir="ltr"]:not(
     .cm-active
-  ):not(:has(.cm-header.cm-formatting)):has(> .is-collapsed)::before,
+  ):not(:has(.cm-header.cm-formatting-header)):has(> .is-collapsed)::before,
 .is-live-preview
   .preview-custom-heading-decorator.before-heading-decorator:has(
     .cm-fold-indicator
-  ):not(.cm-active):not(:has(.cm-header.cm-formatting)):hover::before,
+  ):not(.cm-active):not(:has(.cm-header.cm-formatting-header)):hover::before,
 .is-live-preview
   .preview-custom-heading-decorator.before-heading-decorator[dir="auto"]:has(
     .cm-fold-indicator
-  ):not(.cm-active):not(:has(.cm-header.cm-formatting)):hover::before,
+  ):not(.cm-active):not(:has(.cm-header.cm-formatting-header)):hover::before,
 .is-live-preview
   .preview-custom-heading-decorator.before-heading-decorator[dir="ltr"]:has(
     .cm-fold-indicator
-  ):not(.cm-active):not(:has(.cm-header.cm-formatting)):hover::before {
+  ):not(.cm-active):not(:has(.cm-header.cm-formatting-header)):hover::before {
   translate: calc(-1 * var(--size-4-3));
 }
 
 .is-live-preview
   .preview-custom-heading-decorator.before-heading-decorator[dir="rtl"]:not(
     .cm-active
-  ):not(:has(.cm-header.cm-formatting)):has(> .is-collapsed)::before,
+  ):not(:has(.cm-header.cm-formatting-header)):has(> .is-collapsed)::before,
 .is-live-preview
   .preview-custom-heading-decorator.before-heading-decorator[dir="rtl"]:has(
     .cm-fold-indicator
-  ):not(.cm-active):not(:has(.cm-header.cm-formatting)):hover::before {
+  ):not(.cm-active):not(:has(.cm-header.cm-formatting-header)):hover::before {
   translate: var(--size-4-3);
 }
 
 .is-live-preview
   .preview-custom-heading-decorator.after-heading-decorator:not(.cm-active):not(
-    :has(.cm-header.cm-formatting)
+    :has(.cm-header.cm-formatting-header)
   )::after {
   margin-inline-start: var(--size-2-3);
 }
@@ -149,101 +149,101 @@
 .is-live-preview
   .preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="10%"]:not(
     .cm-active
-  ):not(:has(.cm-header.cm-formatting))::before,
+  ):not(:has(.cm-header.cm-formatting-header))::before,
 .is-live-preview
   .preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="10%"]:not(
     .cm-active
-  ):not(:has(.cm-header.cm-formatting))::after {
+  ):not(:has(.cm-header.cm-formatting-header))::after {
   opacity: 10%;
 }
 .is-live-preview
   .preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="20%"]:not(
     .cm-active
-  ):not(:has(.cm-header.cm-formatting))::before,
+  ):not(:has(.cm-header.cm-formatting-header))::before,
 .is-live-preview
   .preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="20%"]:not(
     .cm-active
-  ):not(:has(.cm-header.cm-formatting))::after {
+  ):not(:has(.cm-header.cm-formatting-header))::after {
   opacity: 20%;
 }
 .is-live-preview
   .preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="30%"]:not(
     .cm-active
-  ):not(:has(.cm-header.cm-formatting))::before,
+  ):not(:has(.cm-header.cm-formatting-header))::before,
 .is-live-preview
   .preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="30%"]:not(
     .cm-active
-  ):not(:has(.cm-header.cm-formatting))::after {
+  ):not(:has(.cm-header.cm-formatting-header))::after {
   opacity: 30%;
 }
 .is-live-preview
   .preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="40%"]:not(
     .cm-active
-  ):not(:has(.cm-header.cm-formatting))::before,
+  ):not(:has(.cm-header.cm-formatting-header))::before,
 .is-live-preview
   .preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="40%"]:not(
     .cm-active
-  ):not(:has(.cm-header.cm-formatting))::after {
+  ):not(:has(.cm-header.cm-formatting-header))::after {
   opacity: 40%;
 }
 .is-live-preview
   .preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="50%"]:not(
     .cm-active
-  ):not(:has(.cm-header.cm-formatting))::before,
+  ):not(:has(.cm-header.cm-formatting-header))::before,
 .is-live-preview
   .preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="50%"]:not(
     .cm-active
-  ):not(:has(.cm-header.cm-formatting))::after {
+  ):not(:has(.cm-header.cm-formatting-header))::after {
   opacity: 50%;
 }
 .is-live-preview
   .preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="60%"]:not(
     .cm-active
-  ):not(:has(.cm-header.cm-formatting))::before,
+  ):not(:has(.cm-header.cm-formatting-header))::before,
 .is-live-preview
   .preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="60%"]:not(
     .cm-active
-  ):not(:has(.cm-header.cm-formatting))::after {
+  ):not(:has(.cm-header.cm-formatting-header))::after {
   opacity: 60%;
 }
 .is-live-preview
   .preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="70%"]:not(
     .cm-active
-  ):not(:has(.cm-header.cm-formatting))::before,
+  ):not(:has(.cm-header.cm-formatting-header))::before,
 .is-live-preview
   .preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="70%"]:not(
     .cm-active
-  ):not(:has(.cm-header.cm-formatting))::after {
+  ):not(:has(.cm-header.cm-formatting-header))::after {
   opacity: 70%;
 }
 .is-live-preview
   .preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="80%"]:not(
     .cm-active
-  ):not(:has(.cm-header.cm-formatting))::before,
+  ):not(:has(.cm-header.cm-formatting-header))::before,
 .is-live-preview
   .preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="80%"]:not(
     .cm-active
-  ):not(:has(.cm-header.cm-formatting))::after {
+  ):not(:has(.cm-header.cm-formatting-header))::after {
   opacity: 80%;
 }
 .is-live-preview
   .preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="90%"]:not(
     .cm-active
-  ):not(:has(.cm-header.cm-formatting))::before,
+  ):not(:has(.cm-header.cm-formatting-header))::before,
 .is-live-preview
   .preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="90%"]:not(
     .cm-active
-  ):not(:has(.cm-header.cm-formatting))::after {
+  ):not(:has(.cm-header.cm-formatting-header))::after {
   opacity: 90%;
 }
 .is-live-preview
   .preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="100%"]:not(
     .cm-active
-  ):not(:has(.cm-header.cm-formatting))::before,
+  ):not(:has(.cm-header.cm-formatting-header))::before,
 .is-live-preview
   .preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="100%"]:not(
     .cm-active
-  ):not(:has(.cm-header.cm-formatting))::after {
+  ):not(:has(.cm-header.cm-formatting-header))::after {
   opacity: 100%;
 }
 /* preview end */