@rindo/core 4.25.3 → 4.27.0

package/internal/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rindo/core/internal/client",
-  "version": "4.25.3",
+  "version": "4.27.0",
   "description": "Rindo internal client platform to be imported by the Rindo Compiler and internal runtime. Breaking changes can and will happen at any time.",
   "main": "./index.js",
   "exports": "./index.js",

package/internal/client/patch-browser.js

@@ -1,5 +1,5 @@
 /*
- Rindo Client Patch Browser v4.25.3 | MIT Licensed | https://rindojs.web.app
+ Rindo Client Patch Browser v4.27.0 | MIT Licensed | https://rindojs.web.app
  */
 
 // src/client/client-patch-browser.ts

package/internal/client/shadow-css.js

@@ -274,14 +274,14 @@ var scopeSelector = (selector, scopeSelectorText, hostSelector, slotSelector) =>
     }
   }).join(", ");
 };
-var scopeSelectors = (cssText, scopeSelectorText, hostSelector, slotSelector) => {
+var scopeSelectors = (cssText, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector) => {
   return processRules(cssText, (rule) => {
     let selector = rule.selector;
     let content = rule.content;
     if (rule.selector[0] !== "@") {
       selector = scopeSelector(rule.selector, scopeSelectorText, hostSelector, slotSelector);
     } else if (rule.selector.startsWith("@media") || rule.selector.startsWith("@supports") || rule.selector.startsWith("@page") || rule.selector.startsWith("@document")) {
-      content = scopeSelectors(rule.content, scopeSelectorText, hostSelector, slotSelector);
+      content = scopeSelectors(rule.content, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector);
     }
     const cssRule = {
       selector: selector.replace(/\s{2,}/g, " ").trim(),
@@ -290,7 +290,7 @@ var scopeSelectors = (cssText, scopeSelectorText, hostSelector, slotSelector) =>
     return cssRule;
   });
 };
-var scopeCssText = (cssText, scopeId, hostScopeId, slotScopeId) => {
+var scopeCssText = (cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector) => {
   cssText = insertPolyfillHostInCssText(cssText);
   cssText = convertColonHost(cssText);
   cssText = convertColonHostContext(cssText);
@@ -298,7 +298,7 @@ var scopeCssText = (cssText, scopeId, hostScopeId, slotScopeId) => {
   cssText = slotted.cssText;
   cssText = convertShadowDOMSelectors(cssText);
   if (scopeId) {
-    cssText = scopeSelectors(cssText, scopeId, hostScopeId, slotScopeId);
+    cssText = scopeSelectors(cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector);
   }
   cssText = replaceShadowCssHost(cssText, hostScopeId);
   cssText = cssText.replace(/>\s*\*\s+([^{, ]+)/gm, " $1 ");
@@ -315,13 +315,37 @@ var scopeCssText = (cssText, scopeId, hostScopeId, slotScopeId) => {
 var replaceShadowCssHost = (cssText, hostScopeId) => {
   return cssText.replace(/-shadowcsshost-no-combinator/g, `.${hostScopeId}`);
 };
-var scopeCss = (cssText, scopeId) => {
+var scopeCss = (cssText, scopeId, commentOriginalSelector) => {
   const hostScopeId = scopeId + "-h";
   const slotScopeId = scopeId + "-s";
   const commentsWithHash = extractCommentsWithHash(cssText);
   cssText = stripComments(cssText);
-  const scoped = scopeCssText(cssText, scopeId, hostScopeId, slotScopeId);
+  const orgSelectors = [];
+  if (commentOriginalSelector) {
+    const processCommentedSelector = (rule) => {
+      const placeholder = `/*!@___${orgSelectors.length}___*/`;
+      const comment = `/*!@${rule.selector}*/`;
+      orgSelectors.push({ placeholder, comment });
+      rule.selector = placeholder + rule.selector;
+      return rule;
+    };
+    cssText = processRules(cssText, (rule) => {
+      if (rule.selector[0] !== "@") {
+        return processCommentedSelector(rule);
+      } else if (rule.selector.startsWith("@media") || rule.selector.startsWith("@supports") || rule.selector.startsWith("@page") || rule.selector.startsWith("@document")) {
+        rule.content = processRules(rule.content, processCommentedSelector);
+        return rule;
+      }
+      return rule;
+    });
+  }
+  const scoped = scopeCssText(cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector);
   cssText = [scoped.cssText, ...commentsWithHash].join("\n");
+  if (commentOriginalSelector) {
+    orgSelectors.forEach(({ placeholder, comment }) => {
+      cssText = cssText.replace(placeholder, comment);
+    });
+  }
   scoped.slottedSelectors.forEach((slottedSelector) => {
     const regex = new RegExp(escapeRegExpSpecialCharacters(slottedSelector.orgSelector), "g");
     cssText = cssText.replace(regex, slottedSelector.updatedSelector);