@jesscss/core 2.0.0-alpha.5 → 2.0.0-alpha.6

package/src/tree/__tests__/reference.test.ts

@@ -0,0 +1,743 @@
+import { ref, rules, decl, vardecl, spaced, any, quoted, expr, ruleset, mixin, call, compound, el, attr, keyword, EVAL } from '../index.js';
+import { Context } from '../../context.js';
+import * as Registries from '../util/registry-utils.js';
+import { isNode } from '../util/is-node.js';
+import { getSourceParent } from '../util/field-helpers.js';
+import { addParentEdge, getParentEdge } from '../util/cursor.js';
+
+let context: Context;
+
+describe('reference', () => {
+  beforeEach(() => {
+    context = new Context();
+  });
+  describe('serialization', () => {
+    it('should serialize a variable reference', () => {
+      let node = ref({ key: 'foo' }, { type: 'variable' });
+      expect(`${node}`).toBe('$foo');
+    });
+
+    it('should serialize a property reference', () => {
+      let node = ref({ key: 'foo' }, { type: 'property' });
+      expect(`${node}`).toBe('$[\'foo\']');
+    });
+
+    it('should serialize a declaration reference', () => {
+      let node = ref({ key: 'foo' }, { type: 'declaration' });
+      expect(`${node}`).toBe('$.foo');
+    });
+
+    it('should serialize an optional reference', () => {
+      let node = ref({ key: 'foo' }, { type: 'variable', fallbackValue: true });
+      expect(`${node}`).toBe('$foo?');
+    });
+
+    it('should serialize a mixin reference', () => {
+      let node = ref({ key: 'foo' }, { type: 'mixin' });
+      expect(`${node}`).toBe('|foo');
+    });
+
+    it('should serialize a ruleset reference', () => {
+      let node = ref({ key: 'foo' }, { type: 'ruleset' });
+      expect(`${node}`).toBe('*(foo)');
+    });
+
+    it('should serialize a mixin-ruleset reference', () => {
+      let node = ref({ key: 'foo' }, { type: 'mixin-ruleset' });
+      expect(`${node}`).toBe('*foo');
+    });
+
+    it('should serialize a number index', () => {
+      let node = ref({ key: 0 }, { type: 'index' });
+      expect(`${node}`).toBe('$[0]');
+    });
+
+    it('should serialize a string index', () => {
+      let node = ref({ key: 'foo' }, { type: 'index' });
+      expect(`${node}`).toBe('$[foo]');
+    });
+
+    it('should serialize a quoted index', () => {
+      let node = ref({ key: 'foo' }, { type: 'index' });
+      expect(`${node}`).toBe('$[foo]');
+    });
+
+    it('should serialize a selector index', () => {
+      let node = ref({ key: quoted('foo') }, { type: 'index' });
+      expect(`${node}`).toBe('$["foo"]');
+    });
+  });
+
+  describe('get from scope', () => {
+    it('should get a variable from scope', async () => {
+      let node = rules([
+        vardecl({
+          name: any('foo'),
+          value: any('red')
+        }),
+        decl({
+          name: any('bar'),
+          value: ref({ key: 'foo' }, { type: 'variable' })
+        })
+      ]);
+      let evald = await node.eval(context);
+      /** The var declaration will be removed when going to CSS */
+      expect(evald.render(context)).toBeString(`
+        bar: red;
+      `);
+    });
+
+    it('should get a property from scope', async () => {
+      let node = rules([
+        decl({
+          name: any('foo'),
+          value: any('red')
+        }),
+        decl({
+          name: any('bar'),
+          value: ref({ key: 'foo' }, { type: 'property' })
+        })
+      ]);
+      let evald = await node.eval(context);
+      expect(evald.render(context)).toBeString(`
+        foo: red;
+        bar: red;
+      `);
+    });
+
+    it('should get a var from scope below reference', async () => {
+      let node = rules([
+        decl({
+          name: any('bar'),
+          value: ref({ key: 'foo' }, { type: 'variable' })
+        }),
+        vardecl({
+          name: any('foo'),
+          value: any('red')
+        })
+      ]);
+      let evald = await node.eval(context);
+      /** The var declaration will be removed when going to CSS */
+      expect(evald.render(context)).toBeString(`
+        bar: red;
+      `);
+    });
+
+    it('should get a prop from scope below reference', async () => {
+      let node = rules([
+        decl({
+          name: any('bar'),
+          value: ref({ key: 'foo' }, { type: 'property' })
+        }),
+        decl({
+          name: any('foo'),
+          value: any('red')
+        })
+      ]);
+      let evald = await node.eval(context);
+      expect(evald.render(context)).toBeString(`
+        bar: red;
+        foo: red;
+      `);
+    });
+
+    it('should allow recursive referencing', async () => {
+      /**
+       * $foo: red;
+       * $foo: $foo red;
+       * bar: $foo;
+       */
+      let node = rules([
+        vardecl({
+          name: any('foo'),
+          value: any('red')
+        }),
+        vardecl({
+          name: any('foo'),
+          value: spaced([expr(ref({ key: 'foo' }, { type: 'variable' })), any('red')])
+        }),
+        decl({
+          name: any('bar'),
+          value: ref({ key: 'foo' }, { type: 'variable' })
+        })
+      ]);
+      let evald = await node.eval(context);
+      expect(evald.render(context)).toBeString(`
+        bar: red red;
+      `);
+    });
+
+    it('evaluates with a cloned variable key', async () => {
+      const lookup = ref({ key: 'foo' }, { type: 'variable' });
+      const scope = rules([
+        vardecl({
+          name: any('foo'),
+          value: any('red')
+        }),
+        vardecl({
+          name: any('bar'),
+          value: any('blue')
+        }),
+        decl({
+          name: any('color'),
+          value: lookup
+        })
+      ]);
+      const clonedScope = scope.clone(true);
+      const clonedLookup = (clonedScope.at(2, context) as ReturnType<typeof decl>).get('value') as ReturnType<typeof ref>;
+
+      (clonedLookup as unknown as { key: string }).key = 'bar';
+      const preEvald = await clonedScope.preEval(context);
+      context.root = preEvald;
+      context.rulesContext = preEvald;
+
+      const evald = await clonedLookup.eval(context);
+      expect(evald.render(context)).toBe('blue');
+      expect(lookup.get('key')).toBe('foo');
+    });
+
+    it('evaluates with a cloned target reference', async () => {
+      const target = ref({ key: '.theme-a' }, { type: 'mixin-ruleset' });
+      const lookup = ref({ target, key: 'primary' }, { type: 'property' });
+      const scope = rules([
+        ruleset({
+          selector: el('.theme-a'),
+          rules: rules([
+            decl({ name: any('primary'), value: any('red') })
+          ])
+        }),
+        ruleset({
+          selector: el('.theme-b'),
+          rules: rules([
+            decl({ name: any('primary'), value: any('blue') })
+          ])
+        }),
+        decl({
+          name: any('color'),
+          value: lookup
+        })
+      ]);
+      const clonedScope = scope.clone(true);
+      const clonedLookup = (clonedScope.at(2, context) as ReturnType<typeof decl>).get('value') as ReturnType<typeof ref>;
+      const patchedTarget = ref({ key: '.theme-b' }, { type: 'mixin-ruleset' });
+
+      clonedLookup.adopt(patchedTarget, context);
+      (clonedLookup as unknown as { target: ReturnType<typeof ref> }).target = patchedTarget;
+      const preEvald = await clonedScope.preEval(context);
+      context.root = preEvald;
+      context.rulesContext = preEvald;
+
+      const evald = await clonedLookup.eval(context);
+      expect(evald.render(context)).toBe('blue');
+      expect(lookup.get('target')).toBe(target);
+    });
+
+    it('should resolve a variable reference with a keyword key inside an attribute selector', async () => {
+      let node = rules([
+        vardecl({
+          name: any('attr-data'),
+          value: quoted('test3')
+        }),
+        ruleset({
+          selector: attr({ name: 'data', op: '=', value: ref({ key: keyword('attr-data') }, { type: 'index' }) }),
+          rules: rules([
+            decl({ name: 'color', value: any('red') })
+          ])
+        })
+      ]);
+      let evald = await node.eval(context);
+      expect(evald.render(context)).toBeString(`
+        [data="test3"] {
+          color: red;
+        }
+      `);
+    });
+
+    it('uses the render-key parent edge to anchor linear variable resolution', async () => {
+      const scope = rules([
+        vardecl({
+          name: any('foo'),
+          value: any('red')
+        }),
+        decl({
+          name: any('mid'),
+          value: any('keep')
+        }),
+        decl({
+          name: any('host'),
+          value: any('placeholder')
+        }),
+        vardecl({
+          name: any('foo'),
+          value: any('blue')
+        })
+      ]);
+
+      scope.value.forEach((child, index) => {
+        child.index = index;
+      });
+      context.renderKey = EVAL;
+      const evalScope = scope.createShallowBodyWrapper(context, EVAL);
+      context.root = evalScope;
+      context.rulesContext = evalScope;
+
+      const hostDecl = evalScope.at(2, context);
+      if (!hostDecl || !isNode(hostDecl)) {
+        throw new Error('Expected host declaration at index 2');
+      }
+
+      const lookup = ref({ key: 'foo' }, { type: 'variable', resolution: 'linear' });
+      addParentEdge(lookup, EVAL, hostDecl);
+      expect(getParentEdge({ node: lookup, renderKey: EVAL })?.node).toBe(hostDecl);
+
+      const evald = await lookup.eval(context);
+
+      expect(evald.render(context)).toBe('red');
+    });
+
+    it('uses the render-key parent edge to anchor default variable resolution without rulesContext', async () => {
+      const scope = rules([
+        vardecl({
+          name: any('foo'),
+          value: any('red')
+        }),
+        decl({
+          name: any('host'),
+          value: any('placeholder')
+        })
+      ]);
+
+      context.renderKey = EVAL;
+      const evalScope = scope.createShallowBodyWrapper(context, EVAL);
+      context.root = evalScope;
+
+      const hostDecl = evalScope.at(1, context);
+      if (!hostDecl || !isNode(hostDecl)) {
+        throw new Error('Expected host declaration at index 1');
+      }
+
+      const lookup = ref({ key: 'foo' }, { type: 'variable' });
+      addParentEdge(lookup, EVAL, hostDecl);
+
+      const evald = await lookup.eval(context);
+
+      expect(evald.render(context)).toBe('red');
+    });
+
+    it('uses the render-key parent edge for mixin lookup without an explicit target', async () => {
+      const outer = rules([
+        mixin({
+          name: any('feature'),
+          rules: rules([
+            decl({ name: any('color'), value: any('red') })
+          ])
+        })
+      ]);
+      const inner = rules([
+        call({ name: ref({ key: 'feature' }, { type: 'mixin' }) })
+      ]);
+
+      context.renderKey = EVAL;
+      const evalInner = inner.createShallowBodyWrapper(context, EVAL);
+      context.root = outer;
+      context.rulesContext = evalInner;
+      addParentEdge(evalInner, EVAL, outer);
+
+      const evald = await evalInner.at(0, context)!.eval(context);
+
+      expect(evald.render(context)).toContainString('color: red');
+    });
+  });
+
+  describe('errors', () => {
+    it('should throw if the variable is not defined', async () => {
+      let node = rules([
+        decl({
+          name: any('bar'),
+          value: ref({ key: 'foo' }, { type: 'variable' })
+        })
+      ]);
+      await expect(async () => await node.eval(context)).rejects.toThrow();
+    });
+  });
+
+  describe('nested references for mixin-ruleset lookups', () => {
+    it('keeps resolved ruleset sourceParent state-local', async () => {
+      const colors = mixin({
+        name: any('.colors'),
+        rules: rules([
+          decl({ name: 'primary', value: any('cyan') })
+        ])
+      });
+      const theme = ruleset({
+        selector: el('.theme'),
+        rules: rules([colors])
+      });
+      const node = rules([theme]);
+      const themeLookup = ref({ key: '.theme' }, { type: 'mixin-ruleset' });
+      const lookup = ref({
+        target: themeLookup,
+        key: '.colors'
+      }, { type: 'mixin-ruleset' });
+
+      const preEvald = await node.preEval(context);
+      context.root = preEvald;
+      context.rulesContext = preEvald;
+
+      const resolved = await lookup.eval(context);
+
+      expect(resolved.type).toBe('JsFunction');
+      expect(getSourceParent(theme, context)).toBe(themeLookup);
+      expect(theme.sourceParent).toBe(themeLookup);
+    });
+
+    it('should register and resolve escaped class selector via string key', async () => {
+      const node = rules([
+        ruleset({
+          selector: el('.\\123'),
+          rules: rules([
+            decl({ name: 'a', value: any('ok') })
+          ])
+        }),
+        ruleset({
+          selector: el('.out'),
+          rules: rules([
+            call({
+              name: ref({ key: '.\\123' }, { type: 'mixin-ruleset' })
+            })
+          ])
+        })
+      ]);
+      const evald = await node.eval(context);
+      expect(evald.render(context)).toBeString(`
+        .\\123 {
+          a: ok;
+        }
+        .out {
+          a: ok;
+        }
+      `);
+    });
+
+    it('should register and resolve escaped id selector via selector key reference', async () => {
+      const node = rules([
+        ruleset({
+          selector: el('#\\31a'),
+          rules: rules([
+            decl({ name: 'a', value: any('ok') })
+          ])
+        }),
+        ruleset({
+          selector: el('.out'),
+          rules: rules([
+            call({
+              name: ref({ key: el('#\\31a') }, { type: 'mixin-ruleset' })
+            })
+          ])
+        })
+      ]);
+      const evald = await node.eval(context);
+      expect(evald.render(context)).toBeString(`
+        #\\31a {
+          a: ok;
+        }
+        .out {
+          a: ok;
+        }
+      `);
+    });
+
+    it('should register and resolve escaped compound path via array key reference', async () => {
+      const node = rules([
+        ruleset({
+          selector: compound([el('.a'), el('.\\32b')]),
+          rules: rules([
+            decl({ name: 'a', value: any('ok') })
+          ])
+        }),
+        ruleset({
+          selector: el('.out'),
+          rules: rules([
+            call({
+              name: ref({
+                key: ['.a', '.\\32b']
+              }, { type: 'mixin-ruleset' })
+            })
+          ])
+        })
+      ]);
+      const evald = await node.eval(context);
+      expect(evald.render(context)).toBeString(`
+        .a.\\32b {
+          a: ok;
+        }
+        .out {
+          a: ok;
+        }
+      `);
+    });
+
+    it('should resolve nested References: #theme → .dark → .navbar → .colors', async () => {
+      // #theme {
+      //   .dark {
+      //     .navbar {
+      //       .colors() {
+      //         primary: red;
+      //       }
+      //     }
+      //   }
+      // }
+      // .output {
+      //   @colors: #theme.dark.navbar.colors();
+      //   background: @colors[primary];
+      // }
+      const node = rules([
+        ruleset({
+          selector: el('#theme'),
+          rules: rules([
+            ruleset({
+              selector: el('.dark'),
+              rules: rules([
+                ruleset({
+                  selector: el('.navbar'),
+                  rules: rules([
+                    mixin({
+                      name: any('.colors'),
+                      rules: rules([
+                        decl({ name: 'primary', value: any('red') })
+                      ])
+                    })
+                  ])
+                })
+              ])
+            })
+          ])
+        }),
+        ruleset({
+          selector: el('.output'),
+          rules: rules([
+            vardecl({
+              name: 'colors',
+              value: call({
+                name: ref({
+                  target: ref({
+                    target: ref({
+                      target: ref({ key: '#theme' }, { type: 'mixin-ruleset' }),
+                      key: '.dark'
+                    }, { type: 'mixin-ruleset' }),
+                    key: '.navbar'
+                  }, { type: 'mixin-ruleset' }),
+                  key: '.colors'
+                }, { type: 'mixin-ruleset' })
+              })
+            }),
+            decl({
+              name: 'background',
+              value: ref({
+                target: ref({ key: 'colors' }, { type: 'variable' }),
+                key: 'primary'
+              }, { type: 'property' })
+            })
+          ])
+        })
+      ]);
+      const evald = await node.eval(context);
+      expect(evald.render(context)).toBeString(`
+        .output {
+          background: red;
+        }
+      `);
+    });
+
+    it('should resolve compound selector as single Reference: #theme.dark.navbar.colors', async () => {
+      // #theme.dark.navbar {
+      //   .colors() {
+      //     primary: red;
+      //   }
+      // }
+      // .output {
+      //   @colors: #theme.dark.navbar.colors();
+      //   background: @colors[primary];
+      // }
+      const node = rules([
+        ruleset({
+          selector: compound([el('#theme'), el('.dark'), el('.navbar')]),
+          rules: rules([
+            mixin({
+              name: any('.colors'),
+              rules: rules([
+                decl({ name: 'primary', value: any('red') })
+              ])
+            })
+          ])
+        }),
+        ruleset({
+          selector: el('.output'),
+          rules: rules([
+            vardecl({
+              name: 'colors',
+              value: call({
+                name: ref({
+                  key: compound([el('#theme'), el('.dark'), el('.navbar'), el('.colors')])
+                }, { type: 'mixin-ruleset' })
+              })
+            }),
+            decl({
+              name: 'background',
+              value: ref({
+                target: ref({ key: 'colors' }, { type: 'variable' }),
+                key: 'primary'
+              }, { type: 'property' })
+            })
+          ])
+        })
+      ]);
+      const evald = await node.eval(context);
+      expect(evald.render(context)).toBeString(`
+        .output {
+          background: red;
+        }
+      `);
+    });
+
+    it('should resolve string array as key: [\'#theme\', \'.dark\', \'.navbar\', \'.colors\']', async () => {
+      // #theme.dark.navbar {
+      //   .colors() {
+      //     primary: red;
+      //   }
+      // }
+      // .output {
+      //   @colors: #theme.dark.navbar.colors();
+      //   background: @colors[primary];
+      // }
+      const node = rules([
+        ruleset({
+          selector: compound([el('#theme'), el('.dark'), el('.navbar')]),
+          rules: rules([
+            mixin({
+              name: any('.colors'),
+              rules: rules([
+                decl({ name: 'primary', value: any('red') })
+              ])
+            })
+          ])
+        }),
+        ruleset({
+          selector: el('.output'),
+          rules: rules([
+            vardecl({
+              name: 'colors',
+              value: call({
+                name: ref({
+                  key: ['#theme', '.dark', '.navbar', '.colors']
+                }, { type: 'mixin-ruleset' })
+              })
+            }),
+            decl({
+              name: 'background',
+              value: ref({
+                target: ref({ key: 'colors' }, { type: 'variable' }),
+                key: 'primary'
+              }, { type: 'property' })
+            })
+          ])
+        })
+      ]);
+      const evald = await node.eval(context);
+      expect(evald.render(context)).toBeString(`
+        .output {
+          background: red;
+        }
+      `);
+    });
+
+    it('should prefer compound ruleset over nested mixin lookup', async () => {
+      // #theme {
+      //   .dark {
+      //     .navbar() {
+      //       .colors() {
+      //         primary: cyan;
+      //       }
+      //     }
+      //   }
+      // }
+      // #theme.dark.navbar {
+      //   .colors() {
+      //     primary: red;
+      //   }
+      // }
+      // .output {
+      //   @colors: #theme.dark.navbar.colors();
+      //   background: @colors[primary];
+      // }
+      // Should use the compound ruleset (#theme.dark.navbar) which has .colors() with primary: red
+      const node = rules([
+        mixin({
+          name: any('#theme'),
+          rules: rules([
+            mixin({
+              name: any('.dark'),
+              rules: rules([
+                mixin({
+                  name: any('.navbar'),
+                  rules: rules([
+                    mixin({
+                      name: any('.colors'),
+                      rules: rules([
+                        decl({ name: 'primary', value: any('cyan') })
+                      ])
+                    })
+                  ])
+                })
+              ])
+            })
+          ])
+        }),
+        ruleset({
+          selector: compound([el('#theme'), el('.dark'), el('.navbar')]),
+          rules: rules([
+            mixin({
+              name: any('.colors'),
+              rules: rules([
+                decl({ name: 'primary', value: any('red') })
+              ])
+            })
+          ])
+        }),
+        ruleset({
+          selector: el('.output'),
+          rules: rules([
+            vardecl({
+              name: 'colors',
+              value: call({
+                name: ref({
+                  target: ref({
+                    target: ref({
+                      target: ref({ key: '#theme' }, { type: 'mixin-ruleset' }),
+                      key: '.dark'
+                    }, { type: 'mixin-ruleset' }),
+                    key: '.navbar'
+                  }, { type: 'mixin-ruleset' }),
+                  key: '.colors'
+                }, { type: 'mixin-ruleset' })
+              })
+            }),
+            decl({
+              name: 'background',
+              value: ref({
+                target: ref({ key: 'colors' }, { type: 'variable' }),
+                key: 'primary'
+              }, { type: 'property' })
+            })
+          ])
+        })
+      ]);
+      const evald = await node.eval(context);
+      expect(evald.render(context)).toBeString(`
+        .output {
+          background: cyan;
+        }
+      `);
+    });
+  });
+});