This is a slightly tricky problem to explain so bear with me.

I am using resolve to enable some sort of "theme" system for my stylesheets. I am using a fairly simple resolve function:

postcssImport({
  addDependencyTo: webpack,
  resolve: id => id.replace(/^theme/, PATH_THEME)
})

So now I can do:

@import 'theme/variables.css';

and this will, for example, give me the variables from src/themes/default/variables.css for my default theme. Great.

The problem happens when another imported file tries to import variables.css. For example, I add a mixins.css file with:

@import 'theme/variables.css';
/* Use variables here for mixins */

and then I want to use

@import './mixins.css';

in my stylesheets, but it seems like the resolve rule is no longer kicking in for the deeper @import. Now I get the error:

client?843a:47 ./~/css-loader?modules&sourceMap&localIdentName=[hash:base64:3]!./~/postcss-loader!./src/components/Navigation.css
Module build failed: Error: ENOENT: no such file or directory, open '/Users/user/repo/src/theme/variables.css'
    at Error (native)
 @ ./src/components/Navigation.css 4:14-178 13:2-17:4 14:20-184

You can see it's trying to open theme/variables.css which doesn't exist and isn't being resolveed according to the configuration.

Am I doing something wrong, or is this a bug/limitation of the resolve feature?