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] + & {
  }
`;