WIP implement type checking

.github/workflows/test.yml

@@ -11,7 +11,7 @@ on:
 
 jobs:
   test:
-    name: Unit tests
+    name: Tests
     runs-on: ubuntu-latest
 
     strategy:
@@ -20,13 +20,19 @@ jobs:
           - 14.13.0
           - 16
           - 18
+          - 20
 
     steps:
-      - uses: actions/checkout@v3
+      - name: Checkout code
+        uses: actions/checkout@v3
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
           cache: "npm"
-      - run: npm install --ignore-scripts --no-audit
-      - run: npm test
+      - name: Install dependencies
+        run: npm install --ignore-scripts --no-audit
+      - name: Run unit tests
+        run: npm test
+      - name: Run type checks
+        run: npm run check

package.json

@@ -27,7 +27,8 @@
   },
   "scripts": {
     "test": "uvu",
-    "build": "microbundle"
+    "build": "microbundle",
+    "check": "tsc --noEmit"
   },
   "keywords": [
     "projectwallace",
@@ -47,6 +48,7 @@
   },
   "devDependencies": {
     "microbundle": "^0.15.1",
+    "typescript": "^5.2.2",
     "uvu": "^0.5.6"
   },
   "mangle": {

src/collection.js

@@ -50,11 +50,10 @@ export class Collection {
 	 * @property {number} column
 	 * @property {number} offset
 	 * @property {number} length
-	 *
-	 * @returns {{ total: number; totalUnique: number; uniquenessRatio: number; unique: Record<string, number>; __unstable__uniqueWithLocations: Record<string, CssLocation[]>}}
 	 */
 	count() {
 		let uniqueWithLocations = new Map()
+		/** @type Record<string, number> */
 		let unique = {}
 		this._items.forEach((list, key) => {
 			let nodes = list.map(index => ({
@@ -73,6 +72,7 @@ export class Collection {
 				totalUnique: this._items.size,
 				unique,
 				uniquenessRatio: this._total === 0 ? 0 : this._items.size / this._total,
+				/** @type {Record<string, CssLocation[]>} */
 				__unstable__uniqueWithLocations: Object.fromEntries(uniqueWithLocations),
 			}
 		}
@@ -81,7 +81,7 @@ export class Collection {
 			total: this._total,
 			totalUnique: this._items.size,
 			unique,
-			uniquenessRatio: this._total === 0 ? 0 : this._items.size / this._total,
+			uniquenessRatio: this._total === 0 ? 0 : this._items.size / this._total
 		}
 	}
 }

src/countable-collection.js

@@ -1,7 +1,7 @@
 class CountableCollection {
 
   /** @param {string[]?} initial */
-  constructor(initial) {
+  constructor(initial = undefined) {
     /** @type {Map<string, number>} */
     this._items = new Map()
     this._total = 0

src/index.js

@@ -1,6 +1,6 @@
 import parse from 'css-tree/parser'
 import walk from 'css-tree/walker'
 import { calculate } from '@bramus/specificity/core'
 import { isSupportsBrowserhack, isMediaBrowserhack } from './atrules/atrules.js'
 import { getCombinators, getComplexity, isAccessibility } from './selectors/utils.js'
 import { colorFunctions, colorKeywords, namedColors, systemColors } from './values/colors.js'
@@ -38,7 +38,7 @@
  * @param {string} css
  * @param {Options} options
  */
-export function analyze(css, options = {}) {
+export function analyze(css, options = { useUnstableLocations: false }) {
   let settings = Object.assign({}, defaults, options)
   let useLocations = settings.useUnstableLocations === true
   let start = Date.now()
@@ -84,7 +84,7 @@
 
   // Atrules
   let totalAtRules = 0
-  /** @type {Record<string: string>}[]} */
+  /** @type {Record<string, string>[]}} */
   let fontfaces = []
   let layers = new Collection({ useLocations })
   let imports = new Collection({ useLocations })
@@ -165,6 +165,7 @@
         let atRuleName = node.name
 
         if (atRuleName === 'font-face') {
+          /** @type Record<string, string> */
           let descriptors = {}
 
           node.block.children.forEach(descriptor => {
@@ -269,7 +270,7 @@
 
         uniqueSelectors.add(selector)
         selectorComplexities.push(complexity)
-        uniqueSelectorComplexities.push(complexity, node.loc)
+        uniqueSelectorComplexities.push(String(complexity), node.loc)
 
         // #region specificity
         let [{ value: specificityObj }] = calculate(node)

src/index.test.js

@@ -214,7 +214,6 @@ Api('handles empty input gracefully', () => {
         "total": 0,
         "totalUnique": 0,
         "unique": {},
-        "total": 0,
         "uniquenessRatio": 0,
         "items": []
       },

src/rules/rules.test.js

@@ -59,7 +59,6 @@ Rules('should handle CSS without rules', () => {
       range: 0,
       sum: 0,
       items: [],
-      items: [],
       unique: {},
       total: 0,
       totalUnique: 0,

src/selectors/utils.js

@@ -1,11 +1,11 @@
 import walk from 'css-tree/walker'
 import { startsWith, strEquals } from '../string-utils.js'
 import { hasVendorPrefix } from '../vendor-prefix.js'
 
 /**
  *
  * @param {import('css-tree').SelectorList} selectorListAst
- * @returns {Selector[]} Analyzed selectors in the selectorList
+ * @returns {import('css-tree').Selector[]} Analyzed selectors in the selectorList
  */
 function analyzeList(selectorListAst, cb) {
   let childSelectors = []
@@ -64,7 +64,7 @@
 
 /**
  * Get the Complexity for the AST of a Selector Node
- * @param {import('css-tree').Selector} ast - AST Node for a Selector
+ * @param {import('css-tree').Selector} selector - AST Node for a Selector
  * @return {[number, boolean]} - The numeric complexity of the Selector and whether it's prefixed or not
  */
 export function getComplexity(selector) {

src/string-utils.js

@@ -1,7 +1,7 @@
 /**
  * Case-insensitive compare two character codes
- * @param {string} referenceCode
- * @param {string} testCode
+ * @param {number} referenceCode
+ * @param {number} testCode
  * @see https://github.com/csstree/csstree/blob/41f276e8862d8223eeaa01a3d113ab70bb13d2d9/lib/tokenizer/utils.js#L22
  */
 function compareChar(referenceCode, testCode) {

src/values/destructure-font-shorthand.js

@@ -82,20 +82,6 @@ export function destructure(value, stringifyNode) {
 			return
 		}
 
-		// If, after taking care of font-size and line-height, we still have a remaining dimension, it must be the oblique angle
-		if (
-			node.type === 'Dimension' &&
-			item.prev &&
-			item.prev.data.type === TYPE_IDENTIFIER &&
-			item.prev.data.name === 'oblique'
-		) {
-			// put in the correct amount of whitespace between `oblique` and `<angle>`
-			font_style +=
-				''.padStart(node.loc.start.offset - item.prev.data.loc.end.offset) +
-				stringifyNode(node)
-			return
-		}
-
 		// any node that's a number and not previously caught by line-height or font-size is the font-weight
 		// (oblique <angle> will not be caught here, because that's a Dimension, not a Number)
 		if (node.type === 'Number') {

tsconfig.json

@@ -0,0 +1,33 @@
+{
+	"include": ["src/**/*"],
+
+	"compilerOptions": {
+		"rootDir": "src",
+
+		// target node v8+ (https://node.green/)
+		// the only missing feature is Array.prototype.values
+		"lib": ["es2019", "DOM", "DOM.Iterable"],
+		"target": "es2019",
+
+		"module": "esnext",
+		"moduleResolution": "node",
+
+		// silences wrong TS error, we don't compile, we only typecheck
+		"outDir": "./irrelevant/unused",
+
+		"declaration": true,
+		"declarationDir": "types",
+
+		"noEmitOnError": true,
+		"noErrorTruncation": true,
+
+		"allowJs": true,
+		"checkJs": true,
+
+		// TODO: error all the things
+		//"strict": true,
+		// "noImplicitThis": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+	}
+}