From afb2157696bcfc36aa4eb4d4ead370ed0af0b1c6 Mon Sep 17 00:00:00 2001
From: Matthieu Riegler <kyro38@gmail.com>
Date: Thu, 19 Oct 2023 22:37:05 +0200
Subject: [PATCH] fix: support legal comments

---
 packages/critters/src/index.js        | 16 +++++++++-------
 packages/critters/test/src/styles.css |  7 ++++++-
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/critters/src/index.js b/packages/critters/src/index.js
index c48ca84..65aa629 100644
--- a/packages/critters/src/index.js
+++ b/packages/critters/src/index.js
@@ -14,17 +14,17 @@
  * the License.
  */
 
-import path from 'path';
 import { readFile } from 'fs';
 import { createDocument, serializeDocument } from './dom';
+import path from 'path';
 import {
+  applyMarkedSelectors,
+  markOnly,
   parseStylesheet,
   serializeStylesheet,
+  validateMediaQuery,
   walkStyleRules,
   walkStyleRulesWithReverseMirror,
-  markOnly,
-  applyMarkedSelectors,
-  validateMediaQuery
 } from './css';
 import { createLogger, isSubpath } from './util';
 
@@ -495,10 +495,12 @@ export default class Critters {
       ast,
       markOnly((rule) => {
         if (rule.type === 'comment') {
-          const comment = rule.text.trim();
+          // we might want to remove a leading ! on comment blocks
+          // critters can be part of "legal comments" which aren't striped on build
+          const crittersComment = rule.text.match(/^(?<!\! )critters:(.*)/);
+          const command = crittersComment && crittersComment[1];
 
-          if (comment.startsWith('critters')) {
-            const command = comment.replace(/^critters:/, '');
+          if (command) {
             switch (command) {
               case 'include':
                 includeNext = true;
diff --git a/packages/critters/test/src/styles.css b/packages/critters/test/src/styles.css
index 304a359..62e3eff 100644
--- a/packages/critters/test/src/styles.css
+++ b/packages/critters/test/src/styles.css
@@ -46,6 +46,12 @@ footer {
   border-bottom: transparent solid 2px;
 }
 
+/*! critters:include */
+.other-element::part(tab) {
+  color: #0c0dcc;
+  border-bottom: transparent solid 2px;
+}
+
 .custom-element::part(tab):hover {
   background-color: #0c0d19;
   color: #ffffff;
@@ -64,7 +70,6 @@ footer {
 }
 /* critters:include end */
 
-
 .custom-element::part(active) {
   color: #0060df;
   border-color: #0a84ff !important;