[bug] `media-query-no-invalid` fails for tailwind `@media screen() {}`

[codepuncher]

Agreement

• [X] This is not a duplicate of an existing issue
• [X] I have read the guidelines for Contributing to Roots Projects
• [X] This is not a personal support request that should be posted on the Roots Discourse community

Describe the issue

Using the latest Bud Stylelint and Tailwind does not allow using the Tailwind screen function in media queries. Related: https://github.com/stylelint/stylelint/issues/6916

Temporary fix:

.stylelintrc

{
  "extends": [
    "@roots/sage/stylelint-config",
    "@roots/bud-tailwindcss/stylelint-config"
  ],
  "rules": {
    "media-query-no-invalid": null
  }
}

Expected Behavior

To not error

Actual Behavior

Produces an error regarding the unknown screen function in a media query

Steps To Reproduce

When using the following code with bud stylelint and tailwind

@media screen(lg) {
  padding-top: 1px;
}

it will produce

$ bud build

╭ sage [5ab2a2a6940f3532]                                                                                                           ./public
│
│ │ [stylelint]
│ │ resources/styles/app.css
│ │  128:12  ✖  Unexpected invalid media query "screen(lg)"  media-query-no-invalid
│ │ 1 problem (1 error, 0 warnings)
│
╰ 1 error

version

6.20.0

Logs

No response

Configuration

No response

Relevant .budfiles

No response

[johanmolen]

Experiencing the same issue.

[github-actions[bot]]

Message to comment on stale issues. If none provided, will not mark issues stale