select all inputs with type as well as text area and select elements with :focus

Reproduce the two nested selector examples from the issue and inspect how the plugin transforms the nesting with and without the :focus suffix. The change is done when the second form produces the same focused selectors and its behavior is covered by a regression test.

Howdy! 👋

I am currently working on a TailwindCSS/PostCSS project and I am using the @tailwindcss/forms plugin. Unfortunately, it applies an undesired color styling to my forms. The author's recommended approach is to use normal CSS to override that color on the base layer which I am doing. I also have postcss-nested installed and configured on my project according to the instructions of TailwindCSS v3 documentation.

Given the two examples below, only the first one works. The second, which I wish it worked does not. I would like to know what I am doing wrong. :(

TLDR: The first example works but I have to add :focus suffix to all elements I want to target.

// Works
@layer base {
  [type="text"]:focus,
  [type="email"]:focus,
  [type="url"]:focus,
  [type="password"]:focus,
  [type="number"]:focus,
  [type="date"]:focus,
  [type="datetime-local"]:focus,
  [type="month"]:focus,
  [type="search"]:focus,
  [type="tel"]:focus,
  [type="time"]:focus,
  [type="week"]:focus,
  [multiple]:focus,
  textarea:focus,
  select:focus {
    border-color: theme("colors.primary-light");
  }
}

// Does not work
@layer base {
  [type="text"],
  [type="email"],
  [type="url"],
  [type="password"],
  [type="number"],
  [type="date"],
  [type="datetime-local"],
  [type="month"],
  [type="search"],
  [type="tel"],
  [type="time"],
  [type="week"],
  [multiple],
  textarea,
  select {
    &:focus {
      border-color: theme("colors.primary-light");
    }
  }
}