@silexlabs/silex 3.7.0 → 3.9.0-canary.2

package/grapesjs-plugins/grapesjs-advanced-selector/src/components/simple-selector.ts

@@ -0,0 +1,537 @@
+import { css, html, TemplateResult } from 'lit'
+import { property } from 'lit/decorators.js'
+import { styleMap } from 'lit/directives/style-map.js'
+import { AttributeSelector, SimpleSelector, SimpleSelectorSuggestion, toString, getDisplayType, getDisplayName, suggest, validate, getCreationSuggestions, SimpleSelectorType, getEditableName, STYLE_FOR_TYPE, AttributeOperatorType } from '../model/SimpleSelector'
+import StylableElement from '../StylableElement'
+import { createRef, ref } from 'lit/directives/ref.js'
+import { customizeInput, customizeSelect, FOCUS_VISIBLE } from '../styles'
+import './resize-input'
+
+export default class SimpleSelectorComponent extends StylableElement {
+
+  // /////////////////
+  // Attributes
+  /**
+   * The selector to display
+   */
+  @property({ type: Object, attribute: true, reflect: false })
+  public get value(): SimpleSelector | undefined {
+    return this._value
+  }
+  public set value(sel: SimpleSelector | string | undefined) {
+    try {
+      this._value = typeof sel === 'string' ? JSON.parse(sel) : sel
+    } catch (error) {
+      console.error('Error parsing value for selector', { sel, error })
+    }
+    this.requestUpdate()
+  }
+  private _value: SimpleSelector | undefined
+
+  /**
+   * A list of all the classes, IDs, tags, custom tags, attributes, custom attributes
+   * that are available in the document, applicable to the current selection
+   */
+  @property({ type: Array, attribute: true, reflect: false })
+  public suggestions: SimpleSelector[] = []
+
+  /**
+   * Whether the selector is editable
+   */
+  @property({ type: Boolean, attribute: true, reflect: false, state: true })
+  public get editing(): boolean {
+    return this._editing
+  }
+  public set editing(isEditing: boolean) {
+    this._editing = isEditing
+  }
+  private _editing = false
+
+  @property({ type: Boolean, attribute: true, reflect: false })
+    readonly = false
+
+  // /////////////////
+  // Properties
+
+  private selectorInputRef = createRef<HTMLInputElement>()
+  private attributeOptionsAttrValueRef = createRef<HTMLInputElement>()
+  private mainRef = createRef<HTMLElement>()
+  private datalistSelectionInProgress = false
+
+  // /////////////////
+  // Element overrides
+  static override styles = css`
+  :host {
+    ${ FOCUS_VISIBLE }
+    section {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 0.25rem;
+      padding: 0.10rem;
+      border-radius: 0.2rem;
+      cursor: pointer;
+      background-color: var(--gjs-main-light-color, #f9f9f9);
+    }
+    section:has(:invalid) {
+      background: rgba(255, 0, 0, 0.1) !important;
+    }
+    header {
+      width: 12px;
+      text-wrap: nowrap;
+      transition: all .2s ease-out;
+      overflow: hidden;
+      text-align: center;
+      line-height: 1;
+    }
+    section:focus-within header,
+    section:hover header {
+      width: 0;
+    }
+    section.asm-simple-selector__id:focus-within header,
+    section.asm-simple-selector__id:hover header {
+      width: 12px;
+    }
+    footer {
+      width: 0;
+      transition: all .2s ease-out;
+      overflow: hidden;
+    }
+    section:focus-within footer,
+    section:hover footer {
+      width: 12px;
+    }
+    section.asm-simple-selector__id:focus-within footer,
+    section.asm-simple-selector__id:hover footer {
+      width: 0;
+    }
+    select {
+      text-align: center;
+    }
+    input, select, button {
+      font-family: inherit;
+      font-size: inherit;
+      color: var(--gjs-secondary-color, #333);
+    }
+    .asm-simple-selector__delete-button {
+      padding: 0;
+      line-height: 1;
+      margin: 1px;
+      background: transparent;
+      color: var(--gjs-color-warn, #f00);
+      font-size: 1.1rem;
+    }
+    /*
+    .asm-simple-selector__delete-button:hover {
+      color: var(--gjs-color-warn, #f00);
+      transform: scale(2) translateY(-1px);
+    }
+    */
+    .asm-simple-selector__active {
+      display: none;
+    }
+    ${ customizeInput('.asm-simple-selector__like-text') }
+    .asm-simple-selector__like-text {
+      padding: .25rem;
+    }
+    ${ customizeSelect('.asm-simple-selector__options-select') }
+    .asm-simple-selector__name {
+      display: inline-flex;
+      text-wrap: wrap;
+      justify-content: center;
+      align-items: center;
+      min-height: 20px;
+      line-height: 1;
+      user-select: none;
+    }
+    .asm-simple-selector__selector {
+      cursor: text;
+      min-width: 200px;
+    }
+
+    /* Try to style datalist options - browser support varies */
+    datalist {
+      position: absolute;
+      max-height: 200px;
+      overflow-y: auto;
+      border: 1px solid var(--gjs-border-color, #ddd);
+      border-radius: 4px;
+      background: var(--gjs-main-bg-color, white);
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+
+    /* Some browsers support styling datalist options */
+    datalist option {
+      padding: 8px 12px;
+      border-bottom: 1px solid var(--gjs-border-light-color, #eee);
+      background: var(--gjs-main-bg-color, white);
+      color: var(--gjs-main-color, #333);
+      cursor: pointer;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: 250px;
+    }
+
+    datalist option:hover {
+      background: var(--gjs-main-light-color, #f9f9f9);
+    }
+
+    datalist option:last-child {
+      border-bottom: none;
+    }
+  }
+  /* FIXME: this should be inside :host but it breaks opactity when visible */
+  section:not(:has(.asm-simple-selector__active:checked)):not(:has(.asm-simple-selector__selector)) {
+    opacity: 0.5;
+  }
+  `
+
+  override focus() {
+    this.selectorInputRef.value?.focus()
+  }
+  override render(): TemplateResult {
+    if(!this.value) return html`<div>Initializing</div>`
+    return html`
+    <section
+      class="${this.value.type === SimpleSelectorType.ID ? 'asm-simple-selector__id' : ''}"
+      tabindex="0"
+      @keydown=${(event: KeyboardEvent) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      this.value = { ...this.value!, active: !this.value!.active }
+      this.dispatchEvent(new CustomEvent('change', { detail: this.value }))
+    }
+  }}
+      @dblclick=${() => this.edit()}
+      @click=${() => {
+    this.value = { ...this.value!, active: !this.value!.active }
+    this.dispatchEvent(new CustomEvent('change', { detail: this.value }))
+  }}
+    >
+      <header>
+        ${!this.editing ? getDisplayType(this.value) : ''}
+      </header>
+      ${ this.renderMain() }
+      <footer>
+        ${this.value.type !== SimpleSelectorType.ID ? html`
+          <button
+            .title=${ this.t('Delete') }
+            class="gjs-btn-prim asm-simple-selector__delete-button"
+            @keydown=${(event: KeyboardEvent) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.stopPropagation()
+    }
+  }}
+            @click=${(event: MouseEvent) => {
+    this.dispatchEvent(new CustomEvent('delete', { detail: this.value }))
+    // Avoid check/uncheck the "active" checkbox
+    event.stopPropagation()
+  }}
+          >
+            &times;
+          </button>
+        ` : ''}
+        <input
+          type="checkbox"
+          autocomplete="off"
+          class="asm-simple-selector__active"
+          .checked=${this.value.active}
+        />
+      </footer>
+    </section>
+    `
+  }
+
+  // override dispatchEvent(event: Event): boolean {
+  //   console.info('[SIMPLE] Dispatching event', event)
+  //   return super.dispatchEvent(event)
+  // }
+
+  // /////////////////
+  // Methods
+  private edit() {
+    if (this.hasAttribute('readonly')) {
+      console.warn('Cannot edit a readonly selector')
+      return
+    }
+    this.editing = true
+    requestAnimationFrame(() => this.focus())
+  }
+
+  private select(selector: SimpleSelectorSuggestion) {
+    // Remove the createText property
+    const newSelector = { ...selector }
+    delete newSelector.createText
+    delete newSelector.createValue
+    // Reactive: this.selector = newSelector
+    if (!selector || selector.keepEditing) {
+      requestAnimationFrame(() => this.focus())
+    } else {
+      this.editing = false
+      this.attributeOptionsAttrValueRef.value?.blur()
+    }
+    this.dispatchEvent(new CustomEvent('change', { detail: newSelector }))
+  }
+
+  private cancelEdit() {
+    this.attributeOptionsAttrValueRef.value?.blur()
+    if (!this.editing) return
+    this.editing = false
+    if(this.value?.type === SimpleSelectorType.UNKNOWN) {
+      this.dispatchEvent(new CustomEvent('delete', { detail: this.value }))
+    } else {
+      this.dispatchEvent(new CustomEvent('cancel', { detail: this.value }))
+    }
+  }
+
+  // /////////////////
+  // Lifecycle methods
+  override updated(changedProperties: Map<string | number | symbol, unknown>) {
+    super.updated(changedProperties)
+    if (this.value) {
+      const selectorString = this.selectorInputRef.value?.value || ''
+      this.selectorInputRef.value?.setCustomValidity(validate(selectorString) === false ? 'Invalid selector' : '')
+    }
+  }
+
+  // /////////////////
+  // Render methods
+  private renderMain(): TemplateResult {
+    const selectorString = this.selectorInputRef.value?.value || ''
+    const valid = validate(selectorString)
+    const suggestions = getCreationSuggestions(valid, selectorString).concat(suggest(selectorString, this.suggestions))
+    return html`
+      ${ this.renderLayout(html`
+        ${ this.editing ? this.renderSelectorInput({
+    suggestions,
+    valid: valid !== false, // Can be false or a string
+  }) : ''
+}
+      ${ this.editing && this.value?.type === SimpleSelectorType.ATTRIBUTE ? this.renderOptionsEditor() : html``}
+      ${ !this.editing ? this.renderSelector(html`
+      ${this.value?.type === SimpleSelectorType.ATTRIBUTE ? this.renderOptionsEditor() : html``}
+  `) : '' }
+        ${this.editing ? this.renderSuggestionList(suggestions, selectorString) : '' }
+      `, { valid: valid !== false, suggestions }) }
+    `
+  }
+
+  private renderLayout(content: TemplateResult, { valid, suggestions }: {suggestions: SimpleSelectorSuggestion[], valid: boolean}): TemplateResult {
+    return html`
+      <main
+        style=${styleMap(STYLE_FOR_TYPE[this.value!.type])}
+        tabindex="0"
+        ${ ref(this.mainRef) }
+        @keydown=${(event: KeyboardEvent) => {
+    if (
+      !this.editing
+            && event.target === this.mainRef.value
+            && event.key === 'Enter'
+    ) {
+      this.edit()
+      event.stopPropagation()
+    }
+  }}
+        @focusout=${(event: FocusEvent) => {
+    if(!this.editing) return
+    if(this.datalistSelectionInProgress) {
+      // Don't interfere with datalist selection
+      return
+    }
+    const newFocus = event.relatedTarget as HTMLElement
+    if (this.renderRoot.querySelector('main')!.contains(newFocus)) {
+      // Focus is still inside the component
+      return
+    }
+    if (valid) this.select(suggestions[0])
+    else requestAnimationFrame(() => this.focus())
+    event.stopPropagation()
+  }}
+      >
+        ${content}
+      </main>
+    `
+  }
+
+  private renderSelector(content: TemplateResult): TemplateResult {
+    return html`
+      <span
+        class="asm-simple-selector__name"
+      >
+        ${this.value ? html`
+          ${ getDisplayName(this.value!) }
+          ${content}
+        ` : 'No selector'}
+      </span>
+    `
+  }
+
+  private renderSelectorInput({ suggestions, valid }: { suggestions: SimpleSelectorSuggestion[], valid: boolean }) {
+    return html`
+    <input
+      ${ref(this.selectorInputRef)}
+      list="suggestions"
+      is="resize-input"
+      type="text"
+      autocomplete="off"
+      .value=${getEditableName(this.value!)}
+      .disabled=${!this.editing}
+      class="asm-simple-selector__like-text asm-simple-selector__selector"
+      aria-invalid=${!valid}
+      @keydown=${(event: KeyboardEvent) => {
+    if (!this.value) return
+    if (event.key === 'Escape') {
+      this.cancelEdit()
+      event.stopPropagation()
+    } else if (event.key === 'Enter') {
+      if (valid) this.select(suggestions[0])
+      event.stopPropagation()
+    }
+  }}
+      @keyup=${() => {
+    const input = this.selectorInputRef.value
+    if (input) {
+      input.setCustomValidity(valid ? '' : 'Invalid selector')
+      input.reportValidity()
+    }
+    this.requestUpdate()
+  }}
+      @click=${(event: MouseEvent) => event.stopPropagation()}
+      @input=${(event: InputEvent) => {
+    const inputValue = (event.target as HTMLInputElement).value
+
+    // Detect datalist selection by checking:
+    // 1. Input type is insertion (indicates auto-completion)
+    // 2. Value matches a complete suggestion exactly
+    // 3. Value is not empty/whitespace only
+    const isInsertion = event.inputType === 'insertReplacementText' || event.inputType === 'insertCompositionText'
+    const matchingSuggestion = suggestions.find(s =>
+      (s.createValue ?? toString(s)) === inputValue
+    )
+
+    if (isInsertion && matchingSuggestion && inputValue.trim() !== '') {
+      this.datalistSelectionInProgress = true
+      // Small delay to allow browser to finish processing the datalist selection
+      setTimeout(() => {
+        this.select(matchingSuggestion)
+        this.datalistSelectionInProgress = false
+      }, 50)
+    }
+  }}
+    />
+  `
+  }
+
+  private renderSuggestionList(suggestions: SimpleSelectorSuggestion[], selectorString: string): TemplateResult {
+    return html`
+      <datalist
+        id="suggestions"
+      >
+        ${ suggestions
+    .sort((a, b) => {
+      if (toString(a) === selectorString) return -1
+      if (toString(b) === selectorString) return 1
+      return 0
+    })
+    .map((sel) => html`
+            <option
+              value=${sel.createValue ?? toString(sel)}
+            >${sel.createText ?? toString(sel)}</option>
+        `)}
+      </datalist>
+    `
+  }
+
+  /**
+   * Option editor to edit the selector options, depending on the type
+   * Only the attribute selectors have options: `operator` and `value2`
+   */
+  private renderOptionsEditor(): TemplateResult {
+    if (this.value?.type !== SimpleSelectorType.ATTRIBUTE) throw new Error('Invalid selector type, only attribute selectors have options')
+    const selector = this.value as AttributeSelector
+    return html`
+          <select
+            class="asm-simple-selector__options-select"
+            id="operator"
+            @click=${ (event: MouseEvent) => {
+    // Avoid check/uncheck the "active" checkbox
+    event.stopPropagation()
+  }}
+            @change=${(event: Event) => {
+    const operator = (event.target as HTMLSelectElement).value as AttributeOperatorType
+    // Create a new selector object to trigger Lit's reactivity
+    this.value = {
+      ...selector,
+      operator,
+      attributeValue: operator ? this.attributeOptionsAttrValueRef.value?.value || '' : ''
+    } as AttributeSelector
+    this.dispatchEvent(new CustomEvent('change', { detail: this.value }))
+  }}
+              @keydown=${(event: KeyboardEvent) => {
+    if (event.key === ' ') {
+      event.stopPropagation()
+    }
+  }}
+          >
+            <option value="">...</option>
+            <option value="=" .selected=${selector.operator === '='}>=</option>
+            <option value="~=" .selected=${selector.operator === '~='}>~=</option>
+            <option value="|=" .selected=${selector.operator === '|='}>|=</option>
+            <option value="^=" .selected=${selector.operator === '^='}>^=</option>
+            <option value="$=" .selected=${selector.operator === '$='}>$=</option>
+            <option value="*=" .selected=${selector.operator === '*='}>*=</option>
+          </select>
+          ${selector.operator ? html`
+            "&nbsp;
+            <input
+              is="resize-input"
+              type="text"
+              ${ref(this.attributeOptionsAttrValueRef)}
+              autocomplete="off"
+              class="asm-simple-selector__like-text"
+              .value=${selector.attributeValue ?? ''}
+          @click=${ (event: MouseEvent) => {
+    // Avoid check/uncheck the "active" checkbox
+    event.stopPropagation()
+  }}
+              @keydown=${(event: KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      // Create a new selector object to trigger Lit's reactivity
+      this.value = {
+        ...selector,
+        attributeValue: (event.target as HTMLInputElement).value
+      } as AttributeSelector
+      this.select(this.value!)
+      event.stopPropagation()
+    } else if (event.key === 'Escape') {
+      ;(event.target as HTMLInputElement).value = selector.attributeValue ?? ''
+      this.cancelEdit()
+      event.stopPropagation()
+    }
+  }}
+    @focusout=${(event: FocusEvent) => {
+    // Create a new selector object to trigger Lit's reactivity
+    this.value = {
+      ...selector,
+      attributeValue: (event.target as HTMLInputElement).value
+    } as AttributeSelector
+    this.select(this.value!)
+  }}
+              @input=${(event: InputEvent) => {
+    // Create a new selector object to trigger Lit's reactivity
+    this.value = {
+      ...selector,
+      attributeValue: (event.target as HTMLInputElement).value
+    } as AttributeSelector
+    this.dispatchEvent(new CustomEvent('change', { detail: this.value }))
+  }}
+            />
+            &nbsp;"
+          ` : ''}
+        `
+  }
+}
+
+if (!customElements.get('simple-selector')) {
+  customElements.define('simple-selector', SimpleSelectorComponent)
+}

