5. Operators |

Watch attributes

For the files of given extension, watch attributes for those files, provide additional featues for declaration.

"extensions": {
  "html": [ "class", "id" ]
} // Watch tag attribute

Hash Loader

This operator can be usef for importing Unique hash of files.
When used in values of watch attributes, snippet that follows the operater gets registered as valid hash follower with in the file.
To use import hashes other that values of watch attributes, along with compose attributes, prefix valid hash follower with \#.

Input

<div class="#class-1" id="#id-1" data-test="#test"> 
<!-- Hash followers = ["class-1", "id-1"] -->

<style -$symclass {#\#id-1}&="prop: val;">
  .\#class-1 {...}
  #\#id {...}
</style>
<!-- style -->
<script>
  const id = "\#id-1"
  const id = "\#id-2"
</script>

Output

<div class="_8r-23_class-1" id="_8r-23_id-1" data-test="#test">
<!-- Hash followers = ["class-1", "id-1"] -->

<style>
  #_8r-23_id-1 .-$symclass { prop: val; }
  ._8r-23_class { ... }
  #_8r-23_id { ... }
</style>
<script>
  const id = "_8r-23_id-1"
  const id = "\#id-2"
</script>

Class Loaders

These operators signal the use of symbolic classes (sym-classes) in class attributes. They distinguish sym-classes from regular classes used by other styling systems, allowing simultaneous use without conflicts.

Class loaders has three varients each with different purpuses

Scattered Class Loader (`~`)

May not cascade styles reliably, especially in complex or deeply nested components, so you dont get precise control.
To use operator other that values of watch attributes, prefix valid symclass with \~.

Ordered Class Loader (`!`)

Classes applied with this operator comes after scattered assigns and provide explicit control over cascading over.
These operator can only be used inside values of tag attributes.

Final Class Loader (`=`)

Classes applied with this operator comes after Ordered assigns but does’t provide explicit control over cascading.
To use operator other that values of watch attributes, prefix valid symclass with \=.

Example

<div class="
  ~atomic$class-1 
  !order$class-3
  ~atomic$class-2
  ~atomic$class-3
  !order$class-1
  =final$class-2 
  !order$class-2
" onload="this.classlist.add(loading?'\=final$class-1':'\=final-class-3')"> Content </div>
<!-- 
Prefer not to use `Final classes` in watch attributes, 
unless for conditional adding to classname with inline script.
-->

<style>
  /* Scattered classes have unpredictable cascading order. */
  .atomic\$class-2 { ... }
  .atomic\$class-1 { ... }
  .atomic\$class-3 { ... }

  /* Ordered classes strictly follow cascade order. */
  .order\$class-3 { ... }
  .order\$class-1 { ... }
  .order\$class-2 { ... }

  /* Final classes have unpredictable cascading order. */
  .final\$class-1 { ... }
  .final\$class-3 { ... }
  .final\$class-2 { ... }
</style>

<script>
  const selectorArray = [
    "\~atomic$class-3", // returns result
    "~atomic$class-3", // stays the same
    "\!order$class-1",  // stays the same
    "!order$class-1",  // stays the same
    "\=final$class-2",  // returns result
    "=final$class-2",  // stays the same
  ]
<script>

Compose Operators (For composing sym-classes)

<summon
  custom$class="
    /* Assign Directive Operator */ 
    = atomic$class-1 atomic$class-2;

    /* Attach Directive Operator */
    ~ attach$class-1 attach$class-2;
    
    attribute-1: value-1;
    attribute-2: value-2;
    
    /* Merge Flatten*/
    &[x-look=]& {
      &[varient-1] { *** }
      &[varient-2] { *** }
    }
  "
>Template</summon>

Directive Operators

When composing sym-classes within tags, this syntax is a drop-in replacement for custom CSS directives.
- = maps to @--assign
- ~ maps to @--attach
Both operators produce the same final CSS output. They coexist mainly for developer convenience and clarity.

Merge-Flatten Operator

This operator applies only when certain conditions are met:

Nested child selectors must begin with the & character.
The parent selector must end with one or more & characters (denoted as n, where n≥1).

When merging occurs, exactly n characters are removed from the end of the parent selector and the beginning of the child selector—excluding the special prefix & and suffix & characters—before concatenating them.

Limitation Notice: This operator has a side effect preventing comma-separated multiple nested selectors. Use cautiously for complex cases.

/* Input */
[a-]& { 
  &[b], &[c] { ... } 
}

/* Expected output */
[a-b] { ... }
[a-c] { ... }

/* Actual result */
[a-b], &[c] { ... }  /* Second selector fails */

The & (parent reference) doesn’t expand correctly in comma-separated nested rules, breaking multi-selector support.

5. Operators