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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const cli_utils_1 = require("@design-systems/cli-utils");
const fs_1 = tslib_1.__importDefault(require("fs"));
const path_1 = tslib_1.__importDefault(require("path"));
const change_case_1 = require("change-case");
const typescript_1 = tslib_1.__importDefault(require("typescript"));
const postcss_1 = tslib_1.__importDefault(require("postcss"));
const postcss_icss_selectors_1 = tslib_1.__importDefault(require("postcss-icss-selectors"));
const icss_utils_1 = require("icss-utils");
const minimatch_1 = tslib_1.__importDefault(require("minimatch"));
const postcss_2 = require("./postcss");
const CSS_EXTENSION_REGEX = /\.css['"]$/;
const FORMAT_HOST = {
    /** Implement ts compiler getCurrentDirectory */
    getCurrentDirectory: () => typescript_1.default.sys.getCurrentDirectory(),
    /** Implement ts compiler getNewLine */
    getNewLine: () => typescript_1.default.sys.newLine,
    /** Implement ts compiler getCanonicalFileName */
    getCanonicalFileName: (filename) => typescript_1.default.sys.useCaseSensitiveFileNames ? filename : filename.toLowerCase()
};
/** Determine the relative file name to the file */
function resolveCssPath(cssPath, { fileName }) {
    const resolvedPath = cssPath.substring(1, cssPath.length - 1);
    if (resolvedPath.startsWith('.')) {
        const sourcePath = fileName;
        return path_1.default.resolve(path_1.default.dirname(sourcePath), resolvedPath);
    }
    return resolvedPath;
}
/** Find a path relative to wherever the script was ran */
function relativeFile(file) {
    return Object.assign(Object.assign({}, file), { fileName: path_1.default.relative(process.env.INIT_CWD || process.cwd(), file.fileName) });
}
/** Find and process all the css files in a typescript AST */
async function processCss(processor, project) {
    const ignore = ['node_modules', '.d.ts'];
    const files = project
        .getSourceFiles()
        .filter(f => !ignore.find(i => f.fileName.includes(i)));
    const pendingCssResults = new Map();
    const cssPromises = files.map(async (file) => {
        const styles = new Map();
        const results = [];
        // 1. Find all css imports
        file.forEachChild(node => {
            // Dealing with "import * as css from 'foo.css'" only since namedImports variables get mangled
            if (typescript_1.default.isImportDeclaration(node) &&
                node.importClause &&
                CSS_EXTENSION_REGEX.test(node.moduleSpecifier.getText())) {
                const { importClause } = node;
                const cssPath = resolveCssPath(node.moduleSpecifier.getText(), file);
                // This is the "foo" from "import * as foo from 'foo.css'"
                const importVar = importClause.getText();
                if (!fs_1.default.existsSync(cssPath)) {
                    throw new Error(typescript_1.default.formatDiagnosticsWithColorAndContext([
                        {
                            category: 1,
                            messageText: `Could not find file ${node.moduleSpecifier.getText()}"`,
                            start: node.moduleSpecifier.getStart(),
                            length: node.moduleSpecifier.getText().length,
                            file: relativeFile(file),
                            code: 1337
                        }
                    ], FORMAT_HOST));
                }
                const pending = pendingCssResults.get(cssPath);
                if (pending) {
                    results.push([importVar, pending]);
                }
                else {
                    const promise = processor.process(fs_1.default.readFileSync(cssPath, 'utf8'), {
                        from: cssPath
                    });
                    pendingCssResults.set(cssPath, promise);
                    results.push([importVar, promise]);
                }
            }
        });
        // 2. Process the css with postcss to an object containing all the classNames
        await Promise.all(results.map(async ([name, promise]) => {
            const result = await promise;
            styles.set(name, result.root ? icss_utils_1.extractICSS(result.root, false).icssExports : {});
        }));
        return [file.fileName, styles];
    });
    // 3. Return a map of ts sources file => styles in file
    return new Map(await Promise.all(cssPromises));
}
/**
 * Builds type definition for your source files. Will only emit definitions.
 * Also tracks usage of css classnames and provides type errors.
 */
class TypescriptCompiler {
    constructor(args) {
        this.logger = cli_utils_1.createLogger({ scope: 'build' });
        /** Build the types for the project */
        this.buildTypes = async (watch) => {
            const isTrace = cli_utils_1.getLogLevel() === 'trace';
            if (!fs_1.default.existsSync(path_1.default.join(process.cwd(), 'tsconfig.json'))) {
                this.logger.debug('No tsconfig.json found, skipping type build.');
                return;
            }
            this.logger.trace('Generating Types...');
            const ignoredPatterns = [
                "**/*.snippet.*",
                ...Array.isArray(this.buildArgs.ignore)
                    ? this.buildArgs.ignore
                    : [this.buildArgs.ignore],
            ];
            /** Determine if a file should not be type-checked or emitted */
            const isIgnored = (file) => ignoredPatterns.some(pattern => minimatch_1.default(file, pattern));
            try {
                const diagnostics = [];
                const host = typescript_1.default.createSolutionBuilderHost(Object.assign(Object.assign({}, typescript_1.default.sys), { writeFile(fileName, content) {
                        if (isIgnored(fileName)) {
                            return;
                        }
                        fs_1.default.writeFileSync(fileName, content);
                    },
                    readFile(fileName, encoding = 'utf8') {
                        if (fs_1.default.existsSync(fileName)) {
                            let content = fs_1.default.readFileSync(fileName, encoding);
                            if (isIgnored(fileName)) {
                                // Don't type check stories
                                content = '// @ts-nocheck';
                            }
                            return content;
                        }
                    } }), undefined, d => diagnostics.push(d), d => this.logger.trace(d.messageText));
                // The following options are not public but we want to override them
                typescript_1.default.commonOptionsWithBuild.push({ name: 'emitDeclarationOnly' }, { name: 'declarationMap' }, { name: 'outDir' });
                const solution = typescript_1.default.createSolutionBuilder(host, ['./tsconfig.json'], {
                    verbose: isTrace,
                    listEmittedFiles: isTrace,
                    outDir: this.buildArgs.outputDirectory || '',
                    incremental: true,
                    declarationMap: true,
                    emitDeclarationOnly: true,
                });
                const postcssConfig = postcss_2.getPostCssConfigSync({
                    cwd: cli_utils_1.getMonorepoRoot(),
                    useModules: false,
                    reportError: false
                });
                const cssProcessor = postcss_1.default([
                    ...postcssConfig.plugins,
                    postcss_icss_selectors_1.default({
                        mode: 'local',
                        /** Create the scope for the css selectors */
                        generateScopedName: name => name
                    })
                ]);
                let project = solution.getNextInvalidatedProject();
                while (project) {
                    let css = new Map();
                    if ('getSourceFiles' in project) {
                        // eslint-disable-next-line no-await-in-loop
                        css = await processCss(cssProcessor, project);
                    }
                    project.done(undefined, undefined, {
                        afterDeclarations: [this.findStyleUsage(css)]
                    });
                    project = solution.getNextInvalidatedProject();
                }
                if (diagnostics.length > 0) {
                    const formattedDiagnostics = typescript_1.default.formatDiagnosticsWithColorAndContext(diagnostics
                        .sort((a, b) => (a.start || 0) - (b.start || 0))
                        .map(d => (Object.assign(Object.assign({}, d), { file: d.file ? relativeFile(d.file) : undefined }))), FORMAT_HOST);
                    throw new Error(formattedDiagnostics);
                }
                this.logger.complete('Generated Types');
            }
            catch (e) {
                this.logger.error('\n');
                // If we don't do this there is a weird space on the first line of the errors
                // eslint-disable-next-line no-console
                console.log(e.message);
                this.logger.debug(e.stack);
                this.logger.error('Failed to generate types');
                if (!watch) {
                    process.exit(1);
                }
            }
        };
        this.buildArgs = args;
    }
    findStyleUsage(css) {
        return (ctx) => sf => {
            if (!('fileName' in sf)) {
                return sf;
            }
            const styles = css.get(sf.fileName) || new Map();
            /** Recursively visit all the node in the ts file looking for css usage and imports */
            const visitor = (node) => {
                if (typescript_1.default.isPropertyAccessExpression(node)) {
                    const variable = node.expression.getText();
                    const style = styles.get(variable);
                    if (style) {
                        const classes = Object.keys(style);
                        const camelClasses = classes.map(s => change_case_1.camelCase(s));
                        const className = node.name.getText();
                        const exists = Boolean(classes.includes(className) || camelClasses.includes(className));
                        if (!exists) {
                            // We're using internal APIs.... *shh*
                            ctx.addDiagnostic({
                                category: 1,
                                messageText: `ClassName "${className}" does not exists in "${variable}"`,
                                start: node.name.getStart(),
                                length: className.length,
                                file: sf,
                                code: 1337
                            });
                        }
                    }
                }
                return typescript_1.default.visitEachChild(node, visitor, ctx);
            };
            // Must visit source file instead of the .d.ts file, since that contains no actual code
            const external = sf.externalModuleIndicator;
            typescript_1.default.visitNode(external ? external.parent : sf, visitor);
            return sf;
        };
    }
}
exports.default = TypescriptCompiler;
//# sourceMappingURL=typescript.js.map