[styled-components] Using expression inside template literal along with attribute selector results in invalid CSS syntax.

[skawinski]

Styling component based on the attribute state of its neighbour element results in invalid CSS markup. Space is being added between expression and attribute selector. It happens only when styled-components are being used with their default "styled" alias. Using any other name seem to cause prettier ignore insides of template literals.

It' quite a border use case, but unfortunately it results in broken CSS syntax not recognised by browser engine.

Prettier 1.12.1
Playground link

Input:

const x = styled.div``;

const a = anything.anything`
  ${x}[value=true] + & {
  }
`;

const b = styled.anything`
  ${x}[value=true] + & {
  }
`;

Output:

const x = styled.div``;

const a = anything.anything`
  ${x}[value=true] + & {
  }
`;

const b = styled.anything`
  ${x} [value=true] + & {
  }
`;

Expected behavior:

const x = styled.div``;

const a = anything.anything`
  ${x}[value=true] + & {
  }
`;

const b = styled.anything`
  ${x}[value=true] + & {
  }
`;

[duailibe]

Hi @moreawarefly it's a bit of a known issue, we currently can't have expressions everywhere on CSS, just a few places. #2961 was an attempt to support this but it's a difficult issue.

What I think we should do here is try to detect edge cases and bail (i.e. print them as it was originally written).

In the meantime you can use // prettier-ignore to prevent breaking your code.

[duailibe]

And I think this might be a duplicate of #2883

[skawinski]

Sure, I've already disabled prettier for this line with ignore comment, thanks!

I didn't find these related tickets since I've been looking for styled keyword, since the issue seem to be triggered only if styled name is being used.

#2883 seems to be quite related, but not a duplicate tho - it's got attribute selector in the example, but it doesn't result in breaking its syntax.

[IanEdington]

I have a similar issue:

input:

const TableWrapper = styled.div
  ${TableCell}:nth-child(1) {
    flex-basis: 140px;
  }
  ${TableCell}:nth-child(2) {
    flex-basis: 140px;
  }
`;

output:

const TableWrapper = styled.div
  ${TableCell}:nth-child (1) {
    flex-basis: 140px;
  }
  ${TableCell}:nth-child (2) {
    flex-basis: 140px;
  }
`;

Notice the space in nth-child (2). This fails to apply the styles.

[ghost]

Same issue as @IanEdington

input:

${FlexItem}:not(img) {

output

${FlexItem}:not (img) {

[nightpool]

prettier currently has a ton of open issues with css/styled-components—is there any way to disable prettier on all styled components until the feature is more stable?

[lydell]

@nightpool Unfortunately not :( (We plan to make all template literal formatting opt-in in v2.0.)

[nightpool]

@lydell is there an estimated release date or roadmap for when 2.0 will be available? the amount of critical bugs in the CSS parser is currently a huge blocker for us adopting Prettier as part of our workflow.

[lydell]

@nightpool There isn't. We should come up with a solution for v1.0. See also #5588.

Oh, and I thought of an ugly workaround: Rename "styled" to something else. Like import styled2 from "styled-components".

[esetnik]

Just upgraded to prettier v2, ran a fix and saw this bug for the first time:

Input:

const FilterSection = styled.section`
  ${Filter}:not(:last-child) {
    margin-bottom: 1rem;
  }
`;

Output:

```js
const FilterSection = styled.section`
  ${Filter}:not (:last-child) {
    margin-bottom: 1rem;
  }
`;

[thorn0]

Fixed by #7883