fix nullable checks

Thanks TypeScript for already catching that!

Author: RobinMalfait

package.json

@@ -1,7 +1,8 @@
 {
   "name": "@tailwindcss/container-queries",
   "version": "0.1.0",
-  "main": "src/index.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "license": "MIT",
   "repository": "https://github.com/tailwindlabs/tailwindcss-container-queries",
   "publishConfig": {
@@ -11,7 +12,8 @@
     "test": "jest",
     "swcify": "swc ./src/index.ts --out-dir ./dist",
     "build": "npm run swcify",
-    "dev": "npm run swcify -- --watch"
+    "dev": "npm run swcify -- --watch",
+    "postbuild": "tsc --emitDeclarationOnly"
   },
   "prettier": {
     "printWidth": 100,
@@ -43,6 +45,7 @@
     "jest": "^29.1.2",
     "postcss": "^8.4.17",
     "prettier": "^2.7.1",
-    "tailwindcss": "0.0.0-insiders.4338849"
+    "tailwindcss": "0.0.0-insiders.4338849",
+    "typescript": "^4.8.4"
   }
 }

src/index.ts

@@ -1,10 +1,17 @@
 import plugin from 'tailwindcss/plugin'
 import { normalize } from 'tailwindcss/lib/util/dataTypes'
 
-export default plugin(function containerQueries({ matchVariant, theme }) {
-  let values = theme('containers')
+export = plugin(function containerQueries({ matchVariant, theme }) {
+  let values = theme('containers') ?? {}
 
-  function parseValue(value: string) {
+  function parseValue(value: string): {
+    raw: string
+    sortable: boolean
+    minX: number
+    maxX: number
+    minY: number
+    maxY: number
+  } | null {
     // _ -> space
     value = normalize(value)
 
@@ -40,7 +47,7 @@ export default plugin(function containerQueries({ matchVariant, theme }) {
 
     return {
       raw: value,
-      parsable: minX !== null || maxX !== null || minY !== null || maxY !== null,
+      sortable: minX !== null || maxX !== null || minY !== null || maxY !== null,
       minX: minXf,
       maxX: maxXf,
       minY: minYf,
@@ -61,15 +68,17 @@ export default plugin(function containerQueries({ matchVariant, theme }) {
         let a = parseValue(aVariant.value)
         let b = parseValue(bVariant.value)
 
+        if (a === null || b === null) return 0
+
         let aLabel = aVariant.modifier ?? ''
         let bLabel = bVariant.modifier ?? ''
 
         // Put "raw" values at the end
-        if (a.parsable === false && b.parsable === false) {
+        if (a.sortable === false && b.sortable === false) {
           return 0
-        } else if (a.parsable === false) {
+        } else if (a.sortable === false) {
           return 1
-        } else if (b.parsable === false) {
+        } else if (b.sortable === false) {
           return -1
         }
 

tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es2019",
+    "lib": ["ES2019"],
+    "module": "CommonJS",
+    "declaration": true,
+    "declarationMap": false,
+    "declarationDir": "dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "stripInternal": true,
+    "outDir": "dist"
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/**/*.test.ts"
+  ]
+}