'identifier expected' error when using a string template followed by a pseudo-element selector

[Codex-]

Repost of:
styled-components/vscode-styled-components#440

Reproduction when running the vscode extension:

const test = ''
const StyledDiv = styled.div`
  .${test}:before { // <- identifier expected (ts-styled-plugin(9999))
    border-bottom: none;
    transition: none;
  }
`

Screenshot of error:

I've created a test case that reproduces this error in the e2e:

it('should not error with an interpolation identifier with a pseudo selector', async () => {
    const errorResponse = await getSemanticDiagnosticsForFile([
        "function css(...args){}",
        "const mixin = ''",
        "css`",
        "  .${mixin}:before {",
        "    border-bottom: none;",
        "    transition: none;",
        "  }",
        "`",
    ].join('\n'));
    assert.isTrue(errorResponse.success);
    assert.strictEqual(errorResponse.body.length, 0);
});

Error response:

[
  {
    start: { line: 4, offset: 4 },
    end: { line: 4, offset: 5 },
    text: 'identifier expected',
    code: 9999,
    category: 'error',
    source: 'ts-styled-plugin'
  }
]

So far this appears to be a bug in how getSubstitution selects which things to substitute

I've found some inconsistencies, the docstring states:

// if in-property, replace with "xxxxxx"
// if a mixin, replace with "      "

Various tests I've done, with the parts logged:

"  ${mixin}:before {", <--- no error

Info 94   [11:12:22.643] 
  ,&       ,:before {
    border-bottom: none;
    transition: none;
  }



"  .${mixin}:before {", <--- identifier expected error

Info 94   [11:13:06.229] 
  .,&       ,:before {
    border-bottom: none;
    transition: none;
  }



"  .${mixin} {", <--- no error

Info 92   [11:13:36.643] 
  .,xxxxxxxx, {
    border-bottom: none;
    transition: none;
  }

Weird that the last case gets xxxxxxxx while the others get spaces, shouldn't they all get one of the other?