feat(asCore): Convert asCore into getCoreStyles helper

.vscode/settings.json

@@ -1,6 +1,5 @@
 {
   "editor.detectIndentation": false,
-  "editor.formatOnSave": false,
   "editor.insertSpaces": true,
   "editor.tabSize": 2,
   "files.associations": {

package.json

@@ -5,14 +5,7 @@
   "main": "index.js",
   "unpkg": "dist/gymnast.min.js",
   "homepage": "https://gymnastjs.github.io/gymnast",
-  "files": [
-    "package.json",
-    "README.md",
-    "LICENSE",
-    "src",
-    "dist",
-    "index.js"
-  ],
+  "files": ["package.json", "README.md", "LICENSE", "src", "dist", "index.js"],
   "repository": {
     "type": "git",
     "url": "https://github.com/gymnastjs/gymnast"
@@ -104,10 +97,7 @@
     "webpack-bundle-analyzer": "2.10.0"
   },
   "lint-staged": {
-    "*.{js,css}": [
-      "format",
-      "git add"
-    ]
+    "*.{js,css}": ["format", "git add"]
   },
   "bundlesize": [
     {
@@ -116,9 +106,7 @@
     }
   ],
   "jest": {
-    "collectCoverageFrom": [
-      "src/{,**/}*.js"
-    ],
+    "collectCoverageFrom": ["src/{,**/}*.js"],
     "setupTestFrameworkScriptFile": "<rootDir>/test/env.js",
     "moduleNameMapper": {
       "^.+[.]css$": "identity-obj-proxy",
@@ -127,9 +115,7 @@
     "transform": {
       "^.+[.]js$": "babel-jest"
     },
-    "transformIgnorePatterns": [
-      "<rootDir>/node_modules\\/(?!picturebook)"
-    ]
+    "transformIgnorePatterns": ["<rootDir>/node_modules\\/(?!picturebook)"]
   },
   "scripts": {
     "build:dev": "webpack --config scripts/webpack.config.js",
@@ -148,10 +134,11 @@
     "lint": "npm-run-all --parallel lint:*",
     "precommit": "lint-staged",
     "start:storybook": "picturebook -p 9001 -s ./static -c node_modules/picturebook/config",
-    "start:webpack": "yarn build:dev -- --watch",
+    "start:webpack": "yarn build:dev --watch",
     "start": "npm-run-all --parallel start:*",
     "test:bithound": "bithound check git@github.com:gymnastjs/gymnast.git",
-    "test:image": "picturebook-image --env iphone7,ie11,safari,firefox,edge,chrome --suiteRetries 3",
+    "test:image":
+      "picturebook-image --env iphone7,ie11,safari,firefox,edge,chrome --suiteRetries 3",
     "test:size": "bundlesize",
     "test": "jest",
     "test:cover": "jest --coverage",

scripts/webpack.config.js

@@ -52,6 +52,7 @@ module.exports = {
     rules: [
       {
         test: /\.js$/,
+        exclude: /node_modules/,
         use: 'babel-loader',
       },
     ],

src/asGrid/index.js

@@ -8,17 +8,26 @@ import type {
 } from '../types'
 import { styles, getCol } from './grid.styles'
 import { getValue } from '../utils'
-import asCore from '../core/asCore'
+import getCoreStyles from '../core'
+import withResolution from '../withResolution'
 
 const resolutionProperties = ['align', 'justify', 'size']
 
 export default function asGrid(
   Component: React.ComponentType<*> | string
 ): React.ComponentType<GridProps> {
   function Grid(
-    { align, className, justify, size, innerRef, ...props }: OneResolutionGrid,
+    {
+      align,
+      className,
+      justify,
+      size,
+      innerRef,
+      ...restProps
+    }: OneResolutionGrid,
     context: ConfigProviderContext
   ) {
+    const props = getCoreStyles(restProps, context)
     const classes = compact([
       styles.grid,
       getCol(size, getValue(context, 'columns')),
@@ -27,8 +36,8 @@ export default function asGrid(
       justify && styles[`${justify}Justify`],
     ])
 
-    return <Component {...props} ref={innerRef} className={classes.join(' ')} />
+    return <Component ref={innerRef} {...props} className={classes.join(' ')} />
   }
 
-  return asCore(Grid, resolutionProperties)
+  return withResolution(Grid, resolutionProperties)
 }

src/asLayout/index.js

@@ -7,8 +7,9 @@ import type {
   LayoutProps,
 } from '../types'
 import getStyles from './layout.styles'
-import asCore from '../core/asCore'
+import getCoreStyles from '../core'
 import { getValues } from '../utils/index'
+import withResolution from '../withResolution'
 
 const resolutionProperties = ['fixed', 'height', 'overflow']
 
@@ -22,11 +23,12 @@ export default function asLayout(
       height,
       overflow,
       innerRef,
-      ...props
+      ...restProps
     }: OneResolutionLayout,
     context: ConfigProviderContext
   ) {
-    const styles = getStyles(getValues(context, props))
+    const props = getCoreStyles(restProps, context)
+    const styles = getStyles(getValues(context, restProps))
     const classes = compact([
       className,
       fixed && styles[`${fixed}Fixed`],
@@ -37,5 +39,6 @@ export default function asLayout(
 
     return <Component ref={innerRef} {...props} className={classes.join(' ')} />
   }
-  return asCore(Layout, resolutionProperties)
+
+  return withResolution(Layout, resolutionProperties)
 }

src/core/__snapshots__/core.spec.js.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`getCoreStyles should allow overriding base 1`] = `
+Object {
+  "borderBottomWidth": 20,
+  "borderLeftWidth": 20,
+  "borderRightWidth": 20,
+  "borderTopWidth": 20,
+}
+`;
+
+exports[`getCoreStyles should return remaining props 1`] = `
+Object {
+  "borderBottomWidth": 16,
+  "borderLeftWidth": 16,
+  "borderRightWidth": 16,
+  "borderTopWidth": 16,
+}
+`;
+
+exports[`getCoreStyles should return styles 1`] = `
+Object {
+  "borderBottomWidth": 16,
+  "borderLeftWidth": 16,
+  "borderRightWidth": 16,
+  "borderTopWidth": 16,
+}
+`;

src/core/core.spec.js

@@ -1,40 +1,25 @@
-import React from 'react'
-import { mount } from 'enzyme'
-import asCore from './asCore'
+import getCoreStyles from './index'
 import defaults from '../defaults'
 
-describe('asCore', () => {
-  let wrapper
+describe('getCoreStyles', () => {
+  it('should return styles', () => {
+    const { style } = getCoreStyles({ margin: 2 }, defaults)
 
-  it('should allow wrapping any element into a Core', () => {
-    const Span = asCore(() => <span />)
-    wrapper = mount(<Span />)
-
-    expect(wrapper.html().includes('span')).toBe(true)
-  })
-
-  it('should allow overriding base', () => {
-    const Grid = asCore('div')
-
-    wrapper = mount(<Grid base={2} paddingTop={1} />)
-
-    expect(wrapper.html()).toContain('padding-top: 2px')
+    expect(style).toMatchSnapshot()
   })
 
-  it('should use default base when no config or no base parameters are provided', () => {
-    const Grid = asCore('div')
-    const padding = 1
-
-    wrapper = mount(<Grid paddingTop={padding} />)
-
-    expect(wrapper.html()).toContain(
-      `padding-top: ${defaults.base * padding}px`
+  it('should return remaining props', () => {
+    const { style, ...rest } = getCoreStyles(
+      { margin: 2, foo: 'bar' },
+      defaults
     )
+    expect(style).toMatchSnapshot()
+    expect(rest).toEqual({ foo: 'bar' })
   })
 
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.unmount()
-    }
+  it('should allow overriding base', () => {
+    const { style } = getCoreStyles({ margin: 2, base: 10 }, defaults)
+
+    expect(style).toMatchSnapshot()
   })
 })

src/core/index.js

@@ -0,0 +1,45 @@
+// @flow
+import { combineSpacing, getValue } from '../utils'
+import type { ConfigProviderContext, OneResolution } from '../types'
+
+export default function getCoreStyles(
+  props: $Shape<OneResolution>,
+  context: ConfigProviderContext
+) {
+  const {
+    base,
+    margin,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    marginTop,
+    padding,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    style,
+    ...restProps
+  } = props
+
+  const spacing = combineSpacing({
+    spacingProps: {
+      margin,
+      padding,
+      marginTop,
+      marginRight,
+      marginBottom,
+      marginLeft,
+      paddingTop,
+      paddingRight,
+      paddingBottom,
+      paddingLeft,
+    },
+    base: getValue(context, 'base', base),
+    spacingAliases: getValue(context, 'spacingAliases'),
+  })
+
+  const spacingStyles = { ...style, ...spacing }
+
+  return { ...restProps, style: spacingStyles }
+}

src/withResolution/index.js

@@ -13,6 +13,7 @@ import {
   hasTrueValues,
   isObject,
   type ShouldShow,
+  sharedResolutionProperties,
 } from './withResolution.logic'
 
 type Props = { show?: DisplayValues }
@@ -25,6 +26,10 @@ export default function withResolution(
   resolutionKeys: Array<string>,
   coercedSupport?: boolean = supportsMatchMedia
 ) {
+  const combinedResolutionKeys = sharedResolutionProperties.concat(
+    resolutionKeys
+  )
+
   if (!coercedSupport) {
     log.warn(errors.NOMATCHMEDIA)
     return Component
@@ -84,7 +89,7 @@ export default function withResolution(
     }
 
     anyPropsUseResolutionFormat = () =>
-      resolutionKeys.some(key => isObject(this.props[key]))
+      combinedResolutionKeys.some(key => isObject(this.props[key]))
 
     removeMediaQueryListener = (show?: DisplayValues) => {
       const queries = this.getQueries(show)
@@ -114,7 +119,7 @@ export default function withResolution(
       const props = getSingleResolutionProps({
         props: this.props,
         shouldShow: this.state.shouldShow,
-        resolutionKeys,
+        resolutionKeys: combinedResolutionKeys,
         fallbackDisplayKey: getValue(this.context, 'fallbackDisplayKey'),
       })