feat(native): automatically convert inline style in native

Closes #588
gregberge · Dec 1, 2021 · 138c493 · 138c493
1 parent 0f9dcb2
commit 138c493
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 27 deletions.
diff --git a/packages/plugin-svgo/src/__snapshots__/index.test.ts.snap b/packages/plugin-svgo/src/__snapshots__/index.test.ts.snap
@@ -1,13 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`svgo does not load runtime configuration with \`runtimeConfig: false\` 1`] = `"<svg width=\\"88\\" height=\\"88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><g id=\\"svgo__Blocks\\" class=\\"svgo__blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><g id=\\"svgo__Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\"><path d=\\"M51 37 37 51\\" id=\\"svgo__Shape\\"/><path d=\\"M51 51 37 37\\"/><style></style></g></g></svg>"`;
+exports[`svgo does not load runtime configuration with \`runtimeConfig: false\` 1`] = `"<svg width=\\"88\\" height=\\"88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><style>.svgo__shape{fill:red}</style><g id=\\"svgo__Blocks\\" class=\\"svgo__blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><g id=\\"svgo__Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\"><path d=\\"M51 37 37 51\\" id=\\"svgo__Shape\\" class=\\"svgo__shape\\"/><path d=\\"M51 51 37 37\\" class=\\"svgo__shape\\"/></g></g></svg>"`;
 
-exports[`svgo does not remove viewBox with \`icon\` option 1`] = `"<svg width=\\"88\\" height=\\"88\\" viewBox=\\"0 0 88 88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><g id=\\"prefix__Blocks\\" class=\\"prefix__blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><g id=\\"prefix__Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\"><path d=\\"M51 37 37 51\\" id=\\"prefix__Shape\\"/><path d=\\"M51 51 37 37\\"/><style></style></g></g></svg>"`;
+exports[`svgo does not remove viewBox with \`icon\` option 1`] = `"<svg width=\\"88\\" height=\\"88\\" viewBox=\\"0 0 88 88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><style>.prefix__shape{fill:red}</style><g id=\\"prefix__Blocks\\" class=\\"prefix__blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><g id=\\"prefix__Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\"><path d=\\"M51 37 37 51\\" id=\\"prefix__Shape\\" class=\\"prefix__shape\\"/><path d=\\"M51 51 37 37\\" class=\\"prefix__shape\\"/></g></g></svg>"`;
 
-exports[`svgo does not remove viewBox with when \`dimensions\` is false 1`] = `"<svg width=\\"88\\" height=\\"88\\" viewBox=\\"0 0 88 88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><g id=\\"prefix__Blocks\\" class=\\"prefix__blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><g id=\\"prefix__Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\"><path d=\\"M51 37 37 51\\" id=\\"prefix__Shape\\"/><path d=\\"M51 51 37 37\\"/><style></style></g></g></svg>"`;
+exports[`svgo does not remove viewBox with when \`dimensions\` is false 1`] = `"<svg width=\\"88\\" height=\\"88\\" viewBox=\\"0 0 88 88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><style>.prefix__shape{fill:red}</style><g id=\\"prefix__Blocks\\" class=\\"prefix__blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><g id=\\"prefix__Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\"><path d=\\"M51 37 37 51\\" id=\\"prefix__Shape\\" class=\\"prefix__shape\\"/><path d=\\"M51 51 37 37\\" class=\\"prefix__shape\\"/></g></g></svg>"`;
 
-exports[`svgo optimizes svg 1`] = `"<svg width=\\"88\\" height=\\"88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><g id=\\"prefix__Blocks\\" class=\\"prefix__blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><g id=\\"prefix__Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\"><path d=\\"M51 37 37 51\\" id=\\"prefix__Shape\\"/><path d=\\"M51 51 37 37\\"/><style></style></g></g></svg>"`;
+exports[`svgo does remove style when \`native\` is true 1`] = `"<svg width=\\"88\\" height=\\"88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><g stroke=\\"#063855\\" stroke-width=\\"2\\" class=\\"prefix__blocks\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><path d=\\"M51 37 37 51M51 51 37 37\\" style=\\"fill:red\\"/></g></svg>"`;
 
-exports[`svgo supports \`config.svgoConfig\` 1`] = `"<svg width=\\"88\\" height=\\"88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><desc>Created with Sketch.</desc><g id=\\"Blocks\\" class=\\"blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><g id=\\"Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\"><path d=\\"M51 37 37 51\\" id=\\"Shape\\"/><path d=\\"M51 51 37 37\\"/><style></style></g></g></svg>"`;
+exports[`svgo optimizes svg 1`] = `"<svg width=\\"88\\" height=\\"88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><style>.prefix__shape{fill:red}</style><g id=\\"prefix__Blocks\\" class=\\"prefix__blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><g id=\\"prefix__Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\"><path d=\\"M51 37 37 51\\" id=\\"prefix__Shape\\" class=\\"prefix__shape\\"/><path d=\\"M51 51 37 37\\" class=\\"prefix__shape\\"/></g></g></svg>"`;
 
