glass-easel 0.2.0 → 0.3.0

package/src/class_list.ts

@@ -1,11 +1,14 @@
-import * as backend from './backend/backend_protocol'
-import * as composedBackend from './backend/composed_backend_protocol'
-import * as domlikeBackend from './backend/domlike_backend_protocol'
-import { BM, BackendMode } from './backend/mode'
-import { Element, GeneralComponent, GeneralBackendElement, StyleSegmentIndex } from '.'
-import { MutationObserverTarget } from './mutation_observer'
+import {
+  BM,
+  BackendMode,
+  type GeneralBackendElement,
+  type backend,
+  type composedBackend,
+  type domlikeBackend,
+} from './backend'
+import { StyleSegmentIndex, type Element } from './element'
 
-const CLASS_NAME_REG_EXP = /(~|\^+)?-?[_0-9a-z][-_0-9a-z]*/gi
+const CLASS_NAME_REG_EXP = /\s+/
 
 /**
  * The style scope identifier
@@ -49,7 +52,7 @@ export type AliasTarget = {
  */
 export class ClassList {
   /** @internal */
-  private _$elem: Element
+  private _$element: Element
   /** @internal */
   private _$owner: ClassList | null
   /** @internal */
@@ -59,53 +62,42 @@ export class ClassList {
   /** @internal */
   private _$rootScope: StyleScopeId | undefined
   /** @internal */
-  private _$alias: { [externalName: string]: string[] | null } | null
+  private _$externalNames: string[] | undefined = undefined
   /** @internal */
-  private _$resolvedAlias: { [externalName: string]: AliasTarget[] | null } | null
+  private _$externalRawAlias: (string[] | undefined)[] | null = null
   /** @internal */
-  private _$aliasDirty = false
+  private _$dirtyExternalNames: string[] | null = null
   /** @internal */
-  private _$rawNames: string[] = []
+  private _$rawNames: string[][] = []
   /** @internal */
-  private _$rawNamesSegmentSep: number[] = []
+  private _$backendNames: string[] = []
   /** @internal */
-  private _$hasResolvedNames = false
+  private _$backendNameScopes: (StyleScopeId | undefined)[] = []
+  /** @internal */
+  private _$backendNamesCount: number[] = []
+  /** @internal */
+  private _$hasAliasNames = false
   /** @internal */
   private _$prefixManager: StyleScopeManager | undefined
 
   constructor(
-    elem: Element,
-    externalNameAlias: { [externalName: string]: string[] | null } | null,
+    element: Element,
+    externalNames: string[] | undefined,
+    owner: ClassList | null,
+    styleScope: number,
+    extraStyleScope: number | undefined,
+    styleScopeManager: StyleScopeManager | undefined,
   ) {
-    this._$elem = elem
-    const ownerComp = elem.ownerShadowRoot?.getHostNode()
-    if (ownerComp) {
-      const compOptions = ownerComp.getComponentOptions()
-      this._$owner = ownerComp.classList
-      this._$defaultScope = compOptions.styleScope
-      this._$extraScope =
-        compOptions.extraStyleScope === null ? undefined : compOptions.extraStyleScope
-      this._$rootScope = ownerComp.classList!._$rootScope ?? this._$defaultScope
-    } else {
-      this._$owner = null
-      this._$defaultScope = StyleScopeManager.globalScope()
-      this._$extraScope = undefined
-      this._$rootScope = undefined
-    }
-    this._$alias = externalNameAlias
-    if (externalNameAlias) {
-      const resolved = Object.create(null) as { [externalName: string]: null }
-      Object.keys(externalNameAlias).forEach((k) => {
-        resolved[k] = null
-      })
-      this._$resolvedAlias = resolved
-    } else {
-      this._$resolvedAlias = null
-    }
-    if (BM.DOMLIKE || (BM.DYNAMIC && elem.getBackendMode() === BackendMode.Domlike)) {
-      this._$prefixManager = elem.ownerShadowRoot
-        ?.getHostNode()
-        .getRootBehavior().ownerSpace.styleScopeManager
+    this._$element = element
+    this._$owner = owner
+    this._$defaultScope = styleScope
+    this._$extraScope = extraStyleScope
+    // root owner got globalScope as it's styleScope, avoid the root owner
+    this._$rootScope = owner?._$owner ? owner._$rootScope : styleScope
+    this._$prefixManager = styleScopeManager
+    if (externalNames) {
+      this._$externalNames = externalNames
+      this._$externalRawAlias = []
     }
   }
 
@@ -114,26 +106,28 @@ export class ClassList {
     name: string,
     cb: (scopeId: StyleScopeId | undefined, className: string) => void,
   ) {
-    const resolvedAlias = this._$owner?._$resolvedAlias
-    if (resolvedAlias && resolvedAlias[name] !== undefined) {
-      const targets = resolvedAlias[name]
-      this._$hasResolvedNames = true
-      if (targets) {
-        for (let i = 0; i < targets.length; i += 1) {
-          const target = targets[i]!
-          cb(target.scopeId, target.className)
+    const owner = this._$owner
+    const externalNames = owner?._$externalNames
+    const externalIndex = externalNames ? externalNames.indexOf(name) : -1
+    if (owner && externalIndex !== -1) {
+      this._$hasAliasNames = true
+      const rawAlias = owner._$externalRawAlias![externalIndex]
+      if (rawAlias) {
+        for (let i = 0; i < rawAlias.length; i += 1) {
+          owner._$resolvePrefixes(rawAlias[i]!, cb)
         }
       }
     } else if (name[0] === '~') {
       cb(this._$rootScope, name.slice(1))
     } else if (name[0] === '^') {
       let n = name.slice(1)
-      let owner = this._$owner
-      while (owner && n[0] === '^') {
+      let owner: ClassList | null | undefined = this._$owner
+      while (n[0] === '^') {
         n = n.slice(1)
-        owner = owner._$owner
+        owner = owner?._$owner
       }
-      const scopeId = owner ? owner._$defaultScope : this._$rootScope
+      // root owner got globalScope as it's styleScope, avoid the root owner
+      const scopeId = owner?._$owner ? owner._$defaultScope : this._$rootScope
       cb(scopeId, n)
     } else {
       if (this._$extraScope !== undefined) {
@@ -144,194 +138,321 @@ export class ClassList {
   }
 
   /** @internal */
-  private _$updateResolvedAliases(name: string): boolean {
-    const slices = this._$alias![name]
-    const resolved: AliasTarget[] = []
-    if (slices) {
-      slices.forEach((name) => {
-        this._$resolvePrefixes(name, (scopeId, className) => {
-          resolved.push({
-            scopeId,
-            className,
-          })
-        })
-      })
+  _$hasAlias(name: string): boolean {
+    return !!this._$externalNames && this._$externalNames.includes(name)
+  }
+
+  /** @internal */
+  _$setAlias(name: string, target: string | string[]) {
+    if (!this._$externalNames) return
+    let slices: string[]
+    if (target === undefined || target === null) {
+      slices = []
+    } else if (Array.isArray(target)) {
+      slices = Array<string>(target.length)
+      for (let i = 0, l = target.length; i < l; i += 1) {
+        slices[i] = String(target[i])
+      }
+    } else {
+      slices = String(target)
+        .split(CLASS_NAME_REG_EXP)
+        .filter((s) => s !== '') // split result could be [ '' ]
     }
-    let changed = false
-    const prevResolved = this._$resolvedAlias![name]
-    if (prevResolved) {
-      if (prevResolved.length !== resolved.length) {
-        changed = true
-      } else {
-        for (let i = 0; i < prevResolved.length; i += 1) {
-          const a = prevResolved[i]!
-          const b = resolved[i]!
-          if (a.scopeId !== b.scopeId || a.className !== b.className) {
-            changed = true
-            break
+    const externalIndex = this._$externalNames.indexOf(name)
+    if (externalIndex === -1) return
+    this._$dirtyExternalNames = this._$dirtyExternalNames || []
+    this._$dirtyExternalNames.push(name)
+    this._$externalRawAlias![externalIndex] = slices
+  }
+
+  /** @internal */
+  _$getAlias(): string[] | undefined {
+    return this._$externalNames
+  }
+
+  /** @internal */
+  _$spreadExternalClassUpdate(): boolean {
+    const owner = this._$owner
+    if (!owner?._$dirtyExternalNames || !this._$hasAliasNames) return false
+    const dirtyExternalNames = owner._$dirtyExternalNames
+    const externalNames = this._$externalNames
+    if (externalNames) {
+      for (let externalIndex = 0; externalIndex < externalNames.length; externalIndex += 1) {
+        const externalRawAlias = this._$externalRawAlias![externalIndex] || []
+        for (let i = 0; i < dirtyExternalNames.length; i += 1) {
+          if (externalRawAlias.includes(dirtyExternalNames[i]!)) {
+            this._$dirtyExternalNames = this._$dirtyExternalNames || []
+            this._$dirtyExternalNames.push(externalNames[externalIndex]!)
           }
         }
       }
-    } else if (resolved.length > 0) {
-      changed = true
     }
-    this._$resolvedAlias![name] = resolved
-    return changed
+    const shouldUpdate = this._$rawNames.some((names) =>
+      names.some((name) => dirtyExternalNames.includes(name)),
+    )
+    if (shouldUpdate) {
+      this._$updateResolvedNames()
+    }
+    return !!this._$dirtyExternalNames || shouldUpdate
   }
 
   /** @internal */
-  _$hasAlias(name: string): boolean {
-    if (this._$alias && this._$alias[name] !== undefined) {
-      return true
+  _$shouldUpdateExternalClass() {
+    if (!this._$dirtyExternalNames) return false
+    if (BM.SHADOW || (BM.DYNAMIC && this._$element.getBackendMode() === BackendMode.Shadow)) {
+      const dirtyExternalNames = this._$dirtyExternalNames
+      for (let i = 0; i < dirtyExternalNames.length; i += 1) {
+        const name = dirtyExternalNames[i]!
+        const externalIndex = this._$externalNames!.indexOf(name)
+        const targets = this._$externalRawAlias![externalIndex] || []
+        ;(this._$element._$backendElement as backend.Element).setClassAlias(name, targets)
+      }
+      this._$dirtyExternalNames = null
+      return false
     }
-    return false
+    return true
   }
 
   /** @internal */
-  _$setAlias(name: string, target: string) {
-    if (this._$alias) {
-      const slices = (String(target).match(CLASS_NAME_REG_EXP) as string[]) || null
-      this._$alias[name] = slices
-      const changed = this._$updateResolvedAliases(name)
-      if (changed) this._$aliasDirty = true
-    }
+  _$markExternalClassUpdated() {
+    this._$dirtyExternalNames = null
   }
 
   /** @internal */
-  _$spreadAliasUpdate() {
-    if (this._$aliasDirty) {
-      this._$aliasDirty = false
-      const callClassListUpdate = (elem: Element) => {
-        const classList = elem.classList
-        if (classList) {
-          const alias = classList._$alias
-          if (alias) {
-            let changed = false
-            Object.keys(alias).forEach((name) => {
-              if (classList._$updateResolvedAliases(name)) {
-                changed = true
-              }
-            })
-            if (changed) {
-              const comp = elem as GeneralComponent
-              if (comp._$external === false) {
-                callClassListUpdate(comp.shadowRoot as Element)
-              }
+  private _$updateResolvedNames(): boolean {
+    const backendElement = this._$element._$backendElement
+    if (!backendElement) return false
+    const rawNames = this._$rawNames
+    const oldBackendNames = this._$backendNames
+    const oldBackendNameScopes = this._$backendNameScopes
+    const oldBackendNamesCount = this._$backendNamesCount
+
+    const newBackendNames: string[] = []
+    const newBackendNameScopes: (StyleScopeId | undefined)[] = []
+    const newBackendNamesCount: number[] = []
+
+    this._$hasAliasNames = false
+
+    if (BM.SHADOW || (BM.DYNAMIC && this._$element.getBackendMode() === BackendMode.Shadow)) {
+      for (let i = 0, l = rawNames.length; i < l; i += 1) {
+        const names = rawNames[i]
+        if (!names) continue
+        for (let j = 0, ll = names.length; j < ll; j += 1) {
+          const rawName = names[j]!
+          let found = false
+          for (let i = 0; i < newBackendNames.length; i += 1) {
+            if (rawName === newBackendNames[i]) {
+              newBackendNamesCount[i] += 1
+              found = true
+              break
             }
           }
-          if (classList._$hasResolvedNames) {
-            classList._$updateResolvedNames()
+          if (!found) {
+            newBackendNames.push(rawName)
+            newBackendNameScopes.push(undefined)
+            newBackendNamesCount.push(1)
           }
         }
-        const children = elem.childNodes
-        children.forEach((child) => {
-          if (child instanceof Element) callClassListUpdate(child)
-        })
       }
-      const comp = this._$elem as GeneralComponent
-      if (comp._$external === false) {
-        callClassListUpdate(comp.shadowRoot as Element)
+    } else {
+      for (let i = 0, l = rawNames.length; i < l; i += 1) {
+        const names = rawNames[i]
+        if (!names) continue
+        for (let j = 0, ll = names.length; j < ll; j += 1) {
+          const rawName = names[j]!
+          this._$resolvePrefixes(rawName, (scopeId, className) => {
+            for (let i = 0; i < newBackendNames.length; i += 1) {
+              if (className === newBackendNames[i] && scopeId === newBackendNameScopes[i]) {
+                newBackendNamesCount[i] += 1
+                return
+              }
+            }
+            newBackendNames.push(className)
+            newBackendNameScopes.push(scopeId)
+            newBackendNamesCount.push(1)
+          })
+        }
       }
     }
-  }
 
-  /** @internal */
-  private _$updateResolvedNames() {
-    const backendElement = this._$elem.getBackendElement()
-    if (!backendElement) return
-    this._$hasResolvedNames = false
-    if (BM.DOMLIKE || (BM.DYNAMIC && this._$elem.getBackendMode() === BackendMode.Domlike)) {
-      ;(backendElement as domlikeBackend.Element).setAttribute('class', '')
-    } else {
-      ;(backendElement as backend.Element | composedBackend.Element).clearClasses()
+    let changed = false
+
+    for (let i = 0; i < newBackendNames.length; i += 1) {
+      let found = false
+      for (let j = 0; j < oldBackendNames.length; j += 1) {
+        if (
+          newBackendNames[i] === oldBackendNames[j] &&
+          newBackendNameScopes[i] === oldBackendNameScopes[j]
+        ) {
+          found = true
+          oldBackendNamesCount[j] = 0 // mark as exists
+          break
+        }
+      }
+      if (!found) {
+        changed = true
+        this._$addClassToBackend(newBackendNames[i]!, newBackendNameScopes[i], backendElement)
+      }
+    }
+    for (let j = 0; j < oldBackendNames.length; j += 1) {
+      // 0 means old exists
+      if (oldBackendNamesCount[j] !== 0) {
+        changed = true
+        this._$removeClassFromBackend(oldBackendNames[j]!, oldBackendNameScopes[j], backendElement)
+      }
     }
-    this._$rawNames.forEach((name) => {
-      this._$addClassToBackend(name, backendElement)
-    })
+
+    this._$backendNames = newBackendNames
+    this._$backendNameScopes = newBackendNameScopes
+    this._$backendNamesCount = newBackendNamesCount
+
+    return changed
   }
 
   /** @internal */
-  private _$classListAdd(name: string, scope: StyleScopeId | undefined, e: GeneralBackendElement) {
-    if (BM.DOMLIKE || (BM.DYNAMIC && this._$elem.getBackendMode() === BackendMode.Domlike)) {
+  private _$addClassToBackend(
+    name: string,
+    scope: StyleScopeId | undefined,
+    e: GeneralBackendElement,
+  ) {
+    if (BM.DOMLIKE || (BM.DYNAMIC && this._$element.getBackendMode() === BackendMode.Domlike)) {
       const prefix = scope === undefined ? '' : this._$prefixManager?.queryName(scope)
       const val = prefix ? `${prefix}--${name}` : name
       ;(e as domlikeBackend.Element).classList.add(val)
+    } else if (
+      BM.COMPOSED ||
+      (BM.DYNAMIC && this._$element.getBackendMode() === BackendMode.Composed)
+    ) {
+      ;(e as composedBackend.Element).addClass(name, scope)
     } else {
-      ;(e as backend.Element | composedBackend.Element).addClass(name, scope)
+      ;(e as backend.Element).addClass(name)
     }
   }
 
   /** @internal */
-  private _$classListRemove(
+  private _$removeClassFromBackend(
     name: string,
     scope: StyleScopeId | undefined,
     e: GeneralBackendElement,
   ) {
-    if (BM.DOMLIKE || (BM.DYNAMIC && this._$elem.getBackendMode() === BackendMode.Domlike)) {
+    if (BM.DOMLIKE || (BM.DYNAMIC && this._$element.getBackendMode() === BackendMode.Domlike)) {
       const prefix = scope && this._$prefixManager?.queryName(scope)
       const val = prefix ? `${prefix}--${name}` : name
       ;(e as domlikeBackend.Element).classList.remove(val)
+    } else if (
+      BM.COMPOSED ||
+      (BM.DYNAMIC && this._$element.getBackendMode() === BackendMode.Composed)
+    ) {
+      ;(e as composedBackend.Element).removeClass(name, scope)
     } else {
-      ;(e as backend.Element | composedBackend.Element).removeClass(name, scope)
+      ;(e as backend.Element).removeClass(name)
     }
   }
 
   /** @internal */
-  private _$addClassToBackend(name: string, backendElement: GeneralBackendElement) {
-    this._$resolvePrefixes(name, (scopeId, className) => {
-      this._$classListAdd(className, scopeId, backendElement)
-    })
+  private _$addClass(
+    name: string,
+    scopeId: StyleScopeId | undefined,
+    backendElement: GeneralBackendElement,
+  ) {
+    const oldClassNames = this._$backendNames
+    const oldScopeIds = this._$backendNameScopes
+    const classNamesCount = this._$backendNamesCount
+    let found = false
+    for (let j = 0; j < oldClassNames.length; j += 1) {
+      if (name === oldClassNames[j] && scopeId === oldScopeIds[j]) {
+        found = true
+        classNamesCount[j] += 1
+        break
+      }
+    }
+    if (!found) {
+      oldClassNames.push(name)
+      oldScopeIds.push(scopeId)
+      classNamesCount.push(1)
+      this._$addClassToBackend(name, scopeId, backendElement)
+    }
   }
 
   /** @internal */
-  private _$removeClassFromBackend(name: string, backendElement: GeneralBackendElement) {
-    this._$resolvePrefixes(name, (scopeId, className) => {
-      this._$classListRemove(className, scopeId, backendElement)
-    })
-  }
-
-  toggle(name: string, force?: boolean) {
-    const slices = (String(name).match(CLASS_NAME_REG_EXP) as string[]) || null
-    if (slices) {
-      const backendElement = this._$elem.getBackendElement()
-      slices.forEach((slice) => {
-        const index = this._$rawNames.indexOf(name)
-        let isAdd: boolean
-        if (force === undefined) {
-          if (index < 0) isAdd = true
-          else isAdd = false
+  private _$removeClass(
+    name: string,
+    scopeId: StyleScopeId | undefined,
+    backendElement: GeneralBackendElement,
+  ) {
+    const oldClassNames = this._$backendNames
+    const oldScopeIds = this._$backendNameScopes
+    const classNamesCount = this._$backendNamesCount
+    for (let j = 0; j < oldClassNames.length; j += 1) {
+      if (name === oldClassNames[j] && scopeId === oldScopeIds[j]) {
+        if (classNamesCount[j]! <= 1) {
+          oldClassNames.splice(j, 1)
+          oldScopeIds.splice(j, 1)
+          classNamesCount.splice(j, 1)
+          this._$removeClassFromBackend(name, scopeId, backendElement)
         } else {
-          isAdd = !!force
+          classNamesCount[j] -= 1
         }
-        let changed = false
-        if (isAdd) {
-          if (index < 0) {
-            this._$rawNames.push(slice)
-            if (backendElement) this._$addClassToBackend(slice, backendElement)
-            changed = true
-          }
-        } else if (index >= 0) {
-          this._$rawNames.splice(index, 1)
-          if (backendElement) this._$removeClassFromBackend(slice, backendElement)
-          changed = true
+        break
+      }
+    }
+  }
+
+  toggle(
+    name: string,
+    force?: boolean,
+    segmentIndex: StyleSegmentIndex = StyleSegmentIndex.MAIN,
+  ): boolean {
+    /* istanbul ignore if */
+    if (CLASS_NAME_REG_EXP.test(name)) throw new Error('Class name contains space characters.')
+
+    const backendElement = this._$element._$backendElement
+    const rawClassIndex = this._$rawNames[segmentIndex]
+      ? this._$rawNames[segmentIndex]!.indexOf(name)
+      : -1
+    const isAdd = force === undefined ? rawClassIndex === -1 : !!force
+
+    let changed = false
+    if (isAdd) {
+      if (rawClassIndex === -1) {
+        const rawNames = this._$rawNames
+        if (!rawNames[segmentIndex]) {
+          rawNames[segmentIndex] = []
         }
-        if (changed) {
-          const elem = this._$elem
-          if (elem._$mutationObserverTarget) {
-            MutationObserverTarget.callAttrObservers(elem, {
-              type: 'properties',
-              target: elem,
-              attributeName: 'class',
+        const names = rawNames[segmentIndex]!
+        names.push(name)
+        if (backendElement) {
+          if (BM.SHADOW || (BM.DYNAMIC && this._$element.getBackendMode() === BackendMode.Shadow)) {
+            this._$addClass(name, undefined, backendElement)
+          } else {
+            this._$resolvePrefixes(name, (scopeId, className) => {
+              this._$addClass(className, scopeId, backendElement)
             })
           }
         }
-      })
+        changed = true
+      }
+    } else if (rawClassIndex !== -1) {
+      const names = this._$rawNames[segmentIndex]
+      if (names) names.splice(rawClassIndex, 1)
+      if (backendElement) {
+        if (BM.SHADOW || (BM.DYNAMIC && this._$element.getBackendMode() === BackendMode.Shadow)) {
+          this._$removeClass(name, undefined, backendElement)
+        } else {
+          this._$resolvePrefixes(name, (scopeId, className) => {
+            this._$removeClass(className, scopeId, backendElement)
+          })
+        }
+      }
+      changed = true
     }
+    return changed
   }
 
-  contains(name: string): boolean {
-    for (let i = 0; i < this._$rawNames.length; i += 1) {
-      const rn = this._$rawNames[i]!
+  contains(name: string, segmentIndex: StyleSegmentIndex = StyleSegmentIndex.MAIN): boolean {
+    const names = this._$rawNames[segmentIndex] || []
+    for (let i = 0; i < names.length; i += 1) {
+      const rn = names[i]!
       if (rn[0] === '~') {
         const n = rn.slice(1)
         if (n === name) return true
@@ -349,46 +470,31 @@ export class ClassList {
   }
 
   /** Set class string */
-  setClassNames(names: string, index: StyleSegmentIndex = 0) {
-    let n: string
-    if (names === undefined || names === null) n = ''
-    else n = String(names)
-    const newRawNames = n.match(CLASS_NAME_REG_EXP) || []
-    while (this._$rawNamesSegmentSep.length < index) {
-      this._$rawNamesSegmentSep.push(
-        this._$rawNamesSegmentSep.length > 0
-          ? this._$rawNamesSegmentSep[this._$rawNamesSegmentSep.length - 1]!
-          : this._$rawNames.length,
-      )
-    }
-    if (this._$rawNamesSegmentSep.length === 0) {
-      this._$rawNames = newRawNames
-    } else {
-      const segEnd =
-        index < this._$rawNamesSegmentSep.length
-          ? this._$rawNamesSegmentSep[index]!
-          : this._$rawNames.length
-      const segStart = index > 0 ? this._$rawNamesSegmentSep[index - 1]! : 0
-      const segLen = segEnd - segStart
-      const lenDiff = newRawNames.length - segLen
-      for (let i = index; i < this._$rawNamesSegmentSep.length; i += 1) {
-        this._$rawNamesSegmentSep[i] += lenDiff
+  setClassNames(
+    names: string | string[],
+    segmentIndex: StyleSegmentIndex = StyleSegmentIndex.MAIN,
+  ): boolean {
+    let n: string[]
+    if (names === undefined || names === null) {
+      n = []
+    } else if (Array.isArray(names)) {
+      n = Array<string>(names.length)
+      for (let i = 0, l = names.length; i < l; i += 1) {
+        n[i] = String(names[i])
       }
-      this._$rawNames.splice(segStart, segLen, ...newRawNames)
-    }
-    this._$updateResolvedNames()
-    const elem = this._$elem
-    if (elem._$mutationObserverTarget) {
-      MutationObserverTarget.callAttrObservers(elem, {
-        type: 'properties',
-        target: elem,
-        attributeName: 'class',
-      })
+    } else {
+      n = String(names)
+        .split(CLASS_NAME_REG_EXP)
+        .filter((s) => s !== '') // split result could be [ '' ]
     }
+    this._$rawNames[segmentIndex] = n
+
+    return this._$updateResolvedNames()
   }
 
   /** Returns space separated class string */
-  getClassNames(): string {
-    return this._$rawNames ? this._$rawNames.join(' ') : ''
+  getClassNames(segmentIndex: StyleSegmentIndex = StyleSegmentIndex.MAIN): string {
+    const names = this._$rawNames[segmentIndex] || []
+    return names ? names.join(' ') : ''
   }
 }