ember-scoped-css 0.5.0 → 0.7.0

package/dist/app-css-loader.cjs

@@ -9608,7 +9608,7 @@ __export(app_css_loader_exports, {
 module.exports = __toCommonJS(app_css_loader_exports);
 var import_path2 = require("path");
 
-// src/fsExists.js
+// src/lib/fsExists.js
 var import_promises = require("fs/promises");
 async function fsExists_default(path2) {
   try {
@@ -9619,20 +9619,20 @@ async function fsExists_default(path2) {
   }
 }
 
-// src/generateHash.js
+// src/lib/generateRelativePathHash.js
 var import_blueimp_md5 = __toESM(require_md5(), 1);
-function generateHash_default(relativePath) {
+function generateRelativePathHash_default(relativePath) {
   return "e" + (0, import_blueimp_md5.default)(relativePath).substring(0, 8);
 }
 
-// src/getPostfix.js
+// src/lib/generateAbsolutePathHash.js
 var import_path = __toESM(require("path"), 1);
-function getPostfix_default(cssFileName) {
+function generateAbsolutePathHash_default(cssFileName) {
   const relativePath = import_path.default.relative(process.cwd(), cssFileName);
-  return generateHash_default(relativePath);
+  return generateRelativePathHash_default(relativePath);
 }
 
-// src/rewriteCss.js
+// src/lib/rewriteCss.js
 var import_postcss_selector_parser = __toESM(require_dist(), 1);
 
 // ../node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/postcss.mjs
@@ -9663,7 +9663,7 @@ var Rule = import_postcss.default.Rule;
 var Root = import_postcss.default.Root;
 var Node = import_postcss.default.Node;
 
-// src/isInsideGlobal.js
+// src/lib/isInsideGlobal.js
 function isInsideGlobal(node, func) {
   const parent = node.parent;
   if (!parent)
@@ -9673,7 +9673,7 @@ function isInsideGlobal(node, func) {
   return isInsideGlobal(parent, func);
 }
 
-// src/rewriteCss.js
+// src/lib/rewriteCss.js
 function rewriteSelector(sel, postfix) {
   const transform = (selectors) => {
     selectors.walk((selector) => {
@@ -9721,7 +9721,7 @@ function rewriteCss(css, postfix, fileName) {
 async function app_css_loader_default(code) {
   const cssPath = this.resourcePath;
   const cssFileName = (0, import_path2.basename)(cssPath);
-  const postfix = getPostfix_default(cssPath);
+  const postfix = generateAbsolutePathHash_default(cssPath);
   const hbsPath = cssPath.replace(".css", ".hbs");
   const gjsPath = cssPath.replace(".css", ".js");
   const [hbsExists, gjsExists] = await Promise.all([

package/dist/app-dependency-loader.cjs

@@ -23,7 +23,7 @@ __export(app_dependency_loader_exports, {
 });
 module.exports = __toCommonJS(app_dependency_loader_exports);
 
-// src/fsExists.js
+// src/lib/fsExists.js
 var import_promises = require("fs/promises");
 async function fsExists_default(path) {
   try {

package/index.js

@@ -1,17 +1,11 @@
-import addonJsUnplugin from './src/addon-js-unplugin.js';
-import addonCssRollup from './src/addon-css-rollup.js';
-import addonHbsRollup from './src/addon-hbs-rollup.js';
 import appJsUnplugin from './src/app-js-unplugin.js';
 import appCssUnplugin from './src/app-css-unplugin.js';
 import appScopedcssWebpack from './src/app-scopedcss-webpack.js';
-import addonRewritecssRollup from './src/addon-rewritecss-rollup.js';
+import scopedCssUnplugin from './src/scoped-css-unplugin.js';
 
 export {
-  addonJsUnplugin,
-  addonCssRollup,
-  addonHbsRollup,
+  scopedCssUnplugin,
   appJsUnplugin,
   appCssUnplugin,
   appScopedcssWebpack,
-  addonRewritecssRollup,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-scoped-css",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "",
   "keywords": [],
   "license": "ISC",
@@ -55,6 +55,11 @@
     "ember-template-lint": "^5.7.2",
     "webpack": "^5.0.0"
   },
+  "peerDependenciesMeta": {
+    "ember-teplate-lint": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },

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

@@ -2,7 +2,7 @@ import { createUnplugin } from 'unplugin';
 import path from 'path';
 import { readFile } from 'fs/promises';
 import { Compilation } from 'webpack';
-import getPostfix from './getPostfix.js';
+import generateHash from './lib/generateAbsolutePathHash.js';
 
 export default createUnplugin(({ loaders, htmlEntrypointInfo }) => {
   return {
@@ -41,7 +41,7 @@ export default createUnplugin(({ loaders, htmlEntrypointInfo }) => {
           css = await loader.bind({ resourcePath: cssPath })(css);
         }
         // random string; lenght is 8
-        const postfix = getPostfix(path.basename(cssPath));
+        const postfix = generateHash(path.basename(cssPath));
 
         this.emitFile({
           type: 'asset',

package/src/app-css-loader.js

@@ -1,14 +1,14 @@
 // import { createUnplugin }  from 'unplugin';
 import { basename } from 'path';
-import fsExists from './fsExists.js';
-import getPostfix from './getPostfix.js';
-import rewriteCss from './rewriteCss.js';
+import fsExists from './lib/fsExists.js';
+import generateHash from './lib/generateAbsolutePathHash.js';
+import rewriteCss from './lib/rewriteCss.js';
 // import path  from 'path';
 
 export default async function (code) {
   const cssPath = this.resourcePath;
   const cssFileName = basename(cssPath);
-  const postfix = getPostfix(cssPath);
+  const postfix = generateHash(cssPath);
 
   const hbsPath = cssPath.replace('.css', '.hbs');
   const gjsPath = cssPath.replace('.css', '.js');

package/src/app-dependency-loader.js

@@ -1,4 +1,4 @@
-import fsExists from './fsExists.js';
+import fsExists from './lib/fsExists.js';
 
 export default async function (source) {
   if (this.resourcePath.endsWith('.js')) {

package/src/app-js-unplugin.js

@@ -1,8 +1,8 @@
 import { createUnplugin } from 'unplugin';
-import replaceGlimmerAst from './replaceGlimmerAst.js';
+import replaceGlimmerAst from './lib/replaceGlimmerAst.js';
 import path from 'path';
-import getPostfix from './getPostfix.js';
-import getClassesTagsFromCss from './getClassesTagsFromCss.js';
+import generateHash from './lib/generateAbsolutePathHash.js';
+import getClassesTagsFromCss from './lib/getClassesTagsFromCss.js';
 
 function* iterateOpcodes(opcodes) {
   for (let instruction of opcodes) {
@@ -48,7 +48,7 @@ export default createUnplugin(({ appDir }) => {
 
     async transform(code, id) {
       const cssPath = id.replace(/(\.js)|(\.hbs)/, '.css');
-      const postfix = getPostfix(cssPath);
+      const postfix = generateHash(cssPath);
 
       return await replaceGlimmerAst(code, id, (opcodes, css) => {
         const { classes, tags } = getClassesTagsFromCss(css);

package/src/app-scopedcss-webpack.js

@@ -1,10 +1,10 @@
 // import { RawSource }  from 'webpack-sources';
-import rewriteCss from './rewriteCss.js';
+import rewriteCss from './lib/rewriteCss.js';
 import { readFile, writeFile } from 'fs/promises';
 import path from 'path';
-import getPostfix from './getPostfix.js';
-import fsExists from './fsExists.js';
-import getFiles from './getFiles.js';
+import generateHash from './lib/generateAbsolutePathHash.js';
+import fsExists from './lib/fsExists.js';
+import getFiles from './lib/getFiles.js';
 
 export default class {
   apply(compiler) {
@@ -44,7 +44,7 @@ export default class {
               continue;
             }
             const fileName = path.basename(file);
-            const postfix = getPostfix(fileName);
+            const postfix = generateHash(fileName);
             const css = await readFile(file, 'utf-8');
             const rewrittenCss = rewriteCss(css, postfix, fileName);
 

package/src/babel-plugin-scoped-class.js

@@ -1,4 +1,4 @@
-import replaceScopedClass from './replaceScopedClass.js';
+import replaceScopedClass from './lib/replaceScopedClass.js';
 
 const scopedClass = () => {
   return {

package/src/{getPostfix.js → lib/generateAbsolutePathHash.js}

@@ -1,4 +1,4 @@
-import generateHash from './generateHash.js';
+import generateHash from './generateRelativePathHash.js';
 import path from 'path';
 
 export default function (cssFileName) {

package/src/{replaceScopedClass.js → lib/replaceScopedClass.js}

@@ -1,12 +1,12 @@
 import recast from 'ember-template-recast';
 import renameClass from './renameClass.js';
-import getPostfix from './getPostfix.js';
+import generateHash from './generateAbsolutePathHash.js';
 
 export default function (hbs, templatePath) {
   let ast = recast.parse(hbs);
   let stack = [];
   const cssPath = templatePath.replace(/(\.hbs)?\.js$/, '.css');
-  const postfix = getPostfix(cssPath);
+  const postfix = generateHash(cssPath);
 
   recast.traverse(ast, {
     All: {

package/src/scoped-css-unplugin.js

@@ -0,0 +1,116 @@
+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';
+
+function isJsFile(id) {
+  return id.endsWith('.js') || id.endsWith('.ts');
+}
+
+function isCssFile(id) {
+  return id.endsWith('.css');
+}
+
+async function transformJsFile(code, jsPath) {
+  const cssPath = jsPath.replace(/(\.hbs)?\.((js)|(ts))$/, '.css');
+  const cssFileName = path.basename(cssPath);
+
+  const cssExists = await fsExists(cssPath);
+  let css;
+  if (cssExists) {
+    css = await readFile(cssPath, 'utf8');
+  } else {
+    return {
+      code,
+      map: null,
+    };
+  }
+
+  // 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)
+
+  const rewrittenCode = replaceHbsInJs(code, (hbs) => {
+    const { classes, tags } = getClassesTagsFromCss(css);
+    const postfix = generateHash(cssPath);
+    const rewritten = rewriteHbs(hbs, classes, tags, postfix);
+    return rewritten;
+  });
+
+  return {
+    code: rewrittenCode,
+    map: null,
+  };
+}
+
+async function transformCssFile(code, id, emitFile) {
+  const jsPath = id.replace(/\.css$/, '.gjs');
+  const gtsPath = id.replace(/\.css$/, '.gts');
+  const hbsPath = id.replace(/\.css$/, '.hbs');
+
+  const [jsExists, gtsExists, hbsExists] = await Promise.all([
+    fsExists(jsPath),
+    fsExists(gtsPath),
+    fsExists(hbsPath),
+  ]);
+
+  if (jsExists || hbsExists || gtsExists) {
+    const postfix = generateHash(id);
+    code = rewriteCss(code, postfix, path.basename(id));
+  }
+
+  emitFile({
+    type: 'asset',
+    fileName: id.replace(path.join(process.cwd(), 'src/'), ''),
+    source: code,
+  });
+  return '';
+}
+
+export default createUnplugin(() => {
+  return {
+    name: 'ember-scoped-css-unplugin',
+
+    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'),
+        });
+      }
+    },
+
+    transform(code, jsPath) {
+      if (isJsFile(jsPath)) {
+        return transformJsFile(code, jsPath);
+      } else if (isCssFile(jsPath)) {
+        return transformCssFile(code, jsPath, this.emitFile);
+      }
+    },
+  };
+});

package/src/scopedClass.js

@@ -1,5 +1,5 @@
-import generateHash from './generateHash.js';
-import renameClass from './renameClass.js';
+import generateHash from './lib/generateRelativePathHash.js';
+import renameClass from './lib/renameClass.js';
 
 export function scopedClass(className, relativeCssPath) {
   return renameClass(className, generateHash(relativeCssPath));

package/src/template-lint/{scoped-class-helper-plugin.js → plugin.js}

@@ -31,7 +31,7 @@ class ScopedClassHelperRule extends Rule {
 }
 
 export default {
-  name: 'scoped-class-helper-plugin',
+  name: 'scoped-css-plugin',
   rules: {
     'scoped-class-helper': ScopedClassHelperRule,
   },

package/test/{getPostfix.js → generateHash.js}

@@ -1,21 +1,21 @@
 import { expect } from 'chai';
-import getPostfix from '../src/getPostfix.js';
+import generateHash from '../src/lib/generateAbsolutePathHash.js';
 
-describe('getPostfix', function () {
+describe('generateHash', function () {
   it('should return a string', function () {
-    const postfix = getPostfix('foo.css');
+    const postfix = generateHash('foo.css');
 
     expect(postfix).to.be.a('string');
   });
 
   it('should return a string starting with "e"', function () {
-    const postfix = getPostfix('foo.css');
+    const postfix = generateHash('foo.css');
 
     expect(postfix).to.match(/^e/);
   });
 
   it('should return a string of length 9', function () {
-    const postfix = getPostfix('foo.css');
+    const postfix = generateHash('foo.css');
 
     expect(postfix).to.have.lengthOf(9);
   });

package/test/getClassesTagsFromCss.js

@@ -1,5 +1,5 @@
 import { expect } from 'chai';
-import getClassesTagsFromCss from '../src/getClassesTagsFromCss.js';
+import getClassesTagsFromCss from '../src/lib/getClassesTagsFromCss.js';
 
 describe('rewriteCss', function () {
   it('should return classes and tags that are not in :global', function () {

package/test/rewriteCss.js

@@ -1,5 +1,5 @@
 import { expect } from 'chai';
-import rewriteCss from '../src/rewriteCss.js';
+import rewriteCss from '../src/lib/rewriteCss.js';
 
 describe('rewriteCss', function () {
   it('should rewrite css', function () {

package/test/{scoped-class-helper-lint.js → template-lint-rule.js}

@@ -1,5 +1,5 @@
 import { generateRuleTests } from 'ember-template-lint';
-import scopedClassHelperPlugin from '../src/template-lint/scoped-class-helper-plugin.js';
+import scopedClassHelperPlugin from '../src/template-lint/plugin.js';
 import assert from 'assert';
 
 generateRuleTests({

package/src/addon-css-rollup.js

@@ -1,86 +0,0 @@
-import path from 'path';
-import { readFile } from 'fs/promises';
-
-export default 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

@@ -1,46 +0,0 @@
-import { readFile } from 'fs/promises';
-import getPostfix from './getPostfix.js';
-import replaceHbsInJs from './replaceHbsInJs.js';
-import getClassesTagsFromCss from './getClassesTagsFromCss.js';
-import rewriteHbs from './rewriteHbs.js';
-import fsExists from './fsExists.js';
-
-export default function rollupCssColocation() {
-  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 {
-            code: rewrittenHbsJs,
-            // this rollup plugin changes only the template string, so the code structure is the same
-            map: null,
-          };
-        }
-      }
-    },
-  };
-}

package/src/addon-js-unplugin.js

@@ -1,65 +0,0 @@
-import { createUnplugin } from 'unplugin';
-import { readFile } from 'fs/promises';
-import path from 'path';
-import getClassesTagsFromCss from './getClassesTagsFromCss.js';
-import getPostfix from './getPostfix.js';
-import replaceHbsInJs from './replaceHbsInJs.js';
-import rewriteHbs from './rewriteHbs.js';
-import fsExists from './fsExists.js';
-import findCssInJs from './findCssInJs.js';
-import recast from 'recast';
-
-export default createUnplugin(() => {
-  return {
-    name: 'addon-js-unplugin',
-
-    transformInclude(id) {
-      return id.endsWith('.js') || id.endsWith('.ts');
-    },
-
-    async transform(code, jsPath) {
-      const cssPath = jsPath.replace(/(\.hbs)?\.((js)|(ts))$/, '.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;
-
-          // TODO: generate changed source map. Implementation depends on implemented rollup plugin for style tag
-        }
-      }
-
-      if (!css) {
-        return {
-          code,
-          map: null,
-        };
-      }
-
-      // 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
-
-      const rewrittenCode = replaceHbsInJs(code, (hbs) => {
-        const { classes, tags } = getClassesTagsFromCss(css);
-        const postfix = getPostfix(cssPath);
-        const rewritten = rewriteHbs(hbs, classes, tags, postfix);
-        return rewritten;
-      });
-
-      return {
-        code: rewrittenCode,
-        map: null,
-      };
-    },
-  };
-});

package/src/addon-rewritecss-rollup.js

@@ -1,31 +0,0 @@
-import path from 'path';
-import getPostfix from './getPostfix.js';
-import rewriteCss from './rewriteCss.js';
-import fsExists from './fsExists.js';
-
-export default 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 gtsPath = id.replace(/\.css$/, '.gts');
-      const hbsPath = id.replace(/\.css$/, '.hbs');
-
-      const [jsExists, gtsExists, hbsExists] = await Promise.all([
-        fsExists(jsPath),
-        fsExists(gtsPath),
-        fsExists(hbsPath),
-      ]);
-
-      if (jsExists || hbsExists || gtsExists) {
-        const rewritten = rewriteCss(code, postfix, path.basename(id));
-        return rewritten;
-      }
-    },
-  };
-}