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

package/src/tree/selector-attr.ts

@@ -0,0 +1,172 @@
+import type { Class } from 'type-fest';
+import { defineType, type OptionalLocation, Node, type NodeOptions } from './node.js';
+import { type TreeContext } from '../context.js';
+import { SimpleSelector } from './selector-simple.js';
+import { type PrintOptions, getPrintOptions } from './util/print.js';
+import type { Context } from '../context.js';
+import { isThenable, type MaybePromise } from '@jesscss/awaitable-pipe';
+
+export type AttributeSelectorValue = {
+  /** The name of the attribute */
+  name: string | Node;
+  /** The operator */
+  op?: string;
+  /** The value of the attribute */
+  value?: Node;
+  /** The modifier (case insensitivity) */
+  mod?: string;
+};
+
+export type AttributeSelectorChildData = {
+  name: string | Node;
+  op: string | undefined;
+  value: Node | undefined;
+  mod: string | undefined;
+};
+
+/**
+ * An attribute selector
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
+ *   e.g. [id="foo"]
+*/
+export interface AttributeSelector {
+  type: 'AttributeSelector';
+  shortType: 'attr';
+}
+
+export class AttributeSelector extends SimpleSelector<AttributeSelectorValue, NodeOptions, AttributeSelectorChildData> {
+  static override childKeys = ['name', 'value'] as const;
+
+  name!: string | Node;
+  private op: string | undefined;
+  value: Node | undefined;
+  private mod: string | undefined;
+
+  override clone(deep?: boolean): this {
+    const newNode = new (this.constructor as Class<this>)(
+      {
+        name: deep && this.name instanceof Node ? this.name.clone(deep) : this.name,
+        op: this.op,
+        value: deep && this.value instanceof Node ? this.value.clone(deep) : this.value,
+        mod: this.mod
+      },
+      undefined,
+      this.location,
+      this.treeContext
+    );
+    newNode.inherit(this);
+    return newNode;
+  }
+
+  constructor(data: AttributeSelectorValue, options?: undefined, location?: OptionalLocation, treeContext?: TreeContext) {
+    super(data, options, location, treeContext);
+    this.name = data.name;
+    this.op = data.op;
+    this.value = data.value;
+    this.mod = data.mod;
+    if (this.name instanceof Node) {
+      this.adopt(this.name as Node);
+    }
+    if (this.value instanceof Node) {
+      this.adopt(this.value);
+    }
+  }
+
+  private _setName(name: string | Node, context?: Context): void {
+    if (name instanceof Node) {
+      this.adopt(name, context);
+    }
+    this.name = name;
+  }
+
+  private _setValue(value: Node | undefined, context?: Context): void {
+    if (value instanceof Node) {
+      this.adopt(value, context);
+    }
+    this.value = value;
+  }
+
+  override evalNode(context: Context): MaybePromise<this> {
+    const currentName = this.get('name', context);
+    const currentValue = this.get('value', context);
+    const maybeName = typeof currentName === 'string'
+      ? currentName
+      : currentName.eval(context);
+    const maybeValue = currentValue?.eval(context);
+    const finish = (name: string | Node, value: Node | undefined): this => {
+      const node = this.clone();
+
+      if (name !== currentName) {
+        node._setName(name, context);
+      }
+      if (value !== currentValue) {
+        node._setValue(value, context);
+      }
+
+      return node;
+    };
+
+    if (isThenable(maybeName) || isThenable(maybeValue)) {
+      return Promise.all([
+        Promise.resolve(maybeName),
+        Promise.resolve(maybeValue)
+      ]).then(([name, value]) => finish(name, value));
+    }
+
+    return finish(maybeName as string | Node, maybeValue as Node | undefined);
+  }
+
+  override toTrimmedString(options?: PrintOptions) {
+    options = getPrintOptions(options);
+    const w = options.writer!;
+    const mark = w.mark();
+    const context = options.context;
+    const name = this.get('name', context);
+    const value = this.get('value', context);
+    const op = this.get('op');
+    const mod = this.get('mod');
+    w.add('[');
+    if (typeof name === 'string') {
+      w.add(name, this);
+    } else {
+      name.toString(options);
+    }
+    if (op) {
+      w.add(op);
+    }
+    if (value) {
+      value.toString(options);
+    }
+    if (mod) {
+      w.add(' ');
+      w.add(mod);
+    }
+    w.add(']');
+    return w.getSince(mark);
+  }
+
+  override valueOf() {
+    let valueOf = this._valueOf;
+    if (!valueOf) {
+      let name = this.name;
+      let op = this.op;
+      let value = this.value;
+      let mod = this.mod;
+      let keyStr = (typeof name === 'string' ? name : name.toTrimmedString()).toLowerCase();
+      if (!op) {
+        return `[${keyStr}]`;
+      }
+      let valueStr = value?.valueOf() ?? '';
+      valueOf = this._valueOf = `[${keyStr}${op}"${valueStr}"${mod ? ` ${mod}` : ''}]`;
+    }
+    return valueOf;
+  }
+}
+
+/** Not sure why types couldn't be properly inferred */
+export const attr = defineType<AttributeSelectorValue>(AttributeSelector, 'AttributeSelector', 'attr') as (
+  value: AttributeSelectorValue,
+  options?: undefined,
+  location?: OptionalLocation | 0,
+  treeContext?: TreeContext
+) => AttributeSelector;

