ember-scoped-css 0.0.0 → 0.1.0

package/index.js

@@ -1,5 +1,23 @@
-'use strict';
+const rollupEmberTemplateImportsPlugin = require('./src/rollup-ember-template-imports-plugin');
+const addonJsUnplugin = require('./src/addon-js-unplugin');
+const addonCssRollup = require('./src/addon-css-rollup');
+const addonHbsRollup = require('./src/addon-hbs-rollup');
+const appJsUnplugin = require('./src/app-js-unplugin');
+const appCssUnplugin = require('./src/app-css-unplugin');
+const appCssLoader = require('./src/app-css-loader');
+const appDependencyLoader = require('./src/app-dependency-loader');
+const appScopedcssWebpack = require('./src/app-scopedcss-webpack');
+const addonRewritecssRollup = require('./src/addon-rewritecss-rollup');
 
 module.exports = {
-  name: require('./package').name,
+  rollupEmberTemplateImportsPlugin,
+  addonJsUnplugin,
+  addonCssRollup,
+  addonHbsRollup,
+  appJsUnplugin,
+  appCssUnplugin,
+  appCssLoader,
+  appDependencyLoader,
+  appScopedcssWebpack,
+  addonRewritecssRollup,
 };

package/package.json

@@ -1,80 +1,33 @@
 {
   "name": "ember-scoped-css",
-  "version": "0.0.0",
-  "description": "The default blueprint for ember-cli addons.",
-  "keywords": [
-    "ember-addon"
-  ],
-  "repository": "",
-  "license": "MIT",
+  "version": "0.1.0",
+  "description": "",
+  "type": "commonjs",
+  "main": "index.js",
+  "keywords": [],
   "author": "",
-  "directories": {
-    "doc": "doc",
-    "test": "tests"
-  },
-  "scripts": {
-    "build": "ember build --environment=production",
-    "lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"",
-    "lint:fix": "concurrently \"npm:lint:*:fix\" --names \"fix:\"",
-    "lint:hbs": "ember-template-lint .",
-    "lint:hbs:fix": "ember-template-lint . --fix",
-    "lint:js": "eslint . --cache",
-    "lint:js:fix": "eslint . --fix",
-    "start": "ember serve",
-    "test": "concurrently \"npm:lint\" \"npm:test:*\" --names \"lint,test:\"",
-    "test:ember": "ember test",
-    "test:ember-compatibility": "ember try:each"
-  },
+  "license": "ISC",
   "dependencies": {
-    "ember-cli-babel": "^7.26.11",
-    "ember-cli-htmlbars": "^6.2.0"
+    "blueimp-md5": "^2.19.0",
+    "cheerio": "1.0.0-rc.12",
+    "ember-source": "^4.10.0",
+    "ember-template-imports": "github:candunaj/ember-template-imports#embed-styles-in-gjs",
+    "ember-template-recast": "^6.1.3",
+    "glob": "^8.1.0",
+    "postcss": "^8.4.21",
+    "postcss-selector-parser": "^6.0.11",
+    "recast": "^0.22.0",
+    "rollup": "^2.67.0",
+    "unplugin": "^1.0.1"
   },
   "devDependencies": {
-    "@ember/optional-features": "^2.0.0",
-    "@ember/string": "^3.0.1",
-    "@ember/test-helpers": "^2.9.3",
-    "@embroider/test-setup": "^2.0.2",
-    "@glimmer/component": "^1.1.2",
-    "@glimmer/tracking": "^1.1.2",
-    "babel-eslint": "^10.1.0",
-    "broccoli-asset-rev": "^3.0.0",
-    "concurrently": "^7.6.0",
-    "ember-auto-import": "^2.5.0",
-    "ember-cli": "~4.10.0",
-    "ember-cli-dependency-checker": "^3.3.1",
-    "ember-cli-inject-live-reload": "^2.1.0",
-    "ember-cli-sri": "^2.1.1",
-    "ember-cli-terser": "^4.0.2",
-    "ember-load-initializers": "^2.1.2",
-    "ember-page-title": "^7.0.0",
-    "ember-qunit": "^6.1.1",
-    "ember-resolver": "^10.0.0",
-    "ember-source": "~4.10.0",
-    "ember-source-channel-url": "^3.0.0",
-    "ember-template-lint": "^5.3.1",
-    "ember-try": "^2.0.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-ember": "^11.4.3",
-    "eslint-plugin-n": "^15.6.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-qunit": "^7.3.4",
-    "loader.js": "^4.7.0",
-    "prettier": "^2.8.3",
-    "qunit": "^2.19.3",
-    "qunit-dom": "^2.0.0",
+    "chai": "^4.3.7",
+    "mocha": "^10.2.0",
+    "sinon": "^15.0.1",
     "webpack": "^5.75.0"
   },
-  "peerDependencies": {
-    "ember-source": "^3.28.0 || ^4.0.0"
-  },
-  "engines": {
-    "node": "14.* || 16.* || >= 18"
-  },
-  "ember": {
-    "edition": "octane"
-  },
-  "ember-addon": {
-    "configPath": "tests/dummy/config"
+  "scripts": {
+    "test": "mocha",
+    "lint": ""
   }
-}
+}

