How to reuse webpacke resolve inside another package configuraiton

[alexander-schranz]

This is not a issue more a question. Currently the postcss import plugin is loading the css file itself. They have an option of resolving the postcss manually e.g.:

const path = require('path');

module.exports = {
    plugins: {
        'postcss-import': {
            path: path.resolve(process.cwd(), 'node_modules'),
            resolve(id, basedir) {
                if (id === '~/sulu-admin-bundle/containers/Application/colors.scss') {
                    return path.resolve('node_modules/sulu-admin-bundle/containers/Application/colors.scss');
                }
                if (id === 'sulu-admin-bundle/containers/Application/colors.scss') {
                    return path.resolve('css/colors.scss');
                }

                if (
                    /^\./.test(id)
                    && path.resolve(basedir, id) == path.resolve('./node_modules/sulu-admin-bundle/containers/Application/colors.scss')
                ) {
                    return path.resolve('css/colors.scss');
                }

                // resolve relative path, @import './components/style.css'; prefix with './' or '../'
                if (/^\./.test(id)) {
                    return path.resolve(basedir, id)
                }

                // resolve node_modules, @import 'normalize.css/normalize.css'
                return path.resolve('./node_modules', id);
            },
        },
        'postcss-nested': {},
        'postcss-simple-vars': {},
        'postcss-calc': {},
        'postcss-hexrgba': {},
        'autoprefixer': {},
    },
};

As you see it looks really hacky.

In the webpack resolve I'm just using for other files something like this e.g.:

config.resolve.alias[path.resolve(env.node_modules_path, 'sulu-admin-bundle/containers/Login/login.scss')] = path.resolve(__dirname, 'css/login.scss');

This work like expected. But only for the files imported in .js files not over the @import. I'm now trying to use the resolver directly but I'm always getting strange errors like missing property or indexOf when I'm going with:

const path = require('path');
const enhancedResolve = require('enhanced-resolve');

module.exports = {
    plugins: {
        'postcss-import': {
            path: path.resolve(process.cwd(), 'node_modules'),
            resolve(id, basedir) {
                return enhancedResolve.sync(id, basedir);
            },
        },
        'postcss-nested': {},
        'postcss-simple-vars': {},
        'postcss-calc': {},
        'postcss-hexrgba': {},
        'autoprefixer': {},
    },
};

So my question is if somebody have experience with using the resolver of webpack inside the postcss import plugin

[alexander-akait]

You need provide options for enhanced-resolve, for example we use these options https://github.com/webpack-contrib/css-loader/blob/master/src/index.js#L58 in css-loader

[alexander-schranz]

@alexander-akait Thx for the response do you knowhow. Do you know how I can inject the options that it are the same which my webpack configuration is using. I'm trying to avoid to duplicate things here from my webpack configuration.

[alexander-akait]

webpack loaders have this.getResolve(options) API, we pass loader context here https://github.com/webpack-contrib/postcss-loader/blob/14f83a0c953f558e5ed07aa459b8e5e320ea2aa5/README.md#function, so you can use this API, if you build it with webpack

[alexander-schranz]

@alexander-akait Thx for all your help! Is that available in some case outside, because postcss is in our cases configured in the postcss.config.js where no this.getResolve exists. Any way like above import the enhancedResolve and then get from webpack the correct configuration for it to use it then inside the resolve method of the postcss.config.js.