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

Open
#149 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
javascript, scss, tailwindcss
Domain
tooling

Research direction

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.

Written by the indexing model from the issue text.

Description

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");
    }
  }
}
Dominant language
JavaScript
Stars
1.2k
Forks
64
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from postcss/postcss-nested

All issues in postcss/postcss-nested

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.