split src and tests

Author: RobinMalfait

README.md

@@ -1,7 +1,6 @@
 # @tailwindcss/container-queries
 
-A plugin that provides utilities for container queries.
-
+A plugin for Tailwind CSS v3.2+ that provides utilities for container queries.
 
 ## Installation
 
@@ -28,7 +27,22 @@ module.exports = {
 
 ## Usage
 
-TODO
+```html
+<!-- Container queries without a specific container name -->
+<div>
+  <!-- Container query with a size of `lg` defined in your tailwind.config.js file -->
+  <div class="@lg:underline"></div>
+  <div class="@[(min-width:_1024px)]:underline"></div>
+  <div class="@[1024px]:underline"></div>
+</div>
+
+<!-- Container queries that apply for a defined container name -->
+<div class="container/sidebar">
+  <div class="@lg/sidebar:underline"></div>
+  <div class="@[(min-width:_1024px)]/sidebar:underline"></div>
+  <div class="@[1024px]/sidebar:underline"></div>
+</div>
+```
 
 ## Configuration
 

index.d.ts

@@ -0,0 +1,18 @@
+declare global {
+  namespace jest {
+    interface Matchers<R> {
+      toMatchFormattedCss(expected: string): CustomMatcherResult
+    }
+  }
+}
+
+declare module 'tailwindcss' {
+  export interface Config {
+    theme: {
+      /** Container queries */
+      containers: Record<string, string>
+    }
+  }
+}
+
+export {}

package.json

@@ -42,6 +42,7 @@
     "@swc/cli": "^0.1.57",
     "@swc/core": "^1.3.7",
     "@swc/jest": "^0.2.23",
+    "@types/jest": "^29.1.2",
     "jest": "^29.1.2",
     "postcss": "^8.4.17",
     "prettier": "^2.7.1",

src/index.ts

@@ -2,7 +2,7 @@ import plugin from 'tailwindcss/plugin'
 import { normalize } from 'tailwindcss/lib/util/dataTypes'
 
 export = plugin(function containerQueries({ matchVariant, theme }) {
-  let values = theme('containers') ?? {}
+  let values: Record<string, string> = theme('containers') ?? {}
 
   function parseValue(value: string): {
     raw: string

src/index.test.ts renamed to tests/index.test.ts

@@ -1,4 +1,4 @@
-import { html, css, run } from '~/jest/run'
+import { html, css, run } from './run'
 
 it('container queries', () => {
   let config = {

jest/run.js renamed to tests/run.ts

@@ -1,13 +1,13 @@
 import path from 'path'
 import postcss from 'postcss'
-import tailwind from 'tailwindcss'
-import containerQueries from '~/src'
+import tailwind, { Config } from 'tailwindcss'
+import containerQueries from '../src'
 
 export let css = String.raw
 export let html = String.raw
 export let javascript = String.raw
 
-export function run(input, config, plugin = tailwind) {
+export function run(input: string, config: Config, plugin = tailwind) {
   let { currentTestName } = expect.getState()
 
   config.plugins ??= []

tsconfig.json

@@ -10,12 +10,16 @@
     "esModuleInterop": true,
     "moduleResolution": "node",
     "stripInternal": true,
-    "outDir": "dist"
+    "outDir": "dist",
+    "allowJs": true,
+    "types": ["./index.d.ts"]
   },
   "include": [
-    "src/**/*.ts"
+    "src/index.ts",
+    "tests/index.ts"
   ],
   "exclude": [
-    "src/**/*.test.ts"
+    "./tests/index.test.ts"
   ]
 }
+