From b1c0a43e9a04c7e9b3666f6733f05931b66f5818 Mon Sep 17 00:00:00 2001
From: Mikael Sand <msand@abo.fi>
Date: Wed, 23 Oct 2019 17:43:41 +0300
Subject: [PATCH] tests: add test for combining parse with inlineStyles

---
 __tests__/__snapshots__/css.test.tsx.snap | 82 +++++++++++++++++++++++
 __tests__/css.test.tsx                    | 11 ++-
 package.json                              |  3 +-
 src/css.tsx                               |  1 +
 4 files changed, 93 insertions(+), 4 deletions(-)

diff --git a/__tests__/__snapshots__/css.test.tsx.snap b/__tests__/__snapshots__/css.test.tsx.snap
index a322c24e..059503db 100644
--- a/__tests__/__snapshots__/css.test.tsx.snap
+++ b/__tests__/__snapshots__/css.test.tsx.snap
@@ -1,5 +1,87 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`inlines styles 1`] = `
+Object {
+  "Tag": [Function],
+  "children": Array [
+    <Defs>
+      <missingTag
+        type="text/css"
+      >
+        
+      /* tag selector */
+      rect {
+        stroke: blue;
+        fill: yellow
+      }
+
+      /* class selector */
+      .redbox { fill: red; }
+
+      /* multiple selectors */
+      g .class-1, g .class-2 {
+        stroke-width: 16
+      }
+
+      /* two classes */
+      .class-2.transparent {
+        fill-opacity: 0.3;
+      }
+
+      /* Commented out
+      rect {
+        fill: black;
+      }
+      */
+    
+      </missingTag>
+    </Defs>,
+    <G>
+      <Rect
+        class="redbox class-1"
+        height={200}
+        style={
+          Object {
+            "fill": "red",
+            "stroke": "blue",
+            "strokeWidth": "16",
+          }
+        }
+        width={1000}
+        x={100}
+        y={0}
+      />
+    </G>,
+    <G>
+      <Rect
+        class="redbox class-2 transparent"
+        height={200}
+        style={
+          Object {
+            "fill": "red",
+            "fillOpacity": "0.3",
+            "stroke": "blue",
+            "strokeWidth": "16",
+          }
+        }
+        width={750}
+        x={100}
+        y={350}
+      />
+    </G>,
+  ],
+  "parent": null,
+  "props": Object {
+    "height": "100%",
+    "version": 1.1,
+    "viewBox": "0 0 1000 500",
+    "width": "100%",
+    "xmlns": "http://www.w3.org/2000/svg",
+  },
+  "tag": "svg",
+}
+`;
+
 exports[`supports CSS in style element 1`] = `
 <RNSVGSvgView
   align="xMidYMid"
diff --git a/__tests__/css.test.tsx b/__tests__/css.test.tsx
index 45bac22a..579c3574 100644
--- a/__tests__/css.test.tsx
+++ b/__tests__/css.test.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { SvgCss } from '../src/ReactNativeSVG';
+import { SvgCss, parse, inlineStyles } from '../src/ReactNativeSVG';
 
-test('supports CSS in style element', () => {
-  const xml = `<?xml version="1.0" standalone="no"?>
+const xml = `<?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
@@ -44,6 +43,12 @@ test('supports CSS in style element', () => {
   </g>
 </svg>`;
 
+test('inlines styles', () => {
+  const ast = parse(xml, inlineStyles);
+  expect(ast).toMatchSnapshot();
+});
+
+test('supports CSS in style element', () => {
   const tree = renderer.create(<SvgCss xml={xml} />).toJSON();
   expect(tree).toMatchSnapshot();
 });
diff --git a/package.json b/package.json
index ecf48cf0..01ed756c 100644
--- a/package.json
+++ b/package.json
@@ -38,9 +38,10 @@
     "flowgen": "flowgen src/index.d.ts -o src/index.js.flow",
     "flowtyped": "flow-typed install",
     "format": "prettier README.md './src/**/*.{ts,tsx}' src/index.d.ts --write",
+    "jest": "jest",
     "peg": "pegjs -o src/lib/extract/transform.js ./src/lib/extract/transform.peg",
     "tsc": "tsc --noEmit",
-    "test": "npm run lint && npm run tsc && npm run flow && jest",
+    "test": "npm run lint && npm run tsc && npm run flow && npm run jest",
     "prepare": "npm run flowgen && npm run bob",
     "semantic-release": "semantic-release"
   },
diff --git a/src/css.tsx b/src/css.tsx
index ac4edc54..2e8766ba 100644
--- a/src/css.tsx
+++ b/src/css.tsx
@@ -28,6 +28,7 @@ import cssSelect, { Adapter, Options, Predicate, Query } from 'css-select';
 
 /*
  * Style element inlining experiment based on SVGO
+ * https://github.com/svg/svgo/blob/11f9c797411a8de966aacc4cb83dbb3e471757bc/plugins/inlineStyles.js
  * */
 
 /**