Valid CSS cannot be parsed

[adaszyn]

Hi! First of all, thanks for this plugin! I run into CSS parsing errors when trying to add it to my project. Minimal reproducible example:

const a = '2px';
const MyStyledComponent = styled.div`
  padding: ${a} ${a} ${a} ${a};
`;

Internally, this CSS snippet gets transpiled into:

padding: fake-element-placeholder fake-element-placeholder fake-element-placeholder fake-element-placeholder: fakevalue;

...which makes postcss complain about the missing semicolon.

Another example that causes parser to fail:

const padding = 'padding: 2px 2px 2px 2px;';
const MyStyledComponent = styled.div`
  ${padding}
`;

This time it get transpiled to:

fake-element-placeholder

Which causes Error: <css input>:3:3: Unknown word error. I would be more than happy to help with fixing this issue, however, I might need some tips & guidance 😄

Cheers!

[kesonseek]

const padding = 'padding: 2px 2px 2px 2px;';
const MyStyledComponent = styled.div`
  ${padding}
`;

I had the same issue on this. I added semicolon after ${padding} and solved my issue.

const padding = 'padding: 2px 2px 2px 2px;';
const MyStyledComponent = styled.div`
  ${padding};
`;

[swashata]

Thanks @kesonseek for the solution. This happened when using the css function for shared style. So adding the semi-colon did solve the issue.

const sharedStyle = css`
    display: inline-flex;
    height: 40px;
    padding: 0 ${props => numToCssSize(props.theme.gutter * 2)};
    justify-content: center;
    align-content: center;
`;

const StyledLink = styled(Link)`
    ${sharedStyle};
`;

[roman-16]

Same problem with styled-system.

[JasonTolliver]

@kesonseek, thanks so much. Your solution ended my hours long headbanging session 😩 🎉

[andyvu92]

instead of creating a new instance for css styling, we can also do it this way

const CtaButton = styled(Button)` ${() => css` margin-top: ${SPACING.m}; `}; `;