Functions and Mixins module treated as unknown at rules

[KTibow]

Various at rules from the Functions and Mixins module aren't recognized, instead treated as unknown at rules. Specifically, @function, @mixin, and @apply aren't recognized.

Downstream issue: sveltejs/language-tools#2913

[chloeburroughs]

A temporary workaround for this issue is to manually define them in the /.vscode folder of the project root, but these atRules should be merged in IMHO.

I've attached mine to hopefully make it a little easier. Customize as needed.

.vscode/settings.json

{
  "css.customData": [".vscode/atRules.json"]
}

.vscode/atRules.json

{
  "version": 1.1,
  "atDirectives": [
    {
      "name": "@nest",
      "description": "A property that shouldn't exist, but some libs PFR use (like player) use nonetheless. Argument in the docs.",
      "references": [
        {
          "name": "CSS Working Group Nesting Draft Issue 10234",
          "url": "https://github.com/w3c/csswg-drafts/issues/10234"
        }
      ]
    },
    {
      "name": "@custom-media",
      "description": "The @custom-media CSS at-rule defines aliases for long or complex media queries. Instead of repeating the same hardcoded <media-query-list> in multiple @media at-rules, it can be defined once in a @custom-media at-rule and referenced throughout the stylesheet whenever needed. Preprocessed by PostCSS.",
      "references": [
        {
          "name": "@custom-media - CSS | MDN",
          "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@custom-media"
        }
      ]
    },
    {
      "name": "@scope",
      "description": "The @scope CSS at-rule enables you to select elements in specific DOM subtrees, targeting elements precisely without writing overly-specific selectors that are hard to override, and without coupling your selectors too tightly to the DOM structure.",
      "references": [
        {
          "name": "MDN Web Docs > @scope",
          "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@scope"
        }
      ]
    },
    {
      "name": "@starting-style",
      "description": "The @starting-style CSS at-rule is used to define starting values for properties set on an element that you want to transition from when the element receives its first style update, i.e. when an element is first displayed on a previously loaded page.",
      "references": [
        {
          "name": "MDN Web Docs > @starting-style",
          "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style"
        }
      ]
    },
    {
      "name": "@view-transition",
      "description": "The @view-transition CSS at-rule is used to opt in the current and destination documents to undergo a view transition, in the case of a cross-document navigation.",
      "references": [
        {
          "name": "MDN Web Docs > @view-transition",
          "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@view-transition"
        }
      ]
    },
    {
      "name": "@mixin",
      "description": "Defines a reusable block of CSS declarations. A PostCSS/Sass construct — not native CSS."
    },
    {
      "name": "@function",
      "description": "Defines a reusable function that returns a value. A PostCSS/Sass construct — not native CSS."
    },
    {
      "name": "@apply",
      "description": "Applies a defined mixin or utility class inline. A PostCSS/Tailwind construct — not native CSS."
    }
  ]
}