lincd-cli/lib/esm/loaders/css-loader.mjs

Command line tools for the lincd.js library

import createLoader from 'create-esm-loader';
// import parseCSS from 'css-parse';
import { generateScopedName, generateScopedNameProduction } from '../utils.js';
const cssLoader = {
    resolve(specifier, opts) {
        //check if the url is css
        if (specifier.endsWith('.css')) {
            // console.log(`##LOADER option resolve ${specifier}`);
            //and not a node_module (because we don't need to process node_modules)
            if (specifier.startsWith('.')) {
                // console.log(`##LOADER resolve ${specifier} - ${specifier.startsWith('.') ? 'local' : 'node_module'}`);
                let { parentURL } = opts;
                let url = new URL(specifier, parentURL).href;
                return { url };
            }
            else {
                // console.log(`##LOADER NOT RESOLVING ${specifier}`);
            }
        }
    },
    format(url, opts) {
        //check if the url is css and not a node_module
        if (url.endsWith('.css')) {
            // console.log(`##LOADER format ${url} - ${url.startsWith('.') ? 'local' : 'node_module'}`);
            return { format: 'module' };
        }
    },
    transform(source, opts) {
        const { url } = opts;
        //check if the url is css and not a node_module
        if (url.endsWith('.css')) {
            // console.log(`##LOADER transform ${url} - ${url.startsWith('.') ? 'local' : 'node_module'}`);
            //if yes, convert the CSS source to a JSON object with original selectors as keys
            //and the converted class names as values
            let cssClassesObject = parseCssToObject(String(source), opts.url);
            let finalSource = JSON.stringify(cssClassesObject, null, 2);
            return { source: `export default ${finalSource};` };
        }
    },
};
function parseCssToObject(rawSource, filename) {
    const output = {};
    let myResults = rawSource.match(/\.[a-zA-Z_]{1}[\w]+[\s:]/g);
    if (myResults) {
        myResults
            .map((result) => {
            return result.replace(/[\.\s:]/g, '');
        })
            .forEach((selector) => {
            let scopedClassName;
            if (process.env.NODE_ENV === 'production') {
                scopedClassName = generateScopedNameProduction(selector, filename);
            }
            else {
                scopedClassName = generateScopedName(selector, filename);
            }
            output[selector] = scopedClassName;
        });
    }
    // console.log(myResults);
    // for (const rule of parseCSS(rawSource).stylesheet.rules) {
    //   if(rule.selectors)
    //   {
    //     let selector = rule['selectors'].at(-1); // Get right-most in the selector rule: `.Bar` in `.Foo > .Bar {…}`
    //     if (selector[0] !== '.') break; // only care about classes
    //
    //     selector = selector
    //       .substring(1) // Skip the initial `.`
    //       .match(/(\w+)/)[1]; // Get only the classname: `Qux` in `.Qux[type="number"]`
    //
    //     output[selector] = selector;//getClassStyles(rule['declarations']);
    //     // : selector;
    //   }
    // }
    return output;
}
function getClassStyles(declarations) {
    const styles = {};
    for (const declaration of declarations) {
        styles[declaration['property']] = declaration['value'];
    }
    return styles;
}
//@ts-ignore
export const { resolve, load } = await createLoader(cssLoader);
//# sourceMappingURL=css-loader.mjs.map