-exports[`svgo uses \`state.filePath\` to detect configuration 1`] = `"<svg width=\\"88\\" height=\\"88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><g id=\\"svgo__Blocks\\" class=\\"svgo__blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><g id=\\"svgo__Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\"><path d=\\"M51 37 37 51\\" id=\\"svgo__Shape\\"/><path d=\\"M51 51 37 37\\"/><style></style></g></g></svg>"`;
+exports[`svgo supports \`config.svgoConfig\` 1`] = `"<svg width=\\"88\\" height=\\"88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><desc>Created with Sketch.</desc><style>.shape{fill:red}</style><g id=\\"Blocks\\" class=\\"blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><g id=\\"Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\"><path d=\\"M51 37 37 51\\" id=\\"Shape\\" class=\\"shape\\"/><path d=\\"M51 51 37 37\\" class=\\"shape\\"/></g></g></svg>"`;
+
+exports[`svgo uses \`state.filePath\` to detect configuration 1`] = `"<svg width=\\"88\\" height=\\"88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><style>.svgo__shape{fill:red}</style><g id=\\"svgo__Blocks\\" class=\\"svgo__blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><g id=\\"svgo__Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\"><path d=\\"M51 37 37 51\\" id=\\"svgo__Shape\\" class=\\"svgo__shape\\"/><path d=\\"M51 51 37 37\\" class=\\"svgo__shape\\"/></g></g></svg>"`;
diff --git a/packages/plugin-svgo/src/config.test.ts b/packages/plugin-svgo/src/config.test.ts
@@ -1,20 +1,26 @@
 import { getSvgoConfig } from './config'
 
+const state = { componentName: 'Icon' }
+
 describe('#getSvgoConfig', () => {
   describe('with no specific config', () => {
     it('returns config with `prefixIds: true`', async () => {
       const config = {}
-      const state = {}
       expect(await getSvgoConfig(config, state)).toEqual({
-        plugins: ['preset-default', 'prefixIds'],
+        plugins: [
+          {
+            name: 'preset-default',
+            params: { overrides: {} },
+          },
+          'prefixIds',
+        ],
       })
     })
   })
 
   describe('with `config.icons` enabled', () => {
     it('returns config with `removeViewBox: false`', async () => {
       const config = { icon: true }
-      const state = {}
       expect(await getSvgoConfig(config, state)).toEqual({
         plugins: [
           {
@@ -30,7 +36,6 @@ describe('#getSvgoConfig', () => {
   describe('with `config.dimensions` disabled', () => {
     it('returns config with `removeViewBox: false`', async () => {
       const config = { dimensions: false }
-      const state = {}
       expect(await getSvgoConfig(config, state)).toEqual({
         plugins: [
           {

diff --git a/packages/plugin-svgo/src/config.ts b/packages/plugin-svgo/src/config.ts
@@ -17,19 +17,24 @@ const explorer = cosmiconfigSync('svgo', {
 })
 
 const getSvgoConfigFromSvgrConfig = (config: Config): any => {
-  const preset =
-    config.icon || config.dimensions === false
-      ? {
-          name: 'preset-default',
-          params: {
-            overrides: {
-              removeViewBox: false,
-            },
-          },
-        }
-      : 'preset-default'
+  const params = { overrides: {} as any }
+  if (config.icon || config.dimensions === false) {
+    params.overrides.removeViewBox = false
+  }
+  if (config.native) {
+    params.overrides.inlineStyles = {
+      onlyMatchedOnce: false,
+    }
+  }
+
   return {
-    plugins: [preset, 'prefixIds'],
+    plugins: [
+      {
+        name: 'preset-default',
+        params,
+      },
+      'prefixIds',
+    ],
   }
 }
 

diff --git a/packages/plugin-svgo/src/index.test.ts b/packages/plugin-svgo/src/index.test.ts
@@ -9,10 +9,11 @@ const baseSvg = `<?xml version="1.0" encoding="UTF-8"?>
   <title>Dismiss</title>
   <desc>Created with Sketch.</desc>
   <defs></defs>
+  <style>.shape{fill: red}</style>
   <g id="Blocks" class="blocks" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
       <g id="Dismiss" stroke="#063855" stroke-width="2">
-          <path d="M51,37 L37,51" id="Shape"></path>
-          <path d="M51,51 L37,37" id="Shape"></path>
+          <path d="M51,37 L37,51" id="Shape" class="shape"></path>
+          <path d="M51,51 L37,37" id="Shape" class="shape"></path>
           <style>
             #Shape {}
           </style>
@@ -47,7 +48,6 @@ describe('svgo', () => {
       },
       state,
     )
-
     expect(result).toMatchSnapshot()
   })
 
@@ -67,19 +67,21 @@ describe('svgo', () => {
       { svgo: true, runtimeConfig: false },
       { ...state, filePath: path.join(__dirname, '../__fixtures__/svgo') },
     )
-
     expect(result).toMatchSnapshot()
   })
 
   it('does not remove viewBox with `icon` option', () => {
     const result = svgo(baseSvg, { svgo: true, icon: true }, state)
-
     expect(result).toMatchSnapshot()
   })
 
   it('does not remove viewBox with when `dimensions` is false', () => {
     const result = svgo(baseSvg, { svgo: true, dimensions: false }, state)
+    expect(result).toMatchSnapshot()
+  })
 
+  it('does remove style when `native` is true', () => {
+    const result = svgo(baseSvg, { svgo: true, native: true }, state)
     expect(result).toMatchSnapshot()
   })
 })