Merge pull request #752 from sungik-choi/fix/styled-func

styled-components로 생성되는 className에 namespace 추가, 잘못된 FoundationStyled의 구현 수정

Author: sungik-choi

package-lock.json

@@ -142,6 +142,7 @@
     "tslib": "^2.3.1",
     "ttypescript": "^1.5.13",
     "typescript": "^4.4.3",
+    "typescript-plugin-styled-components": "^2.0.0",
     "typescript-transform-paths": "^3.3.1"
   },
   "peerDependencies": {

package.json

@@ -6,18 +6,28 @@ import commonjs from '@rollup/plugin-commonjs'
 import babel from '@rollup/plugin-babel'
 import { visualizer } from 'rollup-plugin-visualizer'
 import typescript from 'rollup-plugin-typescript2'
+import createStyledComponentsTransformer from 'typescript-plugin-styled-components'
 
 import packageJson from './package.json'
 
 const extensions = DEFAULT_EXTENSIONS.concat(['.ts', '.tsx'])
 
+const styledComponentsTransformer = createStyledComponentsTransformer({
+  displayName: true,
+})
+
 // Order Matters, must after rollup-plugin-node-resolve
 // See Also: https://www.npmjs.com/package/rollup-plugin-typescript2
 const typescriptPlugin = typescript({
   typescript: require('ttypescript'),
   tsconfig: './tsconfig.json',
   useTsconfigDeclarationDir: true,
   declarationDir: './build/src',
+  transformers: [
+    () => ({
+      before: [styledComponentsTransformer],
+    }),
+  ],
   tsconfigDefaults: {
     noEmit: false,
     emitDeclarationOnly: true,

rollup.config.js

@@ -76,38 +76,33 @@ interface FoundationStyledInterface extends FoundationStyledComponentFactories {
   ): ThemedStyledFunction<C, Foundation, { foundation?: Foundation }>
 }
 
+function templateFunctionGenerator(BaseComponentGenerator: ThemedStyledFunction<any, any, object, string | number | symbol>) {
+  const customTemplateFn = (...args: TemplateStringsArray) => {
+    // @ts-ignore
+    const BaseComponent = BaseComponentGenerator(...args)
+    const BaseRefComponent = forwardRef((props, ref) => {
+      const currentFoundation = useContext(FoundationContext)
+      return (
+        <BaseComponent
+          ref={ref}
+          key={args.toString()}
+          foundation={currentFoundation}
+          {...props}
+        />
+      )
+    })
+    BaseRefComponent.toString = BaseComponent.toString
+    return BaseRefComponent
+  }
+  customTemplateFn.attrs = (attrs) => templateFunctionGenerator(BaseComponentGenerator.attrs(attrs))
+  customTemplateFn.withConfig = (config) => templateFunctionGenerator(BaseComponentGenerator.withConfig(config))
+  return customTemplateFn
+}
+
 /* eslint-disable-next-line func-names */ /* @ts-ignore */
 const FoundationStyled: FoundationStyledInterface = (tag) => {
   const tagTemplate = styled(tag)
-
-  function templateFunctionGenerator(BaseComponentGenerator) {
-    return function customTemplateFunction(...args: TemplateStringsArray) {
-      const BaseComponent = BaseComponentGenerator(...args)
-
-      const BaseRefComponent = forwardRef((props, ref) => {
-        const currentFoundation = useContext(FoundationContext)
-        return (
-          <BaseComponent
-            ref={ref}
-            key={args.toString()}
-            foundation={currentFoundation}
-            {...props}
-          />
-        )
-      })
-      BaseRefComponent.toString = BaseComponent.toString
-
-      return BaseRefComponent
-    }
-  }
-
-  const wrappedTemplateFunction = templateFunctionGenerator(tagTemplate)
-  // @ts-ignore
-  wrappedTemplateFunction.attrs = attrs => templateFunctionGenerator(tagTemplate.attrs(attrs))
-  // @ts-ignore
-  wrappedTemplateFunction.withConfig = config => templateFunctionGenerator(tagTemplate.withConfig(config))
-
-  return wrappedTemplateFunction
+  return templateFunctionGenerator(tagTemplate)
 };
 
 (domElements as Array<AnyStyledComponent>).forEach(element => {