Ensure some generic property descriptors are case-sensitive

This detects which syntax definitions are case-sensitive at prepare-time, and uses that to generate the correct generic property descriptors.

Fixes #303. Closes #304 by superseding it.

Author: asamuzaK

lib/utils/propertyDescriptors.js

@@ -11,19 +11,24 @@ const { AST_TYPES } = parsers;
  * simple properties, but properties with more complex grammars will need their own handlers.
  *
  * @param {string} property - The canonical CSS property name (e.g. "backdrop-filter", not "backdropFilter").
+ * @param {object} opts - The options object.
+ * @param {boolean} opts.caseSensitive - True if value is case-sensitive, false otherwise.
  * @returns {object} The property descriptor object.
  */
-function createGenericPropertyDescriptor(property) {
+function createGenericPropertyDescriptor(property, { caseSensitive }) {
   return {
     set(v) {
       const value = parsers.prepareValue(v);
       if (parsers.hasVarFunc(value)) {
         this._setProperty(property, value);
       } else {
-        const parsedValue = parsers.parsePropertyValue(property, v);
+        const parsedValue = parsers.parsePropertyValue(property, v, {
+          caseSensitive
+        });
         if (Array.isArray(parsedValue)) {
           if (parsedValue.length === 1) {
             const [{ name, type, value: itemValue }] = parsedValue;
+            // TODO: Add handlers for AST_TYPES.DIMENSION, AST_TYPES.PERCENTAGE etc.
             switch (type) {
               case AST_TYPES.CALC: {
                 this._setProperty(property, `${name}(${itemValue})`);

scripts/generatePropertyDefinitions.mjs

@@ -1,9 +1,14 @@
 import fs from "node:fs";
 import path from "node:path";
 import css from "@webref/css";
+import { definitionSyntax } from "css-tree";
 
-const { properties } = await css.listAll();
-const definitions = properties.map((definition) => [definition.name, definition]);
+const caseSensitiveTypes = ["custom-ident", "dashed-ident", "string"];
+const typeList = new Set([...caseSensitiveTypes]);
+
+const { properties, types } = await css.listAll();
+const syntaxes = new Map([...types.map((definition) => [`<${definition.name}>`, definition])]);
+const definitions = properties.map(prepareDefinition);
 
 const [dateTodayFormatted] = new Date().toISOString().split("T");
 const output = `"use strict";
@@ -14,3 +19,67 @@ module.exports = new Map(${JSON.stringify(definitions, null, 2)});
 
 const { dirname } = import.meta;
 fs.writeFileSync(path.resolve(dirname, "../lib/generated/propertyDefinitions.js"), output);
+
+/**
+ * Transforms the raw property definitions in @webref/css into the format needed for css-tree and jsdom,
+ * while removing unnecessary fields.
+ *
+ * @param {object} definition - The CSS property definition object.
+ * @returns {Array} A key-value pair consisting of the property name and the property definition.
+ */
+function prepareDefinition(definition) {
+  const { name, syntax } = definition;
+  if (syntax) {
+    const collectedTypes = collectTypes(syntax);
+    if (collectedTypes.size) {
+      for (const type of caseSensitiveTypes) {
+        if (collectedTypes.has(type)) {
+          definition.caseSensitive = true;
+          break;
+        }
+      }
+    }
+  }
+  delete definition.extended;
+  return [name, definition];
+}
+
+/**
+ * Collects CSS data types from syntax.
+ * NOTE: Returns a map as we plan to collect dimensions etc. in the near future.
+ *
+ * @param {string} syntax - The CSS syntax definition.
+ * @returns {Map} The collection of types.
+ */
+function collectTypes(syntax) {
+  const collectedTypes = new Map();
+  const ast = definitionSyntax.parse(syntax);
+  if (ast.type === "Group") {
+    const subList = new Set();
+    definitionSyntax.walk(ast, {
+      enter(node) {
+        if (node.type === "Type") {
+          if (typeList.has(node.name)) {
+            collectedTypes.set(node.name, node);
+          } else if (!node.name.endsWith("()")) {
+            subList.add(node.name);
+          }
+        }
+      }
+    });
+    if (subList.size) {
+      for (const type of subList) {
+        const { syntax: typeSyntax } = syntaxes.get(`<${type}>`);
+        if (typeSyntax) {
+          const expandedList = collectTypes(typeSyntax);
+          if (expandedList.size) {
+            for (const [key, value] of expandedList) {
+              collectedTypes.set(key, value);
+            }
+          }
+        }
+      }
+    }
+  }
+  return collectedTypes;
+}

scripts/generatePropertyDescriptors.mjs

@@ -11,7 +11,7 @@ const implementedProperties = new Map(list);
 
 const requires = [];
 const descriptors = [];
-for (const [canonicalProperty, { legacyAliasOf, styleDeclaration }] of propertyDefinitions) {
+for (const [canonicalProperty, { caseSensitive, legacyAliasOf, styleDeclaration }] of propertyDefinitions) {
   const camelizedProperty = dashedToCamelCase(canonicalProperty);
   const camelizedAliasProperty = legacyAliasOf ? dashedToCamelCase(legacyAliasOf) : "";
   if (implementedProperties.has(camelizedProperty)) {
@@ -28,8 +28,11 @@ for (const [canonicalProperty, { legacyAliasOf, styleDeclaration }] of propertyD
       descriptors.push(`"${property}": ${camelizedAliasProperty}.descriptor`);
     }
   } else {
+    const opts = JSON.stringify({
+      caseSensitive: caseSensitive ?? false
+    });
     for (const property of styleDeclaration) {
-      descriptors.push(`"${property}": createGenericPropertyDescriptor("${canonicalProperty}")`);
+      descriptors.push(`"${property}": createGenericPropertyDescriptor("${canonicalProperty}", ${opts})`);
     }
   }
 }
@@ -48,9 +51,14 @@ module.exports = {
 
 fs.writeFileSync(path.resolve(dirname, "../lib/generated/propertyDescriptors.js"), output);
 
-// Utility to translate from `border-width` to `borderWidth`.
-// NOTE: For values prefixed with webkit, e.g. `-webkit-foo`, we need to provide
-// both `webkitFoo` and `WebkitFoo`. Here we only return `webkitFoo`.
+/**
+ * Utility to translate from `border-width` to `borderWidth`.
+ * NOTE: For values prefixed with webkit, e.g. `-webkit-foo`, we need to provide
+ * both `webkitFoo` and `WebkitFoo`. Here we only return `webkitFoo`.
+ *
+ * @param {string} dashed - The dashed property name.
+ * @returns {string} The camel cased property name.
+ */
 function dashedToCamelCase(dashed) {
   if (dashed.startsWith("--")) {
     return dashed;