Typed parameters cause file to be ignored

[Marc Khouri]

When using typed parameters for styled-components in Typescript, stylelint skips the file and reports no output at all for it. Note that the method of typing illustrated before is slightly different than the one used in your typescript test. I'm not certain how to gather further debug information for this.

Minimal repro (filename: test.ts):

import styled from 'styled-components';

// Stylelint usually catches the missing semi on 'width'
const LinterRuns = styled.div`
  width: ${p => p.width || '100%'}
  height: '100%';
`;

// The code segment below breaks stylelint. No errors
// will be reported for the file. If you comment out everything
// below this point, stylelint will catch the missing semi above
const LinterIsBroken = styled.div<{ width?: string }>`
  width: ${p => p.width || '100%'}
  height: '100%';
`;

command:

⇒  ./node_modules/.bin/stylelint './test.ts'
# returns exit code 0 for the file above

.stylelintrc:

{
  "processors": ["stylelint-processor-styled-components"],
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components"
  ]
}

versions:

• stylelint@9.5.0
• stylelint-config-recommended@2.1.0
• stylelint-config-styled-components@0.1.1
• stylelint-processor-styled-components@1.3.2
• styled-components@3.3.3
• typescript@3.0.1
• node v8.11.3

[Xianming Zhong]

Very detailed issue! It should be solved by #163, but was hanging there so long. I will try to merge it as soon as possible.

If the processor throws out the real error, we can see following messages.

SyntaxError: Unexpected token, expected "," (12:41)
    at _class.raise (/Users/zhong/Desktop/opensource/stylelint-processor-styled-components/node_modules/babylon/lib/index.js:776:15)
    at _class.unexpected (/Users/zhong/Desktop/opensource/stylelint-processor-styled-components/node_modules/babylon/lib/index.js:2079:16)
    at _class.expect (/Users/zhong/Desktop/opensource/stylelint-processor-styled-components/node_modules/babylon/lib/index.js:2067:28)

[Brett Jurgens]

@chinesedfan I think the CssSyntaxError is actually a red-herring and the issue is with the version of babylon in the project not supporting tagged templates generics (which was added in TS 2.9)

I've opened #212 which upgrades babel to v7 and this is fixed