feat(css): allow the css prop to accept fns and strings

README.md

@@ -467,8 +467,10 @@ const myCustomGlamorStyles = glamor.css({fontSize: 2})
 
 ##### using `css`
 
-This is an object and if provided, it will be merged with this component's and
-take highest priority over the component's predefined styles.
+This can be the same type as any of the styles provided
+(as in `glamorous.div(...styles)`). If specified, it will be merged with this
+component's styles and take highest priority over the component's predefined
+styles.
 
 ```jsx
 const myCustomGlamorStyles = glamor.css({fontSize: 2, padding: 2})

package.json

@@ -41,12 +41,12 @@
     "react": ">=14"
   },
   "devDependencies": {
-    "@types/react": "^15.0.26",
+    "@types/react": "^15.0.27",
     "all-contributors-cli": "^4.3.0",
     "babel-cli": "^6.24.1",
     "babel-jest": "^20.0.3",
     "babel-plugin-external-helpers": "^6.22.0",
-    "babel-preset-env": "^1.5.1",
+    "babel-preset-env": "^1.5.2",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
     "babel-register": "^6.24.1",
@@ -66,7 +66,7 @@
     "nps": "^5.3.1",
     "nps-utils": "^1.1.2",
     "opt-cli": "^1.5.1",
-    "prettier-eslint-cli": "^4.0.2",
+    "prettier-eslint-cli": "^4.1.0",
     "prop-types": "^15.5.10",
     "react": "^15.5.4",
     "react-addons-test-utils": "^15.5.1",
@@ -80,10 +80,10 @@
     "rollup-plugin-node-resolve": "^3.0.0",
     "rollup-plugin-replace": "^1.1.1",
     "rollup-plugin-uglify": "^2.0.1",
-    "tslint": "^5.4.2",
+    "tslint": "^5.4.3",
     "tslint-microsoft-contrib": "^5.0.0",
     "typescript": "^2.3.4",
-    "validate-commit-msg": "^2.12.1"
+    "validate-commit-msg": "^2.12.2"
   },
   "eslintConfig": {
     "extends": [

src/__tests__/__snapshots__/index.js.snap

@@ -57,7 +57,7 @@ exports[`can be configured to use the displayName in the className 1`] = `
 />
 `;
 
-exports[`can use pre-glamorous components with css attributes 1`] = `
+exports[`can use pre-built glamorous components with css attributes 1`] = `
 .css-1t62idy,
 [data-css-1t62idy] {
   -webkit-flex-direction: column;
@@ -79,7 +79,7 @@ exports[`can use pre-glamorous components with css attributes 1`] = `
 />
 `;
 
-exports[`can use pre-glamorous components with css prop 1`] = `
+exports[`can use pre-built glamorous components with css prop 1`] = `
 .css-1n96jtr,
 [data-css-1n96jtr] {
   -webkit-flex-direction: column;
@@ -102,6 +102,52 @@ exports[`can use pre-glamorous components with css prop 1`] = `
 />
 `;
 
+exports[`css prop with a className 1`] = `
+.css-1ezp9xe,
+[data-css-1ezp9xe] {
+  color: red;
+}
+
+<section
+  class="css-nil css-1ezp9xe abc-123"
+/>
+`;
+
+exports[`css prop with a function 1`] = `
+.css-1xnhj1e,
+[data-css-1xnhj1e] {
+  padding: 20px;
+}
+
+<section
+  class="css-1xnhj1e"
+/>
+`;
+
+exports[`css prop with an array 1`] = `
+.css-10ql5rd,
+[data-css-10ql5rd] {
+  margin-top: 1px;
+  margin-right: 2px;
+  margin-bottom: 2px;
+}
+
+<section
+  class="css-10ql5rd"
+/>
+`;
+
+exports[`css prop with an object 1`] = `
+.css-1dmiui7,
+[data-css-1dmiui7] {
+  font-size: 12px;
+}
+
+<section
+  class="css-1dmiui7"
+/>
+`;
+
 exports[`forwards props when the GlamorousComponent.rootEl is known 1`] = `
 .css-mhpxxj,
 [data-css-mhpxxj] {

src/__tests__/index.js

@@ -25,7 +25,7 @@ test('sanity test', () => {
   expect(render(<Div />)).toMatchSnapshotWithGlamor()
 })
 
-test('can use pre-glamorous components with css attributes', () => {
+test('can use pre-built glamorous components with css attributes', () => {
   expect(
     render(
       <glamorous.A
@@ -39,7 +39,7 @@ test('can use pre-glamorous components with css attributes', () => {
   ).toMatchSnapshotWithGlamor()
 })
 
-test('can use pre-glamorous components with css prop', () => {
+test('can use pre-built glamorous components with css prop', () => {
   const computed = 'background'
   expect(
     render(
@@ -57,6 +57,41 @@ test('can use pre-glamorous components with css prop', () => {
   ).toMatchSnapshotWithGlamor()
 })
 
+test('the css prop accepts "GlamorousStyles"', () => {
+  const object = {fontSize: 12}
+  expect(render(<glamorous.Section css={object} />)).toMatchSnapshotWithGlamor(
+    'css prop with an object',
+  )
+
+  const array = [
+    {marginTop: 1, marginRight: 1},
+    {marginRight: 2, marginBottom: 2},
+  ]
+  expect(render(<glamorous.Section css={array} />)).toMatchSnapshotWithGlamor(
+    'css prop with an array',
+  )
+
+  // this one's weird, but could enable some Ahead of Time
+  // compilation in the future
+  const className = `${glamor.css({color: 'red'})} abc-123`
+  expect(
+    render(<glamorous.Section css={className} />),
+  ).toMatchSnapshotWithGlamor('css prop with a className')
+
+  const fn = jest.fn(() => ({padding: 20}))
+  const props = {css: fn, otherThing: 43, theme: {color: 'red'}}
+  expect(render(<glamorous.Section {...props} />)).toMatchSnapshotWithGlamor(
+    'css prop with a function',
+  )
+  expect(fn).toHaveBeenCalledTimes(1)
+  const context = {__glamorous__: undefined}
+  expect(fn).toHaveBeenCalledWith(
+    expect.objectContaining(props),
+    expect.objectContaining(props.theme),
+    expect.objectContaining(context),
+  )
+})
+
 test('merges composed component styles for reasonable overrides', () => {
   const Parent = glamorous.div({
     marginTop: 1,
@@ -404,9 +439,7 @@ test('can accept classNames instead of style objects', () => {
   // this is to support a babel plugin to pre-compile static styles
   const className1 = glamor.css({paddingTop: 1, paddingRight: 1}).toString()
   const styles2 = {paddingRight: 2, paddingBottom: 2}
-  const className3 = glamor
-    .css({paddingBottom: 3, paddingLeft: 3})
-    .toString()
+  const className3 = glamor.css({paddingBottom: 3, paddingLeft: 3}).toString()
   const styles4 = {paddingLeft: 4}
   const Comp = glamorous.div(
     className1,

src/get-glamor-classname.js

@@ -26,6 +26,31 @@ function extractGlamorStyles(className = '') {
 export default getGlamorClassName
 
 function getGlamorClassName(styles, props, cssOverrides, theme, context) {
+  const {mappedArgs, nonGlamorClassNames} = handleStyles(
+    styles,
+    props,
+    theme,
+    context,
+  )
+  const {
+    mappedArgs: cssOverridesArgs,
+    nonGlamorClassNames: cssOverridesClassNames,
+  } = handleStyles([cssOverrides], props, theme, context)
+  const {
+    glamorStyles: parentGlamorStyles,
+    glamorlessClassName,
+  } = extractGlamorStyles(props.className)
+
+  const glamorClassName = css(
+    ...mappedArgs,
+    ...parentGlamorStyles,
+    ...cssOverridesArgs,
+  ).toString()
+  const extras = nonGlamorClassNames.concat(cssOverridesClassNames).join(' ')
+  return `${glamorlessClassName} ${glamorClassName} ${extras}`.trim()
+}
+
+function handleStyles(styles, props, theme, context) {
   let current
   const mappedArgs = []
   const nonGlamorClassNames = []
@@ -44,17 +69,7 @@ function getGlamorClassName(styles, props, cssOverrides, theme, context) {
       mappedArgs.push(current)
     }
   }
-  const {
-    glamorStyles: parentGlamorStyles,
-    glamorlessClassName,
-  } = extractGlamorStyles(props.className)
-  const glamorClassName = css(
-    ...mappedArgs,
-    ...parentGlamorStyles,
-    cssOverrides,
-  ).toString()
-  const extras = nonGlamorClassNames.join(' ')
-  return `${glamorlessClassName} ${glamorClassName} ${extras}`.trim()
+  return {mappedArgs, nonGlamorClassNames}
 }
 
 function processStringClass(str, mappedArgs, nonGlamorClassNames) {

src/umd-entry.js

@@ -4,16 +4,13 @@ const glamorous = glamorousStar.default
 
 Object.assign(
   glamorous,
-  Object.keys(glamorousStar).reduce(
-    (e, prop) => {
-      if (prop !== 'default') {
-        // eslint-disable-next-line import/namespace
-        e[prop] = glamorousStar[prop]
-      }
-      return e
-    },
-    {},
-  ),
+  Object.keys(glamorousStar).reduce((e, prop) => {
+    if (prop !== 'default') {
+      // eslint-disable-next-line import/namespace
+      e[prop] = glamorousStar[prop]
+    }
+    return e
+  }, {}),
 )
 
 export default glamorous

yarn.lock

@@ -2,9 +2,9 @@
 # yarn lockfile v1
 
 
-"@types/react@^15.0.26":
-  version "15.0.26"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-15.0.26.tgz#19d8969edcabb2aa6d10ccfba807e67a93a0a8f4"
+"@types/react@^15.0.27":
+  version "15.0.27"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-15.0.27.tgz#d64ad424aa24a101fd50cdeae6eab3d53e65513d"
 
 abab@^1.0.3:
   version "1.0.3"
@@ -885,9 +885,9 @@ babel-polyfill@^6.23.0:
     core-js "^2.4.0"
     regenerator-runtime "^0.10.0"
 
-babel-preset-env@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.5.1.tgz#d2eca6af179edf27cdc305a84820f601b456dd0b"
+babel-preset-env@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.5.2.tgz#cd4ae90a6e94b709f97374b33e5f8b983556adef"
   dependencies:
     babel-plugin-check-es2015-constants "^6.22.0"
     babel-plugin-syntax-trailing-function-commas "^6.22.0"
@@ -4775,9 +4775,9 @@ preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
-prettier-eslint-cli@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/prettier-eslint-cli/-/prettier-eslint-cli-4.0.2.tgz#84520ff9efc80bbae4a7a477ea362e36be836103"
+prettier-eslint-cli@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/prettier-eslint-cli/-/prettier-eslint-cli-4.1.0.tgz#506f5fa63d8bffd3eb48b754223d1223f5cde4ab"
   dependencies:
     arrify "^1.0.1"
     babel-runtime "^6.23.0"
@@ -5873,9 +5873,9 @@ tslint-microsoft-contrib@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/tslint-microsoft-contrib/-/tslint-microsoft-contrib-5.0.0.tgz#0ff6389ce3dbc5ea103782900a7806fffa1450ff"
 
-tslint@^5.4.2:
-  version "5.4.2"
-  resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.4.2.tgz#609b6640cc0424f4a395a9adf68c375563c549c7"
+tslint@^5.4.3:
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.4.3.tgz#761c8402b80e347b7733a04390a757b253580467"
   dependencies:
     babel-code-frame "^6.22.0"
     colors "^1.1.2"
@@ -6041,9 +6041,9 @@ v8flags@^2.0.10:
   dependencies:
     user-home "^1.1.1"
 
-validate-commit-msg@^2.12.1:
-  version "2.12.1"
-  resolved "https://registry.yarnpkg.com/validate-commit-msg/-/validate-commit-msg-2.12.1.tgz#612b61bc9f09f0fee5130de3648870d01cdddf1d"
+validate-commit-msg@^2.12.2:
+  version "2.12.2"
+  resolved "https://registry.yarnpkg.com/validate-commit-msg/-/validate-commit-msg-2.12.2.tgz#6d5015331bf196c22afb880d3f33bcef1deafea6"
   dependencies:
     conventional-commit-types "^2.0.0"
     find-parent-dir "^0.3.0"