Merge pull request #18 from CanopyTax/rule-selector-fix

rule selector fix

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kremling-loader",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "main": "index.js",
   "author": "@geoctrl",
   "license": "MIT",

src/postcss-kremling-plugin.js

@@ -6,7 +6,7 @@ module.exports = ({ id, namespace }) => {
     const output = parser(selectors => {
       if (left) {
         const s = selectors.first.first;
-        if (s.type === 'pseudo' || s.type === 'tag') {
+        if (s.type === 'pseudo') {
           if (s.value === ':global') {
             s.remove();
           }
@@ -32,6 +32,7 @@ module.exports = ({ id, namespace }) => {
     postcssPlugin: 'postcss-kremling-plugin',
     Root(root) {
       root.walkRules(function (rule) {
+        if (rule?.parent?.name === 'keyframes') return rule;
         const { output: left, scope } = parseSelectors(rule.selector, true);
         let right = '';
         if (scope) {

test/css-test-files/animations.css

@@ -0,0 +1,20 @@
+.test {
+  animation-duration: 3s;
+  animation-name: somethingCustom;
+}
+
+
+
+@keyframes somethingCustom {
+  from {
+    width: 1px;
+  }
+
+  to {
+    width: 100px;
+  }
+
+  25% {
+    width: 200px;
+  }
+}

test/css-test-files/different-types.css

@@ -0,0 +1,7 @@
+a {
+  background-color: red;
+}
+
+customElement {
+  border: solid;
+}

test/kremling-loader.test.js

@@ -39,6 +39,16 @@ describe('kremling-loader', () => {
     expect(!!await run('double-single-quotes.css')).toBe(true);
   });
 
+  test('should work with elements', async () => {
+    const result = `[kremling="p8"] a,a[kremling="p8"] { background-color: red; } [kremling="p8"] customElement,customElement[kremling="p8"] { border: solid; } `;
+    expect((await run('different-types.css')).styles).toBe(result);
+  });
+
+  test('should work with keyframes', async () => {
+    const result = `[kremling="p9"] .test,[kremling="p9"].test { animation-duration: 3s; animation-name: somethingCustom; } @keyframes somethingCustom { from { width: 1px; } to { width: 100px; } 25% { width: 200px; } } `;
+    expect((await run('animations.css')).styles).toBe(result);
+  });
+
   test('should use postcss plugins from webpack config options', async () => {
     const output = (await run('config-options.css', {
       postcss: {