Create JSS-styled prototype

Author: lttb

src/index.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import injectSheetDefault from 'react-jss'
+import { pure } from 'recompose'
+
+
+type StyledElementType = Function & { Tag: string, styles: Object }
+
+
+export const prepareStyled = (injectSheet: Function = injectSheetDefault) =>
+  (
+    Element: string | StyledElementType,
+    styles: Object,
+    baseStyles: ?Object = {},
+  ): StyledElementType => {
+    const {
+      Tag,
+      styles: inheritStyles = {},
+    }: {
+      Tag: string,
+      styles?: Object
+    } = typeof Element === 'string' ? { Tag: Element } : Element
+
+    const elementStyles = { ...inheritStyles, ...styles }
+
+    const StyledElement = pure(
+      injectSheet({ [Tag]: elementStyles, ...baseStyles })(({ classes, children }) =>
+        <Tag className={classes[Tag]}>
+          {children}
+        </Tag>,
+      ),
+    )
+
+    return Object.assign(StyledElement, { Tag, styles: elementStyles })
+  }
+
+export const styled = prepareStyled()
+
+export const setStyledCreator = (styledFunction: Function = styled) =>
+  (baseStyles: Object) => Object.assign(
+    (Element: string | StyledElementType, styles: Object) =>
+      styledFunction(Element, styles, baseStyles),
+    { styles: baseStyles },
+  )
+
+export default setStyledCreator()

src/tests/.eslintrc

@@ -0,0 +1,4 @@
+rules:
+  import/no-extraneous-dependencies:
+    - error
+    - devDependencies: true

src/tests/App.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+
+
+export default (styled: Function) => {
+  const App = styled('div', {
+    margin: '50px',
+  })
+
+  const Header = styled('header', {
+    padding: '10px',
+  })
+
+  const Section = styled('section', {
+    color: 'red',
+  })
+
+  const AnotherSection = styled(Section, {
+    color: 'yellow',
+  })
+
+  const Title = styled('h1', {
+    color: 'red',
+  })
+
+  const Button = styled('button', {
+    margin: ({ margin = 0 }) => `${margin}px`,
+  })
+
+
+  return () => (
+    <App>
+      <Header>
+        <Title>Title</Title>
+      </Header>
+
+      <Section data-name="content">
+        <Button>primitive test</Button>
+        <Button _margin={10}>dynamic primitive test</Button>
+      </Section>
+
+      <AnotherSection>Another section</AnotherSection>
+    </App>
+  )
+}

src/tests/__snapshots__/index.spec.jsx.snap

@@ -0,0 +1,55 @@
+exports[`test renders correctly App with default Styled 1`] = `
+<div
+  className="div-0-8">
+  <header
+    className="header-0-9">
+    <h1
+      className="h1-0-10">
+      Title
+    </h1>
+  </header>
+  <section
+    className="section-0-11">
+    <button
+      className="button-0-13 button-0-12">
+      primitive test
+    </button>
+    <button
+      className="button-0-14 button-0-12">
+      dynamic primitive test
+    </button>
+  </section>
+  <section
+    className="section-0-15">
+    Another section
+  </section>
+</div>
+`;
+
+exports[`test renders correctly App with default styled 1`] = `
+<div
+  className="div-0-0">
+  <header
+    className="header-0-1">
+    <h1
+      className="h1-0-2">
+      Title
+    </h1>
+  </header>
+  <section
+    className="section-0-3">
+    <button
+      className="button-0-5 button-0-4">
+      primitive test
+    </button>
+    <button
+      className="button-0-6 button-0-4">
+      dynamic primitive test
+    </button>
+  </section>
+  <section
+    className="section-0-7">
+    Another section
+  </section>
+</div>
+`;

src/tests/index.spec.jsx

@@ -0,0 +1,27 @@
+import renderer from 'react-test-renderer'
+import React from 'react'
+
+import Styled, { styled } from '../'
+
+import CreateApp from './App'
+
+
+it('renders correctly App with default styled', () => {
+  const App = CreateApp(styled)
+  const tree = renderer.create(<App />).toJSON()
+
+  expect(tree).toMatchSnapshot()
+})
+
+it('renders correctly App with default Styled', () => {
+  const customStyled = Styled({
+    baseButton: {
+      color: 'red',
+    },
+  })
+
+  const App = CreateApp(customStyled)
+  const tree = renderer.create(<App />).toJSON()
+
+  expect(tree).toMatchSnapshot()
+})