package/src/tree/selector-basic.ts

@@ -0,0 +1,75 @@
+import type { Context } from '../context.js';
+import { defineType, F_STATIC, type OptionalLocation, type NodeOptions, type TreeContext } from './node.js';
+import { SimpleSelector } from './selector-simple.js';
+
+export interface BasicSelector extends SimpleSelector<string> {
+  type: 'BasicSelector';
+  shortType: 'el';
+  eval(context: Context): BasicSelector;
+}
+
+/**
+ * A basic selector
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators#basic_selectors
+ *   e.g. div, .foo, #bar
+*/
+export class BasicSelector extends SimpleSelector<string> {
+  static override childKeys = null as null;
+
+  value!: string;
+
+  constructor(
+    value: string,
+    options?: NodeOptions,
+    location?: OptionalLocation,
+    treeContext?: TreeContext
+  ) {
+    super(value, options, location, treeContext);
+    this.value = value;
+    this.addFlag(F_STATIC);
+  }
+
+  get isClass() {
+    return /^\./.test(this.value);
+  }
+
+  get isId() {
+    return /^#/.test(this.value);
+  }
+
+  /** A tag-type selector */
+  get isTag() {
+    return /^[^.#*]/.test(this.value);
+  }
+
+  override evalNode(context: Context): BasicSelector {
+    const node = super.evalNode(context) as BasicSelector;
+    if (node.isClass) {
+      context.hashClass(node.value);
+    }
+    return node;
+  }
+
+  override valueOf(): string {
+    return (this._valueOf ??= (this.isTag ? this.value.toLowerCase() : this.value));
+  }
+
+  /** @todo - move to visitors */
+  // toCSS(context: Context, out: OutputCollector) {
+  //   if (this.isClass) {
+  //     out.add(context.hashClass(this.data.value), this.location)
+  //   } else {
+  //     out.add(this.data.value, this.location)
+  //   }
+  // }
+
+  // toModule(context: Context, out: OutputCollector) {
+  //   const loc = this.location
+  //   out.add('$J.el(', loc)
+  //   this.data.toModule(context, out)
+  //   out.add(')')
+  // }
+}
+
+/** Short form of a basic selector is a short 'el' for 'element' */
+export const el = defineType(BasicSelector, 'BasicSelector', 'el');

package/src/tree/selector-capture.ts

@@ -0,0 +1,85 @@
+import { type Context } from '../context.js';
+import { Node, defineType, type OptionalLocation, type NodeOptions, type TreeContext } from './node.js';
+import { Selector } from './selector.js';
+import { type PrintOptions, getPrintOptions } from './util/print.js';
+import { type MaybePromise, isThenable } from '@jesscss/awaitable-pipe';
+
+export type SelectorCaptureChildData = { value: Selector };
+
+export interface SelectorCapture extends Node<Selector, NodeOptions, SelectorCaptureChildData> {
+  type: 'SelectorCapture';
+  shortType: 'selcap';
+  eval(context: Context): MaybePromise<Selector>;
+}
+
+/**
+ * Explicit selector-capture wrapper used by parsers for selector-valued payloads
+ * (e.g. Less `*[ ... ]`, Sass `selector.parse("...")`).
+ */
+export class SelectorCapture extends Node<Selector, NodeOptions, SelectorCaptureChildData> {
+  static override childKeys = ['value'] as const;
+
+  readonly value!: Selector;
+
+  constructor(value: Selector, options?: NodeOptions, location?: OptionalLocation, treeContext?: TreeContext) {
+    super(value, options, location, treeContext);
+    this.value = value;
+    if (this.value instanceof Node) {
+      this.adopt(this.value);
+    }
+  }
+
+  override valueOf(): string {
+    return String(this.value.valueOf());
+  }
+
+  override toTrimmedString(options?: PrintOptions): string {
+    options = getPrintOptions(options);
+    const w = options.writer!;
+    const mark = w.mark();
+    const value = this.value;
+    w.add('*[', this);
+    value.toString(options);
+    w.add(']', this);
+    return w.getSince(mark);
+  }
+
+  override preEval(context: Context): MaybePromise<this> {
+    if (this.preEvaluated) {
+      return this;
+    }
+    const node = this.clone() as this;
+    node.preEvaluated = true;
+    const applyValue = (preEvald: Selector): this => {
+      if (node.value !== preEvald) {
+        node.adopt(preEvald, context);
+        (node as unknown as { value: Selector }).value = preEvald;
+      }
+      return node;
+    };
+    const out = this.value.preEval(context);
+    if (isThenable(out)) {
+      return (out as Promise<Selector>).then(applyValue);
+    }
+    return applyValue(out as Selector);
+  }
+
+  override evalNode(context: Context): MaybePromise<Selector> {
+    const out = this.value.eval(context);
+    if (isThenable(out)) {
+      return (out as Promise<Selector>).then((selector) => {
+        return selector;
+      });
+    }
+    return out as Selector;
+  }
+}
+
+type Params = ConstructorParameters<typeof SelectorCapture>;
+
+export const selcap = defineType(SelectorCapture, 'SelectorCapture', 'selcap') as (
+  value: Params[0],
+  options?: Params[1],
+  location?: Params[2],
+  treeContext?: Params[3]
+) => SelectorCapture;

package/src/tree/selector-complex.ts

@@ -0,0 +1,189 @@
+import { type Combinator } from './combinator.js';
+import { type Ampersand } from './ampersand.js';
+import {
+  defineType,
+  type OptionalLocation
+} from './node.js';
+import type { Context } from '../context.js';
+import { type Nil } from './nil.js';
+import { isNode } from './util/is-node.js';
+import { N } from './node-type.js';
+import { Selector } from './selector.js';
+import type { SimpleSelector } from './selector-simple.js';
+import type { CompoundSelector } from './selector-compound.js';
+import { type PrintOptions, getPrintOptions } from './util/print.js';
+import { type MaybePromise, pipe, isThenable, serialForEach } from '@jesscss/awaitable-pipe';
+
+// TODO - fix later
+export type ComplexSelectorComponent = SimpleSelector | CompoundSelector | Combinator | Ampersand;
+// type SelectorValue = Component[]
+export type ComplexSelectorValue = ComplexSelectorComponent[];
+
+export type ComplexSelectorChildData = { value: ComplexSelectorValue };
+
+/**
+ * Selectors with combinators.
+ *
+ * @example
+ * #id > .class.class
+ *
+ * @note A complex selector may not always start with a selector. We also use this for a
+ * relative selector, which means it may start with a combinator.
+ */
+export interface ComplexSelector {
+  type: 'ComplexSelector';
+  shortType: 'sel';
+}
+export class ComplexSelector extends Selector<ComplexSelectorValue, any, ComplexSelectorChildData> {
+  static override childKeys = ['value'] as const;
+
+  value!: ComplexSelectorValue;
+
+  constructor(value: ComplexSelectorValue, options?: any, location?: any, treeContext?: any) {
+    super(value, options, location, treeContext);
+    this.value = value;
+    for (const child of value) {
+      if (child instanceof Selector) {
+        this.adopt(child);
+      }
+    }
+  }
+
+  get length() {
+    return this.value.length;
+  }
+
+  override clone(deep?: boolean): this {
+    if (deep) {
+      return super.clone(true) as this;
+    }
+    return this._withValue(this.value) as this;
+  }
+
+  private _withValue(value: ComplexSelectorValue): ComplexSelector {
+    const location = Array.isArray(this.location) && this.location.length === 6
+      ? this.location as OptionalLocation
+      : undefined;
+    const node = new (this.constructor as typeof ComplexSelector)(
+      [],
+      this.options ? { ...this.options } : undefined,
+      location,
+      this.treeContext
+    );
+    node.inherit(this);
+    node.value = value;
+    return node;
+  }
+
+  override valueOf() {
+    const value = Array.isArray(this.value)
+      ? this.value
+      : [this.value as unknown as ComplexSelectorComponent];
+    return (this._valueOf ??= value.map(n => n.valueOf()).join(''));
+  }
+
+  override toTrimmedString(options?: PrintOptions): string {
+    options = getPrintOptions(options);
+    const w = options.writer!;
+    const value = this.get('value', options.context);
+    let length = value.length;
+    const mark = w.mark();
+    for (let i = 0; i < length; i++) {
+      let component = value[i]!;
+      /** Add some combinator spacing */
+      if (isNode(component, N.Combinator)) {
+        /** Skip spacing if the previous node is a Nil */
+        if (isNode(value[i - 1], N.Nil)) {
+          continue;
+        }
+        let co = component.value;
+        if (co !== ' ') {
+          let out = w.capture(() => component.toString(options));
+          if (out !== '|') {
+            w.add(` ${out.trim()} `, component);
+          } else {
+            w.add(out.trim(), component);
+          }
+        } else {
+          let out = w.capture(() => component.toString(options));
+          w.add(` ${out.trim()}`, component);
+        }
+      } else {
+        let out = w.capture(() => component.toString(options));
+        w.add(out.trim(), component);
+      }
+    }
+    return w.getSince(mark);
+  }
+
+  override evalNode(context: Context): MaybePromise<Selector | Nil> {
+    return pipe(
+      () => {
+        const selector = super.evalNode(context) as ComplexSelector;
+        const value = [...selector.get('value', context)];
+        let changed = false;
+        const maybe = serialForEach(value.map((_, i) => i), (i: number) => {
+          const out = value[i]!.eval(context);
+          if (isThenable(out)) {
+            return (out as Promise<Selector | Nil>).then((res) => {
+              if (res !== value[i]) {
+                value[i] = res as ComplexSelectorComponent;
+                changed = true;
+              }
+              return undefined;
+            });
+          }
+          if ((out as ComplexSelectorComponent) !== value[i]) {
+            value[i] = out as ComplexSelectorComponent;
+            changed = true;
+          }
+          return undefined;
+        });
+        if (isThenable(maybe)) {
+          return (maybe as Promise<void>).then(() => {
+            if (changed) {
+              return selector === this
+                ? this._withValue(value)
+                : (() => {
+                    selector.value = value;
+                    return selector;
+                  })();
+            }
+            return selector;
+          });
+        }
+        if (changed) {
+          return selector === this
+            ? this._withValue(value)
+            : (() => {
+                selector.value = value;
+                return selector;
+              })();
+        }
+        return selector;
+      },
+      (selector) => {
+        const value = selector.get('value', context);
+        if (value.length === 1) {
+          const originalOnly = value[0]!;
+          const only = originalOnly.clone();
+          only.inherit(selector);
+          if (selector.hoistToRoot || this.hoistToRoot || only.hoistToRoot) {
+            only.hoistToRoot = true;
+          }
+          return only;
+        }
+        return selector;
+      }
+    );
+  }
+}
+
+type SelectorParams = ConstructorParameters<typeof ComplexSelector>;
+
+export const sel = defineType<ComplexSelectorValue>(ComplexSelector, 'ComplexSelector', 'sel') as (
+  value: ComplexSelectorValue,
+  options?: SelectorParams[1],
+  location?: SelectorParams[2],
+  treeContext?: SelectorParams[3]
+) => ComplexSelector;