Skip to content

Replace scss/at-rule-no-unknown config with files.associations config? #152

@karlhorky

Description

@karlhorky

Can the files.associations['.css'] = 'tailwindcss' configuration with the Tailwind CSS IntelliSense VS Code extension be used to replace the custom at-rules configuration we do for the scss/at-rule-no-unknown rule?

Eg. using this:

  "files.associations": {
    "*.css": "tailwindcss"
  },

Instead of this:

'scss/at-rule-no-unknown': [
true,
{
ignoreAtRules: [
// Tailwind CSS Directives
// - https://tailwindcss.com/docs/functions-and-directives
'config',
'plugin',
'source',
'tailwind',
'theme',
'utility',
'variant',
'custom-variant',
],
},
],

It may also require a configuration of the tailwindcss syntax in .vscode/settings.json eg:

  "stylelint.validate": [
    "css",
    "scss",
    "postcss",
+   "tailwindcss",
    "javascript",
    "typescriptreact"
  ],

https://github.com/upleveled/eslint-config-upleveled/blob/b010209d26e19fdf7d18f0f57f1d178d800d7943/templates/next-js-postgresql/.vscode/settings.json#L6-L12


If the files.associations configuration for Tailwind CSS IntelliSense doesn't work, then maybe a new issue should be reported to stylelint-scss:

Title: `scss/at-rule-no-unknown` `ignoreAtRules` configuration for Tailwind CSS

Description:

TODO: write full description

[Tailwind CSS has a number of directives](https://tailwindcss.com/docs/functions-and-directives), which are reported as unknown at-rules by `scss/at-rule-no-unknown`.

These directives can be ignored manually by users, but then all users need to maintain this list over time:

https://github.com/upleveled/stylelint-config-upleveled/blob/96efa796d2b1692d3a97d09c4ca4f3ad40515e5c/index.cjs#L20-L36

Instead, this configuration could be absorbed and maintained by stylelint-scss.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions