ember-scoped-css 0.2.5 → 0.2.7

package/package.json

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

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

@@ -1,9 +1,32 @@
 const template = require('@babel/template').default;
 const replaceScopedClass = require('./replaceScopedClass');
+const nodePath = require('path');
+const renameClass = require('./renameClass');
+const getPostfix = require('./getPostfix');
 
-const scopedClass = () => {
+const scopedClass = (babel) => {
+  let scopedClassName = '';
   return {
     visitor: {
+      ImportDeclaration(path) {
+        if (path.node.source.value === 'ember-scoped-css') {
+          // find import scopedClass
+          let sc = path.node.specifiers.find(
+            (s) => s.imported.name === 'scopedClass'
+          );
+
+          // store scopedClass local name
+          scopedClassName = sc.local.name;
+
+          // remove import scopedClass
+          if (path.node.specifiers.length === 1) {
+            path.remove();
+          } else {
+            path.node.specifiers = path.node.specifiers.filter((s) => s !== sc);
+          }
+        }
+      },
+
       CallExpression(path, state) {
         if (path.node?.callee?.name === 'precompileTemplate') {
           let source = '';
@@ -22,6 +45,31 @@ const scopedClass = () => {
             );
           }
         }
+
+        // scopedClass helper
+        if (
+          scopedClassName &&
+          path.node?.callee?.name === scopedClassName &&
+          path.node.arguments.length === 2 &&
+          path.node.arguments[0].type === 'StringLiteral' &&
+          path.node.arguments[1].type === 'StringLiteral'
+        ) {
+          // get class name and css file path from scopedClass helper
+          let [className, relativeCssFilePath] = path.node.arguments.map(
+            (a) => a.value
+          );
+
+          // rename class
+          let cssFilePath = nodePath.resolve(
+            nodePath.dirname(state.filename),
+            relativeCssFilePath
+          );
+          let postfix = getPostfix(cssFilePath);
+          let renamedClass = renameClass(className, postfix);
+
+          // replace scopedClass helper with renamed class
+          path.replaceWith(babel.types.stringLiteral(renamedClass));
+        }
       },
     },
   };

package/src/renameClass.js

@@ -1,7 +1,14 @@
-const getPostfix = require('./getPostfix');
-
-module.exports = function (className, projectCssPath) {
+module.exports = function (className, postfix, classesInCss) {
   const classes = className.split(/\s+/);
-  const postfix = getPostfix(projectCssPath);
-  return classes.map((c) => c + '_' + postfix).join(' ');
+  const renamedClasses = classes
+    .filter((c) => c)
+    .map((c) => c.trim())
+    .map((c) => (!classesInCss || classesInCss.has(c) ? c + '_' + postfix : c))
+    .join(' ');
+
+  const renamedWithPreservedSpaces = className.replace(
+    className.trimStart().trimEnd(),
+    renamedClasses
+  );
+  return renamedWithPreservedSpaces;
 };

package/src/replaceScopedClass.js

@@ -1,11 +1,12 @@
 const recast = require('ember-template-recast');
 const renameClass = require('./renameClass');
+const getPostfix = require('./getPostfix');
 
 module.exports = function (hbs, templatePath, basePath) {
   let ast = recast.parse(hbs);
   let stack = [];
   const cssPath = templatePath.replace(/(\.hbs)?\.js$/, '.css');
-  const projectCssPath = cssPath; // cssPath.replace(basePath, '');
+  const postfix = getPostfix(cssPath);
 
   recast.traverse(ast, {
     All: {
@@ -36,9 +37,7 @@ module.exports = function (hbs, templatePath, basePath) {
       }
 
       if (cssClass) {
-        const textNode = recast.builders.text(
-          renameClass(cssClass, projectCssPath)
-        );
+        const textNode = recast.builders.text(renameClass(cssClass, postfix));
         const parent = stack[stack.length - 1];
         if (parent.type === 'AttrNode') {
           parent.quoteType = '"';
@@ -55,7 +54,7 @@ module.exports = function (hbs, templatePath, basePath) {
         const cssClass = node.params[0].value;
         const textNode = recast.builders.literal(
           'StringLiteral',
-          renameClass(cssClass, projectCssPath)
+          renameClass(cssClass, postfix)
         );
         return textNode;
       }

package/src/rewriteHbs.js

@@ -1,4 +1,5 @@
 const recast = require('ember-template-recast');
+const renameClass = require('./renameClass');
 
 module.exports = function rewriteHbs(hbs, classes, tags, postfix) {
   let ast = recast.parse(hbs);
@@ -7,26 +8,13 @@ module.exports = function rewriteHbs(hbs, classes, tags, postfix) {
     AttrNode(node) {
       if (node.name === 'class') {
         if (node.value.type === 'TextNode' && 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(' ');
+          const renamedClass = renameClass(node.value.chars, postfix, classes);
+          node.value.chars = renamedClass;
         } else if (node.value.type === 'ConcatStatement') {
           for (let part of node.value.parts) {
             if (part.type === 'TextNode' && part.chars) {
-              const newClasses = part.chars.split(' ').map((c) => {
-                if (c.trim() && classes.has(c.trim())) {
-                  return c.trim() + '_' + postfix;
-                } else {
-                  return c;
-                }
-              });
-              part.chars = newClasses.join(' ');
+              const renamedClass = renameClass(part.chars, postfix, classes);
+              part.chars = renamedClass;
             }
           }
         }