@iamota/iamota-webpack/iamota-webpack.parts.stylesheet.js

Helper tools for Webpack for iamota Framework (WordPress and Shopify)

// ----------------------------------------------------------------------------
// Webpack Stylesheet Config
// ----------------------------------------------------------------------------
//
// Webpack configuration to generate a Stylesheet extracted from JavaScript
//
// ----------------------------------------------------------------------------

/**
 * Load Dependencies
 */
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin   = require("css-minimizer-webpack-plugin");


/**
 * Initialize Config
 */
let config = {};
exports.init = function(config) {
    this.config = config;
    return this;
};


/**
 * Compile SASS / SCSS
 */
exports.compile = ({
    include,
    exclude,
    outputFilename = 'css/[name].css',
} = {}) => ({
    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,     // Apply rule for SASS, SCSS, or CSS files
                include: include,
                exclude: exclude,
                use: [
                    MiniCssExtractPlugin.loader,    // Extract compiled CSS to a single file
                    'css-loader',                   // Resolve url() and @imports
                    'resolve-url-loader',           // Rewrite url() paths relative to source file (requires source maps)
                    {                               // Transform SASS to standard CSS
                        loader: "sass-loader",
                        options: {
                            implementation: require("sass"),    // Prefer `dart-sass`
                            sassOptions: {
                                quietDeps: true, // Suppresses warnings from dependencies
                            },
                        },
                    },
                ],
            },
            // {
            //     test: /\.(sa|sc|c)ss$/,     // Apply rule for SASS, SCSS, or CSS files
            //     enforce: "pre",
            //     use: ["source-map-loader"], // Extracts source maps from existing source files 
            // }
        ],
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: outputFilename,
        })
    ]
});


/**
 * Minify CSS
 */
exports.minify = ({
    cssMinimizerOpts = {}
} = {}) => ({
    optimization: {
        minimize:  true,
        minimizer: [
            new CssMinimizerPlugin(cssMinimizerOpts),
        ],
    },
});