@navikt/aksel/dist/css-imports/generate-output.js

Aksel command line interface. Handles css-imports, codemods and more

"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.generateImportOutput = generateImportOutput;
const chalk_1 = __importDefault(require("chalk"));
const clipboardy_1 = __importDefault(require("clipboardy"));
const lodash_1 = __importDefault(require("lodash"));
const _mappings_1 = require("@navikt/ds-css/config/_mappings");
const config_js_1 = require("./config.js");
const inquiry_1 = require("./inquiry");
function generateImportOutput(answers) {
    return __awaiter(this, void 0, void 0, function* () {
        const useCdn = answers.cdn === "yes";
        const useTailwind = answers.tailwind === "yes";
        const version = answers.version;
        const imports = [];
        let importStr = "";
        yield (0, inquiry_1.inquiry)(answers, [
            {
                type: "select",
                name: "output",
                message: "Output format",
                initial: "print-clipboard",
                choices: [
                    { message: "Clipboard & Print", name: "clipboard-print" },
                    { message: "Clipboard", name: "clipboard" },
                    { message: "Print", name: "print" },
                ],
            },
        ]);
        answers["config-type"] === "regular"
            ? imports.push(simpleOutput(useCdn, answers.layers === "yes", version))
            : imports.push(...advancedOutput(answers, useCdn, answers.layers === "yes", version));
        if (useTailwind) {
            importStr = `@import "tailwindcss/base";
${imports.join("\n")}

@import "tailwindcss/components";
@import "tailwindcss/utilities";
    `;
        }
        else {
            importStr = imports.join("\n");
        }
        if (answers.output.includes("print")) {
            console.info(chalk_1.default.bold.cyan(`\nImports 🚀 \n`));
            console.info(chalk_1.default.green(`${importStr}`));
        }
        if (useCdn) {
            console.info(chalk_1.default.bold.underline.cyan(`\nNotes on CDN-usage 📝`));
            console.info(`We recommend using Static imports, then uploading the your bundled static-files to your own CDN-instance.
✔︎ This allows you to control the version of the CSS-files with package.json, and avoids desync between ds-react/ds-css.
✔︎ Remember to add 'https://cdn.nav.no' to your applications CSP!`);
        }
        if (useTailwind) {
            console.info(chalk_1.default.bold.underline.cyan(`\nNotes on Tailwind-use 📝`));
            console.info(`When using tailwind with Aksel, you will need to add the postcss plugin ${chalk_1.default.cyan("postcss-import")}
✔︎ NPM: https://www.npmjs.com/package/postcss-import
✔︎ Read more here: https://aksel.nav.no/grunnleggende/kode/tailwind`);
        }
        if (answers.layers === "yes") {
            console.info(chalk_1.default.bold.underline.cyan(`\nNotes on Layers 📝`));
            console.info(`Layers is not yet supported in Safari <= 15.3. (https://caniuse.com/css-cascade-layers)`);
        }
        answers.output.includes("clipboard") && clipboardy_1.default.writeSync(importStr);
    });
}
function simpleOutput(cdn, layers, version) {
    const options = {
        static: `@import "@navikt/ds-css"${layers ? config_js_1.layerSuffix : ""};`,
        cdn: toCdn("index.css", version),
    };
    return cdn ? options.cdn : options.static;
}
function advancedOutput(answers, cdn, layers, version) {
    const imports = ["/* Defaults */"];
    const baselineImports = answers.imports.filter((x) => !x.startsWith(config_js_1.ComponentPrefix) && x !== "default");
    const componentImports = answers.imports
        .filter((x) => x.startsWith(config_js_1.ComponentPrefix) && x !== "components")
        .map((x) => x.replace(config_js_1.ComponentPrefix, ""));
    baselineImports.forEach((x) => {
        cdn
            ? imports.push(toCdn(`${_mappings_1.globalDir}/${x}.css`, version))
            : imports.push(toCssImport(`${_mappings_1.globalDir}/${x}.css`, layers));
    });
    if (answers["config-type"] === "easy") {
        cdn
            ? imports.push(toCdn(_mappings_1.componentsCss, version))
            : imports.push(toCssImport(`${_mappings_1.rootDir}/${_mappings_1.componentsCss}`, layers));
        return imports;
    }
    const components = new Set();
    componentImports.forEach((x) => {
        var _a;
        const styleRef = _mappings_1.StyleMappings.components.find((y) => y.component === x);
        if (styleRef) {
            components.add(styleRef.main);
            (_a = styleRef === null || styleRef === void 0 ? void 0 : styleRef.dependencies) === null || _a === void 0 ? void 0 : _a.forEach((dep) => components.add(dep));
        }
    });
    let componentImportsList = Array.from(components)
        .filter((x) => x.length > 0)
        .sort((a, b) => a.localeCompare(b));
    if (componentImportsList.find((x) => x === _mappings_1.formCss)) {
        componentImportsList = componentImportsList.filter((x) => x !== _mappings_1.formCss);
        componentImportsList.unshift(_mappings_1.formCss);
    }
    if (componentImportsList.find((x) => x === _mappings_1.primitivesCss)) {
        componentImportsList = componentImportsList.filter((x) => x !== _mappings_1.primitivesCss);
        componentImportsList.unshift(_mappings_1.primitivesCss);
    }
    if (componentImportsList.find((x) => x === _mappings_1.typoCss)) {
        componentImportsList = componentImportsList.filter((x) => x !== _mappings_1.typoCss);
        componentImportsList.unshift(_mappings_1.typoCss);
    }
    if (componentImportsList.length === 0) {
        return imports;
    }
    imports.push(``);
    imports.push(`/* Components */`);
    componentImportsList.forEach((x) => {
        const pascalCase = lodash_1.default.camelCase(x.replace("css", "")).toLowerCase();
        cdn
            ? imports.push(toCdn(`${_mappings_1.componentDir}/${pascalCase}.css`, version))
            : imports.push(toCssImport(`${_mappings_1.componentDir}/${pascalCase}.css`, layers));
    });
    return imports;
}
function toCdn(str, version) {
    return `<link rel="preload" href="https://cdn.nav.no/aksel/@navikt/ds-css/${version}/${str
        .replace(".css", ".min.css")
        .replace(`${_mappings_1.rootDir}/`, "")}" as="style"></link>`;
}
function toCssImport(str, layers) {
    return `@import "@navikt/ds-css/${str}"${layers ? config_js_1.layerSuffix : ""};`;
}