breaks CSS in JS ${Cls}:not() -> ${Cls}:not ()

[brandonkal]

Prettier 1.18.2
Playground link

--parser typescript

I am using Typescript but this does not matter here.

Input:

export const Group = styled.div`
  margin: 0;

  .input {
    margin: 0;
  }

  ${StyledInput}:not(:first-child) {
    margin: 0;
  }

  & > :not(.${inputWrap}):not(${Button}) {
    display: flex;
  }
`

Output:

export const Group = styled.div`
  margin: 0;

  .input {
    margin: 0;
  }

  ${StyledInput}:not (:first-child) {
    margin: 0;
  }

  & > :not(.${inputWrap}):not(${Button}) {
    display: flex;
  }
`;

Expected behavior:
No space should be inserted after not as this breaks the CSS.

Updated with minimal reproduction. It appears that having a child selector is required. Oddly, the space is not always inserted as you can see in the last declaration.

[dcecile]

Same thing here, but mine is a space inserted before an attribute selector. The added space changes the behaviour of the selector, breaking the CSS.

Input:

const yesFrame = (
    ...args: Interpolation<ThemedStyledProps<{}, Theme>>[]
) => css`
    ${ChatRoot}[data-frame="yes"] & {
        ${css({}, ...args)}
    }
`

Output:

const yesFrame = (
    ...args: Interpolation<ThemedStyledProps<{}, Theme>>[]
) => css`
    ${ChatRoot} [data-frame="yes"] & {
        ${css({}, ...args)}
    }
`

[alexander-akait]

Problem in postcss-selector-parser

[modernserf]

I am having a similar issue which I imagine has the same root cause:

Playground link

Input:

styled.css`
  font-size: var(--fontSizes-${size});
`;

Output

styled.css`
  font-size: var(--fontSizes- ${size});
`;

[fisker]

minimum reproduction

Prettier 1.18.2
Playground link

--parser typescript
--single-quote
--tab-width 5
--use-tabs

Input:

styled.div`
  ${expr}:not(:first-child) {
    // should not add space after :not
  }
  ${expr}[checked] {
    // should not add space before [
  }
  margin: 0;.input {}
`

Output:

styled.div`
	${expr}:not (:first-child) {
		// should not add space after :not
	}
	${expr} [checked] {
		// should not add space before [
	}
	margin: 0;
	.input {
	}
`;

[thorn0]

fixed by #7883
#6259 (comment) is a manifestation of #5465