ember-scoped-css 0.24.2 → 1.0.0

package/src/build/app-css-livereload-loader.js

@@ -1,119 +0,0 @@
-import { readFile } from 'node:fs/promises';
-import path from 'node:path';
-
-import { createUnplugin } from 'unplugin';
-import { Compilation } from 'webpack';
-
-import generateHash from '../lib/generateAbsolutePathHash.js';
-
-export default createUnplugin(({ loaders, htmlEntrypointInfo }) => {
-  return {
-    name: 'app-css-livereload-loader',
-
-    transformInclude(id) {
-      return id.endsWith('.js') || id.endsWith('.hbs');
-    },
-
-    async transform(code, jsPath) {
-      if (process.env.EMBER_ENV === 'production') {
-        return code;
-      }
-
-      const importRegex = /import\s+['"]([^'"]+\.css)['"]\s*;$/gm;
-      let cssPaths = [];
-      let match;
-
-      while ((match = importRegex.exec(code))) {
-        const importPath = match[1];
-        const directory = path.dirname(jsPath);
-        const cssPath = path.resolve(directory, importPath);
-
-        cssPaths.push(cssPath);
-
-        // replace import with empty string
-        code = code.replace(match[0], '');
-      }
-
-      if (!cssPaths.length) {
-        return code;
-      }
-
-      const promises = cssPaths.map(async (cssPath) => {
-        let css = await readFile(cssPath, 'utf8');
-
-        for (let i = loaders.length - 1; i >= 0; i--) {
-          const loader = loaders[i];
-
-          css = await loader.bind({ resourcePath: cssPath })(css);
-        }
-
-        // random string; lenght is 8
-        const postfix = generateHash(path.basename(cssPath));
-
-        this.emitFile({
-          type: 'asset',
-          fileName:
-            'assets/includedscripts/' + postfix + '_' + path.basename(cssPath),
-          source: css,
-        });
-      });
-
-      await Promise.all(promises);
-
-      return code;
-    },
-
-    webpack(compiler) {
-      if (process.env.EMBER_ENV === 'production') {
-        return;
-      }
-
-      compiler.hooks.thisCompilation.tap('Replace', (compilation) => {
-        compilation.hooks.processAssets.tapAsync(
-          {
-            name: 'Replace',
-            stage: Compilation.PROCESS_ASSETS_STAGE_DERIVED,
-          },
-          async (assets, callback) => {
-            try {
-              const cssAssets = Object.keys(assets).filter((asset) =>
-                asset.startsWith('assets/includedscripts/'),
-              );
-
-              if (!cssAssets.length) {
-                return;
-              }
-
-              // let linkAdded = false;
-              const document =
-                htmlEntrypointInfo.htmlEntryPoint.dom.window.document;
-
-              for (let asset of cssAssets) {
-                const head = document.getElementsByTagName('head')[0];
-                const linkExists = head.querySelector(
-                  `link[rel="stylesheet"][href="/${asset}"]`,
-                );
-
-                if (!linkExists) {
-                  const link = document.createElement('link');
-
-                  link.rel = 'stylesheet';
-                  link.href = '/' + asset;
-                  head.appendChild(link);
-                  // linkAdded = true;
-                }
-              }
-
-              // if (linkAdded) {
-              //   const indexHtmlWithLinks = dom.serialize();
-              //   await writeFile(indexHtmlPath, indexHtmlWithLinks, 'utf8');
-              // }
-            } finally {
-              callback();
-            }
-          },
-        );
-      });
-    },
-  };
-});

package/src/build/app-css-loader.js

@@ -1,38 +0,0 @@
-// import { createUnplugin }  from 'unplugin';
-import path from 'node:path';
-
-import {
-  cssHasAssociatedComponent,
-  hashFrom,
-  isRelevantFile,
-} from '../lib/path/utils.js';
-import rewriteCss from '../lib/rewriteCss.js';
-
-export default async function (code) {
-  const options = this.getOptions();
-  const cssPath = this.resourcePath;
-
-  if (!isRelevantFile(cssPath, { ...options, cwd: this.rootContext })) {
-    return code;
-  }
-
-  if (!cssPath.startsWith(this.rootContext)) {
-    return code;
-  }
-
-  const cssFileName = path.basename(cssPath);
-
-  if (cssHasAssociatedComponent(cssPath)) {
-    const postfix = hashFrom(cssPath);
-    const rewrittenCss = rewriteCss(
-      code,
-      postfix,
-      cssFileName,
-      options.layerName,
-    );
-
-    return rewrittenCss;
-  }
-
-  return code;
-}

package/src/build/ember-classic-support.js

