"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const cli_core_1 = require("@bluebase/cli-core");
const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
const webpack_merge_1 = __importDefault(require("webpack-merge"));
const useOwn_1 = __importDefault(require("../../scripts/useOwn"));
// tslint:disable-next-line:no-var-requires
const HappyPack = require('happypack');
const removeNil = cli_core_1.Utils.removeNil;
// const ifElse = Utils.ifElse;
// const removeNil = Utils.removeNil;
/**
 * Javascript loader
 * @param config
 * @param builder
 */
const LoaderCss = () => (config, builder) => {
    const newConfig = webpack_merge_1.default(config, {
        plugins: removeNil([
            // HappyPack 'css' instance for development client.
            builder.ifDevClient(() => new HappyPack({
                id: 'happypack-devclient-css',
                verbose: false,
                // tslint:disable-next-line:object-literal-sort-keys
                threads: 4,
                loaders: [
                    useOwn_1.default('style-loader'),
                    {
                        path: useOwn_1.default('css-loader'),
                        // Include sourcemaps for dev experience++.
                        query: { sourceMap: true },
                    },
                ],
            })),
            // For the production build of the client we need to extract the CSS into
            // CSS files.
            builder.ifProdClient(() => new mini_css_extract_plugin_1.default({
                chunkFilename: builder.ifDev('[id].css', '[id].[hash].css'),
                filename: builder.ifDev('[name].css', '[name].[hash].css'),
            }))
        ]),
    });
    if (builder.isClient || builder.isServer) {
        newConfig.module.rules[0].oneOf = [
            cli_core_1.Utils.mergeDeep({
                test: /\.css$/,
            }, 
            // For development clients we will defer all our css processing to the
            // happypack plugin named "happypack-devclient-css".
            // See the respective plugin within the plugins section for full
            // details on what loader is being implemented.
            builder.ifDevClient({
                loaders: [
                    // 'happypack/loader?id=happypack-devclient-css',
                    {
                        loader: useOwn_1.default('happypack/loader'),
                        query: 'id=happypack-devclient-css',
                    },
                ],
            }), 
            // For a production client build we use the ExtractTextPlugin which
            // will extract our CSS into CSS files. We don't use happypack here
            // as there are some edge cases where it fails when used within
            // an ExtractTextPlugin instance.
            // Note: The ExtractTextPlugin needs to be registered within the
            // plugins section too.
            builder.ifProdClient(() => {
                return {
                    loaders: [
                        mini_css_extract_plugin_1.default.loader,
                        useOwn_1.default('css-loader')
                    ]
                };
            }), 
            // When targetting the server we use the "/locals" version of the
            // css loader, as we don't need any css files for the server.
            builder.ifNode({
                loaders: [useOwn_1.default('css-loader/locals')],
            }))
        ].concat(newConfig.module.rules[0].oneOf);
    }
    return newConfig;
};
exports.default = LoaderCss;
//# sourceMappingURL=LoaderCss.js.map