tailwindcss Architecture Docs
Home / File/ attribute-selector-parser.test.ts — tailwindcss Source File

attribute-selector-parser.test.ts — tailwindcss Source File

Architecture documentation for attribute-selector-parser.test.ts, a typescript file in the tailwindcss codebase. 3 imports, 0 dependents.

File typescript OxideEngine 3 imports

Entity Profile

Dependency Diagram

graph LR
  e7ab393f_55e4_e393_4aee_3d5068430a7f["attribute-selector-parser.test.ts"]
  73e07df9_b6bc_e7d7_b7c1_3151a7ee5c27["attribute-selector-parser.ts"]
  e7ab393f_55e4_e393_4aee_3d5068430a7f --> 73e07df9_b6bc_e7d7_b7c1_3151a7ee5c27
  b9517e77_a36f_4751_899c_27d813f3dbb3["parse"]
  e7ab393f_55e4_e393_4aee_3d5068430a7f --> b9517e77_a36f_4751_899c_27d813f3dbb3
  696bd648_5f24_1b59_8e8b_7a97a692869e["vitest"]
  e7ab393f_55e4_e393_4aee_3d5068430a7f --> 696bd648_5f24_1b59_8e8b_7a97a692869e
  style e7ab393f_55e4_e393_4aee_3d5068430a7f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { describe, expect, it } from 'vitest'
import { parse } from './attribute-selector-parser'

describe('parse', () => {
  it.each([
    [''],
    [']'],
    ['[]'],
    ['['],
    ['="value"'],
    ['data-foo]'],
    ['[data-foo'],
    ['[data-foo="foo]'],
    ['[data-foo * = foo]'],
    ['[data-foo*=]'],
    ['[data-foo=value x]'],
    ['[data-foo=value ix]'],
  ])('should parse an invalid attribute selector (%s) as `null`', (input) => {
    expect(parse(input)).toBeNull()
  })

  it.each([
    [
      '[data-foo]',
      { attribute: 'data-foo', operator: null, quote: null, value: null, sensitivity: null },
    ],
    [
      '[ data-foo ]',
      { attribute: 'data-foo', operator: null, quote: null, value: null, sensitivity: null },
    ],
    [
      '[data-state=expanded]',
      { attribute: 'data-state', operator: '=', quote: null, value: 'expanded', sensitivity: null },
    ],
    [
      '[data-state = expanded ]',
      { attribute: 'data-state', operator: '=', quote: null, value: 'expanded', sensitivity: null },
    ],
    [
      '[data-state*="expanded"]',
      { attribute: 'data-state', operator: '*=', quote: '"', value: 'expanded', sensitivity: null },
    ],
    [
      '[data-state*="expanded"i]',
      { attribute: 'data-state', operator: '*=', quote: '"', value: 'expanded', sensitivity: 'i' },
    ],
    [
      '[data-state*=expanded i]',
      { attribute: 'data-state', operator: '*=', quote: null, value: 'expanded', sensitivity: 'i' },
    ],
  ])('should parse correctly: %s', (selector, expected) => {
    expect(parse(selector)).toEqual(expected)
  })

  it('should work with a real-world example', () => {
    expect(parse('[data-url$=".com"i]')).toEqual({
      attribute: 'data-url',
      operator: '$=',
      quote: '"',
      value: '.com',
      sensitivity: 'i',
    })
  })
})

Domain

Dependencies

Source

Frequently Asked Questions

What does attribute-selector-parser.test.ts do?
attribute-selector-parser.test.ts is a source file in the tailwindcss codebase, written in typescript. It belongs to the OxideEngine domain.
What does attribute-selector-parser.test.ts depend on?
attribute-selector-parser.test.ts imports 3 module(s): attribute-selector-parser.ts, parse, vitest.
Where is attribute-selector-parser.test.ts in the architecture?
attribute-selector-parser.test.ts is located at packages/tailwindcss/src/attribute-selector-parser.test.ts (domain: OxideEngine, directory: packages/tailwindcss/src).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free