Merge branch 'master' of https://github.com/dgknca/tailwindcss-contai…

…ner-query

README.md

@@ -65,7 +65,7 @@ There are no any `container-name` utilities by default. You should define your o
 ## Example Usage
 
 ```html
-<div class=" h-60 w-60 bg-gray-300 overflow-auto resize container-type-size">
+<div class="overflow-auto bg-gray-300 resize  h-60 w-60 container-type-size">
   <h1 class="bg-green-300 cq-w-6:bg-yellow-400">Resize the container and see the background color change</h1>
 </div>
 ```
@@ -84,7 +84,7 @@ There are no any `container-name` utilities by default. You should define your o
 ## Using Container Names
 
 ```html
-<div class=" h-60 w-60 bg-gray-300 overflow-auto resize container-type-size">
+<div class="overflow-auto bg-gray-300 resize  h-60 w-60 container-type-size">
   <h1 class="bg-green-300 cq-w-sidebar-6:bg-yellow-400">Resize the container and see the background color change</h1>
 </div>
 ```
@@ -136,8 +136,4 @@ module.exports = {
 }
 ```
 
-## [Demo Page](https://dgknca.github.io/tailwindcss-container-query/)
-
-## TODO
-
-- [ ] Add tests
+## [Demo Page](https://dgknca.github.io/tailwindcss-container-query/)

package.json

@@ -15,6 +15,7 @@
   ],
   "license": "MIT",
   "scripts": {
+    "test": "jest",
     "demo:dev": "npx tailwindcss -i ./demo/style.css -o ./demo/output.css --watch",
     "demo:build": "npx tailwindcss -i ./demo/style.css -o ./demo/output.css",
     "demo:deploy": "rm -rf demo/output.css && yarn run demo:build && gh-pages -d demo",
@@ -27,6 +28,8 @@
     "autoprefixer": "^10.4.0",
     "clean-css": "^5.2.2",
     "gh-pages": "^3.2.3",
+    "jest": "^27.4.4",
+    "jest-matcher-css": "^1.1.0",
     "postcss": "^8.4.4",
     "tailwindcss": "^3.0.0"
   }

test/index.test.js

@@ -0,0 +1,175 @@
+const cssMatcher = require('jest-matcher-css')
+const postcss = require('postcss')
+const tailwindcss = require('tailwindcss')
+
+const defaultOptions = {
+  corePlugins: { preflight: false },
+  plugins:  [require('../src')],
+}
+
+function run(input, config, plugin = tailwindcss) {
+  return postcss(
+    plugin(config)
+  )
+  .process(input, {
+    from: undefined
+  })
+}
+
+expect.extend({
+  toMatchCss: cssMatcher
+})
+
+it('should add the container query at-rule for `.cq-w-22` class and its contents', () => {
+  const config = {
+    ...defaultOptions,
+    content: [{ raw: String.raw`<div class="cq-w-22:bg-yellow-200"></div>` }],
+  }
+
+  return run('@tailwind utilities;', config).then((result) => {
+    expect(result.css).toMatchCss(String.raw`
+      @container (min-width: 352px) {
+        .cq-w-22\:bg-yellow-200 {
+          --tw-bg-opacity: 1;
+          background-color: rgb(254 240 138 / var(--tw-bg-opacity));
+        }
+      }
+    `)
+  })
+})
+
+it('should add the container query at-rule for `.cq-h-22` class and its contents', () => {
+  const config = {
+    ...defaultOptions,
+    content: [{ raw: String.raw`<div class="cq-h-22:bg-yellow-200"></div>` }],
+  }
+
+  return run('@tailwind utilities;', config).then((result) => {
+    expect(result.css).toMatchCss(String.raw`
+      @container (min-height: 352px) {
+        .cq-h-22\:bg-yellow-200 {
+          --tw-bg-opacity: 1;
+          background-color: rgb(254 240 138 / var(--tw-bg-opacity));
+        }
+      }
+    `)
+  })
+})
+
+it('should add the `container-type-size` class', () => {
+  const config = {
+    ...defaultOptions,
+    content: [{ raw: String.raw`<div class="container-type-size"></div>` }],
+  }
+
+  return run('@tailwind utilities;', config).then((result) => {
+    expect(result.css).toMatchCss(String.raw`
+      .container-type-size {
+        container-type: size;
+      }
+    `)
+  })
+})
+
+it('should add the `container-type-inline-size` class', () => {
+  const config = {
+    ...defaultOptions,
+    content: [{ raw: String.raw`<div class="container-type-inline-size"></div>` }],
+  }
+
+  return run('@tailwind utilities;', config).then((result) => {
+    expect(result.css).toMatchCss(String.raw`
+      .container-type-inline-size {
+        container-type: inline-size;
+      }
+    `)
+  })
+})
+
+it('should add the `container-type-block-size` class', () => {
+  const config = {
+    ...defaultOptions,
+    content: [{ raw: String.raw`<div class="container-type-block-size"></div>` }],
+  }
+
+  return run('@tailwind utilities;', config).then((result) => {
+    expect(result.css).toMatchCss(String.raw`
+      .container-type-block-size {
+        container-type: block-size;
+      }
+    `)
+  })
+})
+
+it('should add the `container-type-style` class', () => {
+  const config = {
+    ...defaultOptions,
+    content: [{ raw: String.raw`<div class="container-type-style"></div>` }],
+  }
+
+  return run('@tailwind utilities;', config).then((result) => {
+    expect(result.css).toMatchCss(String.raw`
+      .container-type-style {
+        container-type: style;
+      }
+    `)
+  })
+})
+
+it('should add the `container-type-state` class', () => {
+  const config = {
+    ...defaultOptions,
+    content: [{ raw: String.raw`<div class="container-type-state"></div>` }],
+  }
+
+  return run('@tailwind utilities;', config).then((result) => {
+    expect(result.css).toMatchCss(String.raw`
+      .container-type-state {
+        container-type: state;
+      }
+    `)
+  })
+})
+
+it('should create the `container-name-sidebar` class', () => {
+  const config = {
+    ...defaultOptions,
+    content: [{ raw: String.raw`<div class="container-name-sidebar"></div>` }],
+    theme: {
+      containerName: {
+        sidebar: 'sidebar'
+      }
+    },
+  }
+
+  return run('@tailwind utilities;', config).then((result) => {
+    expect(result.css).toMatchCss(String.raw`
+      .container-name-sidebar {
+        container-name: sidebar;
+      }
+    `)
+  })
+})
+
+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>` }],
+    theme: {
+      containerName: {
+        sidebar: '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 {
+          --tw-bg-opacity: 1;
+          background-color: rgb(254 240 138 / var(--tw-bg-opacity));
+        }
+      }
+    `)
+  })
+})