Skip to content

Commit

Permalink
feat(native): automatically convert inline style in native
Browse files Browse the repository at this point in the history 
Closes #588
  • Loading branch information
@gregberge
gregberge committed Dec 1, 2021
1 parent 0f9dcb2 commit 138c493
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 27 deletions.
14 changes: 8 additions & 6 deletions packages/plugin-svgo/src/__snapshots__/index.test.ts.snap
View file
@@ -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>"`;
13 changes: 9 additions & 4 deletions packages/plugin-svgo/src/config.test.ts
View file
@@ -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: [
{
Expand All @@ -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: [
{
Expand Down
29 changes: 17 additions & 12 deletions packages/plugin-svgo/src/config.ts
View file
Expand Up @@ -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',
],
}
}

Expand Down
12 changes: 7 additions & 5 deletions packages/plugin-svgo/src/index.test.ts
View file
Expand Up @@ -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>
Expand Down Expand Up @@ -47,7 +48,6 @@ describe('svgo', () => {
},
state,
)

expect(result).toMatchSnapshot()
})

Expand All @@ -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()
})
})

0 comments on commit 138c493

Please sign in to comment.