@webstudio-is/css-engine 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/lib/core/css-engine.d.ts +1 -1
  2. package/lib/core/css-engine.d.ts.map +1 -1
  3. package/lib/core/css-engine.js +5 -4
  4. package/lib/core/css-engine.stories.d.ts +1 -0
  5. package/lib/core/css-engine.stories.d.ts.map +1 -1
  6. package/lib/core/css-engine.test.js +3 -3
  7. package/lib/core/rules.d.ts +1 -0
  8. package/lib/core/rules.d.ts.map +1 -1
  9. package/lib/core/rules.js +5 -0
  10. package/package.json +1 -1
package/lib/core/css-engine.d.ts CHANGED
@@ -4,7 +4,7 @@ export declare class CssEngine {
4
4
  #private;
5
5
  constructor();
6
6
  addMediaRule(id: string, options?: MediaRuleOptions): MediaRule;
7
- addStyleRule(selectorText: string, rule: CssRule): StyleRule | PlaintextRule;
7
+ addStyleRule(selectorText: string, rule: CssRule): StyleRule;
8
8
  addPlaintextRule(cssText: string): PlaintextRule | Map<string, PlaintextRule>;
9
9
  addFontFaceRule(options: FontFaceOptions): number;
10
10
  clear(): void;
package/lib/core/css-engine.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"css-engine.d.ts","sourceRoot":"","sources":["../../src/core/css-engine.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAEL,SAAS,EACT,aAAa,EACb,SAAS,EACT,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACtB,MAAM,SAAS,CAAC;AAMjB,qBAAa,SAAS;;;IAapB,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,gBAAgB;IASnD,YAAY,CAAC,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO;IAahD,gBAAgB,CAAC,OAAO,EAAE,MAAM;IAKhC,eAAe,CAAC,OAAO,EAAE,eAAe;IAGxC,KAAK;IAML,MAAM;IAKN,OAAO;IAGP,IAAI,OAAO,WAiBV;CAKF"}
1
+ {"version":3,"file":"css-engine.d.ts","sourceRoot":"","sources":["../../src/core/css-engine.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAEL,SAAS,EACT,aAAa,EACb,SAAS,EACT,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACtB,MAAM,SAAS,CAAC;AAMjB,qBAAa,SAAS;;;IAYpB,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,gBAAgB;IASnD,YAAY,CAAC,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO;IAYhD,gBAAgB,CAAC,OAAO,EAAE,MAAM;IAMhC,eAAe,CAAC,OAAO,EAAE,eAAe;IAIxC,KAAK;IAML,MAAM;IAKN,OAAO;IAGP,IAAI,OAAO,WAiBV;CAKF"}
package/lib/core/css-engine.js CHANGED
@@ -28,7 +28,6 @@ export class CssEngine {
28
28
  });
29
29
  __classPrivateFieldSet(this, _CssEngine_element, new StyleElement(), "f");
30
30
  __classPrivateFieldSet(this, _CssEngine_sheet, new StyleSheet(__classPrivateFieldGet(this, _CssEngine_element, "f")), "f");
31
- this.addMediaRule(defaultMediaRuleId);
32
31
  }
