From 0af46bc123923c40396b1244f4e494e8c42f0c0b Mon Sep 17 00:00:00 2001
From: mcm-odoo <mcm@odoo.com>
Date: Thu, 26 Dec 2019 09:42:50 +0100
Subject: [PATCH] [FIX] styles: fix selector generation

This commit fixes the css selector generation for nested rules

Before this fix, a selector like:

.parent {
	.child-a, .child-b {
		color: red;
	}
}

was generated as:

.parent .child-a, .child-b {
	color: red;
}

Now it generates:

.parent .child-a, .parent .child-b {
	color: red;
}
---
 src/component/styles.ts        | 19 +++++++++++++++----
 tests/component/styles.test.ts | 13 +++++++++++++
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/component/styles.ts b/src/component/styles.ts
index f4253b83..ceb5a604 100644
--- a/src/component/styles.ts
+++ b/src/component/styles.ts
@@ -7,14 +7,25 @@
 
 export const STYLESHEETS: { [id: string]: HTMLStyleElement } = {};
 
-function processSheet(str: string): string {
+export function processSheet(str: string): string {
   const tokens = str.split(/(\{|\}|;)/).map(s => s.trim());
-  const selectorStack: string[] = [];
+  const selectorStack: string[][] = [];
   const parts: string[] = [];
   let rules: string[] = [];
+  function generateSelector(stackIndex: number, parentSelector?: string) {
+    const parts: string[] = [];
+    for (const selector of selectorStack[stackIndex]) {
+      let part = parentSelector && parentSelector + ' ' + selector || selector;
+      if (stackIndex < selectorStack.length - 1) {
+        part = generateSelector(stackIndex + 1, part);
+      }
+      parts.push(part);
+    }
+    return parts.join(', ');
+  }
   function generateRules() {
     if (rules.length) {
-      parts.push(selectorStack.join(" ") + " {");
+      parts.push(generateSelector(0) + " {");
       parts.push(...rules);
       parts.push("}");
       rules = [];
@@ -28,7 +39,7 @@ function processSheet(str: string): string {
     } else {
       if (tokens[0] === "{") {
         generateRules();
-        selectorStack.push(token);
+        selectorStack.push(token.split(/\s*,\s*/));
         tokens.shift();
       }
       if (tokens[0] === ";") {
diff --git a/tests/component/styles.test.ts b/tests/component/styles.test.ts
index b7aab45a..f72cb9bb 100644
--- a/tests/component/styles.test.ts
+++ b/tests/component/styles.test.ts
@@ -1,4 +1,5 @@
 import { Component, Env } from "../../src/component/component";
+import { processSheet } from "../../src/component/styles";
 import { xml, css } from "../../src/tags";
 import { makeTestFixture, makeTestEnv } from "../helpers";
 
@@ -127,6 +128,18 @@ describe("styles and component", () => {
 }
 .app {
   display: block;
+}`);
+  });
+
+  test("properly handle rules with commas", async () => {
+    const sheet = processSheet(`.parent-a, .parent-b {
+      .child-a, .child-b {
+        color: red;
+      }
+    }`);
+    
+    expect(sheet).toBe(`.parent-a .child-a, .parent-a .child-b, .parent-b .child-a, .parent-b .child-b {
+  color: red;
 }`);
   });
 });