@webstudio-is/css-data 0.267.0 → 0.269.0

package/lib/index.js

@@ -310,6 +310,26 @@ var html = /* @__PURE__ */ new Map([
   ["button:background-color", { type: "keyword", value: "lightgray" }]
 ]);
 
+// src/html-elements.ts
+var htmlReplacedElementTags = [
+  "audio",
+  "canvas",
+  "embed",
+  "iframe",
+  "img",
+  "input",
+  "object",
+  "select",
+  "textarea",
+  "video"
+];
+var htmlReplacedElementTagSet = new Set(htmlReplacedElementTags);
+var isHtmlReplacedElementTag = (tag) => {
+  return htmlReplacedElementTagSet.has(
+    tag
+  );
+};
+
 // src/__generated__/keyword-values.ts
 var keywordValues = {
   "-webkit-font-smoothing": [
@@ -10376,10 +10396,13 @@ import * as csstree2 from "css-tree";
 
 // src/parse-css-value.ts
 import {
+  definitionSyntax,
   generate,
   lexer,
   List,
   parse,
+  tokenize,
+  tokenTypes,
   walk
 } from "css-tree";
 import warnOnce from "warn-once";
@@ -10408,9 +10431,156 @@ var splitRepeated = (nodes) => {
   }
   return lists;
 };
+var cssNumericFunctionNames = /* @__PURE__ */ new Set([
+  "calc",
+  "min",
+  "max",
+  "clamp",
+  "round",
+  "mod",
+  "rem",
+  "sin",
+  "cos",
+  "tan",
+  "asin",
+  "acos",
+  "atan",
+  "atan2",
+  "pow",
+  "sqrt",
+  "hypot",
+  "log",
+  "exp",
+  "abs",
+  "sign"
+]);
+var cssMathConstants = /* @__PURE__ */ new Set(["e", "pi", "infinity", "-infinity", "nan"]);
+var cssNumericTypeNames = /* @__PURE__ */ new Set([
+  "length",
+  "length-percentage",
+  "percentage",
+  "number",
+  "integer",
+  "angle",
+  "time",
+  "frequency",
+  "resolution",
+  "flex",
+  "alpha-value"
+]);
+var canFallbackToCssMath = (ast, syntax) => {
+  if (syntax === void 0) {
+    return false;
+  }
+  let hasCssNumericType = false;
+  try {
+    definitionSyntax.walk(definitionSyntax.parse(syntax), (node) => {
+      if (node.type === "Type" && "name" in node && cssNumericTypeNames.has(node.name)) {
+        hasCssNumericType = true;
+      }
+    });
+  } catch {
+    return false;
+  }
+  if (hasCssNumericType === false) {
+    return false;
+  }
+  let hasCssNumericFunction = false;
+  let hasUnknownIdentifier = false;
+  walk(ast, (node) => {
+    if (node.type === "Function" && cssNumericFunctionNames.has(node.name)) {
+      hasCssNumericFunction = true;
+    }
+    if (node.type === "Identifier" && cssMathConstants.has(node.name.toLowerCase()) === false) {
+      hasUnknownIdentifier = true;
+    }
+  });
+  return hasCssNumericFunction && hasUnknownIdentifier === false;
+};
+var getSyntaxMatchErrorSyntax = (error) => {
+  if (error != null && "syntax" in error && typeof error.syntax === "string") {
+    return error.syntax;
+  }
+};
+var matchingOpenToken = /* @__PURE__ */ new Map([
+  [tokenTypes.RightSquareBracket, tokenTypes.LeftSquareBracket],
+  [tokenTypes.RightCurlyBracket, tokenTypes.LeftCurlyBracket]
+]);
+var endsWithUnescaped = (value, char) => {
+  if (value.endsWith(char) === false) {
+    return false;
+  }
+  let backslashes = 0;
+  for (let index = value.length - 2; index >= 0; index -= 1) {
+    if (value[index] !== "\\") {
+      break;
+    }
+    backslashes += 1;
+  }
+  return backslashes % 2 === 0;
+};
+var isValidCustomPropertyValue = (value) => {
+  if (endsWithUnescaped(value, "\\")) {
+    return false;
+  }
+  const blockStack = [];
+  const tokenizeValue = tokenize;
+  tokenizeValue(value, (type, start, end) => {
+    const tokenValue = value.slice(start, end);
+    if (type === tokenTypes.BadString || type === tokenTypes.BadUrl) {
+      blockStack.push(Number.NaN);
+      return;
+    }
+    if (type === tokenTypes.String) {
+      const quote = tokenValue[0];
+      if (quote !== void 0 && (quote === `"` || quote === `'`) && (tokenValue.length < 2 || endsWithUnescaped(tokenValue, quote) === false)) {
+        blockStack.push(Number.NaN);
+      }
+      return;
+    }
+    if (type === tokenTypes.Url) {
+      if (endsWithUnescaped(tokenValue, ")") === false) {
+        blockStack.push(Number.NaN);
+      }
+      return;
+    }
+    if (type === tokenTypes.Comment) {
+      if (tokenValue.endsWith("*/") === false) {
+        blockStack.push(Number.NaN);
+      }
+      return;
+    }
+    if (type === tokenTypes.Function || type === tokenTypes.LeftParenthesis || type === tokenTypes.LeftSquareBracket || type === tokenTypes.LeftCurlyBracket) {
+      blockStack.push(type);
+      return;
+    }
+    if (type === tokenTypes.RightParenthesis) {
+      const open = blockStack.at(-1);
+      if (open !== tokenTypes.LeftParenthesis && open !== tokenTypes.Function) {
+        blockStack.push(Number.NaN);
+        return;
+      }
+      blockStack.pop();
+      return;
+    }
+    const expectedOpen = matchingOpenToken.get(type);
+    if (expectedOpen !== void 0) {
+      if (blockStack.at(-1) !== expectedOpen) {
+        blockStack.push(Number.NaN);
+        return;
+      }
+      blockStack.pop();
+      return;
+    }
+    if (type === tokenTypes.Semicolon && blockStack.length === 0) {
+      blockStack.push(Number.NaN);
+    }
+  });
+  return blockStack.length === 0;
+};
 var isValidDeclaration = (property, value) => {
   if (property.startsWith("--")) {
-    return true;
+    return isValidCustomPropertyValue(value);
   }
   const ast = cssTryParseValue(value);
   if (ast != null) {
@@ -10429,6 +10599,9 @@ var isValidDeclaration = (property, value) => {
   if (property === "white-space-collapse" || property === "text-wrap-mode" || property === "text-wrap-style") {
     return keywordValues[property].includes(value);
   }
+  if (typeof CSS !== "undefined" && CSS.supports(property, value)) {
+    return true;
+  }
   if (typeof CSSStyleValue !== "undefined") {
     try {
       CSSStyleValue.parse(property, value);
@@ -10449,6 +10622,9 @@ var isValidDeclaration = (property, value) => {
   if (matchResult.error?.message.includes("Unknown property")) {
     return true;
   }
+  if (matchResult.matched == null && canFallbackToCssMath(ast, getSyntaxMatchErrorSyntax(matchResult.error))) {
+    return true;
+  }
   return matchResult.matched != null;
 };
 var repeatedProps = /* @__PURE__ */ new Set([
@@ -12918,6 +13094,9 @@ var camelCaseProperty = (property) => {
   return camelCase(property);
 };
 var parseCssValue2 = (property, value) => {
+  if (property.startsWith("--")) {
+    return /* @__PURE__ */ new Map([[property, parseCssValue(property, value)]]);
+  }
   const expanded = new Map(expandShorthands([[property, value]]));
   const final = /* @__PURE__ */ new Map();
   for (const [property2, value2] of expanded) {
@@ -13290,12 +13469,29 @@ var substituteVarsInShorthand = (property, value, customProperties, cssVars) =>
 };
 var cssTreeTryParse = (input) => {
   try {
-    const ast = csstree6.parse(input);
+    const ast = csstree6.parse(input, { positions: true });
     return ast;
   } catch {
     return;
   }
 };
+var getRawDeclarationValue = (css, declaration) => {
+  const loc = declaration.value.loc;
+  if (loc === null) {
+    return;
+  }
+  return css.slice(loc.start.offset, loc.end.offset).trim();
+};
+var normalizeCustomPropertyValue = (value) => {
+  if (value === "") {
+    return value;
+  }
+  try {
+    return csstree6.generate(csstree6.parse(value, { context: "value" }));
+  } catch {
+    return value;
+  }
+};
 var extractCssCustomProperties = (css) => {
   const map = /* @__PURE__ */ new Map();
   const ast = cssTreeTryParse(css);
@@ -13308,7 +13504,10 @@ var extractCssCustomProperties = (css) => {
       const decl = node;
       const prop = normalizeProperty(decl.property);
       if (prop.startsWith("--")) {
-        map.set(prop, csstree6.generate(decl.value));
+        const value = getRawDeclarationValue(css, decl);
+        if (value !== void 0 && isValidCustomPropertyValue(value)) {
+          map.set(prop, normalizeCustomPropertyValue(value));
+        }
       }
     }
   });
@@ -13332,7 +13531,10 @@ var parseCss = (css, cssVars) => {
         const decl = node;
         const prop = normalizeProperty(decl.property);
         if (prop.startsWith("--")) {
-          customProperties.set(prop, csstree6.generate(decl.value));
+          const value = getRawDeclarationValue(css, decl);
+          if (value !== void 0 && isValidCustomPropertyValue(value)) {
+            customProperties.set(prop, normalizeCustomPropertyValue(value));
+          }
         }
       }
     });
@@ -13463,8 +13665,9 @@ var parseCss = (css, cssVars) => {
           selector = void 0;
         }
       }
-      const stringValue = csstree6.generate(node.value);
       const property = normalizeProperty(node.property);
+      const rawValue = getRawDeclarationValue(css, node);
+      const stringValue = property.startsWith("--") && rawValue !== void 0 ? isValidCustomPropertyValue(rawValue) ? normalizeCustomPropertyValue(rawValue) : rawValue : csstree6.generate(node.value).trim();
       let parsedCss;
       if (shorthandSet.has(property)) {
         const substituted = substituteVarsInShorthand(
@@ -13486,6 +13689,12 @@ var parseCss = (css, cssVars) => {
       } else {
         parsedCss = parseCssValue2(property, stringValue);
       }
+      if (property.startsWith("--") && [...parsedCss.values()].some((value) => value.type === "invalid")) {
+        errors.push(
+          `"${property}" was not applied because its value is invalid`
+        );
+        return;
+      }
       for (const { name: selector, state } of selectors) {
         for (const [prop, value] of parsedCss) {
           const normalizedProperty = normalizeProperty(prop);
@@ -17506,9 +17715,12 @@ export {
   getGridAxisLabel,
   getGridAxisMode,
   html,
+  htmlReplacedElementTags,
   isEditableGridMode,
+  isHtmlReplacedElementTag,
   isImplicitGridMode,
   isPseudoElement,
+  isValidCustomPropertyValue,
   isValidDeclaration,
   keywordValues,
   parseClassBasedSelector,

package/lib/types/html-elements.d.ts

@@ -0,0 +1,9 @@
+/**
+ * HTML elements whose rendering is replaced by external content or a
+ * browser-provided widget.
+ *
+ * This is useful for CSS rules that distinguish regular inline boxes from
+ * replaced inline boxes.
+ */
+export declare const htmlReplacedElementTags: readonly ["audio", "canvas", "embed", "iframe", "img", "input", "object", "select", "textarea", "video"];
+export declare const isHtmlReplacedElementTag: (tag: string) => tag is (typeof htmlReplacedElementTags)[number];

package/lib/types/index.d.ts

@@ -1,5 +1,6 @@
 import type {} from "./css-tree";
 export { html } from "./__generated__/html";
+export * from "./html-elements";
 export * from "./__generated__/keyword-values";
 export * from "./__generated__/units";
 export { properties as propertyDescriptions, declarations as declarationDescriptions, propertySyntaxesGenerated as propertySyntaxes, } from "./__generated__/property-value-descriptions";

package/lib/types/parse-css-value.d.ts

@@ -1,6 +1,7 @@
 import { type CssNode, type FunctionNode } from "css-tree";
 import { type ColorValue, type StyleValue, type VarValue, type CssProperty } from "@webstudio-is/css-engine";
 export declare const cssTryParseValue: (input: string) => undefined | CssNode;
+export declare const isValidCustomPropertyValue: (value: string) => boolean;
 export declare const isValidDeclaration: (property: CssProperty, value: string) => boolean;
 export declare const parseColor: (colorString: string) => undefined | ColorValue;
 export declare const parseCssVar: (node: FunctionNode) => undefined | VarValue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/css-data",
-  "version": "0.267.0",
+  "version": "0.269.0",
   "description": "CSS Data",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -36,7 +36,7 @@
     "change-case": "^5.4.4",
     "css-tree": "^3.1.0",
     "warn-once": "^0.1.1",
-    "@webstudio-is/css-engine": "0.267.0"
+    "@webstudio-is/css-engine": "0.269.0"
   },
   "scripts": {
     "typecheck": "tsgo --noEmit",