Autofix generates invalid code with nested style blocks

[TrevorBurnham]

Test case 1:

const Div = styled.div`
  ${css`
    color: blue;
  `}
`;

This code yields the error Skipping template… as it included either invalid syntax or complex expressions the plugin could not interpret, as described at #7.

Test case 2:

const Div = styled.div`
  ${css`
    color: blue;
  `}

  div {
    position: absolute;
  }
`;

This yields the error Unexpected unknown type selector "POSTCSS_styled-components_0" (selector-type-no-unknown) on the ${} line. But what's really strange is what happens if you run stylelint with --fix. The output is this invalid code:

const Div = styled.div`
  ${css`
    color: blue;
  `}

  div {
    position: absolute;
  }
    color: blue;
  `}

  div {
    position: absolute;
  }
`;

[43081j]

currently working on this FYI.

its roughly the same reason #7 exists.

there's some changes coming in js-core which improve interpolation massively too so it may actually be solved as part of that.

will update when i get further with it 👍

[43081j]

@TrevorBurnham can you enlighten me a bit here and explain one of your use cases for having a nested stylesheet like that?

just so i can write some better test cases to test against here.

quite often i've seen this:

const someMixinLikeThing = css`
  color: blue;
`;

const someDiv = styled.div`
  padding: 2rem;
  ${someMixinLikeThing}
  /* or */
  ${(props) => props.whatever ? someMixinLikeThing : 'color: pink'}
`;

but haven't yet seen why you'd directly interpolate another stylesheet, rather than by reference, i.e.:

const someDiv = styled.div`
  padding: 2rem;
  ${css`
    color: blue; /* why aren't i just in the outer stylesheet? */
  `}
`;

[TrevorBurnham]

It's a rare use case, but I've certainly seen it in the wild. A slightly more realistic example is:

const Div = styled.div`
  ${(props) =>
    props.overrideColor &&
    css`
      background-color: ${negate(props.overrideColor)};
      color: ${props.overrideColor};
    `}
`;

Using an interpolated css block is an option devs tend to reach for when they want to add a block of styles conditionally. Certainly, you could define the css block separately rather than inlining it, but as a stylistic matter you may want to keep all of the styles in one place. Alternatively, you could omit the css and just interpolate the styles as a raw string, but then those styles would go completely un-linted.

[43081j]

ok cool that's good to know.

complicates things a little more but at least i understand it now :D i did get a little further with this at the weekend but not quite there yet. sure there's some revelation around the corner and it'll all be sorted.

thanks for explaining, helps a lot