Migrate to @webref/css

Author: frenic

.gitignore

@@ -1 +1,2 @@
 node_modules/
+tsconfig.tsbuildinfo

__tests__/src.typer.ts

@@ -1,5 +1,5 @@
-import parse from '../src/syntax/parser';
-import typer, { Type } from '../src/syntax/typer';
+import parse from '../src/syntax/parser.mjs';
+import typer, { Type } from '../src/syntax/typer.mjs';
 
 describe('typing', () => {
   it('types combinators', () => {

build.ts build.mtsbuild.ts renamed to build.mts

@@ -1,13 +1,13 @@
 import * as chokidar from 'chokidar';
 import * as path from 'path';
 import * as prettier from 'prettier';
-import { FLOW_FILENAME, TYPESCRIPT_FILENAME, writeFileAsync } from './utils';
+import { FLOW_FILENAME, TYPESCRIPT_FILENAME, writeFileAsync } from './utils.mjs';
 import { runCLI } from 'jest';
 import { fileURLToPath } from 'url';
 import { Config } from '@jest/types';
-import { declarator } from './src/declarator';
-import generateFlow from './src/flow';
-import generateTypescript from './src/typescript';
+import { declarator } from './src/declarator.mjs';
+import generateFlow from './src/flow.mjs';
+import generateTypescript from './src/typescript.mjs';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 

package-lock.json

@@ -21,6 +21,7 @@
     "@types/node": "^24.10.1",
     "@types/prettier": "^3.0.0",
     "@types/turndown": "^5.0.6",
+    "@webref/css": "^8.1.1",
     "babel-jest": "^30.2.0",
     "chalk": "^5.6.2",
     "chokidar": "^4.0.3",
@@ -44,11 +45,11 @@
   "scripts": {
     "prepublish": "npm install --no-save --prefix __tests__ && npm install --no-save --prefix __tests__/__fixtures__",
     "release": "release-it",
-    "update": "tsx update.ts",
-    "build": "tsx --inspect build.ts --start",
-    "watch": "tsx build.ts --watch",
+    "update": "tsx update.mts",
+    "build": "tsx build.mts --start",
+    "watch": "tsx build.mts --watch",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
-    "pretty": "prettier --write build.ts **/*.{ts,js,json,md}",
+    "pretty": "prettier --write build.mts **/*.{ts,js,json,md}",
     "lazy": "tsc && npm run lint",
     "test": "jest --runInBand",
     "test:src": "jest src.*.ts",

package.json

@@ -0,0 +1,82 @@
+import { atrules } from '../data/css.mjs';
+import parse from '../syntax/parser.mjs';
+import typer, { IStringLiteral, ResolvedType, Type } from '../syntax/typer.mjs';
+import { compatNames, compatSyntax, getAtRuleData, getCompats, isAddedBySome } from '../utils/compat.mjs';
+import { IDataTypeDictionary, resolveDataTypes } from './data-types.mjs';
+
+interface IDescriptor {
+  name: string;
+  types: ResolvedType[];
+}
+
+export interface IAtRuleDescriptors {
+  [descriptor: string]: IDescriptor;
+}
+
+export async function getAtRules(dataTypeDictionary: IDataTypeDictionary, minTypesInDataTypes: number) {
+  const literals: IStringLiteral[] = [];
+  const rules: { [name: string]: IAtRuleDescriptors } = {};
+
+  for (const atrule of atrules) {
+    const atName = atrule.name;
+    const name = atName.slice(1);
+
+    literals.push({
+      type: Type.StringLiteral,
+      literal: atName,
+    });
+
+    if (atrule.descriptors) {
+      const descriptors: IAtRuleDescriptors = {};
+      const compatibilityData = getAtRuleData(name);
+      let hasSupportedProperties = false;
+      const descriptorNames = atrule.descriptors.map(({ name }) => name);
+
+      for (const descriptor of atrule.descriptors) {
+        const { syntax, name: descriptorName } = descriptor;
+        if (syntax) {
+          let entities = parse(syntax);
+          let properties = [descriptorName];
+
+          if (compatibilityData && descriptorName in compatibilityData) {
+            const compats = getCompats(compatibilityData[descriptorName]);
+
+            if (compats.every(compat => !isAddedBySome(compat))) {
+              // The property needs to be added by some browsers
+              continue;
+            }
+
+            entities = compatSyntax(compatibilityData, entities);
+            properties = properties.concat(
+              ...compats.map(compat =>
+                // We mix current and obsolete for now
+                compatNames(compat, descriptorName)
+                  .concat(compatNames(compat, descriptorName, true))
+                  .filter(property => !descriptorNames.includes(property)),
+              ),
+            );
+          }
+
+          const types = resolveDataTypes(dataTypeDictionary, typer(entities), minTypesInDataTypes);
+
+          for (const property of properties) {
+            hasSupportedProperties = true;
+            descriptors[property] = {
+              name: descriptorName,
+              types,
+            };
+          }
+        }
+      }
+
+      if (hasSupportedProperties) {
+        rules[name] = descriptors;
+      }
+    }
+  }
+
+  return {
+    literals,
+    rules,
+  };
+}

src/collections/at-rules.mts

@@ -1,6 +1,6 @@
 import mdnBrowserCompatData, { Identifier } from '@mdn/browser-compat-data';
-import { hasType, ResolvedType, Type, TypeType } from '../syntax/typer';
-import { alternativeAttributes } from '../utils/compat';
+import { hasType, ResolvedType, Type, TypeType } from '../syntax/typer.mjs';
+import { alternativeAttributes } from '../utils/compat.mjs';
 
 function assembleAttributes(attributes: ResolvedType[], dataset: { [key: string]: Identifier }): ResolvedType[] {
   const nextAttributes = [...attributes];

src/collections/at-rules.ts

@@ -1,8 +1,8 @@
 import { Identifier } from '@mdn/browser-compat-data';
-import parse from '../syntax/parser';
-import typer, { DataType, hasType, IDataType, ResolvedType, Type, TypeType } from '../syntax/typer';
-import { compatSyntax } from '../utils/compat';
-import { getPropertySyntax, getSyntax } from './syntaxes';
+import parse from '../syntax/parser.mjs';
+import typer, { DataType, hasType, IDataType, ResolvedType, Type, TypeType } from '../syntax/typer.mjs';
+import { compatSyntax } from '../utils/compat.mjs';
+import { getPropertySyntax, getSyntax } from './syntaxes.mjs';
 
 export interface IDataTypeDictionary {
   [key: string]: ResolvedType[];

src/collections/attributes.ts src/collections/attributes.mtssrc/collections/attributes.ts renamed to src/collections/attributes.mts

@@ -1,7 +1,7 @@
-import { properties as rawSvgProperties } from '../data/svg';
-import parse from '../syntax/parser';
-import typer, { ResolvedType } from '../syntax/typer';
-import { composeCommentBlock } from '../utils/comment';
+import { properties as rawSvgProperties } from '../data/svg.mjs';
+import parse from '../syntax/parser.mjs';
+import typer, { ResolvedType } from '../syntax/typer.mjs';
+import { composeCommentBlock } from '../utils/comment.mjs';
 import {
   compatNames,
   compatSyntax,
@@ -10,10 +10,10 @@ import {
   getTypesData,
   isAddedBySome,
   isDeprecated,
-} from '../utils/compat';
-import { warn } from '../utils/logger';
-import { createPropertyDataTypeResolver, IDataTypeDictionary, resolveDataTypes } from './data-types';
-import { getProperties, getPropertySyntax } from './syntaxes';
+} from '../utils/compat.mjs';
+import { warn } from '../utils/logger.mjs';
+import { createPropertyDataTypeResolver, IDataTypeDictionary, resolveDataTypes } from './data-types.mjs';
+import { getProperties, getPropertySyntax } from './syntaxes.mjs';
 
 const ALL = 'all';
 
@@ -51,9 +51,15 @@ export async function getGlobals(
   dataTypeDictionary: IDataTypeDictionary,
   minTypesInDataTypes: number,
 ): Promise<ResolvedType[]> {
+  const syntax = getPropertySyntax(ALL);
+
+  if (!syntax) {
+    throw new Error(`Syntax for ${ALL} is missing`);
+  }
+
   const dataTypes = resolveDataTypes(
     dataTypeDictionary,
-    typer(compatSyntax(getGlobalCompatibilityData(), parse(getPropertySyntax(ALL)))),
+    typer(compatSyntax(getGlobalCompatibilityData(), parse(syntax))),
     minTypesInDataTypes,
   );
 
@@ -94,12 +100,17 @@ export async function getHtmlProperties(dataTypeDictionary: IDataTypeDictionary,
     }
 
     const data = propertiesMap[originalName];
+    const syntax = getPropertySyntax(originalName);
+
+    if (!syntax) {
+      continue;
+    }
 
     // Default values
-    let entities = parse(getPropertySyntax(originalName));
+    let entities = parse(syntax);
     let currentNames: string[] = [originalName];
     let obsoleteNames: string[] = [];
-    let deprecated = isDeprecated(data);
+    let deprecated: boolean = false;
 
     const compatibilityData = getPropertyData(originalName);
 
@@ -118,7 +129,7 @@ export async function getHtmlProperties(dataTypeDictionary: IDataTypeDictionary,
       obsoleteNames = obsoleteNames.concat(
         ...compats.map(compat => filterMissingProperties(compatNames(compat, originalName, true))),
       );
-      deprecated = compats.every(compat => isDeprecated(data, compat));
+      deprecated = compats.every(compat => isDeprecated(compat));
     }
 
     if (deprecated) {