@@ -1,293 +0,0 @@
-'use strict';
-
-import { existsSync } from 'node:fs';
-import { readFile, writeFile } from 'node:fs/promises';
-import path from 'node:path';
-
-import Concat from 'broccoli-concat';
-import { Funnel } from 'broccoli-funnel';
-import MergeTrees from 'broccoli-merge-trees';
-import Filter from 'broccoli-persistent-filter';
-import { Preprocessor } from 'content-tag';
-
-import getClassesTagsFromCss from '../lib/getClassesTagsFromCss.js';
-import {
-  cssHasAssociatedComponent,
-  hashFromModulePath,
-  packageScopedPathToModulePath,
-} from '../lib/path/utils.js';
-import rewriteCss from '../lib/rewriteCss.js';
-import rewriteHbs from '../lib/rewriteHbs.js';
-
-const p = new Preprocessor();
-const COMPONENT_EXTENSIONS = ['hbs', 'js', 'ts', 'gjs', 'gts'];
-const TEMPLATE_EXTENSIONS = ['hbs', 'gjs', 'gts'];
-
-class ScopedFilter extends Filter {
-  constructor(componentsNode, options = {}) {
-    super(componentsNode, options);
-    this.warningStream = process.stderr;
-    this.options = options;
-  }
-
-  get extensions() {
-    return ['css'];
-  }
-
-  get targetExtension() {
-    return 'css';
-  }
-
-  async processString(content, relativePath) {
-    // ignore css files for ember-css-modules
-    if (relativePath.endsWith('.module.css')) {
-      return '';
-    }
-
-    // check if corresponding js file exists
-    let hasRelevantFile = false;
-
-    for (let inputPath of this.inputPaths) {
-      if (hasRelevantFile) break;
-
-      for (let ext of COMPONENT_EXTENSIONS) {
-        if (hasRelevantFile) break;
-
-        const relativeComponentPath = relativePath.replace(/\.css$/, '.' + ext);
-        const componentPath = path.join(inputPath, relativeComponentPath);
-
-        if (existsSync(componentPath)) {
-          hasRelevantFile = true;
-        }
-      }
-
-      /**
-       * Pods support
-       */
-      if (relativePath.endsWith('styles.css')) {
-        const absoluteCssPath = path.join(inputPath, relativePath);
-
-        if (cssHasAssociatedComponent(absoluteCssPath)) {
-          hasRelevantFile = true;
-        }
-      }
-    }
-
-    // rewrite css file
-    if (hasRelevantFile) {
-      let localPackagerStylePath = packageScopedPathToModulePath(relativePath);
-
-      const hash = hashFromModulePath(localPackagerStylePath);
-
-      content = rewriteCss(
-        content,
-        hash,
-        relativePath,
-        this.options.getUserOptions?.()?.layerName,
-      );
-
-      return content;
-    } else {
-      return '';
-    }
-  }
-
-  async postProcess(results, relativePath) {
-    if (process.env.CI || relativePath.endsWith('.module.css')) {
-      return results;
-    }
-
-    for (let inputPath of this.inputPaths) {
-      const templateFile = {};
-
-      eachExtension: for (let ext of TEMPLATE_EXTENSIONS) {
-        const templatePath = relativePath.replace(/\.css/, '.' + ext);
-        let templateFilePath = path.join(inputPath, templatePath);
-        let exists = existsSync(templateFilePath);
-
-        /**
-         * Pods support
-         */
-        if (ext === 'hbs' && !exists && relativePath.endsWith('styles.css')) {
-          let podsName = relativePath.replace(/styles\.css$/, 'template.hbs');
-
-          templateFilePath = path.join(inputPath, podsName);
-          exists = existsSync(templateFilePath);
-        }
-
-        if (exists) {
-          templateFile.path = templateFilePath;
-          templateFile.ext = ext;
-
-          break eachExtension;
-        }
-      }
-
-      // if the template exists we check the css for changes
-      if (templateFile.path) {
-        const cssFilePath = path.join(inputPath, relativePath);
-        const cssContents = await readFile(cssFilePath, 'utf-8');
-        const { classes, tags } = getClassesTagsFromCss(cssContents);
-        const previousClasses = this.options.previousClasses.get(relativePath);
-
-        // if we have previous classes, and they are different, build templates to compare
-        if (previousClasses && classes !== previousClasses) {
-          const localPackagerStylePath =
-            packageScopedPathToModulePath(relativePath);
-          const postfix = hashFromModulePath(localPackagerStylePath);
-          const templateRaw = await readFile(templateFile.path, 'utf-8');
-          const templateComparison = [];
-          let templateContents = templateRaw;
-
-          if (templateFile.ext === 'hbs') {
-            templateComparison.push(
-              didTemplateChange(
-                templateContents,
-                previousClasses,
-                classes,
-                tags,
-                postfix,
-              ),
-            );
-          } else {
-            // find all template tags, and extract the contents to compare
-            const results = p.parse(templateRaw, '');
-            const templates = results.map((x) => x.contents);
-
-            for (let template of templates) {
-              templateComparison.push(
-                didTemplateChange(
-                  template,
-                  previousClasses,
-                  classes,
-                  tags,
-                  postfix,
-                ),
-              );
-            }
-          }
-
-          const templateChanged = templateComparison.some((v) => v);
-
-          // if the rewrite doesn't match the original output, we want to rebuild the template
-          if (templateChanged) {
-            // this is an awful hack because we don't know how to invalidate broccoli-persistent-filter cache
-            // ideally we'd invalidate the broccoli-peristent-filter cache here
-            await writeFile(templateFile.path, templateContents + ' ');
-          }
-        }
-        // assign for next run comparison
-
-        this.options.previousClasses.set(relativePath, classes);
-      }
-    }
-
-    return results;
-  }
-}
-
-/**
- * Compares a template with the context of different sets of extraced css classes
- *
- * @param {string} contents
- * @param {Set} previousClasses
- * @param {Set} currentClasses
- * @param {Set} tags
- * @param {string} postfix
- * @returns {Boolean}
- */
-function didTemplateChange(
-  contents,
-  previousClasses,
-  currentClasses,
-  tags,
-  postfix,
-) {
-  const original = rewriteHbs(contents, previousClasses, tags, postfix);
-  const current = rewriteHbs(contents, currentClasses, tags, postfix);
-
-  return original !== current;
-}
-
-export default class ScopedCssPreprocessor {
-  constructor(options) {
-    this.owner = options.owner;
-    this.appName = options.owner.parent.pkg.name;
-    this.name = 'scoped-css-preprocessor';
-    this.previousClasses = new Map();
-  }
-
-  /**
-   * Sets the options from `setupPreprocessorRegistry`, the v1-Addon Hook
-   * @param {{ layerName?: string }} options
-   */
-  configureOptions(options) {
-    this.userOptions = options || { ['not configured']: true };
-  }
-
-  toTree(inputNode, inputPath, outputDirectory, options) {
-    const otherPreprocessors = this.preprocessors.filter((p) => p !== this);
-    const otherTrees = otherPreprocessors.map((p) => p.toTree(...arguments));
-    let mergedOtherTrees = new MergeTrees(otherTrees);
-
-    let roots = [
-      this.appName + '/components/',
-      ...(this.userOptions.additionalRoots || []).map(
-        (root) => `${this.appName}/${root}`,
-      ),
-    ];
-    let include = roots
-      .map((root) => {
-        let withSlash = root.endsWith('/') ? root : `${root}/`;
-
-        return [
-          `${withSlash}**/*.css`,
-          ...COMPONENT_EXTENSIONS.map((ext) => `${withSlash}**/*.${ext}`),
-        ];
-      })
-      .flat();
-
-    let componentsNode = new Funnel(inputNode, { include });
-
-    componentsNode = new ScopedFilter(componentsNode, {
-      inputPath,
-      getUserOptions: () => this.userOptions,
-      owner: this.owner,
-      previousClasses: this.previousClasses,
-    });
-
-    const componentStyles = new Funnel(componentsNode, {
-      include: roots.map((root) => {
-        let withSlash = root.endsWith('/') ? root : `${root}/`;
-
-        return `${withSlash}**/*.css`;
-      }),
-    });
-
-    const appCss = new Funnel(inputNode, {
-      include: [this.appName + '/styles/app.css'],
-    });
-
-    let mergedStyles = new MergeTrees(
-      [appCss, mergedOtherTrees, componentStyles],
-      { overwrite: true },
-    );
-
-    let newOutput = new Concat(mergedStyles, {
-      outputFile: options.outputPaths['app'],
-      allowNone: true,
-      sourceMapConfig: { enabled: true },
-    });
-
-    if (this.userOptions?.passthrough) {
-      let passedThrough = new Funnel(mergedStyles, {
-        include: this.userOptions.passthrough,
-        destDir: this.userOptions.passthroughDestination,
-      });
-
-      return new MergeTrees([passedThrough, newOutput], { overwrite: true });
-    } else {
-      return newOutput;
-    }
-  }
-}

