fix: handle style element separately in SVG parser

Author: yuanchuan

src/parser/parse-svg.js

@@ -132,11 +132,24 @@ function walk(iter, parentToken) {
       let tokenName = selectors.pop();
       let skip = isSkip(...selectors, parentToken.name, tokenName);
 
-      if (tokenName === 'style') {
+      const allSelectors = [...selectors, tokenName];
+      const styleIndex = allSelectors.indexOf('style');
+
+      // handle style block separately
+      if (styleIndex >= 0) {
+        let styleContent = '';
+        const cssSelectors = allSelectors.slice(styleIndex + 1);
+        if (cssSelectors.length > 0) {
+          styleContent = cssSelectors.join(' ') + '{';
+        }
+        styleContent += readStyle(iter);
+        if (cssSelectors.length > 0) {
+          styleContent += '}';
+        }
         rules.push({
           type: 'block',
-          name: tokenName,
-          value: readStyle(iter)
+          name: 'style',
+          value: styleContent
         });
       } else {
         let block = resolveId(walk(iter, splitTimes(tokenName, {

test/parse-svg.js

@@ -444,6 +444,38 @@ test('content values', () => {
   });
 });
 
+test('style with css selectors', () => {
+  compare('style { a { fill: red } }', {
+    type: 'block',
+    name: 'svg',
+    value: [{
+      type: 'block',
+      name: 'style',
+      value: 'a{fill:red}'
+    }]
+  });
+
+  compare('style a { fill: red }', {
+    type: 'block',
+    name: 'svg',
+    value: [{
+      type: 'block',
+      name: 'style',
+      value: 'a{fill:red}'
+    }]
+  });
+
+  compare('style .cls { stroke: blue }', {
+    type: 'block',
+    name: 'svg',
+    value: [{
+      type: 'block',
+      name: 'style',
+      value: '.cls{stroke:blue}'
+    }]
+  });
+});
+
 test('times syntax', () => {
   compare(`
     circle*10 {}