Skip to content

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

Open
@Codex-

Description

@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:
image

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions