Missing style definitions when using polished like mixin functions

[TroutZen]

• emotion version: 7.0.4
• react version: 15.6.1

What you did:
Created a mixin called responsiveGutter(), whose goal is to do the following:
At the various breakpoints in my application, setting different left/right paddings:

// mixins.js
import { above } from './breakpoints';
import breakpoints from '../breakpoints';
import spacing from '../spacing';

export const spacingX = (type, size) => (
  `
  ${type}-left: ${size};
  ${type}-right: ${size};`
);

export const spacingY = (type, size) => (
  `
  ${type}-top: ${size};
  ${type}-bottom: ${size};`
);

export const responsiveGutter = () => (
  `
  ${spacingX('padding', spacing.sm)}

  ${above(breakpoints.sm)} {
    ${spacingX('padding', spacing.md)}
  }

  ${above(breakpoints.md)} {
    ${spacingX('padding', spacing.lg)}
  }`
);

What happened:

Now in my component...

...
import { responsiveGutter } from '../../theme/mixins/spacing';
...

const styles = css`
  padding-top: 3.2rem;
  margin: 0 auto;
  max-width: ${breakpoints.lg};
  ${responsiveGutter()}
`;

If I log the template literal I am passing into css, I get the following (see below), however, the media queries that contain the padding declarations are never applied to the element.

padding-left: 1.6rem;
  padding-right: 1.6rem;

  @media (min-width: 375px) {
    
  padding-left: 2.4rem;
  padding-right: 2.4rem;
  }

  @media (min-width: 719px) {
    
  padding-left: 3.6rem;
  padding-right: 3.6rem;
  }
  padding-top: 3.2rem;
  margin: 0 auto;
  max-width: 960px;

  @media (min-width: 375px) {
    padding-top: 3.2rem;
  }

Problem description:
Styles declared in helper functions are not being applied to class.

[tkh44]

I'm working on this here #213. Random expressions are tricky to work with when pre compiling.

[TroutZen]

@tkh44 - nice thanks for the update.

[tkh44]

https://github.com/tkh44/emotion/pull/213/files#diff-428d38cbd5c9ce3f826f801200c9d656R60

[tkh44]

@TroutZen the only limitation is that you must wrap your return values with css. Here are a few examples.