@webstudio-is/css-data 0.44.0 → 0.46.0

package/lib/cjs/schema.cjs

@@ -20,7 +20,14 @@ var schema_exports = {};
 __export(schema_exports, {
   CssRule: () => CssRule,
   ImageValue: () => ImageValue,
+  InvalidValue: () => InvalidValue,
+  KeywordValue: () => KeywordValue,
+  LayersValue: () => LayersValue,
   SharedStyleValue: () => SharedStyleValue,
+  TupleValue: () => TupleValue,
+  TupleValueItem: () => TupleValueItem,
+  UnitValue: () => UnitValue,
+  UnparsedValue: () => UnparsedValue,
   validStaticValueTypes: () => validStaticValueTypes
 });
 module.exports = __toCommonJS(schema_exports);
@@ -67,9 +74,16 @@ const UnsetValue = import_zod.z.object({
   type: import_zod.z.literal("unset"),
   value: import_zod.z.literal("")
 });
-const ArrayValue = import_zod.z.object({
+const LayersValue = import_zod.z.object({
   type: import_zod.z.literal("layers"),
-  value: import_zod.z.array(import_zod.z.union([UnitValue, KeywordValue, UnparsedValue, ImageValue]))
+  value: import_zod.z.array(
+    import_zod.z.union([UnitValue, KeywordValue, UnparsedValue, ImageValue, InvalidValue])
+  )
+});
+const TupleValueItem = import_zod.z.union([UnitValue, KeywordValue, UnparsedValue]);
+const TupleValue = import_zod.z.object({
+  type: import_zod.z.literal("tuple"),
+  value: import_zod.z.array(TupleValueItem)
 });
 const validStaticValueTypes = [
   "unit",
@@ -78,7 +92,8 @@ const validStaticValueTypes = [
   "rgb",
   "image",
   "unparsed",
-  "array"
+  "layers",
+  "tuple"
 ];
 const SharedStaticStyleValue = import_zod.z.union([
   UnitValue,
@@ -86,9 +101,13 @@ const SharedStaticStyleValue = import_zod.z.union([
   FontFamilyValue,
   RgbValue,
   UnparsedValue,
-  ArrayValue
+  TupleValue
+]);
+const ValidStaticStyleValue = import_zod.z.union([
+  ImageValue,
+  LayersValue,
+  SharedStaticStyleValue
 ]);
-const ValidStaticStyleValue = import_zod.z.union([ImageValue, SharedStaticStyleValue]);
 const VarValue = import_zod.z.object({
   type: import_zod.z.literal("var"),
   value: import_zod.z.string(),

package/lib/schema.js

@@ -41,9 +41,16 @@ const UnsetValue = z.object({
   type: z.literal("unset"),
   value: z.literal("")
 });
-const ArrayValue = z.object({
+const LayersValue = z.object({
   type: z.literal("layers"),
-  value: z.array(z.union([UnitValue, KeywordValue, UnparsedValue, ImageValue]))
+  value: z.array(
+    z.union([UnitValue, KeywordValue, UnparsedValue, ImageValue, InvalidValue])
+  )
+});
+const TupleValueItem = z.union([UnitValue, KeywordValue, UnparsedValue]);
+const TupleValue = z.object({
+  type: z.literal("tuple"),
+  value: z.array(TupleValueItem)
 });
 const validStaticValueTypes = [
   "unit",
@@ -52,7 +59,8 @@ const validStaticValueTypes = [
   "rgb",
   "image",
   "unparsed",
-  "array"
+  "layers",
+  "tuple"
 ];
 const SharedStaticStyleValue = z.union([
   UnitValue,
@@ -60,9 +68,13 @@ const SharedStaticStyleValue = z.union([
   FontFamilyValue,
   RgbValue,
   UnparsedValue,
-  ArrayValue
+  TupleValue
+]);
+const ValidStaticStyleValue = z.union([
+  ImageValue,
+  LayersValue,
+  SharedStaticStyleValue
 ]);
-const ValidStaticStyleValue = z.union([ImageValue, SharedStaticStyleValue]);
 const VarValue = z.object({
   type: z.literal("var"),
   value: z.string(),
@@ -88,6 +100,13 @@ const CssRule = z.object({
 export {
   CssRule,
   ImageValue,
+  InvalidValue,
+  KeywordValue,
+  LayersValue,
   SharedStyleValue,
+  TupleValue,
+  TupleValueItem,
+  UnitValue,
+  UnparsedValue,
   validStaticValueTypes
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/css-data",
-  "version": "0.44.0",
+  "version": "0.46.0",
   "description": "CSS Data",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -12,7 +12,7 @@
     "mdn-data": "2.0.30",
     "typescript": "4.9.5",
     "zod": "^3.19.1",
-    "@webstudio-is/asset-uploader": "^0.44.0",
+    "@webstudio-is/asset-uploader": "^0.46.0",
     "@webstudio-is/scripts": "^0.0.0",
     "@webstudio-is/tsconfig": "^1.0.1"
   },

package/src/schema.ts

@@ -30,7 +30,7 @@ const Unit = z.union([
 
 export type Unit = z.infer<typeof Unit>;
 
-const UnitValue = z.object({
+export const UnitValue = z.object({
   type: z.literal("unit"),
   unit: Unit,
   value: z.number(),
@@ -38,7 +38,7 @@ const UnitValue = z.object({
 
 export type UnitValue = z.infer<typeof UnitValue>;
 
-const KeywordValue = z.object({
+export const KeywordValue = z.object({
   type: z.literal("keyword"),
   // @todo use exact type
   value: z.string(),
@@ -48,7 +48,7 @@ export type KeywordValue = z.infer<typeof KeywordValue>;
 /**
  * Valid unparsed css value
  **/
-const UnparsedValue = z.object({
+export const UnparsedValue = z.object({
   type: z.literal("unparsed"),
   value: z.string(),
 });
@@ -77,7 +77,7 @@ export type ImageValue = z.infer<typeof ImageValue>;
 
 // We want to be able to render the invalid value
 // and show it is invalid visually, without saving it to the db
-const InvalidValue = z.object({
+export const InvalidValue = z.object({
   type: z.literal("invalid"),
   value: z.string(),
 });
@@ -91,12 +91,31 @@ export type UnsetValue = z.infer<typeof UnsetValue>;
 
 // To support background layers https://developer.mozilla.org/en-US/docs/Web/CSS/background
 // and similar comma separated css properties
-const ArrayValue = z.object({
+// InvalidValue used in case of asset not found
+export const LayersValue = z.object({
   type: z.literal("layers"),
-  value: z.array(z.union([UnitValue, KeywordValue, UnparsedValue, ImageValue])),
+  value: z.array(
+    z.union([UnitValue, KeywordValue, UnparsedValue, ImageValue, InvalidValue])
+  ),
 });
-export type ArrayValue = z.infer<typeof ArrayValue>;
 
+export type LayersValue = z.infer<typeof LayersValue>;
+
+export const TupleValueItem = z.union([UnitValue, KeywordValue, UnparsedValue]);
+export type TupleValueItem = z.infer<typeof TupleValueItem>;
+
+export const TupleValue = z.object({
+  type: z.literal("tuple"),
+  value: z.array(TupleValueItem),
+});
+
+export type TupleValue = z.infer<typeof TupleValue>;
+
+/**
+ * All StyleValue types that going to need wrapping into a CSS variable when rendered
+ * on canvas inside builder.
+ * Values like InvalidValue, UnsetValue, VarValue don't need to be wrapped
+ */
 export const validStaticValueTypes = [
   "unit",
   "keyword",
@@ -104,7 +123,8 @@ export const validStaticValueTypes = [
   "rgb",
   "image",
   "unparsed",
-  "array",
+  "layers",
+  "tuple",
 ] as const;
 
 /**
@@ -117,10 +137,14 @@ const SharedStaticStyleValue = z.union([
   FontFamilyValue,
   RgbValue,
   UnparsedValue,
-  ArrayValue,
+  TupleValue,
 ]);
 
-const ValidStaticStyleValue = z.union([ImageValue, SharedStaticStyleValue]);
+const ValidStaticStyleValue = z.union([
+  ImageValue,
+  LayersValue,
+  SharedStaticStyleValue,
+]);
 
 export type ValidStaticStyleValue = z.infer<typeof ValidStaticStyleValue>;