Fix @global and nesting

lxsmnsyc · Nov 25, 2023 · 3895963 · 3895963
1 parent 3727be0
commit 3895963
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/packages/solid-styled/compiler/core/process-css-template.ts b/packages/solid-styled/compiler/core/process-css-template.ts
@@ -1,7 +1,7 @@
 import * as t from '@babel/types';
 import type { StateContext } from '../types';
 import preprocessCSS from './preprocess-css';
-import processScopedSheet from './process-scoped-sheet';
+import processScopedSheet from './process-scoped-sheet.old';
 import { getPrefix, getUniqueId } from './utils';
 
 interface DynamicTemplateResult {
@@ -52,10 +52,11 @@ export default function processCSSTemplate(
 ): DynamicTemplateResult {
   // Replace the template's dynamic parts with CSS variables
   const { sheet, variables } = replaceDynamicTemplate(ctx, templateLiteral);
+  const preprocessed = preprocessCSS(ctx, sheet);
   return {
     sheet: isScoped
-      ? processScopedSheet(ctx, sheetID, sheet)
-      : preprocessCSS(ctx, sheet),
+      ? preprocessCSS(ctx, processScopedSheet(ctx, sheetID, preprocessed))
+      : preprocessed,
     variables,
   };
 }
diff --git a/packages/solid-styled/compiler/core/process-scoped-sheet.old.ts b/packages/solid-styled/compiler/core/process-scoped-sheet.old.ts
@@ -1,10 +1,14 @@
 import * as csstree from 'css-tree';
 import { GLOBAL_SELECTOR, SOLID_STYLED_NS } from './constants';
+import type { StateContext } from '../types';
 
 export default function processScopedSheet(
+  ctx: StateContext,
   sheetID: string,
-  ast: csstree.CssNode,
-): void {
+  content: string,
+): string {
+  console.log(content);
+  const ast = csstree.parse(content);
   // This selector is going to be inserted
   // on every non-global selector
   // [s\:${sheetID}]
@@ -173,4 +177,6 @@ export default function processScopedSheet(
       }
     },
   });
+
+  return csstree.generate(ast);
 }