Repository: tailwindlabs/tailwindcss
File: packages/tailwindcss/src/variants.test.ts (TypeScript)

Code before:
      display: flex;
    }

    .aria-checked\\:flex[aria-checked="true"] {
      display: flex;
    }

    .aria-\\[invalid\\=spelling\\]\\:flex[aria-invalid="spelling"] {
      display: flex;
    }

    .aria-\\[valuenow\\=1\\]\\:flex[aria-valuenow="1"] {
      display: flex;
    }"
  `)
  expect(run(['aria-checked/foo:flex', 'aria-[invalid=spelling]/foo:flex'])).toEqual('')
})

test('data', () => {
  expect(
    run([
      'data-disabled:flex',
      'data-[potato=salad]:flex',
      'data-[foo=1]:flex',
      'data-[foo=bar baz]:flex',
      "data-[foo$='bar' i]:flex",

      'group-data-[disabled]:flex',
      'group-data-[disabled]/parent-name:flex',
      'group-data-[foo=1]:flex',
      'group-data-[foo=1]/parent-name:flex',
      'group-data-[foo=bar baz]/parent-name:flex',
      "group-data-[foo$='bar' i]/parent-name:flex",

      'peer-data-[disabled]:flex',
      'peer-data-[disabled]/parent-name:flex',
      'peer-data-[foo=1]:flex',
      'peer-data-[foo=1]/parent-name:flex',
      'peer-data-[foo=bar baz]/parent-name:flex',
      "peer-data-[foo$='bar' i]/parent-name:flex",
    ]),
  ).toMatchInlineSnapshot(`
    ".group-data-\\[disabled\\]\\:flex:is(:where(.group)[data-disabled] *) {
      display: flex;
    }

    .group-data-\\[disabled\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-disabled] *) {
      display: flex;
    }

    .group-data-\\[foo\\=1\\]\\:flex:is(:where(.group)[data-foo="1"] *) {

Review comment (suggestion):
We should use `_` instead of ` ` here:
```suggestion
      'data-[foo=bar_baz]:flex',
      "data-[foo$='bar'_i]:flex",
```

Code after:
      display: flex;
    }

    .aria-checked\\:flex[aria-checked="true"] {
      display: flex;
    }

    .aria-\\[invalid\\=spelling\\]\\:flex[aria-invalid="spelling"] {
      display: flex;
    }

    .aria-\\[valuenow\\=1\\]\\:flex[aria-valuenow="1"] {
      display: flex;
    }"
  `)
  expect(run(['aria-checked/foo:flex', 'aria-[invalid=spelling]/foo:flex'])).toEqual('')
})

test('data', () => {
  expect(
    run([
      'data-disabled:flex',
      'data-[potato=salad]:flex',
      'data-[foo=1]:flex',
      'data-[foo=bar_baz]:flex',
      "data-[foo$='bar'_i]:flex",
      'data-[foo$=bar_baz_i]:flex',

      'group-data-[disabled]:flex',
      'group-data-[disabled]/parent-name:flex',
      'group-data-[foo=1]:flex',
      'group-data-[foo=1]/parent-name:flex',
      'group-data-[foo=bar baz]/parent-name:flex',
      "group-data-[foo$='bar'_i]/parent-name:flex",
      'group-data-[foo$=bar_baz_i]/parent-name:flex',

      'peer-data-[disabled]:flex',
      'peer-data-[disabled]/parent-name:flex',
      'peer-data-[foo=1]:flex',
      'peer-data-[foo=1]/parent-name:flex',
      'peer-data-[foo=bar baz]/parent-name:flex',
      "peer-data-[foo$='bar'_i]/parent-name:flex",
      'peer-data-[foo$=bar_baz_i]/parent-name:flex',
    ]),
  ).toMatchInlineSnapshot(`
    ".group-data-\\[disabled\\]\\:flex:is(:where(.group)[data-disabled] *) {
      display: flex;
    }

    .group-data-\\[disabled\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-disabled] *) {
      display: flex;