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 Oxide 3 imports

Entity Profile

Dependency Diagram

graph LR
  bb78506d_ddd4_0d95_9aaa_07c258999cbe["attribute-selector-parser.test.ts"]
  73875259_ec95_9835_94d8_655298d1f0e9["attribute-selector-parser.ts"]
  bb78506d_ddd4_0d95_9aaa_07c258999cbe --> 73875259_ec95_9835_94d8_655298d1f0e9
  117bca28_0677_ab3f_6eec_6019671b392d["parse"]
  bb78506d_ddd4_0d95_9aaa_07c258999cbe --> 117bca28_0677_ab3f_6eec_6019671b392d
  f1e05e5f_c1b2_a3f5_b2e8_3317b9243ac3["vitest"]
  bb78506d_ddd4_0d95_9aaa_07c258999cbe --> f1e05e5f_c1b2_a3f5_b2e8_3317b9243ac3
  style bb78506d_ddd4_0d95_9aaa_07c258999cbe 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 Oxide 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: Oxide, directory: packages/tailwindcss/src).

Analyze Your Own Codebase

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

Try Supermodel Free