Function transformCSSProxy

plugins/plugin-optimize/lib/css.js:27–79

* Scans JS for CSS imports, and embeds only what’s needed * * import 'global.css' -> (removed; loaded in HTML) * import url from 'global.css' -> const url = 'global.css' * import {foo, bar} from 'local.module.css' -> const {foo, bar} = 'local.module.css'

(file, originalCode)

 * import {foo, bar} from 'local.module.css' -> const {foo, bar} = 'local.module.css'
 */
function transformCSSProxy(file, originalCode) {
  const filePath = path.dirname(file);
  let code = originalCode;

  const getProxyImports = (code) =>
    parse(code)[0]
      .filter(({d}) => d === -1) // discard dynamic imports (> -1) and import.meta (-2)
      .filter(({s, e}) => code.substring(s, e).endsWith('.css.proxy.js')); // only accept .css.proxy.js files

  // iterate through proxy imports
  let proxyImports = getProxyImports(code);
  while (proxyImports.length) {
    const {s, e, ss, se} = proxyImports[0]; // only transform one at a time, because every transformation requires re-parsing (unless you created an ellaborate mechanism to keep track of character counts but IMO parsing is simpler/cheaper)

    const originalImport = code.substring(s, e);
    const importedFile = originalImport.replace(/\.proxy\.js$/, '');
    const importNamed = code
      .substring(ss, se)
      .replace(code.substring(s - 1, e + 1), '') // remove import
      .replace(/^import\s+/, '') // remove keyword
      .replace(/\s*from.*$/, '') // remove other keyword
      .replace(/\*\s+as\s+/, '') // sanitize star imports
      .trim();

    // transform JS
    if (!importNamed) {
      // option 1: no transforms needed
      code = code.replace(new RegExp(`${code.substring(ss, se)};?\n?`), '');
    } else {
      if (importedFile.endsWith('.module.css')) {
        // option 2: transform css modules
        const proxyCode = fs.readFileSync(path.resolve(filePath, originalImport), 'utf-8');
        const matches = proxyCode.match(/^let json\s*=\s*(\{[^\}]+\})/m);
        if (matches) {
          code = code.replace(
            new RegExp(`${code.substring(ss, se).replace(/\*/g, '\\*')};?`),
            `const ${importNamed.replace(/\*\s+as\s+/, '')} = ${matches[1]};`,
          );
        }
      } else {
        // option 3: transfrom normal css
        code = code.replace(
          new RegExp(`${code.substring(ss, se)};?`),
          `const ${importNamed} = '${importedFile}';`,
        );
      }
    }

    proxyImports = getProxyImports(code); // re-parse code, continuing until all are transformed
  }

  return code;
}
exports.transformCSSProxy = transformCSSProxy;

/** Build CSS File */