ember-scoped-css 0.1.1 → 0.2.0

package/index.js

@@ -8,6 +8,7 @@ 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');
+const babelPluginScopedClass = require('./src/babel-plugin-scoped-class');
 
 module.exports = {
   rollupEmberTemplateImportsPlugin,
@@ -20,4 +21,5 @@ module.exports = {
   appDependencyLoader,
   appScopedcssWebpack,
   addonRewritecssRollup,
+  babelPluginScopedClass,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-scoped-css",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "",
   "type": "commonjs",
   "main": "index.js",

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

@@ -0,0 +1,30 @@
+const template = require('@babel/template').default;
+const replaceScopedClass = require('./replaceScopedClass');
+
+const scopedClass = () => {
+  return {
+    visitor: {
+      CallExpression(path, state) {
+        if (path.node?.callee?.name === 'precompileTemplate') {
+          let source = '';
+          if (path.node.arguments[0].type === 'StringLiteral') {
+            source = path.node.arguments[0].value;
+            path.node.arguments[0].value = replaceScopedClass(
+              path.node.arguments[0].value,
+              state.filename,
+              state.cwd
+            );
+          } else if (path.node.arguments[0].type === 'TemplateLiteral') {
+            path.node.arguments[0].quasis[0].value.raw = replaceScopedClass(
+              path.node.arguments[0].quasis[0].value.raw,
+              state.filename,
+              state.cwd
+            );
+          }
+        }
+      },
+    },
+  };
+};
+
+module.exports = scopedClass;

package/src/renameClass.js

@@ -0,0 +1,5 @@
+const getPostfix = require('./getPostfix');
+
+module.exports = function (className, projectCssPath) {
+  return className + '_' + getPostfix(projectCssPath);
+};

package/src/replaceScopedClass.js

@@ -0,0 +1,69 @@
+const recast = require('ember-template-recast');
+const renameClass = require('./renameClass');
+
+module.exports = function (hbs, templatePath, basePath) {
+  let ast = recast.parse(hbs);
+  let stack = [];
+  const cssPath = templatePath
+    .replace(basePath, '')
+    .replace(/(\.hbs)?(\.js)?/, '.css');
+  const projectCssPath = cssPath; // cssPath.replace(basePath, '');
+
+  recast.traverse(ast, {
+    All: {
+      enter(node) {
+        stack.push(node);
+      },
+      exit(node) {
+        stack.pop();
+      },
+    },
+    MustacheStatement(node) {
+      let cssClass;
+
+      if (
+        node.path?.original === 'scoped-class' &&
+        node.params?.length === 1 &&
+        node.params[0].type === 'StringLiteral'
+      ) {
+        cssClass = node.params[0].value;
+      }
+
+      if (
+        node.path?.path?.original === 'scoped-class' &&
+        node.path?.params?.length === 1 &&
+        node.path?.params[0].type === 'StringLiteral'
+      ) {
+        cssClass = node.path.params[0].value;
+      }
+
+      if (cssClass) {
+        const textNode = recast.builders.text(
+          renameClass(cssClass, projectCssPath)
+        );
+        const parent = stack[stack.length - 1];
+        if (parent.type === 'AttrNode') {
+          parent.quoteType = '"';
+        }
+        return textNode;
+      }
+    },
+    SubExpression(node) {
+      if (
+        node.path?.original === 'scoped-class' &&
+        node.params?.length === 1 &&
+        node.params[0].type === 'StringLiteral'
+      ) {
+        const cssClass = node.params[0].value;
+        const textNode = recast.builders.literal(
+          'StringLiteral',
+          renameClass(cssClass, projectCssPath)
+        );
+        return textNode;
+      }
+    },
+  });
+
+  let result = recast.print(ast);
+  return result;
+};