solid-register/dist/compile-css.js

integrated package to run solid browser code in node

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const register_extension_1 = require("./register-extension");
const read_config_1 = require("./read-config");
const path_1 = require("path");
let postcss, postcssConfig;
try {
    postcss = require("postcss");
    postcssConfig = postcss ? require((0, path_1.join)(read_config_1.projectPath, "postcss.config")) : {};
}
catch (e) { }
const [extensions, moduleExtensions, postcssExtensions] = read_config_1.config.compile?.css === false
    ? [[], [], []]
    : read_config_1.config.compile?.css === true
        ? [[".css"], [".module.css"], []]
        : [
            read_config_1.config.compile?.css?.extensions || [".css"],
            read_config_1.config.compile?.css?.modules instanceof Array
                ? read_config_1.config.compile?.css?.modules
                : read_config_1.config.compile?.css?.modules === false
                    ? []
                    : [".module.css"],
            read_config_1.config.compile?.css?.postcss instanceof Array
                ? read_config_1.config.compile?.css.postcss
                : read_config_1.config.compile?.css?.postcss === true
                    ? [".postcss", ".postcss.css"]
                    : [],
        ];
if (postcssExtensions.length) {
    if (postcss === undefined) {
        console.warn("\x1b[33m⚠️ could not load postcss even though the config requests it");
        postcssExtensions.length = 0;
    }
    else if (!postcssConfig) {
        console.warn("\x1b[33m⚠️ could not load postcss.config.* even though the config requests it");
        postcssExtensions.length = 0;
    }
}
const loadStyles = (styles, filename) => `if (!document.querySelector(\`[data-filename="${filename}"]\`)) {
  const div = document.createElement('div');
  div.innerHTML = \`<style data-filename="${filename}">${styles}</style>\`;
  document.head.appendChild(div.firstChild);
  div.innerHTML.replace(/@import (["'])(.*?)\\1/g, (_, __, requiredFile) => {
    try {
      require(requiredFile);
    } catch(e) {
      console.warn(
        '\\x1b[33m⚠️ attempt to @import css',
        requiredFile,
        'failed with error\\x1b[31m',
        e,
        '\\x1b[0m'
      );
    }
  });
}`;
const loadPostcssStyles = function (styles, filename) {
    if (!postcss || !postcssConfig.plugins) {
        return loadStyles(filename, styles);
    }
    const pluginsConfig = postcssConfig.plugins;
    const plugins = pluginsConfig instanceof Array
        ? pluginsConfig
        : Object.entries(pluginsConfig).reduce((plugins, [name, options]) => {
            let plugin;
            try {
                plugin = this.require(name);
            }
            catch (e) {
                try {
                    plugin = this.require(`postcss-${name}`);
                }
                catch (e) {
                    return plugins;
                }
            }
            plugins.push(plugin(options));
            return plugins;
        }, []);
    try {
        postcss(plugins)
            .process(styles, { from: filename, to: `${filename}.css` })
            .then((result) => {
            if (!document.querySelector(`[data-filename="${filename}"]`)) {
                const div = document.createElement("div");
                div.innerHTML = `<style data-filename="${filename}">${result.css}</style>`;
                document.head.appendChild(div.firstChild);
            }
        })
            .catch((e) => {
            console.warn("\\x1b[33m⚠️ attempt to load file with postcss", filename, "failed with error\\x1b[31m", e, "\\x1b[0m");
        });
    }
    catch (e) {
        console.warn("\\x1b[33m⚠️ attempt to load file with postcss", filename, "failed with error\\x1b[31m", e, "\\x1b[0m");
    }
    document.body.appendChild(document.createComment("waiting to process ${filename} with postcss"));
    return "";
};
const toCamelCase = (name) => name.replace(/[-_]+(\w)/g, (_, char) => char.toUpperCase());
const getModuleClasses = (styles) => {
    const identifiers = {};
    styles.replace(/(?:^|[\r\n\s]+)(?:\.([a-z][\w\-_]*))|@keyframes\s+([\{\s\r\n]+?)[\r\n\s]*\{/g, (_, classname, animation) => {
        if (classname) {
            identifiers[classname] = identifiers[toCamelCase(classname)] =
                classname;
        }
        if (animation) {
            identifiers[animation] = identifiers[toCamelCase(animation)] =
                animation;
        }
        return "";
    });
    return identifiers;
};
const loadCssModuleStyles = (styles, filename) => `${loadStyles(filename, styles)}
module.exports = ${JSON.stringify(getModuleClasses(styles))};`;
const ignoreCss = (_styles, filename) => `/* ignoring CSS file ${filename} */`;
if (read_config_1.config.compile?.css === false) {
    (0, register_extension_1.registerCompiler)(".css", ignoreCss);
}
else {
    [
        ...new Set([...extensions, ...moduleExtensions, ...postcssExtensions]),
    ].forEach((extension) => {
        if (postcssExtensions.includes(extension)) {
            (0, register_extension_1.registerCompiler)(extension, loadPostcssStyles);
        }
        else if (moduleExtensions.includes(extension)) {
            (0, register_extension_1.registerCompiler)(extension, loadCssModuleStyles);
        }
        else {
            (0, register_extension_1.registerCompiler)(extension, loadStyles);
        }
    });
}