Linaria: Problem with babel-plugin-module-resolver ("[linaria] failed to add dependency")

[SchlagerKhan]

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

What is the current behavior?

File structure:

• src
  
  
  
  • styles
  
  
  • colors.js
  
  
  • index.js
  
  
  • index.js
  
  

Using linaria together with babel-plugin-module-resolver (check module-resolver settings below), running the following code:

import { css } from 'linaria';

import { BLUE } from 'styles/colors';
// import { BLUE } from './colors';

export const globalCss = css`
    :global() {
        body {
            width: 100vw;
            height: 100vh;

            display: flex;
            justify-content: center;
            align-items: center;

            background-color: ${BLUE};
            color: olive;
        }
    }
`;

throws the following message:
[linaria] failed to add dependency for: styles/colors

along with some details ending with

missing:
   [ '.../linaria-module-resolver-bug/src/styles/node_modules',
     '.../linaria-module-resolver-bug/src/node_modules',
     '.../linaria-module-resolver-bug/node_modules/styles/colors',
     '.../linaria-module-resolver-bug/node_modules/styles/colors.js',
     '.../linaria-module-resolver-bug/node_modules/styles/colors.jsx',
     '.../linaria-module-resolver-bug/node_modules/styles/colors.ts',
     '.../linaria-module-resolver-bug/node_modules/styles/colors.tsx',
     '.../linaria-module-resolver-bug/node_modules/styles/colors.json',
     '.../node_modules',
     ...]

If I comment row 3 and uncomment row 4 everything works as it should.

The project still compiles and is able to run, but I of course wonder if everything is running as it should + an overflow in the log.

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.

Instructions in the repo:
https://github.com/SchlagerKhan/linaria-module-resolver-bug

What is the expected behavior?

Compiling as should and not showing any errors,

Please provide your exact Babel configuration and mention your Linaria, Node, Yarn/npm version and operating system.
Yarn: 1.13.0
Node: 11.8.0

Babel config (also in the repository):

module.exports = {
    presets: [
        '@babel/preset-env',
        '@babel/preset-react',
        'linaria/babel',
    ],
    plugins: [
        [
            'module-resolver',
            {
                alias: {
                    'styles': './src/styles',
                },
            },
        ],
    ],
};

[satya164]

When we fail to add a dependency, the issue you'll have is that if you edit colors.js, it won't rebuild the css if you didn't edit the file with the CSS.

The warning is because we collect the list of dependencies before we transpile the code: https://github.com/callstack/linaria/blob/master/src/babel/evaluate.js#L111, so we don't have the rewritten paths from the babel plugin yet. We should fix it :)

[SchlagerKhan]

Thanks for your quick response!

I'll filter out the warnings and minimize the resolver usage for now.

A few follow-up questions just to get a timeline perspective:

• Is this a difficult fix?
• Is there a new roadmap for coming linaria releases?
• Is there anything I can do?

[satya164]

Not difficult, just needs to be done. I'll do it when I have some time this week.

[SchlagerKhan]

Fantastic! Great library by the way with a lot of potential. Keep up the good work!