linaria/loader issue with TypeScript

Do you want to request a feature or report a bug? bug

What is the current behavior? linaria/loader skips files that uses styled or css only with generic type parameter (TypeScript).

If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test. Create new component file, inside create styled React component providing generic parameter for props type, e.g.:

// imports, etc. (...)

export type TitleProps = {
  backgroundColor: string;
}

export const Title = styled.h1<TitleProps>`
  background: ${props.backgroundColor};
`;

Reproducing repo: https://github.com/radoslaw-medryk/linaria-example

npm install
npm run start

What is the expected behavior? Component would be processed by linaria/loader.

What is the actual behavior? Instead, linaria/loader ignores this component file when building, because it doesn’t pass this regex test: linaria/src/transform.js:54

if (
    !/\b(styled[\s\n]*(\([\s\S]+\)|\.[\s\n]*[a-z0-9]+)|css)[\s\n]*`/.test(
      content
    )
  ) {
    return {
      code: content,
      sourceMap: inputSourceMap,
    };
  }

This regex doesn’t expect generic type parameters, and thinks this file doesn’t use linaria.

Please provide your exact Babel configuration and mention your Linaria, Node, Yarn/npm version and operating system. "linaria": "^1.0.0-beta.0"

.babelrc

{
    "presets": [
        "@babel/react",
        "@babel/typescript",
        ["linaria/babel", {
            "displayName": true
        }]
    ],
    "plugins": []
}

[radoslaw-medryk]

I can do PR to fix this. Would be a good intro into contributing to project with great potential 😃

[satya164]

Maybe we can just check for styled and css. They should be guaranteed to be in the file. It’ll result in more false positives, but should be more reliable.