@matheo/ng-packagr/lib/styles/stylesheet-processor-worker.js

Compile and package Angular libraries in Angular Package Format (APF)

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const path = require("path");
const autoprefixer = require("autoprefixer");
const postcss_1 = require("postcss");
const postcssUrl = require("postcss-url");
const cssnano = require("cssnano");
const stylesheet_processor_1 = require("./stylesheet-processor");
const fs_1 = require("../utils/fs");
async function processCss({ filePath, browserslistData, cssUrl, styleIncludePaths, basePath }) {
    // Render pre-processor language (sass, styl, less)
    const renderedCss = await renderCss(filePath, basePath, styleIncludePaths);
    // Render postcss (autoprefixing and friends)
    const result = await optimizeCss(filePath, renderedCss, browserslistData, cssUrl);
    return {
        css: result.css,
        warnings: result.warnings().map(w => w.toString()),
    };
}
async function renderCss(filePath, basePath, styleIncludePaths) {
    const ext = path.extname(filePath);
    const content = await fs_1.readFile(filePath, 'utf8');
    switch (ext) {
        case '.sass':
        case '.scss': {
            /*
             * Please be aware of the few differences in behaviour https://github.com/sass/dart-sass/blob/master/README.md#behavioral-differences-from-ruby-sass
             * By default `npm install` will install sass.
             * To use node-sass you need to use:
             *   Npm:
             *     `npm install node-sass --save-dev`
             *   Yarn:
             *     `yarn add node-sass --dev`
             */
            let sassCompiler;
            try {
                sassCompiler = require('node-sass'); // Check if node-sass is explicitly included.
            }
            catch (_a) {
                sassCompiler = await Promise.resolve().then(() => require('sass'));
            }
            return sassCompiler
                .renderSync({
                file: filePath,
                data: content,
                indentedSyntax: '.sass' === ext,
                importer: await Promise.resolve().then(() => require('node-sass-tilde-importer')),
                includePaths: styleIncludePaths,
            })
                .css.toString();
        }
        case '.less': {
            const { css } = await (await Promise.resolve().then(() => require('less'))).render(content, {
                filename: filePath,
                javascriptEnabled: true,
                paths: styleIncludePaths,
            });
            return css;
        }
        case '.styl':
        case '.stylus': {
            const stylus = await Promise.resolve().then(() => require('stylus'));
            return (stylus(content)
                // add paths for resolve
                .set('paths', [basePath, '.', ...styleIncludePaths, 'node_modules'])
                // add support for resolving plugins from node_modules
                .set('filename', filePath)
                // turn on url resolver in stylus, same as flag --resolve-url
                .set('resolve url', true)
                .define('url', stylus.resolver(undefined))
                .render());
        }
        case '.css':
        default:
            return content;
    }
}
function optimizeCss(filePath, css, browsers, cssUrl) {
    const postCssPlugins = [];
    if (cssUrl !== stylesheet_processor_1.CssUrl.none) {
        postCssPlugins.push(postcssUrl({ url: cssUrl }));
    }
    // this is important to be executed post running `postcssUrl`
    postCssPlugins.push(autoprefixer(browsers));
    postCssPlugins.push(cssnano({
        preset: [
            'default',
            {
                // Disable SVG optimizations, as this can cause optimizations which are not compatible in all browsers.
                svgo: false,
                // Disable `calc` optimizations, due to several issues. #16910, #16875, #17890
                calc: false,
            },
        ],
    }));
    return postcss_1.default(postCssPlugins).process(css, {
        from: filePath,
        to: filePath.replace(path.extname(filePath), '.css'),
    });
}
// default export for sync-rpc to recognize the function https://github.com/ForbesLindesay/sync-rpc#workerjs
exports.default = () => processCss;
//# sourceMappingURL=stylesheet-processor-worker.js.map