Nested css in template results in skipping template

[Nume]

Nesting styled-component css inside any styled-component template literal results in the template being skipped.

Example:

import styled, { css } from "styled-components"

const Foo = styled.div`
  ${css`
    color: hotpink;
  `}
`

Output: [postcss (styled-components)] Skipping template (file: ...) as it included either invalid syntax or complex expressions the plugin could not interpret. Consider using a "// postcss-styled-components-disable-next-line" comment to disable this message

[43081j]

good catch!

do you happen to know if it only happens when the whole thing is a sub-template?

e.g. does this also fall over?

const Foo = styled.div`
  padding: 2rem;
  ${css`
    color: hotpink;
  `}
`;

ill write some tests today for it if i can and see if i can fix it anyhow 👍

[Nume]

Any template with nested css is being skipped. Does not seem to matter what other properties is added.

[43081j]

interesting, will take a look.

thanks for confirming that for me

[Nume]

After further testing it seems like its actually if css is the first property which triggers the skipping (when i was testing i was adding properties after the css)

So your example above is not actually trigger the skipping, but it is instead triggering Expected empty line before comment comment-empty-line-before rule (which does not seem correct either)

[43081j]

thats good to know, i imagine it'll be a bug in how we generate the source CSS for postcss

ill take a look today 👍

[43081j]

i've opened 43081j/postcss-js-core#6 which will fix this once it is completed.

will leave this open until a new version of the styled-components syntax is published with the fixed core too.

[rishitank]

Hi, are there any updates on this? This seems to error, probably due to injecting a variable in the template:

const FlexCSS = css`
  display: flex;
`;

export const Divider = styled.div`
  ${FlexCSS};
  gap: 5px;
  align-items: center;
`;