Introduces "produceStyles" Layout option

package.json

@@ -81,6 +81,7 @@
     "coveralls": "^3.0.2",
     "cross-env": "^5.2.0",
     "cypress": "^3.0.3",
+    "emotion": "^10.0.9",
     "husky": "^1.0.0-rc.9",
     "jest": "23.6.0",
     "jest-dom": "^3.1.2",

src/Layout.ts

@@ -34,7 +34,13 @@ class Layout {
       ...options,
     }
 
-    const { breakpoints, defaultBreakpointName } = this.options
+    const { produceStyles, breakpoints, defaultBreakpointName } = this.options
+
+    invariant(
+      produceStyles && typeof produceStyles === 'function',
+      'Failed to configure Layout: expected "produceStyles" to be a style producing function, but got: %s',
+      typeof produceStyles,
+    )
 
     invariant(
       breakpoints,

src/components/Box.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import styled from 'styled-components'
+import Layout from '../Layout'
 import { GenericProps } from '@const/props'
 import applyStyles from '@utils/styles/applyStyles'
 
@@ -9,7 +9,9 @@ export interface BoxProps extends GenericProps {
   inline?: boolean
 }
 
-const Box: React.FunctionComponent<BoxProps> = styled.div<BoxProps>`
+const Box: React.FunctionComponent<BoxProps> = Layout.options.produceStyles.div<
+  BoxProps
+>`
   && {
     ${applyStyles};
     display: ${({ flex, inline }) =>

src/components/Composition.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import styled from 'styled-components'
+import Layout from '../Layout'
 import { GenericProps, GridProps } from '@const/props'
 import { AreasMap } from '@utils/templates/generateComponents'
 import parseTemplates from '@utils/templates/parseTemplates'
@@ -14,7 +14,7 @@ interface CompositionProps extends GenericProps, GridProps {
   inline?: boolean
 }
 
-const CompositionWrapper = styled.div<CompositionProps>`
+const CompositionWrapper = Layout.options.produceStyles.div<CompositionProps>`
   && {
     ${applyStyles};
     display: ${({ inline }) => (inline ? 'inline-grid' : 'grid')};

src/const/defaultOptions.ts

@@ -16,7 +16,16 @@ export type BreakpointBehavior = 'up' | 'down' | 'only'
 export interface Breakpoints {
   [breakpointName: string]: Breakpoint
 }
+
 export interface LayoutOptions {
+  /**
+   * A function that produces tag-based styles (i.e. `produceStyles.div`)
+   * of the CSS-in-JS solution of your choice.
+   * @example
+   * import styled from 'styled-components'
+   * produceStyles: styled
+   */
+  produceStyles: any /** @todo Type this */
   /**
    * Measurement unit that suffixes numeric prop values.
    * @default "px"
@@ -27,6 +36,8 @@ export interface LayoutOptions {
   defaultUnit: MeasurementUnit
   /**
    * Map of layout breakpoints.
+   * @default Bootstrap4
+   * @see https://getbootstrap.com/docs/4.0/layout/grid/#grid-options
    */
   breakpoints: Breakpoints
   /**
@@ -35,6 +46,10 @@ export interface LayoutOptions {
    * @default "xs"
    */
   defaultBreakpointName: string
+  /**
+   * Default behavior of responsive props application.
+   * @default "up" (mobile-first)
+   */
   defaultBehavior: BreakpointBehavior
 }
 
@@ -58,7 +73,16 @@ export interface Breakpoint extends MediaQuery {
   [propName: string]: any
 }
 
+import styled from 'styled-components'
+
 const defaultOptions: LayoutOptions = {
+  /**
+   * @todo Do not import "styled-component"
+   * That makes it a dependency of "atomic-layout".
+   * Find a way to ship default behavior without requiring
+   * to have a potentially opt-out module as a dependency.
+   */
+  produceStyles: styled,
   defaultUnit: 'px',
   defaultBehavior: 'up',
   defaultBreakpointName: 'xs',

src/utils/templates/generateComponents/generateComponents.tsx

@@ -1,14 +1,11 @@
 import { AreasList } from '../getAreasList'
 import * as React from 'react'
-import styled from 'styled-components'
 import { Breakpoint } from '@const/defaultOptions'
 import { GenericProps } from '@const/props'
 import MediaQuery from '@components/MediaQuery'
 import Box, { BoxProps } from '@components/Box'
 import capitalize from '@utils/strings/capitalize'
-import getAreaBreakpoints, {
-  AreaBreakpoint,
-} from '@utils/breakpoints/getAreaBreakpoints'
+import getAreaBreakpoints from '@utils/breakpoints/getAreaBreakpoints'
 
 export type AreaComponent = React.FunctionComponent<BoxProps>
 export interface AreasMap {