Skip to content

Commit d891dc3

Browse files
andrewmumblebeeandrewmumblebee
committed
Added css modules support
1 parent 023ae39 commit d891dc3

File tree

3 files changed

+233
-78
lines changed

3 files changed

+233
-78
lines changed

‎README.md

Lines changed: 107 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,107 @@
1-
packages/tailwindcss-intellisense/README.md
1+
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/.github/banner-dark.png" alt="" />
2+
3+
**This is a tweaked version of the tailwindcss vscode package, so that the apply hints show up after composes: when using css modules**
4+
5+
Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting.
6+
7+
## Installation
8+
9+
**[Install via the Visual Studio Code Marketplace →](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)**
10+
11+
In order for the extension to activate you must have [`tailwindcss` installed](https://tailwindcss.com/docs/installation/#1-install-tailwind-via-npm) and a [Tailwind config file](https://tailwindcss.com/docs/installation/#3-create-your-tailwind-config-file-optional) named `tailwind.config.js` or `tailwind.js` in your workspace.
12+
13+
## Features
14+
15+
### Autocomplete
16+
17+
Intelligent suggestions for class names, as well as [CSS functions and directives](https://tailwindcss.com/docs/functions-and-directives/).
18+
19+
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/.github/autocomplete.png" alt="" />
20+
21+
### Linting
22+
23+
Highlights errors and potential bugs in both your CSS and your markup.
24+
25+
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/.github/linting.png" alt="" />
26+
27+
### Hover Preview
28+
29+
See the complete CSS for a Tailwind class name by hovering over it.
30+
31+
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/.github/hover.png" alt="" />
32+
33+
### CSS Syntax Highlighting
34+
35+
Provides syntax definitions so that Tailwind features are highlighted correctly.
36+
37+
## Settings
38+
39+
### `tailwindCSS.includeLanguages`
40+
41+
This setting allows you to add additional language support. The key of each entry is the new language ID and the value is any one of the extensions built-in languages, depending on how you want the new language to be treated (e.g. `html`, `css`, or `javascript`):
42+
43+
```json
44+
{
45+
"tailwindCSS.includeLanguages": {
46+
"plaintext": "html"
47+
}
48+
}
49+
```
50+
51+
### `tailwindCSS.emmetCompletions`
52+
53+
Enable completions when using [Emmet](https://emmet.io/)-style syntax, for example `div.bg-red-500.uppercase`. **Default: `false`**
54+
55+
```json
56+
{
57+
"tailwindCSS.emmetCompletions": true
58+
}
59+
```
60+
61+
### `tailwindCSS.colorDecorators`
62+
63+
Controls whether the editor should render inline color decorators for Tailwind CSS classes and helper functions.
64+
65+
- `inherit`: Color decorators are rendered if `editor.colorDecorators` is enabled.
66+
- `on`: Color decorators are rendered.
67+
- `off`: Color decorators are not rendered.
68+
69+
### `tailwindCSS.validate`
70+
71+
Enable linting. Rules can be configured individually using the `tailwindcss.lint` settings:
72+
73+
- `ignore`: disable lint rule entirely
74+
- `warning`: rule violations will be considered "warnings," typically represented by a yellow underline
75+
- `error`: rule violations will be considered "errors," typically represented by a red underline
76+
77+
#### `tailwindCSS.lint.invalidScreen`
78+
79+
Unknown screen name used with the [`@screen` directive](https://tailwindcss.com/docs/functions-and-directives/#screen). **Default: `error`**
80+
81+
#### `tailwindCSS.lint.invalidVariant`
82+
83+
Unknown variant name used with the [`@variants` directive](https://tailwindcss.com/docs/functions-and-directives/#variants). **Default: `error`**
84+
85+
#### `tailwindCSS.lint.invalidTailwindDirective`
86+
87+
Unknown value used with the [`@tailwind` directive](https://tailwindcss.com/docs/functions-and-directives/#tailwind). **Default: `error`**
88+
89+
#### `tailwindCSS.lint.invalidApply`
90+
91+
Unsupported use of the [`@apply` directive](https://tailwindcss.com/docs/functions-and-directives/#apply). **Default: `error`**
92+
93+
#### `tailwindCSS.lint.invalidConfigPath`
94+
95+
Unknown or invalid path used with the [`theme` helper](https://tailwindcss.com/docs/functions-and-directives/#theme). **Default: `error`**
96+
97+
#### `tailwindCSS.lint.cssConflict`
98+
99+
Class names on the same HTML element which apply the same CSS property or properties. **Default: `warning`**
100+
101+
## Troubleshooting
102+
103+
If you’re having issues getting the IntelliSense features to activate, there are a few things you can check:
104+
105+
- Ensure that you have a Tailwind config file in your workspace and that this is named `tailwind.config.js` or `tailwind.js`. Check out the Tailwind documentation for details on [creating a config file](https://tailwindcss.com/docs/installation/#3-create-your-tailwind-config-file-optional).
106+
- Ensure that the `tailwindcss` module is installed in your workspace, via `npm`, `yarn`, or `pnpm`. Tailwind CSS IntelliSense does not currently support Yarn Plug'n'Play.
107+
- If you installed `tailwindcss` or created your config file while your project was already open in Visual Studio Code you may need to reload the editor. You can either restart VS Code entirely, or use the `Developer: Reload Window` command which can be found in the command palette.

‎packages/tailwindcss-intellisense/syntaxes/tailwind.tmLanguage.json

Lines changed: 120 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,120 @@
1-
{
2-
"scopeName": "tailwindcss.injection",
3-
"fileTypes": [],
4-
"injectionSelector": "meta.property-list.css, meta.property-list.scss",
5-
"name": "TailwindCSS",
6-
"patterns": [
7-
{
8-
"begin": "(@)apply\\b",
9-
"beginCaptures": {
10-
"0": {
11-
"name": "keyword.control.at-rule.apply.tailwind"
12-
},
13-
"1": {
14-
"name": "punctuation.definition.keyword.tailwind"
15-
}
16-
},
17-
"end": ";",
18-
"endCaptures": {
19-
"0": {
20-
"name": "punctuation.terminator.rule.tailwind"
21-
}
22-
},
23-
"patterns": [
24-
{
25-
"begin": "(?x)\n(?=\n (?:\\|)? # Possible anonymous namespace prefix\n (?:\n [-\\[:.*\\#a-zA-Z_] # Valid selector character\n |\n [^\\x00-\\x7F] # Which can include non-ASCII symbols\n |\n \\\\ # Or an escape sequence\n (?:[0-9a-fA-F]{1,6}|.)\n )\n)",
26-
"end": "(?=\\s*[;])",
27-
"patterns": [
28-
{
29-
"match": "!\\s*important(?![\\w-])",
30-
"name": "keyword.other.important.tailwind"
31-
},
32-
{
33-
"captures": {
34-
"1": {
35-
"name": "punctuation.definition.entity.tailwind"
36-
},
37-
"2": {
38-
"patterns": [
39-
{
40-
"include": "source.css#escapes"
41-
}
42-
]
43-
}
44-
},
45-
"match": "(?x)\n(\\.)? # Valid class-name\n(\n (?: [-a-zA-Z_0-9]|[^\\x00-\\x7F] # Valid identifier characters\n | \\\\(?:[0-9a-fA-F]{1,6}|.) # Escape sequence\n )+\n) # Followed by either:\n(?= $ # - End of the line\n | [\\s,.\\#)\\[:{>;+~|] # - Another selector\n | /\\* # - A block comment\n)",
46-
"name": "entity.other.attribute-name.class.tailwind"
47-
}
48-
]
49-
}
50-
]
51-
},
52-
{
53-
"begin": "(?i)(?<![\\w-])(config|theme)(\\()",
54-
"beginCaptures": {
55-
"1": {
56-
"name": "support.function.config.tailwind"
57-
},
58-
"2": {
59-
"name": "punctuation.section.function.begin.bracket.round.tailwind"
60-
}
61-
},
62-
"end": "\\)",
63-
"endCaptures": {
64-
"0": {
65-
"name": "punctuation.section.function.end.bracket.round.tailwind"
66-
}
67-
},
68-
"patterns": [
69-
{
70-
"include": "source.css#property-values"
71-
}
72-
]
73-
}
74-
]
75-
}
1+
{
2+
"scopeName": "tailwindcss.injection",
3+
"fileTypes": [],
4+
"injectionSelector": "meta.property-list.css, meta.property-list.scss",
5+
"name": "TailwindCSS",
6+
"patterns": [
7+
{
8+
"begin": "(@)apply\\b",
9+
"beginCaptures": {
10+
"0": {
11+
"name": "keyword.control.at-rule.apply.tailwind"
12+
},
13+
"1": {
14+
"name": "punctuation.definition.keyword.tailwind"
15+
}
16+
},
17+
"end": ";",
18+
"endCaptures": {
19+
"0": {
20+
"name": "punctuation.terminator.rule.tailwind"
21+
}
22+
},
23+
"patterns": [
24+
{
25+
"begin": "(?x)\n(?=\n (?:\\|)? # Possible anonymous namespace prefix\n (?:\n [-\\[:.*\\#a-zA-Z_] # Valid selector character\n |\n [^\\x00-\\x7F] # Which can include non-ASCII symbols\n |\n \\\\ # Or an escape sequence\n (?:[0-9a-fA-F]{1,6}|.)\n )\n)",
26+
"end": "(?=\\s*[;])",
27+
"patterns": [
28+
{
29+
"match": "!\\s*important(?![\\w-])",
30+
"name": "keyword.other.important.tailwind"
31+
},
32+
{
33+
"captures": {
34+
"1": {
35+
"name": "punctuation.definition.entity.tailwind"
36+
},
37+
"2": {
38+
"patterns": [
39+
{
40+
"include": "source.css#escapes"
41+
}
42+
]
43+
}
44+
},
45+
"match": "(?x)\n(\\.)? # Valid class-name\n(\n (?: [-a-zA-Z_0-9]|[^\\x00-\\x7F] # Valid identifier characters\n | \\\\(?:[0-9a-fA-F]{1,6}|.) # Escape sequence\n )+\n) # Followed by either:\n(?= $ # - End of the line\n | [\\s,.\\#)\\[:{>;+~|] # - Another selector\n | /\\* # - A block comment\n)",
46+
"name": "entity.other.attribute-name.class.tailwind"
47+
}
48+
]
49+
}
50+
]
51+
},
52+
{
53+
"begin": "composes(:)\\b",
54+
"beginCaptures": {
55+
"0": {
56+
"name": "keyword.control.composes-rule.apply.tailwind"
57+
},
58+
"1": {
59+
"name": "punctuation.definition.keyword.tailwind"
60+
}
61+
},
62+
"end": ";",
63+
"endCaptures": {
64+
"0": {
65+
"name": "punctuation.terminator.rule.tailwind"
66+
}
67+
},
68+
"patterns": [
69+
{
70+
"begin": "(?x)\n(?=\n (?:\\|)? # Possible anonymous namespace prefix\n (?:\n [-\\[:.*\\#a-zA-Z_] # Valid selector character\n |\n [^\\x00-\\x7F] # Which can include non-ASCII symbols\n |\n \\\\ # Or an escape sequence\n (?:[0-9a-fA-F]{1,6}|.)\n )\n)",
71+
"end": "(?=\\s*[;])",
72+
"patterns": [
73+
{
74+
"match": "!\\s*important(?![\\w-])",
75+
"name": "keyword.other.important.tailwind"
76+
},
77+
{
78+
"captures": {
79+
"1": {
80+
"name": "punctuation.definition.entity.tailwind"
81+
},
82+
"2": {
83+
"patterns": [
84+
{
85+
"include": "source.css#escapes"
86+
}
87+
]
88+
}
89+
},
90+
"match": "(?x)\n(\\.)? # Valid class-name\n(\n (?: [-a-zA-Z_0-9]|[^\\x00-\\x7F] # Valid identifier characters\n | \\\\(?:[0-9a-fA-F]{1,6}|.) # Escape sequence\n )+\n) # Followed by either:\n(?= $ # - End of the line\n | [\\s,.\\#)\\[:{>;+~|] # - Another selector\n | /\\* # - A block comment\n)",
91+
"name": "entity.other.attribute-name.class.tailwind"
92+
}
93+
]
94+
}
95+
]
96+
},
97+
{
98+
"begin": "(?i)(?<![\\w-])(config|theme)(\\()",
99+
"beginCaptures": {
100+
"1": {
101+
"name": "support.function.config.tailwind"
102+
},
103+
"2": {
104+
"name": "punctuation.section.function.begin.bracket.round.tailwind"
105+
}
106+
},
107+
"end": "\\)",
108+
"endCaptures": {
109+
"0": {
110+
"name": "punctuation.section.function.end.bracket.round.tailwind"
111+
}
112+
},
113+
"patterns": [
114+
{
115+
"include": "source.css#property-values"
116+
}
117+
]
118+
}
119+
]
120+
}

‎packages/tailwindcss-language-service/src/completionProvider.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -207,10 +207,14 @@ function provideAtApplyCompletions(
207207
end: position,
208208
})
209209

210-
const match = findLast(/@apply\s+(?<classList>[^;}]*)$/gi, str)
210+
let match = findLast(/@apply\s+(?<classList>[^;}]*)$/gi, str)
211211

212212
if (match === null) {
213-
return null
213+
match = findLast(/composes:\s+(?<classList>[^;}]*)$/gi, str);
214+
215+
if (match === null) {
216+
return null;
217+
}
214218
}
215219

216220
const classList = match.groups.classList

0 commit comments

Comments
 (0)