Interpolation tagging doesn't work with Typescript file

[huy-nguyen]

I tried to lint this this typescript file (simplified):

import styled from 'styled-components';

const StyledTable = styled(StyledTableBase)`
  ${tableColumnSelector}:nth-child(1) {
    width: ${rankColumnWidth};
    text-align: left;
    padding-left: 4px;
  }
`;

and got this error:

 4:30  ✖  Expected newline after ";" in a multi-line declaration block   declaration-block-semicolon-newline-after
 4:30  ✖  Expected empty line before rule                                rule-empty-line-before

I then tried to use the interpolation tagging with sc-selector:

import styled from 'styled-components';

const StyledTable = styled(StyledTableBase)`
  ${/* sc-selector */tableColumnSelector}:nth-child(1) {
    width: ${rankColumnWidth};
    text-align: left;
    padding-left: 4px;
  }
`;

but got the same errors. I then tried using sc-custom as the last resort:

import styled from 'styled-components';

const StyledTable = styled(StyledTableBase)`

  ${/* sc-custom 'th' */tableColumnSelector}:nth-child(1) {
    width: ${rankColumnWidth};
    text-align: left;
    padding-left: 4px;
  }
`;

but still got the same errors. Here's my stylelint config:

module.exports = {
  processors: ['stylelint-processor-styled-components'],
  extends: [
    'stylelint-config-standard',
    'stylelint-config-styled-components',
  ],
  syntax: 'scss',
}

Is this a bug with the processor or am I not using it correctly? Here are the relevant package versions.

• stylelint 8.1.1
• stylelint-config-standard 17.0.0
• stylelint-processor-styled-components 1.0.0
• stylelint-config-styled-components
• typescript 2.5.2 (but I'm not using any 2.5 feature and the example still fails with typescript-eslint-parser 8.0 which supports typescript 2.5)

[mxstbr]

Can you try tagging your ${rankColumnWidth} interpolation? We're having some issues with line numbers at the moment (ref #128) so it might be that's breaking it?

[emilgoldsmith]

Hmm, my best guess at the moment is that the processor inserts an extra semicolon after rankColumnWidth but I don't think it should...

Yeah it'd be helpful @huy-nguyen if you could do a bit of "binary search" to find exactly what causes it as the errors make it sound like it's not the selectors that are a problem, and find the minimum change to your css that'll make it stop erroring as that'll give us a better idea.

[huy-nguyen]

@mxstbr I tried this

import styled from 'styled-components';

const StyledTable = styled.div`
  ${/* sc-selector */tableColumnSelector}:nth-child(1) {
    width: ${/* sc-value */ rankColumnWidth};
  }
`;

and this (removed semicolon):

import styled from 'styled-components';

const StyledTable = styled.div`
  ${/* sc-selector */tableColumnSelector}:nth-child(1) {
    width: ${/* sc-value */ rankColumnWidth}
  }
`;

and this

import styled from 'styled-components';

const StyledTable = styled.div`
  ${/* sc-selector */tableColumnSelector}:nth-child(1) {
    width: ${/* sc-custom '5px' */ rankColumnWidth};
  }
`;

but all gave the same errors. I'm not sure what else to try.

[emilgoldsmith]

Well this all helps of course, as it narrows it down to the interpolations though that was probably already pretty clear.

What about trying replacing each of the interpolations by a normal constant css string and seeing which one is causing the error like that? :)

[huy-nguyen]

I think it's the selector interpolation. This (removed the value interpolation) gives the same error:

import styled from 'styled-components';

const StyledTable = styled.div`
  ${/* sc-selector */tableColumnSelector}:nth-child(1) {
    width: 5px;
  }
`;

but this (removed the selector interpolation) does not:

import styled from 'styled-components';

const StyledTable = styled.div`
  td:nth-child(1) {
    width: ${/* sc-value */ rankColumnWidth};
  }
`;

[emilgoldsmith]

Great, that's very helpful.

If you want to be even more helpful you can submit a PR with a breaking test like what was just done in #129 for #128. Then we'll get on it.

Given your extra tests I also think I'll change the tag to bug as it seems pretty obvious from those tests that the fault is somewhere on our end.

[huy-nguyen]

@emilgoldsmith I'm in a bit of a crunch right now to clone, add the tests and make a PR but I think it wouldn't take much time for someone else to pick it up from here.

[emilgoldsmith]

Yeah no worries, no requirements, just suggestions for positive ways to help speed up the process :).

[chinesedfan]

The current processor implementation can't recognize the selector interpolation here. And it will be substituted by -styled-mixin${count}: dummyValue;, which causes the first warning. Maybe #110 should also take this issue into considerations.

Even with interpolation tagging, it doesn't work because typescript-eslint-parser has moved support of attaches comments to ESLint from v0.1.0. There are no leadingComments or trailingComments in parsed nodes. As #143 recommended, once babylon@7 was released, interpolation tagging will work.

[emilgoldsmith]

typescript-eslint-parser has moved support of attaches comments to ESLint from v0.1.0. There are no leadingComments or trailingComments in parsed nodes.

Oh that makes sense, thanks for that information @chinesedfan, because then of course we can't do the interpolation tagging. We should probably also add this to the README on the website, I'll get on that later today.

[chinesedfan]

We should probably also add this to the README on the website, I'll get on that later today.

Hi @emilgoldsmith, have it been added? Not a push, just curious. 😄

[emilgoldsmith]

Nope I must've forgotten! Thanks for the reminder I'll do it right now

[wachunga]

Any suggestions on workarounds for this? Currently I'm resorting to /* stylelint-disable */.

[emilgoldsmith]

Hmm, that's probably the best approach as of right now I'm sorry!

[emilgoldsmith]

#143 should have fixed this, publishing now

[huy-nguyen]

Thanks for fixing it!