package/src/addon-css-rollup.js

@@ -0,0 +1,92 @@
+const path = require('path');
+const getPostfix = require('./getPostfix');
+const rewriteCss = require('./rewriteCss');
+const { readFile } = require('fs').promises;
+const fsExists = require('./fsExists');
+const findCssInJs = require('./findCssInJs');
+const getImportedCssFiles = require('./getImportedCssFiles');
+const recast = require('recast');
+
+module.exports = function () {
+  return {
+    name: 'addon-css-rollup',
+
+    async resolveId(source, importer, options) {
+      // catch emited css files
+      if (source.endsWith('.css')) {
+        const resolution = await this.resolve(source, importer, {
+          ...options,
+          skipSelf: true,
+        });
+
+        if (resolution) {
+          return resolution;
+        } else {
+          const gjsCss = this.getModuleInfo(importer)?.meta?.gjsCss;
+          if (gjsCss) {
+            return {
+              external: false,
+              id: importer.replace(/\.js$/, '.css'),
+              meta: {
+                importer,
+                gjsCss,
+              },
+            };
+          }
+        }
+      }
+      return null;
+    },
+
+    async load(id) {
+      if (id.endsWith('.css')) {
+        const gjsCss = this.getModuleInfo(id).meta.gjsCss;
+        let css = gjsCss;
+        if (!css) {
+          css = await readFile(id, 'utf-8');
+        }
+
+        return css;
+      }
+    },
+
+    async transform(code, id) {
+      if (id.endsWith('.css')) {
+        this.emitFile({
+          type: 'asset',
+          fileName: id.replace(path.join(process.cwd(), 'src/'), ''),
+          source: code,
+        });
+        return '';
+      }
+    },
+
+    generateBundle(a, bundle) {
+      let cssFiles = [];
+      for (let asset in bundle) {
+        const cssAsset = asset.replace('js', 'css');
+        if (!asset.endsWith('js') || !bundle[cssAsset]) {
+          continue;
+        }
+
+        if (process.env.environment === 'development') {
+          cssFiles.push(bundle[cssAsset].source);
+          delete bundle[cssAsset];
+        } else {
+          // add import to js files
+          bundle[asset].code =
+            `import './${path.basename(asset.replace('.js', '.css'))}';\n` +
+            bundle[asset].code;
+        }
+      }
+
+      if (process.env.environment === 'development') {
+        this.emitFile({
+          type: 'asset',
+          fileName: 'scoped.css',
+          source: cssFiles.join('\n'),
+        });
+      }
+    },
+  };
+};

package/src/addon-hbs-rollup.js