package/src/lib/findCssInJs.js

@@ -1,29 +0,0 @@
-import recast from 'recast';
-
-export default function (script, removeCallExpression = false) {
-  const ast = typeof script === 'string' ? recast.parse(script) : script;
-  let css = '';
-
-  recast.visit(ast, {
-    visitCallExpression(nodePath) {
-      const node = nodePath.node;
-
-      if (
-        node.callee.name === '__GLIMMER_STYLES' &&
-        node.arguments.length === 1
-      ) {
-        css = node.arguments[0].quasis[0].value.raw;
-
-        if (removeCallExpression) {
-          nodePath.prune();
-
-          return false;
-        }
-      }
-
-      this.traverse(nodePath);
-    },
-  });
-
-  return { css, ast };
-}

package/src/lib/getClassesTagsFromCss.js

@@ -1,48 +0,0 @@
-import postcss from 'postcss';
-import parser from 'postcss-selector-parser';
-
-import isInsideGlobal from './isInsideGlobal.js';
-
-function getClassesAndTags(sel, classes, tags) {
-  const transform = (sls) => {
-    sls.walk((selector) => {
-      if (selector.type === 'class' && !isInsideGlobal(selector)) {
-        classes.add(selector.value);
-      } else if (selector.type === 'tag' && !isInsideGlobal(selector)) {
-        tags.add(selector.value);
-      }
-    });
-  };
-
-  parser(transform).processSync(sel);
-}
-
-export default function getClassesTagsFromCss(css) {
-  const classes = new Set();
-  const tags = new Set();
-
-  const ast = postcss.parse(css);
-
-  ast.walk((node) => {
-    if (node.type === 'rule') {
-      getClassesAndTags(node.selector, classes, tags);
-    }
-  });
-
-  return { classes, tags };
-}
-
-if (import.meta.vitest) {
-  const { it, expect } = import.meta.vitest;
-
-  it('should return classes and tags that are not in :global', function () {
-    const css = '.baz :global(.foo) .bar div :global(p)  { color: red; }';
-    const { classes, tags } = getClassesTagsFromCss(css);
-
-    // classes should be baz and bar
-    expect(classes.size).to.equal(2);
-    expect([...classes]).to.have.members(['baz', 'bar']);
-    expect(tags.size).to.equal(1);
-    expect([...tags]).to.have.members(['div']);
-  });
-}

