Nested @import rules and relative module resolution

[timkelty]

See tailwindlabs/tailwindcss#428

I'm trying to do this:

@responsive {
  @import 'suitcss-components-grid';
}

• @responsive being an at-rule provided by https://github.com/tailwindcss/tailwindcss
• suitcss-components-grid being an import from node_modules

However, when it tries to resolve, it always looks locally:

ERROR in ./node_modules/css-loader??ref--2-1!./node_modules/postcss-loader/lib??ref--2-2!./src/css/index.scss
Module not found: Error: Can't resolve './suitcss-components-grid' in '/Users/timkelty/Sites/dlr-craft3/src/css'
resolve './suitcss-components-grid' in '/Users/timkelty/Sites/dlr-craft3/src/css'
  using description file: /Users/timkelty/Sites/dlr-craft3/package.json (relative path: ./src/css)

I'm thinking this is because of this behavior from postcss-import:

Note: nested @import will additionally benefit of the relative dirname of imported files.

Any ideas?

[simonsmith]

I'm guessing this happens when the @import is nested in any ruleset? Or just at rules?

[timkelty]

I'm guessing this happens when the @import is nested in any ruleset? Or just at rules?

As far as the relative module resolution, yes.

[simonsmith]

This plugin is a wrapper around postcss-import so it might be worth trying that plugin and seeing if you can reproduce the error.

[timkelty]

@simonsmith good idea - I'll try that. I started here because it seemed specific to non-relative (node_modules) imports, but I probably need some more repro-cases.

[AlexWayfer]

Doesn't convert nested imports for me at all:

main.css:

@import 'foo';

body {
  @import 'bar';
}

foo.css:

p {
  color: red;
}

bar.css:

button {
  color: blue;
}

Output:

p {
  color: red;
}

body {
  @import 'bar';
}

[LeoColomb]

Related:

• Support SCSS parser postcss/postcss-import#390
• nesting import postcss/postcss-import#296