fix: correct named container output

Author: dgknca

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss-container-query",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A plugin that provides CSS Container Queries.",
   "main": "src/index.js",
   "author": "Doğukan Çavuş <dgknca@gmail.com>",

src/index.js

@@ -50,7 +50,7 @@ const containerQuery = plugin(
           cqRule.append(container.nodes)
           container.append(cqRule)
           cqRule.walkRules(rule => {
-            rule.selector = `.${e(`cq-w-${queryName}${separator}`)}${rule.selector.slice(1)}`
+            rule.selector = `.${e(`cq-w-${nameKey}-${queryName}${separator}`)}${rule.selector.slice(1)}`
           })
         })
       })
@@ -74,7 +74,7 @@ const containerQuery = plugin(
           cqRule.append(container.nodes)
           container.append(cqRule)
           cqRule.walkRules(rule => {
-            rule.selector = `.${e(`cq-h-${queryName}${separator}`)}${rule.selector.slice(1)}`
+            rule.selector = `.${e(`cq-h-${nameKey}-${queryName}${separator}`)}${rule.selector.slice(1)}`
           })
         })
       })

test/index.test.js

@@ -154,18 +154,18 @@ it('should create the `container-name-sidebar` class', () => {
 it('should create a named container query at-rule', () => {
   const config = {
     ...defaultOptions,
-    content: [{ raw: String.raw`<div class="cq-w-sidebar-22:bg-yellow-200"></div>` }],
+    content: [{ raw: String.raw`<div class="cq-w-sd-22:bg-yellow-200"></div>` }],
     theme: {
       containerName: {
-        sidebar: 'sidebar'
+        sd: 'sidebar'
       }
     },
   }
 
   return run('@tailwind utilities;', config).then((result) => {
     expect(result.css).toMatchCss(String.raw`
       @container sidebar (min-width: 352px) {
-        .cq-w-22\:bg-yellow-200 {
+        .cq-w-sd-22\:bg-yellow-200 {
           --tw-bg-opacity: 1;
           background-color: rgb(254 240 138 / var(--tw-bg-opacity));
         }