@@ -0,0 +1,42 @@
+const { readFile } = require('fs').promises;
+const getPostfix = require('./getPostfix');
+const replaceHbsInJs = require('./replaceHbsInJs');
+const getClassesTagsFromCss = require('./getClassesTagsFromCss');
+const rewriteHbs = require('./rewriteHbs');
+const fsExists = require('./fsExists');
+
+module.exports = function rollupCssColocation(options = {}) {
+  return {
+    name: 'addon-hbs-rollup',
+
+    async transform(code, id) {
+      if (id.endsWith('.hbs.js')) {
+        const hbsPath = id.replace('.js', '');
+        const cssPath = hbsPath.replace('.hbs', '.css');
+
+        const cssExists = await fsExists(cssPath);
+        if (cssExists) {
+          // read the css file
+          // TODO: get css from loader, because there are classes in imported css files; css can be stored in meta!!!!!
+          // const resolution = await this.resolve(importPath, id);
+          //   resolution.meta.internalImport = true;
+          //   const importedCss = await this.load(resolution);
+          const css = await readFile(cssPath, 'utf-8');
+          const { classes, tags } = getClassesTagsFromCss(css);
+
+          // generate unique postfix
+          const postfix = getPostfix(cssPath);
+
+          // rewrite the template
+          const rewrittenHbsJs = replaceHbsInJs(code, (hbs) => {
+            // add dependency to the css file
+            this.addWatchFile(cssPath);
+            return rewriteHbs(hbs, classes, tags, postfix);
+          });
+
+          return rewrittenHbsJs;
+        }
+      }
+    },
+  };
+};

package/src/addon-js-unplugin.js

@@ -0,0 +1,55 @@
+const { createUnplugin } = require('unplugin');
+const { readFile } = require('fs').promises;
+const path = require('path');
+const getClassesTagsFromCss = require('./getClassesTagsFromCss');
+const getPostfix = require('./getPostfix');
+const replaceHbsInJs = require('./replaceHbsInJs');
+const rewriteHbs = require('./rewriteHbs');
+const fsExists = require('./fsExists');
+const findCssInJs = require('./findCssInJs');
+const recast = require('recast');
+
+module.exports = createUnplugin((options) => {
+  return {
+    name: 'addon-js-unplugin',
+
+    transformInclude(id) {
+      return id.endsWith('.js');
+    },
+
+    async transform(code, jsPath) {
+      const cssPath = jsPath.replace(/(\.hbs)?\.js$/, '.css');
+      const cssFileName = path.basename(cssPath);
+
+      const cssExists = await fsExists(cssPath);
+      let css;
+      if (cssExists) {
+        css = await readFile(cssPath, 'utf8');
+      } else {
+        if (code.includes('__GLIMMER_STYLES')) {
+          const result = findCssInJs(code, true);
+          css = result.css;
+          code = recast.print(result.ast).code;
+          this.getModuleInfo(jsPath).meta.gjsCss = result.css;
+        }
+      }
+
+      if (!css) {
+        return code;
+      }
+
+      // add css import for js and gjs files
+      code = `import './${cssFileName}';\n\n${code}`;
+
+      // rewrite hbs in js in case it is gjs file (for gjs files hbs is already in js file)
+      // for js components "@embroider/addon-dev/template-colocation-plugin", will add hbs to js later. So there is hbs plugin to rewrite hbs
+
+      return replaceHbsInJs(code, (hbs) => {
+        const { classes, tags } = getClassesTagsFromCss(css);
+        const postfix = getPostfix(cssPath);
+        const rewritten = rewriteHbs(hbs, classes, tags, postfix);
+        return rewritten;
+      });
+    },
+  };
+});

package/src/addon-rewritecss-rollup.js

@@ -0,0 +1,29 @@
+const path = require('path');
+const getPostfix = require('./getPostfix');
+const rewriteCss = require('./rewriteCss');
+const fsExists = require('./fsExists');
+
+module.exports = function () {
+  return {
+    name: 'addon-rewritecss-rollup',
+
+    async transform(code, id) {
+      if (!id.endsWith('.css')) {
+        return;
+      }
+      const postfix = getPostfix(id);
+      const jsPath = id.replace(/\.css$/, '.gjs');
+      const hbsPath = id.replace(/\.css$/, '.hbs');
+
+      const [jsExists, hbsExists] = await Promise.all([
+        fsExists(jsPath),
+        fsExists(hbsPath),
+      ]);
+
+      if (jsExists || hbsExists) {
+        const rewritten = rewriteCss(code, postfix, path.basename(id));
+        return rewritten;
+      }
+    },
+  };
+};

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

