fix #11

CHANGELOG.md

@@ -1,6 +1,10 @@
 
 # Change log
 
+### 2.0.2
+
+- fixed use of multiple expressions [#11](https://github.com/jameslnewell/styled-components-breakpoint/issues/11)
+
 ### 2.0.1
 
 - added missing `./dist` files 😬

package.json

@@ -1,7 +1,7 @@
 {
   "name": "styled-components-breakpoint",
   "repository": "jameslnewell/styled-components-breakpoint",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Utility functions for creating breakpoints in `styled-components` 💅.",
   "keywords": [
     "react",
@@ -28,6 +28,7 @@
     "enzyme-adapter-react-16": "^1.1.1",
     "enzyme-to-json": "^3.3.1",
     "gh-pages": "^1.1.0",
+    "husky": "^0.14.3",
     "jest-styled-components": "^4.11.0-1",
     "react": "^16.2.0",
     "react-create-component-from-tag-prop": "^1.3.1",
@@ -43,7 +44,8 @@
     "test": "tradie test",
     "deploy": "gh-pages -d \"./dist/example\"",
     "prepublishOnly": "yarn run clean && yarn run build && yarn run test",
-    "postpublish": "yarn run deploy"
+    "postpublish": "yarn run deploy",
+    "precommit": "yarn run test"
   },
   "license": "MIT"
-}
+}

src/core.js

@@ -40,13 +40,14 @@ function withSingleCriteria(breakpoints: BreakpointMap, name: string, operator:
   // special case for 0 to avoid wrapping styles in an unnecessary @media block
   if (operator === 'min-width' && value === 0) {
     return function (strings: string[], ...interpolations: StyledComponentsInterpolation[]) {
-      return css(strings, interpolations);
+      return css(strings, ...interpolations);
     }
   }
 
+
   return function (strings: string[], ...interpolations: StyledComponentsInterpolation[]) {
     return css`@media (${operator}: ${convertPxToEm(value + offset)}em) {
-      ${css(strings, interpolations)}
+      ${css(strings, ...interpolations)}
     }`;
   };
 }
@@ -72,7 +73,7 @@ export function _between(breakpoints: BreakpointMap, gte: string, lt: string) {
   const ltValue = getValueFromName(breakpoints, lt);
   return function (strings: string[], ...interpolations: StyledComponentsInterpolation[]) {
     return css`@media (min-width: ${convertPxToEm(gteValue)}em) and (max-width: ${convertPxToEm(ltValue - 1)}em) {
-      ${css(strings, interpolations)}
+      ${css(strings, ...interpolations)}
     }`;
   };
 }

src/index.test.js

@@ -14,7 +14,7 @@ const customBreakpoints = {
 describe('breakpoint()', () => {
 
   const DefaultThing = styled.h1`
-          
+
     ${breakpoint('mobile') `
       font-size: 12px;
     `}
@@ -61,6 +61,21 @@ describe('breakpoint()', () => {
     expect(element).toHaveStyleRule('font-size', '24px', { media: '(min-width:180em)' });
   });
 
+  // https://github.com/jameslnewell/styled-components-breakpoint/issues/11
+  it('should render multiple expressions correctly #11', () => {
+    const Thing = styled.div`
+      ${breakpoint('tablet') `
+        background: ${'grey'};
+        color: ${'white'};
+      `}
+    `;
+    const element = shallow(
+      <Thing />
+    );
+    expect(element).toHaveStyleRule('background', 'grey', { media: '(min-width:46.0625em)' });
+    expect(element).toHaveStyleRule('color', 'white', { media: '(min-width:46.0625em)' });
+  });
+
 });
 
 describe('map()', () => {