ember-scoped-css 0.9.0 → 0.10.0

package/LICENSE.md

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) 2023
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/addon-main.cjs

@@ -0,0 +1,5 @@
+'use strict';
+
+const { addonV1Shim } = require('@embroider/addon-shim');
+
+module.exports = addonV1Shim(__dirname);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-scoped-css",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "",
   "keywords": [
     "ember-addon"
@@ -8,29 +8,33 @@
   "license": "ISC",
   "author": "",
   "type": "module",
+  "files": [
+    "src",
+    "addon-main.cjs"
+  ],
   "exports": {
-    ".": "./index.js",
-    "./babel-plugin-scoped-class": "./src/babel-plugin-scoped-class.js",
-    "./test-helper": "./src/scopedClass.js",
-    "./app-css-loader": {
-      "import": "./src/app-css-loader.js",
-      "require": "./dist/app-css-loader.cjs"
+    "./test-support": "./src/runtime/test-support.js",
+    "./build": "./src/build/index.js",
+    "./build/app-css-loader": {
+      "import": "./src/build/app-css-loader.js",
+      "require": "./dist/build/app-css-loader.cjs"
+    },
+    "./build/app-dependency-loader": {
+      "import": "./src/build/app-dependency-loader.js",
+      "require": "./dist/build/app-dependency-loader.cjs"
     },
-    "./app-dependency-loader": {
-      "import": "./src/app-dependency-loader.js",
-      "require": "./dist/app-dependency-loader.cjs"
+    "./build/ember-classic-support": {
+      "require": "./dist/lib/scoped-css-preprocessor.cjs"
+    },
+    "./addon-main.cjs": "./addon-main.cjs",
+    "./babel-plugin": {
+      "import": "./src/scoped-babel-plugin.js",
+      "require": "./dist/scoped-babel-plugin.cjs"
     }
   },
-  "main": "index.js",
-  "scripts": {
-    "esbuild": "esbuild src/scoped-babel-plugin.js src/app-css-loader.js src/app-dependency-loader.js src/lib/scoped-css-preprocessor.js --bundle --outdir=dist --platform=node --out-extension:.js=.cjs",
-    "lint": "eslint .",
-    "prepare": "npm run esbuild",
-    "release": "npx release-it",
-    "test": "mocha"
-  },
   "dependencies": {
     "@babel/parser": "^7.21.4",
+    "@embroider/addon-shim": "^1.0.0",
     "blueimp-md5": "^2.19.0",
     "broccoli-concat": "^4.2.5",
     "broccoli-funnel": "^3.0.8",
@@ -41,6 +45,7 @@
     "ember-cli-babel": "^7.26.11",
     "ember-source": "^4.10.0",
     "ember-template-recast": "^6.1.3",
+    "find-up": "^6.3.0",
     "glob": "^8.1.0",
     "postcss": "^8.4.21",
     "postcss-selector-parser": "^6.0.11",
@@ -49,22 +54,25 @@
     "unplugin": "^1.0.1"
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.22.5",
+    "@nullvoxpopuli/eslint-configs": "^3.1.3",
     "chai": "^4.3.7",
+    "concurrently": "^8.2.0",
+    "ember-template-lint": "^5.7.2",
     "esbuild": "^0.17.17",
     "eslint": "^8.38.0",
-    "ember-template-lint": "^5.7.2",
     "mocha": "^10.2.0",
-    "release-it": "^15.10.1",
-    "release-it-lerna-changelog": "^5.0.0",
+    "prettier": "^2.8.8",
     "sinon": "^15.0.1",
     "webpack": "^5.75.0"
   },
   "ember-addon": {
-    "main": "src/ember-addon-main.cjs",
-    "after": [
-      "ember-cli-htmlbars",
-      "ember-template-imports"
-    ]
+    "main": "addon-main.cjs",
+    "type": "addon",
+    "version": 2
+  },
+  "engines": {
+    "node": ">= 18"
   },
   "peerDependencies": {
     "ember-template-lint": "^5.7.2",
@@ -78,19 +86,14 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "release-it": {
-    "plugins": {
-      "release-it-lerna-changelog": {
-        "infile": "../CHANGELOG.md",
-        "launchEditor": true
-      }
-    },
-    "git": {
-      "tagName": "v${version}"
-    },
-    "github": {
-      "release": true,
-      "tokenRef": "GITHUB_AUTH"
-    }
+  "scripts": {
+    "build": "esbuild src/scoped-babel-plugin.js src/build/app-css-loader.js src/build/app-dependency-loader.js src/lib/scoped-css-preprocessor.js src/runtime/test-support.js --bundle --outdir=dist --platform=node --out-extension:.js=.cjs",
+    "lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"",
+    "lint:fix": "concurrently \"npm:lint:*:fix\" --names \"fix:\"",
+    "lint:js": "eslint .",
+    "lint:js:fix": "eslint . --fix",
+    "lint:prettier:fix": "prettier . -w",
+    "lint:prettier": "prettier . -c",
+    "test": "mocha"
   }
-}
+}

package/src/{app-css-livereload-loader.js → build/app-css-livereload-loader.js}

@@ -1,8 +1,9 @@
-import { createUnplugin } from 'unplugin';
-import path from 'path';
 import { readFile } from 'fs/promises';
+import path from 'path';
+import { createUnplugin } from 'unplugin';
 import { Compilation } from 'webpack';
-import generateHash from './lib/generateAbsolutePathHash.js';
+
+import generateHash from '../lib/generateAbsolutePathHash.js';
 
 export default createUnplugin(({ loaders, htmlEntrypointInfo }) => {
   return {
@@ -20,10 +21,12 @@ export default createUnplugin(({ loaders, htmlEntrypointInfo }) => {
       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
@@ -36,10 +39,13 @@ export default createUnplugin(({ loaders, htmlEntrypointInfo }) => {
 
       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));
 
@@ -76,6 +82,7 @@ export default createUnplugin(({ loaders, htmlEntrypointInfo }) => {
               if (!cssAssets.length) {
                 return;
               }
+
               // let linkAdded = false;
               const document =
                 htmlEntrypointInfo.htmlEntryPoint.dom.window.document;
@@ -88,6 +95,7 @@ export default createUnplugin(({ loaders, htmlEntrypointInfo }) => {
 
                 if (!linkExists) {
                   const link = document.createElement('link');
+
                   link.rel = 'stylesheet';
                   link.href = '/' + asset;
                   head.appendChild(link);

package/src/{app-css-loader.js → build/app-css-loader.js}

@@ -1,13 +1,14 @@
 // import { createUnplugin }  from 'unplugin';
-import { basename } from 'path';
-import fsExists from './lib/fsExists.js';
-import generateHash from './lib/generateAbsolutePathHash.js';
-import rewriteCss from './lib/rewriteCss.js';
-// import path  from 'path';
+import path from 'node:path';
+
+import fsExists from '../lib/fsExists.js';
+import generateHash from '../lib/generateAbsolutePathHash.js';
+import rewriteCss from '../lib/rewriteCss.js';
 
 export default async function (code) {
   const cssPath = this.resourcePath;
-  const cssFileName = basename(cssPath);
+  const cssFileName = path.basename(cssPath);
+
   const postfix = generateHash(cssPath);
 
   const hbsPath = cssPath.replace('.css', '.hbs');
@@ -18,6 +19,7 @@ export default async function (code) {
   ]);
 
   let rewrittenCss;
+
   if (hbsExists || (gjsExists && cssPath.startsWith(this.rootContext))) {
     rewrittenCss = rewriteCss(code, postfix, cssFileName);
   } else {

package/src/{app-dependency-loader.js → build/app-dependency-loader.js}

@@ -1,8 +1,9 @@
-import fsExists from './lib/fsExists.js';
+import fsExists from '../lib/fsExists.js';
 
 export default async function (source) {
   if (this.resourcePath.endsWith('.js')) {
     const hbsExists = await fsExists(this.resourcePath.replace(/\.js/, '.hbs'));
+
     if (hbsExists) {
       return source;
     }

package/src/{app-js-unplugin.js → build/app-js-unplugin.js}

@@ -1,8 +1,9 @@
-import { createUnplugin } from 'unplugin';
-import replaceGlimmerAst from './lib/replaceGlimmerAst.js';
 import path from 'path';
-import generateHash from './lib/generateAbsolutePathHash.js';
-import getClassesTagsFromCss from './lib/getClassesTagsFromCss.js';
+import { createUnplugin } from 'unplugin';
+
+import generateHash from '../lib/generateAbsolutePathHash.js';
+import getClassesTagsFromCss from '../lib/getClassesTagsFromCss.js';
+import replaceGlimmerAst from '../lib/replaceGlimmerAst.js';
 
 function* iterateOpcodes(opcodes) {
   for (let instruction of opcodes) {
@@ -32,6 +33,7 @@ function inflateTagName(tag) {
       return 'a';
     }
   }
+
   throw new Error('Unknown tag');
 }
 
@@ -83,6 +85,7 @@ export default createUnplugin(({ appDir }) => {
           ) {
             // 10 - open element
             let existingClassInstruction;
+
             for (
               let i = opcodes[0].indexOf(instruction);
               i <= opcodes[0].length;
@@ -91,8 +94,10 @@ export default createUnplugin(({ appDir }) => {
               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;
@@ -103,6 +108,7 @@ export default createUnplugin(({ appDir }) => {
               existingClassInstruction[2] += ' ' + postfix;
             } else {
               const classInstruction = [14, 0, postfix, undefined];
+
               insertions.push([instruction, classInstruction]);
             }
           }
@@ -111,6 +117,7 @@ export default createUnplugin(({ appDir }) => {
         // insert new instructions
         for (let [instruction, classInstruction] of insertions) {
           const index = opcodes[0].indexOf(instruction);
+
           opcodes[0].splice(index + 1, 0, classInstruction);
         }
 

package/src/{app-scopedcss-webpack.js → build/app-scopedcss-webpack.js}

@@ -1,10 +1,11 @@
 // import { RawSource }  from 'webpack-sources';
-import rewriteCss from './lib/rewriteCss.js';
 import { readFile, writeFile } from 'fs/promises';
 import path from 'path';
-import generateHash from './lib/generateAbsolutePathHash.js';
-import fsExists from './lib/fsExists.js';
-import getFiles from './lib/getFiles.js';
+
+import fsExists from '../lib/fsExists.js';
+import generateHash from '../lib/generateAbsolutePathHash.js';
+import getFiles from '../lib/getFiles.js';
+import rewriteCss from '../lib/rewriteCss.js';
 
 export default class {
   apply(compiler) {
@@ -22,11 +23,13 @@ export default class {
 
           // 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}`);
             }
 
@@ -43,6 +46,7 @@ export default class {
             ) {
               continue;
             }
+
             const fileName = path.basename(file);
             const postfix = generateHash(fileName);
             const css = await readFile(file, 'utf-8');

package/src/build/index.js

@@ -0,0 +1,11 @@
+import appCssUnplugin from './app-css-unplugin.js';
+import appJsUnplugin from './app-js-unplugin.js';
+import appScopedcssWebpack from './app-scopedcss-webpack.js';
+import scopedCssUnplugin from './scoped-css-unplugin.js';
+
+export {
+  appCssUnplugin,
+  appJsUnplugin,
+  appScopedcssWebpack,
+  scopedCssUnplugin,
+};

package/src/{scoped-css-unplugin.js → build/scoped-css-unplugin.js}

@@ -1,12 +1,13 @@
-import { createUnplugin } from 'unplugin';
 import { readFile } from 'fs/promises';
 import path from 'path';
-import getClassesTagsFromCss from './lib/getClassesTagsFromCss.js';
-import generateHash from './lib/generateAbsolutePathHash.js';
-import replaceHbsInJs from './lib/replaceHbsInJs.js';
-import rewriteHbs from './lib/rewriteHbs.js';
-import fsExists from './lib/fsExists.js';
-import rewriteCss from './lib/rewriteCss.js';
+import { createUnplugin } from 'unplugin';
+
+import fsExists from '../lib/fsExists.js';
+import generateHash from '../lib/generateAbsolutePathHash.js';
+import getClassesTagsFromCss from '../lib/getClassesTagsFromCss.js';
+import replaceHbsInJs from '../lib/replaceHbsInJs.js';
+import rewriteCss from '../lib/rewriteCss.js';
+import rewriteHbs from '../lib/rewriteHbs.js';
 
 function isJsFile(id) {
   return id.endsWith('.js') || id.endsWith('.ts');
@@ -22,6 +23,7 @@ async function transformJsFile(code, jsPath) {
 
   const cssExists = await fsExists(cssPath);
   let css;
+
   if (cssExists) {
     css = await readFile(cssPath, 'utf8');
   } else {
@@ -40,6 +42,7 @@ async function transformJsFile(code, jsPath) {
     const { classes, tags } = getClassesTagsFromCss(css);
     const postfix = generateHash(cssPath);
     const rewritten = rewriteHbs(hbs, classes, tags, postfix);
+
     return rewritten;
   });
 
@@ -62,6 +65,7 @@ async function transformCssFile(code, id, emitFile) {
 
   if (jsExists || hbsExists || gtsExists) {
     const postfix = generateHash(id);
+
     code = rewriteCss(code, postfix, path.basename(id));
   }
 
@@ -70,6 +74,7 @@ async function transformCssFile(code, id, emitFile) {
     fileName: id.replace(path.join(process.cwd(), 'src/'), ''),
     source: code,
   });
+
   return '';
 }
 
@@ -79,8 +84,10 @@ export default createUnplugin(() => {
 
     generateBundle(a, bundle) {
       let cssFiles = [];
+
       for (let asset in bundle) {
         const cssAsset = asset.replace('js', 'css');
+
         if (!asset.endsWith('js') || !bundle[cssAsset]) {
           continue;
         }

package/src/lib/findCssInJs.js

@@ -13,8 +13,10 @@ export default function (script, removeCallExpression = false) {
         node.arguments.length === 1
       ) {
         css = node.arguments[0].quasis[0].value.raw;
+
         if (removeCallExpression) {
           nodePath.prune();
+
           return false;
         }
       }

package/src/lib/fsExists.js

@@ -3,6 +3,7 @@ import { stat } from 'fs/promises';
 export default async function (path) {
   try {
     await stat(path);
+
     return true;
   } catch (e) {
     return false;

package/src/lib/generateAbsolutePathHash.js

@@ -1,7 +1,96 @@
-import generateHash from './generateRelativePathHash.js';
+import fsSync from 'node:fs';
+
+import { findUpSync } from 'find-up';
 import path from 'path';
 
-export default function (cssFileName) {
-  const relativePath = path.relative(process.cwd(), cssFileName);
-  return generateHash(relativePath);
+import generateHash from './generateRelativePathHash.js';
+
+export default function generateHashFromAbsolutePath(absolutePath) {
+  const modulePath = appPath(absolutePath);
+
+  return generateHash(modulePath);
+}
+
+/**
+ * returns the app-module path of the source file
+ *
+ * This assumes normal ember app conventions
+ *
+ * which is `<package.json#name>/path-to-file`
+ */
+function appPath(sourcePath) {
+  let workspacePath = findWorkspacePath(sourcePath);
+  let name = workspacePackageName(sourcePath);
+
+  /**
+   *  Under embroider builds, the spec-compliant version of the app
+   * has all the files under a folder which represents the package name,
+   * rather than "app".
+   */
+  let packageRelative = sourcePath.replace(workspacePath, '');
+
+  return `${name}${packageRelative}`;
+}
+
+const CACHE = new Set();
+
+/**
+ * For a given source path, if we have seen a
+ * source file within the workspace directory,
+ * find that workspace directory and return it.
+ */
+function hasSeen(sourcePath) {
+  for (let entry of CACHE) {
+    if (sourcePath.startsWith(entry)) {
+      return entry;
+    }
+  }
+
+  // we have not seen this source path yet
+  return;
+}
+
+/**
+ * Populates the "seen" workspace cache,
+ * so that we don't hit the file system too often.
+ */
+function findWorkspacePath(sourcePath) {
+  let seen = hasSeen(sourcePath);
+
+  if (seen) {
+    return seen;
+  }
+
+  const packageJsonPath = findUpSync('package.json', {
+    cwd: path.dirname(sourcePath),
+  });
+
+  const workspacePath = path.dirname(packageJsonPath);
+
+  CACHE.add(workspacePath);
+
+  return workspacePath;
+}
+
+const MANIFEST_CACHE = new Map();
+
+/**
+ * returns the package.json#name for a given sourcePath
+ */
+function workspacePackageName(sourcePath) {
+  const workspace = findWorkspacePath(sourcePath);
+
+  let existing = MANIFEST_CACHE.get(workspace);
+
+  if (existing) {
+    return existing.name;
+  }
+
+  let buffer = fsSync.readFileSync(path.join(workspace, 'package.json'));
+  let content = buffer.toString();
+  let json = JSON.parse(content);
+
+  MANIFEST_CACHE.set(workspace, json);
+
+  return json.name;
 }

package/src/lib/generateRelativePathHash.js

@@ -1,5 +1,5 @@
 import md5 from 'blueimp-md5';
 
-export default function (relativePath) {
+export default function generateRelativePathHash(relativePath) {
   return 'e' + md5(relativePath).substring(0, 8);
 }

package/src/lib/getClassesTagsFromCss.js

@@ -1,5 +1,6 @@
 import postcss from 'postcss';
 import parser from 'postcss-selector-parser';
+
 import isInsideGlobal from './isInsideGlobal.js';
 
 function getClassesAndTags(sel, classes, tags) {
@@ -21,6 +22,7 @@ export default function getClassesTagsFromCss(css) {
   const tags = new Set();
 
   const ast = postcss.parse(css);
+
   ast.walk((node) => {
     if (node.type === 'rule') {
       getClassesAndTags(node.selector, classes, tags);

package/src/lib/getFiles.js

@@ -6,6 +6,7 @@ export default function (globPath) {
       if (err) {
         reject(err);
       }
+
       resolve(files);
     });
   });

package/src/lib/getImportedCssFiles.js

@@ -5,6 +5,7 @@ export default function (css) {
 
   while ((match = regex.exec(css))) {
     const importPath = match[1];
+
     if (!importPath.includes('http') && !importPath.startsWith('url(')) {
       css = css.replace(match[0], '');
       importedCssPaths.unshift(importPath);

package/src/lib/isInsideGlobal.js

@@ -1,6 +1,8 @@
 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/renameClass.js

@@ -1,4 +1,4 @@
-export default function (className, postfix, classesInCss) {
+export default function renameClass(className, postfix, classesInCss) {
   const classes = className.split(/\s+/);
   const renamedClasses = classes
     .filter((c) => c)
@@ -10,5 +10,6 @@ export default function (className, postfix, classesInCss) {
     className.trimStart().trimEnd(),
     renamedClasses
   );
+
   return renamedWithPreservedSpaces;
 }

package/src/lib/replaceGlimmerAst.js

@@ -1,7 +1,8 @@
-import recast from 'recast';
 import babelParser from '@babel/parser';
-import path from 'path';
 import { readFile } from 'fs/promises';
+import path from 'path';
+import recast from 'recast';
+
 import fsExists from './fsExists.js';
 
 const parseOptions = {
@@ -14,6 +15,7 @@ export default async function (script, id, replaceFunction) {
   let css;
 
   const cssExists = await fsExists(cssPath);
+
   if (cssExists) {
     css = await readFile(cssPath, 'utf-8');
   }
@@ -25,6 +27,7 @@ export default async function (script, id, replaceFunction) {
   recast.visit(ast, {
     visitCallExpression(nodePath) {
       const node = nodePath.node;
+
       if (
         node.callee.name === 'createTemplateFactory' &&
         node.arguments.length === 1
@@ -34,6 +37,7 @@ export default async function (script, id, replaceFunction) {
         );
         const opcodes = JSON.parse(blockProp.value.value);
         const newOpcodes = replaceFunction(opcodes, css);
+
         blockProp.value.value = JSON.stringify(newOpcodes);
 
         const fileName = path.basename(cssPath);
@@ -45,12 +49,15 @@ export default async function (script, id, replaceFunction) {
           parseOptions
         );
         const importCssNode = importCss.program.body[0];
+
         ast.program.body.unshift(importCssNode);
       }
 
       this.traverse(nodePath);
     },
   });
+
   const resultScript = recast.print(ast).code;
+
   return resultScript;
 }