package/grapesjs-plugins/grapesjs-advanced-selector/src/i18n/en.ts

@@ -0,0 +1,75 @@
+export default {
+  'Remove': 'Remove',
+  'Specificity': 'Specificity',
+  'Edit selector': 'Edit selector',
+  'Copy style': 'Copy style',
+  'Paste style': 'Paste style',
+  'Clear style for this selector': 'Clear style for this selector',
+  'Help': 'Help',
+  'Troubleshooting guide': 'Troubleshooting guide',
+  'Relation': 'Relation',
+  'Add a new selector': 'Add a new selector',
+  'Pseudo Class': 'Pseudo Class',
+  'Delete': 'Delete',
+  'When it is': 'When it is',
+  'When it is a': 'When it is a',
+  'When it': 'When it',
+  'Style the': 'Style the',
+  'inside of': 'inside of',
+  'direct child of': 'direct child of ( > )',
+  'adjacent to': 'adjacent to ( + )',
+  'after': 'after ( ~ )',
+  'contains': 'contains ( :has )',
+  'does not match': 'does not match ( :not )',
+  'matches': 'matches ( :is )',
+  'matches (no spec)': 'matches ( :where )',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:where': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:where',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:is': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:is',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:not': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:not',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:has': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:has',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator': 'https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator': 'https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator': 'https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator': 'https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator',
+  'On mouse': 'On mouse',
+  'When': 'When',
+  'When it has the': 'When it has the',
+  'When the': 'When the',
+  'When it is the': 'When it is the',
+  'When it is within': 'When it is within',
+  'When URL matches': 'When URL matches',
+  'When it matches': 'When it matches',
+  'When the text direction is': 'When the text direction is',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:dir': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:dir',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:lang': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:lang',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:optional': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:optional',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:required': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:required',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:checked': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:checked',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:enabled': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:enabled',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:target': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:target',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:scope': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:scope',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:root': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:root',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:empty': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:empty',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:only-of-type': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:only-of-type',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-of-type': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-of-type',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:link': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:link',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:visited': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:visited',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:focus': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:focus',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:active': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:active',
+  'https://developer.mozilla.org/en-US/docs/Web/CSS/:hover': 'https://developer.mozilla.org/en-US/docs/Web/CSS/:hover',
+  'Current selector does not match the selected elements': 'Current selector does not match the selected elements',
+  'Current selector does not match all the selected elements': 'Current selector does not match all the selected elements',
+}