Valid CSS cannot be parsed about babel-plugin-styled-components-css-namespace HOT 5 OPEN

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};
`;

from babel-plugin-styled-components-css-namespace.

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};
`;

from babel-plugin-styled-components-css-namespace.

Same problem with styled-system.

from babel-plugin-styled-components-css-namespace.

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

from babel-plugin-styled-components-css-namespace.

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}; `}; `;

from babel-plugin-styled-components-css-namespace.