@@ -0,0 +1,111 @@
+const { createUnplugin } = require('unplugin');
+const path = require('path');
+const { readFile, writeFile } = require('fs').promises;
+const { Compilation } = require('webpack');
+const getPostfix = require('./getPostfix');
+const cheerio = require('cheerio');
+
+module.exports = createUnplugin(({ appDir, 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 = getPostfix(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/app-css-loader.js

@@ -0,0 +1,28 @@
+// const { createUnplugin } = require('unplugin');
+const { basename, join } = require('path');
+const fsExists = require('./fsExists');
+const getPostfix = require('./getPostfix');
+const rewriteCss = require('./rewriteCss');
+// const path = require('path');
+
+module.exports = async function (code) {
+  const cssPath = this.resourcePath;
+  const cssFileName = basename(cssPath);
+  const postfix = getPostfix(cssPath);
+
+  const hbsPath = cssPath.replace('.css', '.hbs');
+  const gjsPath = cssPath.replace('.css', '.js');
+  const [hbsExists, gjsExists] = await Promise.all([
+    fsExists(hbsPath),
+    fsExists(gjsPath),
+  ]);
+
+  let rewrittenCss;
+  if (hbsExists || gjsExists && cssPath.startsWith(this.rootContext)) {
+    rewrittenCss = rewriteCss(code, postfix, cssFileName);
+  } else {
+    rewrittenCss = code;
+  }
+
+  return rewrittenCss;
+};

package/src/app-css-unplugin.js

@@ -0,0 +1,35 @@
+const { createUnplugin } = require('unplugin');
+const replaceGlimmerAst = require('./replaceGlimmerAst');
+const path = require('path');
+const getPostfix = require('./getPostfix');
+const getClassesTagsFromCss = require('./getClassesTagsFromCss');
+const { readFile } = require('fs').promises;
+const fsExists = require('./fsExists');
+
+
+module.exports = createUnplugin(() => {
+  return {
+    name: 'app-css-unplugin',
+
+    // loadInclude(id){
+    //   if(id.endsWith('.css')){
+    //     return true;
+    //   }
+    // },
+
+    // load(id){
+    //   // this.addWatchFile(id);
+    //   return 'console.log(' + JSON.stringify(id) + ');';
+    // },
+
+    // transformInclude(id) {
+    //   if(id.endsWith('.css')){
+    //     return true;
+    //   }
+    // },
+
+    // async transform(code, id) {
+    //   return code;
+    // },
+  };
+});

package/src/app-dependency-loader.js

@@ -0,0 +1,19 @@
+const fsExists = require('./fsExists');
+
+module.exports = async function (source) {
+  if (this.resourcePath.endsWith('.js')) {
+    const hbsExists = await fsExists(this.resourcePath.replace(/\.js/, '.hbs'));
+    if (hbsExists) {
+      return source;
+    }
+  }
+
+  const cssPath = this.resourcePath.replace(/(\.js)|(\.hbs)/, '.css');
+  const cssExists = await fsExists(cssPath);
+
+  if (cssExists) {
+    this.addDependency(cssPath);
+  }
+
+  return source;
+};

package/src/app-js-unplugin.js

@@ -0,0 +1,130 @@
+const { createUnplugin } = require('unplugin');
+const replaceGlimmerAst = require('./replaceGlimmerAst');
+const path = require('path');
+const getPostfix = require('./getPostfix');
+const getClassesTagsFromCss = require('./getClassesTagsFromCss');
+const { readFile } = require('fs').promises;
+const fsExists = require('./fsExists');
+
+function* iterateOpcodes(opcodes) {
+  for (let instruction of opcodes) {
+    if (!Array.isArray(instruction)) {
+      continue;
+    }
+
+    yield instruction;
+
+    for (let subInstruction of iterateOpcodes(instruction)) {
+      yield subInstruction;
+    }
+  }
+}
+
+function inflateTagName(tag) {
+  if (typeof tag === 'string') {
+    return tag;
+  } else {
+    if (tag === 0) {
+      return 'div';
+    } else if (tag === 1) {
+      return 'span';
+    } else if (tag === 2) {
+      return 'p';
+    } else if (tag === 3) {
+      return 'a';
+    }
+  }
+  throw new Error('Unknown tag');
+}
+
+module.exports = createUnplugin(({ appDir }) => {
+  return {
+    name: 'app-js-unplugin',
+
+    transformInclude(id) {
+      return (
+        id.includes(path.basename(appDir)) &&
+        (id.endsWith('.js') || id.endsWith('.hbs'))
+      );
+    },
+
+    async transform(code, id) {
+      const cssPath = id.replace(/(\.js)|(\.hbs)/, '.css');
+      const cssFileName = path.basename(cssPath);
+      const postfix = getPostfix(cssPath);
+
+      return await replaceGlimmerAst(code, id, (opcodes, css) => {
+        const { classes, tags } = getClassesTagsFromCss(css);
+        const a = code;
+        // this.addWatchFile(cssPath);
+        const tmp = this;
+        const insertions = [];
+
+        for (let instruction of iterateOpcodes(opcodes[0])) {
+          // replace classes
+          if (
+            instruction[0] === 14 &&
+            instruction[1] === 0 &&
+            instruction[2] &&
+            instruction[2].split(' ').find((i) => classes.has(i.trim()))
+          ) {
+            // 14 - css attribute, 0 - class
+            instruction[2] = instruction[2]
+              .split(' ')
+              .map((className) => {
+                if (className.trim() && classes.has(className.trim())) {
+                  return className.trim() + '_' + postfix;
+                } else {
+                  return className;
+                }
+              })
+              .join(' ');
+          }
+
+          // add postfix to tags
+          if (
+            instruction[0] === 10 &&
+            tags.has(inflateTagName(instruction[1]))
+          ) {
+            // 10 - open element
+            let existingClassInstruction;
+            for (
+              let i = opcodes[0].indexOf(instruction);
+              i <= opcodes[0].length;
+              i++
+            ) {
+              if (opcodes[0][i][0] === 14 && opcodes[0][i][1] === 0) {
+                // 14 - css attribute, 0 - class
+                existingClassInstruction = opcodes[0][i];
+                break;
+              }
+              if (opcodes[0][i][0] === 12) {
+                // 12 - flush element
+                break;
+              }
+            }
+
+            if (existingClassInstruction) {
+              existingClassInstruction[2] += ' ' + postfix;
+            } else {
+              const classInstruction = [14, 0, postfix, undefined];
+              insertions.push([instruction, classInstruction]);
+            }
+          }
+        }
+
+        // insert new instructions
+        for (let [instruction, classInstruction] of insertions) {
+          const index = opcodes[0].indexOf(instruction);
+          opcodes[0].splice(index + 1, 0, classInstruction);
+        }
+
+        // rewrite opcodes
+        // const dbg = new WireFormatDebugger(opcodes);
+        // const wfd = dbg.format(opcodes);
+
+        return opcodes;
+      });
+    },
+  };
+});

package/src/app-scopedcss-webpack.js

@@ -0,0 +1,68 @@
+// const { RawSource } = require('webpack-sources');
+const rewriteCss = require('./rewriteCss');
+const { readFile, writeFile } = require('fs').promises;
+const path = require('path');
+const getPostfix = require('./getPostfix');
+const fsExists = require('./fsExists');
+const getFiles = require('./getFiles');
+
+module.exports = class {
+  apply(compiler) {
+    if (process.env.EMBER_ENV === 'production') {
+      return;
+    }
+
+    compiler.hooks.emit.tapAsync(
+      'scoped-webpack-plugin',
+      async (compilation, callback) => {
+        try {
+          const cssFiles = await getFiles(
+            path.resolve(compiler.context, '**/*.css')
+          );
+
+          // Rewrite the CSS files
+          const rewrittenFiles = [];
+          // const rewritenFiles = cssFiles.map((file) => {
+          for (let file of cssFiles) {
+            if (file.endsWith(`/${path.basename(compiler.context)}.css`)) {
+              // import scoped.css into app.css
+              let appCss = await readFile(file, 'utf-8');
+              await writeFile(file, `@import "scoped.css";\n${appCss}`);
+            }
+
+            if (
+              [
+                path.basename(compiler.context) + '.css',
+                'test-support.css',
+              ].some((f) => file.endsWith(f)) ||
+              file.includes('/vendor/') ||
+              !(
+                (await fsExists(file.replace('.css', '.js'))) ||
+                (await fsExists(file.replace('.css', '.hbs')))
+              )
+            ) {
+              continue;
+            }
+            const fileName = path.basename(file);
+            const postfix = getPostfix(fileName);
+            const css = await readFile(file, 'utf-8');
+            const rewrittenCss = rewriteCss(css, postfix, fileName);
+
+            rewrittenFiles.push(rewrittenCss);
+          }
+
+          // Concatenate the rewritten CSS files
+          let concatenatedCSS = rewrittenFiles.join('\n\n');
+
+          // Store the concatenated CSS in the assets/scoped-components.css
+          compilation.assets['assets/scoped.css'] = {
+            source: () => concatenatedCSS,
+            size: () => concatenatedCSS.length,
+          };
+        } finally {
+          callback();
+        }
+      }
+    );
+  }
+};

package/src/findCssInJs.js

@@ -0,0 +1,27 @@
+const recast = require('recast');
+
+module.exports = 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/fsExists.js

@@ -0,0 +1,10 @@
+const { stat } = require('fs').promises;
+
+module.exports = async function (path) {
+  try {
+    await stat(path);
+    return true;
+  } catch (e) {
+    return false;
+  }
+};

package/src/getClassesTagsFromCss.js

@@ -0,0 +1,31 @@
+const postcss = require('postcss');
+const parser = require('postcss-selector-parser');
+const isInsideGlobal = require('./isInsideGlobal');
+
+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);
+}
+
+module.exports = 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 };
+};

