Equivalent of scss @import for styled-components?

Question

I'm making an embeddable widget with react and styled-components, and want to do a big CSS reset in my main app container. I'm going to use the styles from cleanslate to do that, however I don't want to just drop it into my main styled component because it's 400 lines long. Ideally, those styles would live in a separate js file, and then in StyledApp I'd do something similar to scss' @import cleanslate.

The suggestions I've found include make a separate call to the CDN version of the css file, but I don't want to do that for two reasons: 1. don't want the extra performance hit, 2. I want to make edits.

Is there a way I can import all of those styles into my main StyledApp and have them applied to that app component?

Answer 1

You can declare css styles with the css helper from styled-components and then invoke it where you need it:

export const cleanSlateRules = css`
// styles
`;

export const StyledWhatever = styled.div`
  ${cleanSlateRules}
`;

EDIT: Turns out this currently doesn't work in prod. I think because of the same issue as the @import problem.

EDIT 2: I got this to work in production using the babel plugin for styled components. The custom css was successfully applied after that. See my answer here: styled-components only rendering certain styles after successful build with parcel