fix: generate two rules instead of one with coma

angular/angular-cli#20015 (comment)

Author: vltansky

index.js

@@ -1,6 +1,6 @@
 function pluginFn(fn = () => {}){
   return {
-    postcssPlugin: 'postcss-ng-tailwind-dark',
+    postcssPlugin: 'postcss-ng-tailwind-in-components',
     Rule: fn,
   }
 }
@@ -28,7 +28,10 @@ module.exports = ({parentSelector} = {}) => {
         }
       }
       if(hostContextCSS.length){
-        rule.selectors = rule.selectors.concat(hostContextCSS)
+        const clone = rule.clone({ selectors: hostContextCSS });
+        // console.log(clone);
+        rule.parent.insertAfter(rule, rule.clone({ selectors: hostContextCSS }))
+        // rule.selectors = rule.selectors.concat(hostContextCSS)
       }
     }
   })

index.test.js

@@ -32,24 +32,33 @@ describe('Check errors', () => {
 describe('PostCSS', () => {
   it('should add :host-context', async () => {
     await run(
-      '.dark .test {}',
-      '.dark .test, :host-context(.dark) .test {}',
+      `
+      .test {}
+      .any {}
+      .dark .test {}
+      .string {}`,
+      `
+      .test {}
+      .any {}
+      .dark .test {}
+      :host-context(.dark) .test {}
+      .string {}`,
       {parentSelector: '.dark'}
     )
   })
 
   it('should add :host-context to "some-parent-class"', async () => {
     await run(
       '.some-parent-class .test {}',
-      '.some-parent-class .test, :host-context(.some-parent-class) .test {}',
+      `.some-parent-class .test {}:host-context(.some-parent-class) .test {}`,
       {parentSelector: '.some-parent-class'}
     )
   })
 
   it('should work with id "#some-parent-id"', async () => {
     await run(
       '#some-parent-id .test {}',
-      '#some-parent-id .test, :host-context(#some-parent-id) .test {}',
+      `#some-parent-id .test {}:host-context(#some-parent-id) .test {}`,
       {parentSelector: '#some-parent-id'}
     )
   })