@design-systems/build/dist/postcss.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getPostCssConfigSync = exports.getPostCssConfig = exports.getCSSPath = void 0;
const tslib_1 = require("tslib");
const cli_utils_1 = require("@design-systems/cli-utils");
const cli_utils_2 = require("@design-systems/cli-utils");
const fs_extra_1 = tslib_1.__importDefault(require("fs-extra"));
const path_1 = tslib_1.__importDefault(require("path"));
const postcss_1 = tslib_1.__importDefault(require("postcss"));
const postcss_load_config_1 = tslib_1.__importDefault(require("postcss-load-config"));
const code_frame_1 = require("@babel/code-frame");
const utils_1 = require("./utils");
const logger = cli_utils_1.createLogger({ scope: 'build' });
/** Get the output path for a css file. */
function getCSSPath(inFile, inDir, outDir) {
    const name = path_1.default.basename(inFile);
    const outPath = utils_1.getOutPath(inDir, inFile, outDir);
    const cssFile = path_1.default.join(outPath, name);
    return cssFile;
}
exports.getCSSPath = getCSSPath;
/**
 * Check package and monorepo cwd for postcss.config.js and returns
 * path. Defaults to empty string.
 */
function getUserPostcssConfig(cwd = process.cwd()) {
    const CONFIG_FILENAME = 'postcss.config.js';
    // Try package cwd
    const pkgConfigPath = path_1.default.join(cwd, CONFIG_FILENAME);
    if (fs_extra_1.default.existsSync(pkgConfigPath)) {
        return pkgConfigPath;
    }
    // Try monorepo cwd
    const monoRepoConfigPath = path_1.default.join(cli_utils_2.getMonorepoRoot(cwd), CONFIG_FILENAME);
    if (fs_extra_1.default.existsSync(monoRepoConfigPath)) {
        return monoRepoConfigPath;
    }
    // Default to empty string
    return '';
}
/** Fail the process if the postcss.config has errors */
const reportConfigError = (error) => {
    // Error on anything but the following message. This message is
    // present when the user hasn't configured postcss
    if (!error.message.includes('No PostCSS Config found')) {
        logger.error('Something is wrong in your postcss.config!');
        // eslint-disable-next-line no-console
        console.log(error);
        process.exit(1);
    }
};
/** Load the user's postcss config or our default. */
async function getPostCssConfig({ useModules, configFile = require.resolve('./configs/postcss.config'), outDir = 'dist', cwd = process.cwd(), reportError = true }) {
    const context = useModules
        ? {
            env: 'module',
            outDir
        }
        : {};
    try {
        return await postcss_load_config_1.default(context, getUserPostcssConfig(cwd));
    }
    catch (error) {
        if (reportError) {
            reportConfigError(error);
            logger.trace(error);
        }
        return postcss_load_config_1.default(context, configFile);
    }
}
exports.getPostCssConfig = getPostCssConfig;
/** Load the user's postcss config or our default synchronously. */
function getPostCssConfigSync({ useModules, configFile = require.resolve('./configs/postcss.config'), outDir = 'dist', cwd = process.cwd(), reportError = true }) {
    const context = useModules
        ? {
            env: 'module',
            outDir
        }
        : {};
    try {
        return postcss_load_config_1.default.sync(context, getUserPostcssConfig(cwd));
    }
    catch (error) {
        if (reportError) {
            reportConfigError(error);
            logger.trace(error);
        }
        return postcss_load_config_1.default.sync(context, configFile);
    }
}
exports.getPostCssConfigSync = getPostCssConfigSync;
/**
 * Transpile a CSS file using babel.
 * Write the CJS version to disk.
 * Write the transpiled version to disk.
 *
 * @returns the transpiled CSS
 */
async function transpile({ inFile, inDir, outDir, configFile, watch }) {
    // Append .js to the end of the file so auto importing works
    const cssFile = getCSSPath(inFile, inDir, outDir);
    const { plugins, options } = await getPostCssConfig({
        useModules: true,
        configFile,
        outDir
    });
    const processor = postcss_1.default(plugins);
    const fileContents = await fs_extra_1.default.readFile(inFile);
    try {
        const result = await processor.process(fileContents, Object.assign(Object.assign({}, options), { plugins, to: cssFile, from: inFile, map: { inline: false } }));
        await fs_extra_1.default.outputFile(`${cssFile}.map`, result.map
            .toString()
            .replace(/<input css (\d+)>/g, '../src/<input css $1>'));
        return result;
    }
    catch (error) {
        logger.error('Something went wrong building your css!');
        let message = error;
        if (error.name === 'CssSyntaxError') {
            const { line, column, file, reason } = error;
            message = utils_1.formatError({
                file,
                line,
                column,
                message: reason,
                tool: 'POSTCSS',
                code: code_frame_1.codeFrameColumns(error.source, { start: { line, column } }, { highlightCode: true })
            });
        }
        // eslint-disable-next-line no-console
        console.log(message);
        if (!watch) {
            process.exit(1);
        }
    }
}
exports.default = transpile;
//# sourceMappingURL=postcss.js.map