ember-scoped-css 0.1.0 → 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.0",
+  "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;
+};

package/src/rewriteCss.js

@@ -26,10 +26,17 @@ function rewriteSelector(sel, postfix) {
   return transformed;
 }
 
+function isInsideKeyframes(node) {
+  const parent = node.parent;
+  if (!parent) return false;
+  if (parent.type === 'atrule' && parent.name === 'keyframes') return true;
+  return isInsideKeyframes(parent);
+}
+
 module.exports = function rewriteCss(css, postfix, fileName) {
   const ast = postcss.parse(css);
   ast.walk((node) => {
-    if (node.type === 'rule') {
+    if (node.type === 'rule' && !isInsideKeyframes(node)) {
       node.selector = rewriteSelector(node.selector, postfix);
     }
   });

package/test/rewriteCss.js

@@ -24,4 +24,22 @@ describe('rewriteCss', function () {
       `/* foo.css */\n@layer components {\n\n.baz_postfix .foo p .bar_postfix { color: red; }\n}\n`
     );
   });
+
+  it.only('sudnt rewrite keyframes', function () {
+    const css = `
+      @keyframes luna-view-navigation {
+        100% {
+          padding-top: 1rem;
+        }
+      }
+    `;
+
+    const postfix = 'postfix';
+    const fileName = 'foo.css';
+    const rewritten = rewriteCss(css, postfix, fileName);
+
+    expect(rewritten).to.equal(
+      `/* foo.css */\n@layer components {\n\n${css}\n}\n`
+    );
+  });
 });