33
32
  addMediaRule(id, options) {
34
33
  let mediaRule = __classPrivateFieldGet(this, _CssEngine_mediaRules, "f").get(id);
@@ -40,8 +39,7 @@ export class CssEngine {
40
39
  return mediaRule;
41
40
  }
42
41
  addStyleRule(selectorText, rule) {
43
- const mediaRule = __classPrivateFieldGet(this, _CssEngine_mediaRules, "f").get(rule.breakpoint) ??
44
- __classPrivateFieldGet(this, _CssEngine_mediaRules, "f").get(defaultMediaRuleId);
42
+ const mediaRule = this.addMediaRule(rule.breakpoint || defaultMediaRuleId);
45
43
  __classPrivateFieldSet(this, _CssEngine_isDirty, true, "f");
46
44
  const styleRule = new StyleRule(selectorText, rule.style);
47
45
  styleRule.onChange = __classPrivateFieldGet(this, _CssEngine_onChangeRule, "f");
@@ -49,15 +47,18 @@ export class CssEngine {
49
47
  // Should be impossible to reach.
50
48
  throw new Error("No media rule found");
51
49
  }
52
- return mediaRule.insertRule(styleRule);
50
+ mediaRule.insertRule(styleRule);
51
+ return styleRule;
53
52
  }
54
53
  addPlaintextRule(cssText) {
55
54
  const rule = __classPrivateFieldGet(this, _CssEngine_plainRules, "f").get(cssText);
56
55
  if (rule !== undefined)
57
56
  return rule;
57
+ __classPrivateFieldSet(this, _CssEngine_isDirty, true, "f");
58
58
  return __classPrivateFieldGet(this, _CssEngine_plainRules, "f").set(cssText, new PlaintextRule(cssText));
59
59
  }
60
60
  addFontFaceRule(options) {
61
+ __classPrivateFieldSet(this, _CssEngine_isDirty, true, "f");
61
62
  return __classPrivateFieldGet(this, _CssEngine_fontFaceRules, "f").push(new FontFaceRule(options));
62
63
  }
63
64
  clear() {
package/lib/core/css-engine.stories.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  declare const _default: {
2
3
  component: string;
3
4
  };
package/lib/core/css-engine.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"css-engine.stories.d.ts","sourceRoot":"","sources":["../../src/core/css-engine.stories.tsx"],"names":[],"mappings":";;;AAEA,wBAEE;AASF,eAAO,MAAM,KAAK,mBAkCjB,CAAC"}
1
+ {"version":3,"file":"css-engine.stories.d.ts","sourceRoot":"","sources":["../../src/core/css-engine.stories.tsx"],"names":[],"mappings":";;;;AAEA,wBAEE;AASF,eAAO,MAAM,KAAK,mBAkCjB,CAAC"}
package/lib/core/css-engine.test.js CHANGED
@@ -12,7 +12,7 @@ describe("CssEngine", () => {
12
12
  test("use default media rule when there is no matching one registrered", () => {
13
13
  engine.addStyleRule(".c", {
14
14
  style: style0,
15
- breakpoint: "0",
15
+ breakpoint: "x",
16
16
  });
17
17
  expect(engine.cssText).toMatchInlineSnapshot(`
18
18
  "@media all {
@@ -21,7 +21,7 @@ describe("CssEngine", () => {
21
21
  `);
22
22
  engine.addStyleRule(".c1", {
23
23
  style: { color: { type: "keyword", value: "red" } },
24
- breakpoint: "0",
24
+ breakpoint: "x",
25
25
  });
26
26
  expect(engine.cssText).toMatchInlineSnapshot(`
27
27
  "@media all {
@@ -32,7 +32,7 @@ describe("CssEngine", () => {
32
32
  engine.addMediaRule(mediaId, mediaRuleOptions0);
33
33
  engine.addStyleRule(".c1", {
34
34
  style: { color: { type: "keyword", value: "blue" } },
35
- breakpoint: "0",
35
+ breakpoint: mediaId,
36
36
  });
37
37
  // Default media query should allways be the first to have the lowest source order specificity
38
38
  expect(engine.cssText).toMatchInlineSnapshot(`
package/lib/core/rules.d.ts CHANGED
@@ -3,6 +3,7 @@ declare class StylePropertyMap {
3
3
  #private;
4
4
  onChange?: () => void;
5
5
  set(property: StyleProperty, value?: StyleValue): void;
6
+ clear(): void;
6
7
  toString(): string;
7
8
  }
8
9
  export declare class StyleRule {
package/lib/core/rules.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"rules.d.ts","sourceRoot":"","sources":["../../src/core/rules.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAI/E,cAAM,gBAAgB;;IAIpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,GAAG,CAAC,QAAQ,EAAE,aAAa,EAAE,KAAK,CAAC,EAAE,UAAU;IAK/C,QAAQ;CAaT;AAED,qBAAa,SAAS;;IACpB,QAAQ,mBAAC;IACT,YAAY,SAAC;IACb,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;gBACV,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK;IAY9C,IAAI,OAAO,WAEV;CACF;AAED,oBAAY,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,CAAC;CACxC,CAAC;AAEF,qBAAa,SAAS;;IAEpB,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,aAAa,CAAC,CAAM;gBAEjC,OAAO,GAAE,gBAAqB;IAI1C,UAAU,CAAC,IAAI,EAAE,SAAS,GAAG,aAAa;IAI1C,IAAI,OAAO,WAcV;CACF;AAED,qBAAa,aAAa;IACxB,OAAO,SAAC;IACR,QAAQ,gBAAa;gBACT,OAAO,EAAE,MAAM;CAG5B;AAED,oBAAY,eAAe,GAAG;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC3C,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC;IACjE,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,qBAAa,YAAY;;gBAEX,OAAO,EAAE,eAAe;IAGpC,IAAI,OAAO,WAIV;CACF;AAED,oBAAY,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,GAAG,YAAY,CAAC"}
1
+ {"version":3,"file":"rules.d.ts","sourceRoot":"","sources":["../../src/core/rules.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAI/E,cAAM,gBAAgB;;IAIpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,GAAG,CAAC,QAAQ,EAAE,aAAa,EAAE,KAAK,CAAC,EAAE,UAAU;IAK/C,KAAK;IAKL,QAAQ;CAaT;AAED,qBAAa,SAAS;;IACpB,QAAQ,mBAAC;IACT,YAAY,SAAC;IACb,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;gBACV,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK;IAY9C,IAAI,OAAO,WAEV;CACF;AAED,oBAAY,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,CAAC;CACxC,CAAC;AAEF,qBAAa,SAAS;;IAEpB,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,aAAa,CAAC,CAAM;gBAEjC,OAAO,GAAE,gBAAqB;IAI1C,UAAU,CAAC,IAAI,EAAE,SAAS,GAAG,aAAa;IAI1C,IAAI,OAAO,WAcV;CACF;AAED,qBAAa,aAAa;IACxB,OAAO,SAAC;IACR,QAAQ,gBAAa;gBACT,OAAO,EAAE,MAAM;CAG5B;AAED,oBAAY,eAAe,GAAG;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC3C,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC;IACjE,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,qBAAa,YAAY;;gBAEX,OAAO,EAAE,eAAe;IAGpC,IAAI,OAAO,WAIV;CACF;AAED,oBAAY,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,GAAG,YAAY,CAAC"}
package/lib/core/rules.js CHANGED
@@ -23,6 +23,11 @@ class StylePropertyMap {
23
23
  __classPrivateFieldSet(this, _StylePropertyMap_isDirty, true, "f");
24
24
  this.onChange?.();
25
25
  }
26
+ clear() {
27
+ __classPrivateFieldGet(this, _StylePropertyMap_styleMap, "f").clear();
28
+ __classPrivateFieldSet(this, _StylePropertyMap_isDirty, true, "f");
29
+ this.onChange?.();
30
+ }
26
31
  toString() {
27
32
  if (__classPrivateFieldGet(this, _StylePropertyMap_isDirty, "f") === false) {
28
33
  return __classPrivateFieldGet(this, _StylePropertyMap_string, "f");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webstudio-is/css-engine",
3
- "version": "0.2.0",
3
+ "version": "0.3.0",
4
4
  "description": "CSS Renderer for Webstudio",
5
5
  "author": "Webstudio <github@webstudio.is>",
6
6
  "homepage": "https://webstudio.is",