@webstudio-is/css-engine 0.56.0 → 0.58.0

package/lib/types/core/css-engine.d.ts

@@ -1,6 +1,10 @@
-import type { CssRule } from "@webstudio-is/css-data";
+import type { Style } from "@webstudio-is/css-data";
 import { MediaRule, PlaintextRule, StyleRule, type FontFaceOptions, type MediaRuleOptions } from "./rules";
 import type { TransformValue } from "./to-value";
+type CssRule = {
+    style: Style;
+    breakpoint?: string;
+};
 export type CssEngineOptions = {
     name?: string;
 };
@@ -18,3 +22,4 @@ export declare class CssEngine {
     getAttribute(name: string): string | null | undefined;
     get cssText(): string;
 }
+export {};

package/package.json

@@ -1,30 +1,29 @@
 {
   "name": "@webstudio-is/css-engine",
-  "version": "0.56.0",
+  "version": "0.58.0",
   "description": "CSS Renderer for Webstudio",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "type": "module",
   "dependencies": {
     "hyphenate-style-name": "^1.0.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "@webstudio-is/fonts": "^0.56.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@webstudio-is/css-data": "^0.58.0",
+    "@webstudio-is/fonts": "^0.58.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.3.1",
     "@storybook/react": "^6.5.16",
     "@types/hyphenate-style-name": "^1.0.0",
-    "@types/react": "^17.0.24",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.0.35",
+    "@types/react-dom": "^18.0.11",
     "jest": "^29.3.1",
     "typescript": "5.0.3",
-    "@webstudio-is/asset-uploader": "^0.56.0",
-    "@webstudio-is/css-data": "^0.56.0",
-    "@webstudio-is/jest-config": "^1.0.2",
+    "@webstudio-is/jest-config": "^1.0.5",
     "@webstudio-is/scripts": "^0.0.0",
     "@webstudio-is/storybook-config": "^0.0.0",
-    "@webstudio-is/tsconfig": "^1.0.3"
+    "@webstudio-is/tsconfig": "^1.0.5"
   },
   "exports": {
     "source": "./src/index.ts",
@@ -40,11 +39,11 @@
   "private": false,
   "sideEffects": false,
   "scripts": {
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --noEmit --emitDeclarationOnly false",
     "checks": "pnpm typecheck && pnpm lint && pnpm test",
     "dev": "build-package --watch",
     "build": "build-package",
-    "dts": "tsc --emitDeclarationOnly --declaration --declarationDir lib/types",
+    "dts": "tsc --declarationDir lib/types",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest",
     "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
     "storybook:run": "start-storybook -p 6006",

package/src/core/css-engine.stories.tsx

@@ -34,7 +34,7 @@ export const Basic = () => {
         onClick={() => {
           engine.addStyleRule(".test", {
             style: {
-              background: { type: "keyword", value: "yellow" },
+              backgroundColor: { type: "keyword", value: "yellow" },
             },
             breakpoint: "0",
           });

package/src/core/css-engine.test.ts

@@ -1,5 +1,4 @@
 import { describe, beforeEach, test, expect } from "@jest/globals";
-import type { Assets } from "@webstudio-is/asset-uploader";
 import { CssEngine } from "./css-engine";
 
 const style0 = {
@@ -352,23 +351,8 @@ describe("CssEngine", () => {
   });
 
   test("render images with injected asset url", () => {
-    const assets: Assets = new Map([
-      [
-        "1234",
-        {
-          type: "image",
-          path: "foo.png",
-          id: "1234567890",
-          projectId: "",
-          format: "",
-          size: 1212,
-          name: "img",
-          description: "",
-          location: "REMOTE",
-          createdAt: "",
-          meta: { width: 1, height: 2 },
-        },
-      ],
+    const assets = new Map<string, { path: string }>([
+      ["1234", { path: "foo.png" }],
     ]);
     const rule = engine.addStyleRule(
       ".c",

package/src/core/css-engine.ts

@@ -1,4 +1,4 @@
-import type { CssRule } from "@webstudio-is/css-data";
+import type { Style } from "@webstudio-is/css-data";
 import {
   FontFaceRule,
   MediaRule,
@@ -14,6 +14,11 @@ import type { TransformValue } from "./to-value";
 
 const defaultMediaRuleId = "__default-media-rule__";
 
+type CssRule = {
+  style: Style;
+  breakpoint?: string;
+};
+
 export type CssEngineOptions = { name?: string };
 
 export class CssEngine {

package/src/core/to-value.test.ts

@@ -1,5 +1,4 @@
 import { describe, test, expect } from "@jest/globals";
-import type { Assets } from "@webstudio-is/asset-uploader";
 import { toValue } from "./to-value";
 
 describe("Convert WS CSS Values to native CSS strings", () => {
@@ -74,24 +73,8 @@ describe("Convert WS CSS Values to native CSS strings", () => {
   });
 
   test("array", () => {
-    const assets: Assets = new Map([
-      [
-        "1234567890",
-        {
-          type: "image",
-          path: "foo.png",
-
-          id: "1234567890",
-          projectId: "",
-          format: "",
-          size: 1212,
-          name: "img",
-          description: "",
-          location: "REMOTE",
-          createdAt: "",
-          meta: { width: 1, height: 2 },
-        },
-      ],
+    const assets = new Map<string, { path: string }>([
+      ["1234567890", { path: "foo.png" }],
     ]);
 
     const value = toValue(