package/src/lib/getImportedCssFiles.js

@@ -1,19 +0,0 @@
-export default function (css) {
-  const regex = /@import\s+["']?([^"')]+)["']?;/g;
-  const importedCssPaths = [];
-  let match;
-
-  while ((match = regex.exec(css))) {
-    const importPath = match[1];
-
-    if (!importPath.includes('http') && !importPath.startsWith('url(')) {
-      css = css.replace(match[0], '');
-      importedCssPaths.unshift(importPath);
-    }
-  }
-
-  return {
-    css,
-    importedCssPaths,
-  };
-}

package/src/lib/isInsideGlobal.js

@@ -1,8 +0,0 @@
-export default function isInsideGlobal(node, func) {
-  const parent = node.parent;
-
-  if (!parent) return false;
-  if (parent.type === 'pseudo' && parent.value === ':global') return true;
-
-  return isInsideGlobal(parent, func);
-}

package/src/lib/replaceGlimmerAst.js

@@ -1,63 +0,0 @@
-import { existsSync } from 'node:fs';
-import { readFile } from 'node:fs/promises';
-import path from 'node:path';
-
-import babelParser from '@babel/parser';
-import recast from 'recast';
-
-const parseOptions = {
-  parser: babelParser,
-};
-
-export default async function replaceGlimmerAst(script, id, replaceFunction) {
-  const ast = recast.parse(script, parseOptions);
-  const cssPath = id.replace(/(\.js)|(\.hbs)/, '.css');
-  let css;
-
-  const cssExists = existsSync(cssPath);
-
-  if (cssExists) {
-    css = await readFile(cssPath, 'utf-8');
-  }
-
-  if (!css) {
-    return script;
-  }
-
-  recast.visit(ast, {
-    visitCallExpression(nodePath) {
-      const node = nodePath.node;
-
-      if (
-        node.callee.name === 'createTemplateFactory' &&
-        node.arguments.length === 1
-      ) {
-        const blockProp = node.arguments[0].properties.find(
-          (prop) => prop.key.value === 'block',
-        );
-        const opcodes = JSON.parse(blockProp.value.value);
-        const newOpcodes = replaceFunction(opcodes, css);
-
-        blockProp.value.value = JSON.stringify(newOpcodes);
-
-        const fileName = path.basename(cssPath);
-        // if (!importPath) {
-        //   unplugin.addWatchFile(cssPath);
-        // }
-        const importCss = recast.parse(
-          `import './${fileName}';\n`,
-          parseOptions,
-        );
-        const importCssNode = importCss.program.body[0];
-
-        ast.program.body.unshift(importCssNode);
-      }
-
-      this.traverse(nodePath);
-    },
-  });
-
-  const resultScript = recast.print(ast).code;
-
-  return resultScript;
-}