diff --git a/src/styleSheetSerializer.js b/src/styleSheetSerializer.js index 192bc77..f01956d 100644 --- a/src/styleSheetSerializer.js +++ b/src/styleSheetSerializer.js @@ -44,6 +44,7 @@ const getClassNames = nodes => }, new Set()); const filterClassNames = (classNames, hashes) => classNames.filter(className => hashes.includes(className)); +const filterUnreferencedClassNames = (classNames, hashes) => classNames.filter(className => className.startsWith('sc-') && !hashes.includes(className)); const includesClassNames = (classNames, selectors) => classNames.some(className => selectors.some(selector => selector.includes(className))); @@ -91,6 +92,10 @@ const replaceClassNames = (result, classNames, style) => .filter(className => style.includes(className)) .reduce((acc, className, index) => acc.replace(new RegExp(className, 'g'), `c${index++}`), result); +const stripUnreferencedClassNames = (result, classNames) => + classNames + .reduce((acc, className) => acc.replace(new RegExp(`${className}\\s?`,'g'), ''), result); + const replaceHashes = (result, hashes) => hashes.reduce( (acc, className) => acc.replace(new RegExp(`((class|className)="[^"]*?)${className}\\s?([^"]*")`, 'g'), '$1$3'), @@ -113,13 +118,17 @@ module.exports = { const hashes = getHashes(); let classNames = [...getClassNames(nodes)]; + let unreferencedClassNames = classNames; + classNames = filterClassNames(classNames, hashes); + unreferencedClassNames = filterUnreferencedClassNames(unreferencedClassNames, hashes); const style = getStyle(classNames); const classNamesToReplace = getClassNamesFromSelectorsByHashes(classNames, hashes); const code = print(val); let result = `${style}${style ? '\n\n' : ''}${code}`; + result = stripUnreferencedClassNames(result, unreferencedClassNames); result = replaceClassNames(result, classNamesToReplace, style); result = replaceHashes(result, hashes); diff --git a/test/__snapshots__/styleSheetSerializer.spec.js.snap b/test/__snapshots__/styleSheetSerializer.spec.js.snap index 5a05e69..dda2d8d 100644 --- a/test/__snapshots__/styleSheetSerializer.spec.js.snap +++ b/test/__snapshots__/styleSheetSerializer.spec.js.snap @@ -647,6 +647,64 @@ exports[`referring to other components: react-testing-library 1`] = ` `; +exports[`referring to other unreferenced components: mount 1`] = ` +.c0 { + font-size: 1.5em; + color: palevioletred; + font-weight: bold; +} + +
+ + + Styled, exciting Link + + +
+`; + +exports[`referring to other unreferenced components: react-test-renderer 1`] = ` +.c0 { + font-size: 1.5em; + color: palevioletred; + font-weight: bold; +} + +
+ + Styled, exciting Link + +
+`; + +exports[`referring to other unreferenced components: react-testing-library 1`] = ` +.c0 { + font-size: 1.5em; + color: palevioletred; + font-weight: bold; +} + +
+ + Styled, exciting Link + +
+`; + +exports[`referring to other unreferenced components: shallow 1`] = ` +
+ + Styled, exciting Link + +
+`; + exports[`shallow with theme 1`] = ` .c0 { color: mediumseagreen; diff --git a/test/styleSheetSerializer.spec.js b/test/styleSheetSerializer.spec.js index eef1074..cb90cf6 100644 --- a/test/styleSheetSerializer.spec.js +++ b/test/styleSheetSerializer.spec.js @@ -250,3 +250,20 @@ it('referring to other components', () => { expect(mount(component)).toMatchSnapshot('mount'); expect(render(component).container.firstChild).toMatchSnapshot('react-testing-library'); }); + +it('referring to other unreferenced components', () => { + const UnreferencedLink = styled.a` + font-size: 1.5em; + ` + + const ReferencedLink = styled(UnreferencedLink)` + color: palevioletred; + font-weight: bold; + ` + + toMatchSnapshot( +
+ Styled, exciting Link +
+ ); +});