ember-scoped-css 0.0.1 → 0.1.1

package/package.json

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

package/src/getClassesTagsFromCss.js

@@ -1,12 +1,13 @@
 const postcss = require('postcss');
 const parser = require('postcss-selector-parser');
+const isInsideGlobal = require('./isInsideGlobal');
 
 function getClassesAndTags(sel, classes, tags) {
   const transform = (sls) => {
     sls.walk((selector) => {
-      if (selector.type === 'class') {
+      if (selector.type === 'class' && !isInsideGlobal(selector)) {
         classes.add(selector.value);
-      } else if (selector.type === 'tag') {
+      } else if (selector.type === 'tag' && !isInsideGlobal(selector)) {
         tags.add(selector.value);
       }
     });

package/src/isInsideGlobal.js

@@ -0,0 +1,6 @@
+module.exports = 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/rewriteCss.js

@@ -1,27 +1,42 @@
 const parser = require('postcss-selector-parser');
 const postcss = require('postcss');
+const isInsideGlobal = require('./isInsideGlobal');
 
 function rewriteSelector(sel, postfix) {
   const transform = (selectors) => {
     selectors.walk((selector) => {
-      if (selector.type === 'class') {
+      if (selector.type === 'class' && !isInsideGlobal(selector)) {
         selector.value += '_' + postfix;
-      } else if (selector.type === 'tag') {
+      } else if (selector.type === 'tag' && !isInsideGlobal(selector)) {
         selector.replaceWith(
           parser.tag({ value: selector.value }),
           parser.className({ value: postfix })
         );
       }
     });
+
+    // remove :global
+    selectors.walk((selector) => {
+      if (selector.type === 'pseudo' && selector.value === ':global') {
+        selector.replaceWith(...selector.nodes);
+      }
+    });
   };
   const transformed = parser(transform).processSync(sel);
   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/getClassesTagsFromCss.js

@@ -0,0 +1,15 @@
+const expect = require('chai').expect;
+const getClassesTagsFromCss = require('../src/getClassesTagsFromCss');
+
+describe('rewriteCss', function () {
+  it('should return classes and tags that are not in :global', function () {
+    const css = '.baz :global(.foo) .bar div :global(p)  { color: red; }';
+    const { classes, tags } = getClassesTagsFromCss(css);
+
+    // classes should be baz and bar
+    expect(classes.size).to.equal(2);
+    expect([...classes]).to.have.members(['baz', 'bar']);
+    expect(tags.size).to.equal(1);
+    expect([...tags]).to.have.members(['div']);
+  });
+});

package/test/rewriteCss.js

@@ -0,0 +1,45 @@
+const expect = require('chai').expect;
+const { stub } = require('sinon');
+const rewriteCss = require('../src/rewriteCss');
+
+describe('rewriteCss', function () {
+  it('should rewrite css', function () {
+    const css = '.foo { color: red; }';
+    const postfix = 'postfix';
+    const fileName = 'foo.css';
+    const rewritten = rewriteCss(css, postfix, fileName);
+
+    expect(rewritten).to.equal(
+      `/* foo.css */\n@layer components {\n\n.foo_postfix { color: red; }\n}\n`
+    );
+  });
+
+  it('shouldnt rewrite global', function () {
+    const css = '.baz :global(.foo p) .bar { color: red; }';
+    const postfix = 'postfix';
+    const fileName = 'foo.css';
+    const rewritten = rewriteCss(css, postfix, fileName);
+
+    expect(rewritten).to.equal(
+      `/* 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`
+    );
+  });
+});