search

TrySound / postcss-easy-import

PostCSS plugin to inline @import rules content with extra features
MIT License
201 stars 25 forks source link

Getting postcss-easy-import to work with Webpack's alias resolve module directive #21

Closed mlcohen closed 6 years ago

mlcohen commented 6 years ago

Hi --

I'm working on a web app project that is making use of Webpack v3 and postcss. Webpack is configured to use the postcss-loader and postcss is configured to use the postcss-easy-import plugin. The problem I'm running into is that postcss-easy-import doesn't work with webpack's alias resolve directive (https://webpack.js.org/configuration/resolve/#resolve-alias).

My web app project's directory structure is setup like so:

/src
    /app
        /modules
            /core
            /theme
            /featureA
            /featureB

In the webpack config, we setup a resolve mapping so that each child directory under src/app/modules/ is aliased against app-[module]. So, for instance, app-core would resolve to src/app/modules/core. (The justification for this is so that we don't have to deal with relative paths and it makes splitting the app's modules up into separate node modules easier when we partition the logic.) Aliases work fine for JavaScript files using babel, but when using the @import directive within a CSS file that references another CSS in a module that aliases to one of the app's module folders, things fail. For example, if I have a CSS file named theme.css in the directory src/app/modules/featureA:

// theme.css
@import 'app-theme/colors.css';

This will cause webpack to output an error saying the module app-theme/colors.css could not be resolved from the /projects/web-app/src/app/modules/featureA.

Digging into the postcss-easy-import code, I see that the module's resolve-module logic only resolves against node_modules and web_modules using the resolve npm module (https://github.com/TrySound/postcss-easy-import/blob/master/lib/resolve-module.js#L15). If the logic could be updated such that some kind of optional hook/middleware/plugin could be provided to dynamically check against other module directories, that, I think, would help solve the problem I'm running into. An optional hook would allow postcss-easy-import to then work with different tools that have their own module resolving logic. This would also assure that the postcss-loader does not need to get involved to help support postcss-easy-import resolve aliased modules, which it shouldn't have to do.

Anyway, I wanted to raise the problem here to see if this all makes sense and that I'm not overlooking something important. Thoughts?

TrySound commented 6 years ago

postcss-easy-import is all about sugar resolving. webpack has own resolver. Use postcss-import directly instead.

mlcohen commented 6 years ago

Thanks for the quick response. Using postcss-import makes sense. I figured I was overlooking something important 😊

mlcohen commented 6 years ago

For anyone who happens to come across this post and is trying to get postcss-import to work with webpack, use postcss-import-webpack-resolver. It works. Not difficult to setup. https://www.npmjs.com/package/postcss-import-webpack-resolver