tqwewe · otakustay · Nov 29, 2021 · Dec 5, 2021 · Dec 5, 2021 · Dec 6, 2021
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <title>Solid With Emotion</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+    <script src="./index.tsx" type="module"></script>
+  </body>
+</html>
diff --git a/demo/index.tsx b/demo/index.tsx
@@ -0,0 +1,47 @@
+import { render } from 'solid-js/web'
+import { styled, css, keyframes } from '../src'
+
+const progress = keyframes`
+  0% {
+    width: 0;
+  }
+  50% {
+    width: 100%;
+  }
+  100% {
+    width: 0;
+  }
+`
+
+const section = css`
+  background-color: #f6f8fa;
+  color: #333;
+`
+
+const StyledSection = styled.div`
+  ${section}
+  margin: 20px 0;
+  padding: 20px;
+`
+
+const Animation = styled.div`
+  height: 20px;
+  background-color: #007cd3;
+  animation: ${progress} 2s linear infinite;
+`
+
+function App() {
+  return (
+    <div>
+      <h1>SolidJS With Emotion</h1>
+      <StyledSection as="section">
+        <p>
+          This is a section created with <code>styled</code> function.
+        </p>
+        <Animation />
+      </StyledSection>
+    </div>
+  )
+}
+
+render(App, document.getElementById('root')!)
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "dist/**"
   ],
   "scripts": {
+    "start": "vite",
     "build": "rollup -c"
   },
   "devDependencies": {
@@ -29,7 +30,9 @@
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "solid-js": "^1.0.0",
-    "typescript": "^4.3.4"
+    "typescript": "^4.3.4",
+    "vite": "^2.6.14",
+    "vite-plugin-solid": "^2.1.2"
   },
   "peerDependencies": {
     "solid-js": "^1.0.0"
@@ -40,4 +43,4 @@
     "@emotion/serialize": "^1.0.2",
     "@emotion/utils": "^1.0.0"
   }
-}
+}
diff --git a/src/base.tsx b/src/base.tsx
@@ -9,7 +9,6 @@ import {
   getDefaultShouldForwardProp,
   composeShouldForwardProps,
   StyledOptions,
-  PrivateStyledComponent,
   StyledElementType,
 } from './utils'
 
@@ -223,14 +222,12 @@ const createStyled = (tag: any, options?: StyledOptions) => {
           nextOptions,
           true
         ),
-      })(
-        // @ts-ignore
-        ...styles
-      )
+      })(...styles)
     }
 
     return Styled as Component<Props & { as?: string; class?: string }>
   }
 }
 
-export default createStyled
+// Don't use default export: https://github.com/solidjs/solid/issues/744
+export { createStyled }
diff --git a/src/css.ts b/src/css.ts
@@ -0,0 +1,17 @@
+// Reference https://github.dev/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/react/src/css.js#L11
+import type { SerializedStyles } from '@emotion/utils'
+import { CSSInterpolation, serializeStyles } from '@emotion/serialize'
+
+function css(
+  template: TemplateStringsArray,
+  ...args: Array<CSSInterpolation>
+): SerializedStyles
+function css(...args: Array<CSSInterpolation>): SerializedStyles
+function css(
+  ...args: Array<TemplateStringsArray | CSSInterpolation>
+): SerializedStyles {
+  // @ts-expect-error https://github.com/emotion-js/emotion/pull/2572
+  return serializeStyles(args)
+}
+
+export { css }
diff --git a/src/index.ts b/src/index.ts
@@ -1,10 +1,19 @@
-import styledImport from './base'
+import { createStyled } from './base'
 import { tags } from './tags'
+import { css } from './css'
+import { keyframes } from './keyframes'
+
+type Styled = OmitThisParameter<typeof createStyled>
+
+type BoundStyled = ReturnType<Styled>
 
 // bind it to avoid mutating the original function
 // @ts-ignore
-export const styled = styledImport.bind()
+const styled = createStyled.bind() as Styled &
+  Record<typeof tags[number], BoundStyled>
 
 tags.forEach((tagName: any) => {
   ;(styled as any)[tagName] = styled(tagName)
 })
+
+export { styled, css, keyframes }
diff --git a/src/keyframes.ts b/src/keyframes.ts
@@ -0,0 +1,24 @@
+// Reference https://github.dev/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/react/src/keyframes.js#L24
+import { css } from './css'
+import { CSSInterpolation, Keyframes } from '@emotion/serialize'
+
+function keyframes(
+  template: TemplateStringsArray,
+  ...args: Array<CSSInterpolation>
+): Keyframes
+function keyframes(...args: Array<CSSInterpolation>): Keyframes
+function keyframes(...args: any[]): Keyframes {
+  let insertable = css(...args)
+  const name = `animation-${insertable.name}`
+  // @ts-expect-error Keyframes type could never be fit as it unions string and object
+  return {
+    name,
+    styles: `@keyframes ${name}{${insertable.styles}}`,
+    anim: 1,
+    toString() {
+      return `_SOLID_EMOTION_${this.name}_${this.styles}_SOLID_EMOTION_`
+    },
+  }
+}
+
+export { keyframes }
diff --git a/src/tags.ts b/src/tags.ts
@@ -135,4 +135,4 @@ export const tags = [
   'svg',
   'text',
   'tspan',
-]
+] as const
diff --git a/tsconfig.json b/tsconfig.json
@@ -17,5 +17,5 @@
     "jsx": "preserve",
     "jsxImportSource": "solid-js"
   },
-  "include": ["src"]
+  "include": ["src", "demo"]
 }
diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import solidPlugin from 'vite-plugin-solid'
+
+export default defineConfig({
+  root: './demo',
+  plugins: [solidPlugin()],
+  build: {
+    target: 'esnext',
+    polyfillDynamicImport: false,
+  },
+})