package/src/getFiles.js

@@ -0,0 +1,12 @@
+const glob = require('glob');
+
+module.exports = function (globPath) {
+  return new Promise((resolve, reject) => {
+    glob(globPath, (err, files) => {
+      if (err) {
+        reject(err);
+      }
+      resolve(files);
+    });
+  });
+};

package/src/getImportedCssFiles.js

@@ -0,0 +1,18 @@
+module.exports = 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/getPostfix.js

@@ -0,0 +1,9 @@
+const md5 = require('blueimp-md5');
+
+module.exports = function (cssFileName) {
+  // if (cssFileName.includes('/')) {
+  //   throw new Error('cssFileName should not contain /');
+  // }
+
+  return 'e' + md5(cssFileName).substring(0, 8);
+};

package/src/isInsideGlobal.js

@@ -0,0 +1,6 @@
+module.exports = 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/replaceGlimmerAst.js

@@ -0,0 +1,56 @@
+const recast = require('recast');
+const babelParser = require('recast/parsers/babel');
+const path = require('path');
+const { readFile } = require('fs').promises;
+const fsExists = require('./fsExists');
+
+const parseOptions = {
+  parser: babelParser,
+};
+
+module.exports = async function (script, id, replaceFunction) {
+  const ast = recast.parse(script, parseOptions);
+  const cssPath = id.replace(/(\.js)|(\.hbs)/, '.css');
+  let css;
+
+  const cssExists = await fsExists(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;
+};

package/src/replaceHbsInJs.js

@@ -0,0 +1,32 @@
+const recast = require('recast');
+const babelParser = require('recast/parsers/babel');
+
+const parseOptions = {
+  parser: babelParser,
+};
+
+module.exports = function (script, replaceFunction) {
+  const ast = recast.parse(script, parseOptions);
+  recast.visit(ast, {
+    visitCallExpression(path) {
+      const node = path.node;
+      if (
+        node.callee.name === '__GLIMMER_TEMPLATE' ||
+        node.callee.name === 'precompileTemplate'
+      ) {
+        if (node.arguments[0].type === 'TemplateLiteral') {
+          node.arguments[0].quasis[0].value.raw = replaceFunction(
+            node.arguments[0].quasis[0].value.raw
+          );
+        } else if (
+          node.arguments[0].type === 'StringLiteral' ||
+          node.arguments[0].type === 'Literal'
+        ) {
+          node.arguments[0].value = replaceFunction(node.arguments[0].value);
+        }
+      }
+      this.traverse(path);
+    },
+  });
+  return recast.print(ast).code;
+};

package/src/rewriteCss.js

@@ -0,0 +1,40 @@
+const parser = require('postcss-selector-parser');
+const postcss = require('postcss');
+const isInsideGlobal = require('./isInsideGlobal');
+
+function rewriteSelector(sel, postfix) {
+  const transform = (selectors) => {
+    selectors.walk((selector) => {
+      if (selector.type === 'class' && !isInsideGlobal(selector)) {
+        selector.value += '_' + postfix;
+      } else if (selector.type === 'tag' && !isInsideGlobal(selector)) {
+        selector.replaceWith(
+          parser.tag({ value: selector.value }),
+          parser.className({ value: postfix })
+        );
+      }
+    });
+
+    // remove :global
+    selectors.walk((selector) => {
+      if (selector.type === 'pseudo' && selector.value === ':global') {
+        selector.replaceWith(...selector.nodes);
+      }
+    });
+  };
+  const transformed = parser(transform).processSync(sel);
+  return transformed;
+}
+
+module.exports = function rewriteCss(css, postfix, fileName) {
+  const ast = postcss.parse(css);
+  ast.walk((node) => {
+    if (node.type === 'rule') {
+      node.selector = rewriteSelector(node.selector, postfix);
+    }
+  });
+
+  const rewrittenCss = ast.toString();
+  return `/* ${fileName} */\n@layer components {\n\n` + rewrittenCss + '\n}\n';
+  // return `/* ${fileName} */\n ${rewrittenCss}`;
+};

package/src/rewriteHbs.js

@@ -0,0 +1,39 @@
+const recast = require('ember-template-recast');
+
+module.exports = function rewriteHbs(hbs, classes, tags, postfix) {
+  let ast = recast.parse(hbs);
+
+  recast.traverse(ast, {
+    AttrNode(node) {
+      if (node.name === 'class' && node.value.chars) {
+        const newClasses = node.value.chars.split(' ').map((c) => {
+          if (c.trim() && classes.has(c.trim())) {
+            return c.trim() + '_' + postfix;
+          } else {
+            return c;
+          }
+        });
+
+        node.value.chars = newClasses.join(' ');
+      }
+    },
+
+    ElementNode(node) {
+      if (tags.has(node.tag)) {
+        // check if class attribute already exists
+        const classAttr = node.attributes.find((attr) => attr.name === 'class');
+        if (classAttr) {
+          classAttr.value.chars += ' ' + postfix;
+        } else {
+          // push class attribute
+          node.attributes.push(
+            recast.builders.attr('class', recast.builders.text(postfix))
+          );
+        }
+      }
+    },
+  });
+
+  let result = recast.print(ast);
+  return result;
+};

package/src/rollup-ember-template-imports-plugin.js

@@ -0,0 +1,77 @@
+const fs = require('fs/promises');
+const path = require('path');
+const {
+  preprocessEmbeddedTemplates,
+} = require('ember-template-imports/lib/preprocess-embedded-templates.js');
+const {
+  TEMPLATE_TAG_NAME,
+  TEMPLATE_TAG_PLACEHOLDER,
+} = require('ember-template-imports/lib/util.js');
+
+module.exports = function firstClassComponentTemplates() {
+  return {
+    name: 'preprocess-fccts',
+    async resolveId(source, importer, options) {
+      if (source.endsWith('.hbs')) return;
+
+      for (let ext of ['', '.gjs', '.gts']) {
+        let result = await this.resolve(source + ext, importer, {
+          ...options,
+          skipSelf: true,
+        });
+
+        if (result?.external) {
+          return;
+        }
+
+        if (FCCT_EXTENSION.test(result?.id)) {
+          return resolutionFor(result.id);
+        }
+      }
+    },
+
+    async load(id) {
+      let originalId = this.getModuleInfo(id)?.meta?.fccts?.originalId ?? id;
+
+      if (originalId !== id) {
+        this.addWatchFile(originalId);
+      }
+
+      if (FCCT_EXTENSION.test(originalId)) {
+        return await preprocessTemplates(originalId);
+      }
+    },
+  };
+};
+
+const FCCT_EXTENSION = /\.g([jt]s)$/;
+
+function resolutionFor(originalId) {
+  return {
+    id: originalId.replace(FCCT_EXTENSION, '.$1'),
+    meta: {
+      fccts: { originalId },
+    },
+  };
+}
+
+async function preprocessTemplates(id) {
+  let ember = (await import('ember-source')).default;
+  let contents = await fs.readFile(id, 'utf-8');
+
+  // This is basically taken directly from `ember-template-imports`
+  let result = preprocessEmbeddedTemplates(contents, {
+    relativePath: path.relative('.', id),
+
+    getTemplateLocalsRequirePath: ember.absolutePaths.templateCompiler,
+    getTemplateLocalsExportPath: '_GlimmerSyntax.getTemplateLocals',
+
+    templateTag: TEMPLATE_TAG_NAME,
+    templateTagReplacement: TEMPLATE_TAG_PLACEHOLDER,
+
+    includeSourceMaps: true,
+    includeTemplateTokens: true,
+  });
+
+  return result.output;
+}

package/test/getClassesTagsFromCss.js

@@ -0,0 +1,15 @@
+const expect = require('chai').expect;
+const getClassesTagsFromCss = require('../src/getClassesTagsFromCss');
+
+describe('rewriteCss', function () {
+  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/test/getPostfix.js

@@ -0,0 +1,23 @@
+const expect = require('chai').expect;
+const { stub } = require('sinon');
+const getPostfix = require('../src/getPostfix');
+
+describe('getPostfix', function () {
+  it('should return a string', function () {
+    const postfix = getPostfix('foo.css');
+
+    expect(postfix).to.be.a('string');
+  });
+
+  it('should return a string starting with "e"', function () {
+    const postfix = getPostfix('foo.css');
+
+    expect(postfix).to.match(/^e/);
+  });
+
+  it('should return a string of length 9', function () {
+    const postfix = getPostfix('foo.css');
+
+    expect(postfix).to.have.lengthOf(9);
+  });
+});

package/test/rewriteCss.js

@@ -0,0 +1,27 @@
+const expect = require('chai').expect;
+const { stub } = require('sinon');
+const rewriteCss = require('../src/rewriteCss');
+
+describe('rewriteCss', function () {
+  it('should rewrite css', function () {
+    const css = '.foo { color: red; }';
+    const postfix = 'postfix';
+    const fileName = 'foo.css';
+    const rewritten = rewriteCss(css, postfix, fileName);
+
+    expect(rewritten).to.equal(
+      `/* foo.css */\n@layer components {\n\n.foo_postfix { color: red; }\n}\n`
+    );
+  });
+
+  it('shouldnt rewrite global', function () {
+    const css = '.baz :global(.foo p) .bar { color: red; }';
+    const postfix = 'postfix';
+    const fileName = 'foo.css';
+    const rewritten = rewriteCss(css, postfix, fileName);
+
+    expect(rewritten).to.equal(
+      `/* foo.css */\n@layer components {\n\n.baz_postfix .foo p .bar_postfix { color: red; }\n}\n`
+    );
+  });
+});

package/README.md

@@ -1,32 +0,0 @@
-# ember-scoped-css
-
-[Short description of the addon.]
-
-
-## Compatibility
-
-* Ember.js v3.28 or above
-* Ember CLI v3.28 or above
-* Node.js v14 or above
-
-
-## Installation
-
-```
-ember install ember-scoped-css
-```
-
-
-## Usage
-
-[Longer description of how to use the addon in apps.]
-
-
-## Contributing
-
-See the [Contributing](CONTRIBUTING.md) guide for details.
-
-
-## License
-
-This project is licensed under the [MIT License](LICENSE.md).