Home

tailwind-ctp-intellisense @master - refs - log -
-
https://git.jolheiser.com/tailwind-ctp-intellisense.git
Tailwind intellisense + Catppuccin
tree log patch
Merge branch 'master' into diagnostics
Brad Cornes <bradlc41@gmail.com>
5 years ago
11 changed files, 337 additions(+), 19 deletions(-)
.vscode/launch.json.vscode/tasks.json.vscodeignoreCHANGELOG.mdREADME.mdpackage-lock.jsonpackage.jsonsrc/class-names/runPlugin.jssrc/lib/languages.tssrc/lsp/util/find.tssrc/lsp/util/html.ts
I .vscode/launch.json
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100755
index 0000000000000000000000000000000000000000..96122674e2d63396dd0b10c0bf104d240a8612b3
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,37 @@
+{
+  "version": "0.2.0",
+  // List of configurations. Add new configurations or edit existing ones.
+  "configurations": [
+    {
+      "type": "extensionHost",
+      "request": "launch",
+      "name": "Launch Client",
+      "runtimeExecutable": "${execPath}",
+      "args": ["--extensionDevelopmentPath=${workspaceRoot}"],
+      "stopOnEntry": false,
+      "sourceMaps": true,
+      "outFiles": ["${workspaceRoot}/dist/extension/**/*.js"],
+      // "preLaunchTask": "npm: dev"
+    },
+    {
+      "type": "node",
+      "request": "attach",
+      "name": "Attach to Server 6011",
+      "address": "localhost",
+      "protocol": "inspector",
+      "port": 6011,
+      "sourceMaps": true,
+      "outFiles": ["${workspaceRoot}/dist/server/**/*.js"]
+    },
+    {
+      "type": "node",
+      "request": "attach",
+      "name": "Attach to Server 6012",
+      "address": "localhost",
+      "protocol": "inspector",
+      "port": 6012,
+      "sourceMaps": true,
+      "outFiles": ["${workspaceRoot}/dist/server/**/*.js"]
+    }
+  ]
+}
I .vscode/tasks.json
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
new file mode 100755
index 0000000000000000000000000000000000000000..4b2d95fe13eb02d623db226f4c62c341dd430e6a
--- /dev/null
+++ b/.vscode/tasks.json
@@ -0,0 +1,29 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "build",
+      "group": "build",
+      "presentation": {
+        "panel": "dedicated",
+        "reveal": "never"
+      },
+      "problemMatcher": ["$tsc"]
+    },
+    {
+      "type": "npm",
+      "script": "dev",
+      "isBackground": true,
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      },
+      "presentation": {
+        "panel": "dedicated",
+        "reveal": "never"
+      },
+      "problemMatcher": ["$tsc-watch"]
+    }
+  ]
+}
M .vscodeignore.vscodeignore
1
2
3
4
5
6
7
8
9
diff --git a/.vscodeignore b/.vscodeignore
index 97c56c39e30c52254dc9c4f086271f56dfa4ff20..eef67fbd5ddbdef7a67fc3a82d8672cdf6962895 100755
--- a/.vscodeignore
+++ b/.vscodeignore
@@ -7,3 +7,4 @@ **/tsconfig.base.json
 contributing.md
 node_modules/**
 src/**
+tests/**
I CHANGELOG.md
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000000000000000000000000000000000000..f8bf3f3ba96f9cb15680ba52eb982625599c7293
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,75 @@
+# Changelog
+
+## 0.3.0
+
+### General
+
+- Added support for string values in Tailwind's `important` option (#96)
+- Removed all unnecessary logs (#91)
+- Added support for components in addition to utilities (#67)
+- Added description to custom variant completion items where possible
+- Config parsing errors are now displayed in the VS Code UI
+- Class names from `@tailwind base` are now included (by default `@tailwind base` does not include any class names but plugins may contribute them)
+- Color swatches can now be displayed for rules with multiple properties and/or colors with variable alpha (#113)
+- Added `tailwindCSS.includeLanguages` setting:
+  ```json
+  {
+    "tailwindCSS.includeLanguages": {
+      "plaintext": "html"
+    }
+  }
+  ```
+  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`)
+
+### HTML
+
+- Added built-in support for `liquid`, `aspnetcorerazor`, `mustache`, `HTML (EEx)`, `html-eex`, `gohtml`, `GoHTML`, and `hbs` languages
+- Added syntax definition to embedded stylesheets in HTML files
+
+### CSS
+
+- Added built-in support for `sugarss` language
+- Added `theme` (and `config`) helper hovers
+- Added `@apply` class name hovers
+- Added directive completion items with links to documentation
+- Added `@tailwind` completion items (`preflight`/`base`, `utilities`, `components`, `screens`) with links to documentation
+- Helper completion items that contain the `.` character will now insert square brackets when selected
+- `@apply` completion list now excludes class names that are not compatible
+- Added CSS syntax highlighting in `.vue` files (#15)
+
+### JS(X)
+
+- Completions now trigger when using backticks (#50, #93):
+  ```js
+  const App = () => <div className={`_
+  ```
+
+## 0.2.0
+
+- Support for Tailwind v1 via LSP 🎉
+- Support for multi-root workspaces
+- Support for reason, slim, edge, njk, svelte files (thanks [@nhducit](https://github.com/nhducit), [@wayness](https://github.com/wayness), [@mattwaler](https://github.com/mattwaler), [@guillaumebriday](https://github.com/guillaumebriday))
+- Support for non-default Tailwind separators
+- Add `@variants` completions
+- Better support for dynamic class(Name) values in JSX
+- Disables Emmet support by default. This can be enabled via the `tailwindCSS.emmetCompletions` setting
+
+## 0.1.16
+
+- add support for [EEx templates](https://hexdocs.pm/phoenix/templates.html), via [vscode-elixir](https://marketplace.visualstudio.com/items?itemName=mjmcloug.vscode-elixir) – thanks [@dhc02](https://github.com/dhc02)
+
+## 0.1.15
+
+- add support for [leaf](https://github.com/vapor/leaf) files (#16)
+
+## 0.1.10
+
+- add syntax definitions for `@apply` and `config()`:
+
+  **Before:**
+
+  <img src="https://user-images.githubusercontent.com/2615508/44740655-ed02ee80-aaf2-11e8-8d3e-1075e0801fd7.png" alt="Syntax highlighting before update" width="345" />
+
+  **After:**
+
+  <img src="https://user-images.githubusercontent.com/2615508/44740606-cba20280-aaf2-11e8-92b8-42adbfe54c61.png" alt="Syntax highlighting after update" width="345" />
I README.md
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
diff --git a/README.md b/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..27cc6e8c480bc703fa2c9a987bd60aac0b73250a
--- /dev/null
+++ b/README.md
@@ -0,0 +1,81 @@
+# Tailwind CSS IntelliSense
+
+> [Tailwind CSS](https://tailwindcss.com/) class name completion for VS Code
+
+**[Get it from the VS Code Marketplace →](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)**
+
+<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/html.gif" alt="HTML autocompletion" width="750">
+
+## Requirements
+
+This extension requires:
+- a `tailwind.config.js` file to be [present in your project folder](https://github.com/bradlc/vscode-tailwindcss/blob/master/package.json#L38). You can create it with `npx tailwind init`.
+- `tailwindcss` to be installed (present in project `node_modules/`)
+
+## Features
+
+Tailwind CSS IntelliSense uses your projects Tailwind installation and configuration to provide suggestions as you type.
+
+It also includes features that improve the overall Tailwind experience, including improved syntax highlighting, and CSS previews.
+
+### HTML (including Vue, JSX, PHP etc.)
+
+- [Class name suggestions, including support for Emmet syntax](#class-name-suggestions-including-support-for-emmet-syntax)
+  - Suggestions include color previews where applicable, for example for text and background colors
+  - They also include a preview of the actual CSS for that class name
+- [CSS preview when hovering over class names](#css-preview-when-hovering-over-class-names)
+
+### CSS
+
+- [Suggestions when using `@apply` and config helpers](#suggestions-when-using-apply-and-config)
+- Suggestions when using the `@screen` directive
+- Suggestions when using the `@variants` directive
+- [Improves syntax highlighting when using `@apply` and config helpers](#improves-syntax-highlighting-when-using-apply-and-config-helpers)
+
+## Examples
+
+#### Class name suggestions, including support for Emmet syntax
+
+<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/html.gif" alt="HTML autocompletion" width="750">
+
+#### CSS preview when hovering over class names
+
+<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/html-hover.gif" alt="HTML hover preview" width="750">
+
+#### Suggestions when using `@apply` and config helpers
+
+<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/css.gif" alt="CSS autocompletion" width="750">
+
+#### Improves syntax highlighting when using `@apply` and config helpers
+
+Before:
+
+<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/css-highlighting-before.png" alt="CSS syntax highlighting before" width="400">
+
+After:
+
+<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/css-highlighting-after.png" alt="CSS syntax highlighting after" width="400">
+
+## Settings
+
+### `tailwindCSS.includeLanguages`
+
+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`):
+
+```json
+{
+  "tailwindCSS.includeLanguages": {
+    "plaintext": "html"
+  }
+}
+```
+
+### `tailwindcss.emmetCompletions`
+
+Enable completions when using [Emmet](https://emmet.io/)-style syntax, for example `div.bg-red-500.uppercase`. **Default: `false`**
+
+```json
+{
+  "tailwindCSS.emmetCompletions": true
+}
+```
M package-lock.jsonpackage-lock.json
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
diff --git a/package-lock.json b/package-lock.json
index f844afb78a3c31adf7b940746d88f9e90ad99f41..9f6cc9e8f8945efca1701457b98f5e55ae655dfe 100755
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "vscode-tailwindcss",
-	"version": "0.3.0-alpha.2",
+	"version": "0.3.0",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
@@ -4845,9 +4845,9 @@ 				"uc.micro": "^1.0.5"
 			},
 			"dependencies": {
 				"entities": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/entities/-/entities-2.0.0.tgz",
-					"integrity": "sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw==",
+					"version": "2.0.3",
+					"resolved": "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz",
+					"integrity": "sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ==",
 					"dev": true
 				}
 			}
@@ -6896,9 +6896,9 @@ 				"extsprintf": "^1.2.0"
 			}
 		},
 		"vsce": {
-			"version": "1.75.0",
-			"resolved": "https://registry.npmjs.org/vsce/-/vsce-1.75.0.tgz",
-			"integrity": "sha512-qyAQTmolxKWc9bV1z0yBTSH4WEIWhDueBJMKB0GUFD6lM4MiaU1zJ9BtzekUORZu094YeNSKz0RmVVuxfqPq0g==",
+			"version": "1.76.1",
+			"resolved": "https://registry.npmjs.org/vsce/-/vsce-1.76.1.tgz",
+			"integrity": "sha512-WNx6JzRywxAOuhVpjmrsI0eHMK0mCA0YKD8u++7sprmhwCHsoQIBpSf0vp6kVMHBmafknr1Z6K7IC5jIjsNL9Q==",
 			"dev": true,
 			"requires": {
 				"azure-devops-node-api": "^7.2.0",
M package.jsonpackage.json
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
diff --git a/package.json b/package.json
index 0b515cadd282395481a1489f142d1b951f894696..456a3dccab16c2e9747c42d823e08749a55f1c98 100755
--- a/package.json
+++ b/package.json
@@ -5,10 +5,15 @@   "description": "Tailwind CSS class name completion",
   "preview": true,
   "author": "Brad Cornes <hello@bradley.dev>",
   "license": "MIT",
-  "version": "0.3.0-alpha.2",
+  "version": "0.3.0",
+  "homepage": "https://github.com/bradlc/vscode-tailwindcss",
+  "bugs": {
+    "url": "https://github.com/bradlc/vscode-tailwindcss/issues",
+    "email": "hello@bradley.dev"
+  },
   "repository": {
     "type": "git",
-    "url": "https://github.com/bradlc/"
+    "url": "https://github.com/bradlc/vscode-tailwindcss.git"
   },
   "publisher": "bradlc",
   "keywords": [
@@ -55,11 +60,12 @@       "properties": {
         "tailwindCSS.emmetCompletions": {
           "type": "boolean",
           "default": false,
-          "description": ""
+          "description": "Enable class name completions when using Emmet-style syntax, for example `div.bg-red-500.uppercase`."
         },
         "tailwindCSS.includeLanguages": {
           "type": "object",
-          "default": {}
+          "default": {},
+          "description": "Enable features in languages that are not supported by default. Add a mapping here between the new language and an already supported language.\n E.g.: `{\"plaintext\": \"html\"}`"
         }
       }
     }
@@ -106,7 +112,7 @@     "terser": "^4.6.12",
     "tiny-invariant": "^1.1.0",
     "tslint": "^5.16.0",
     "typescript": "^3.8.3",
-    "vsce": "^1.75.0",
+    "vsce": "^1.76.1",
     "vscode-emmet-helper-bundled": "0.0.1",
     "vscode-languageclient": "^5.2.1",
     "vscode-languageserver": "^5.2.1",
M src/class-names/runPlugin.jssrc/class-names/runPlugin.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
diff --git a/src/class-names/runPlugin.js b/src/class-names/runPlugin.js
index dbdd2b5d9fe213987d842f7bd44223d2ee9bb490..118961e81b20134d8a2f6c5ee41122f03b88ed62 100644
--- a/src/class-names/runPlugin.js
+++ b/src/class-names/runPlugin.js
@@ -17,6 +17,12 @@       prefix: (x) => x,
       theme: (path, defaultValue) => dlv(config, `theme.${path}`, defaultValue),
       variants: () => [],
       config: (path, defaultValue) => dlv(config, path, defaultValue),
+      corePlugins: (path) => {
+        if (Array.isArray(config.corePlugins)) {
+          return config.corePlugins.includes(path)
+        }
+        return dlv(config, `corePlugins.${path}`, true)
+      },
       target: (path) => {
         if (typeof config.target === 'string') {
           return config.target === 'browserslist'
M src/lib/languages.tssrc/lib/languages.ts
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
diff --git a/src/lib/languages.ts b/src/lib/languages.ts
index 777f5885f033174f1163d970cece03505d7dd0e8..0b9c45075aaced17a335c457db929906cc96c022 100644
--- a/src/lib/languages.ts
+++ b/src/lib/languages.ts
@@ -6,6 +6,8 @@   'django-html',
   'edge',
   'ejs',
   'erb',
+  'gohtml',
+  'GoHTML',
   'haml',
   'handlebars',
   'hbs',
M src/lsp/util/find.tssrc/lsp/util/find.ts
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
diff --git a/src/lsp/util/find.ts b/src/lsp/util/find.ts
index 800d0a3ce5dd1d133e5dfb1e246faac7abf1ca1c..6b1bfca7fbce3737b86c7529b4e7141715d17f58 100644
--- a/src/lsp/util/find.ts
+++ b/src/lsp/util/find.ts
@@ -1,10 +1,10 @@
 import { TextDocument, Range, Position } from 'vscode-languageserver'
 import { DocumentClassName, DocumentClassList, State } from './state'
 import lineColumn from 'line-column'
-import { isCssContext } from './css'
-import { isHtmlContext } from './html'
+import { isCssContext, isCssDoc } from './css'
+import { isHtmlContext, isHtmlDoc, isSvelteDoc, isVueDoc } from './html'
 import { isWithinRange } from './isWithinRange'
-import { isJsContext } from './js'
+import { isJsContext, isJsDoc } from './js'
 import { getClassAttributeLexer } from './lexers'
 
 export function findAll(re: RegExp, str: string): RegExpMatchArray[] {
@@ -83,11 +83,13 @@       classList: match.groups.classList,
       range: {
         start: {
           line: globalStart.line + start.line,
-          character: globalStart.character + start.character,
+          character:
+            (end.line === 0 ? globalStart.character : 0) + start.character,
         },
         end: {
           line: globalStart.line + end.line,
-          character: globalStart.character + end.character,
+          character:
+            (end.line === 0 ? globalStart.character : 0) + end.character,
         },
       },
     }
@@ -173,11 +175,14 @@             classList: value,
             range: {
               start: {
                 line: range.start.line + start.line,
-                character: range.start.character + start.character,
+                character:
+                  (end.line === 0 ? range.start.character : 0) +
+                  start.character,
               },
               end: {
                 line: range.start.line + end.line,
-                character: range.start.character + end.character,
+                character:
+                  (end.line === 0 ? range.start.character : 0) + end.character,
               },
             },
           }
@@ -198,6 +203,80 @@   if (mode === 'css') {
     return findClassListsInCssRange(doc, range)
   }
   return findClassListsInHtmlRange(doc, range)
+}
+
+export function findClassListsInDocument(
+  state: State,
+  doc: TextDocument
+): DocumentClassList[] {
+  if (isCssDoc(state, doc)) {
+    return findClassListsInCssRange(doc)
+  }
+
+  if (isVueDoc(doc)) {
+    let text = doc.getText()
+    let blocks = findAll(
+      /<(?<type>template|style|script)\b[^>]*>.*?(<\/\k<type>>|$)/gis,
+      text
+    )
+    let htmlRanges: Range[] = []
+    let cssRanges: Range[] = []
+    for (let i = 0; i < blocks.length; i++) {
+      let range = {
+        start: indexToPosition(text, blocks[i].index),
+        end: indexToPosition(text, blocks[i].index + blocks[i][0].length),
+      }
+      if (blocks[i].groups.type === 'style') {
+        cssRanges.push(range)
+      } else {
+        htmlRanges.push(range)
+      }
+    }
+    return [].concat.apply(
+      [],
+      [
+        ...htmlRanges.map((range) => findClassListsInHtmlRange(doc, range)),
+        ...cssRanges.map((range) => findClassListsInCssRange(doc, range)),
+      ]
+    )
+  }
+
+  if (isHtmlDoc(state, doc) || isJsDoc(state, doc) || isSvelteDoc(doc)) {
+    let text = doc.getText()
+    let styleBlocks = findAll(/<style(?:\s[^>]*>|>).*?(<\/style>|$)/gis, text)
+    let htmlRanges: Range[] = []
+    let cssRanges: Range[] = []
+    let currentIndex = 0
+
+    for (let i = 0; i < styleBlocks.length; i++) {
+      htmlRanges.push({
+        start: indexToPosition(text, currentIndex),
+        end: indexToPosition(text, styleBlocks[i].index),
+      })
+      cssRanges.push({
+        start: indexToPosition(text, styleBlocks[i].index),
+        end: indexToPosition(
+          text,
+          styleBlocks[i].index + styleBlocks[i][0].length
+        ),
+      })
+      currentIndex = styleBlocks[i].index + styleBlocks[i][0].length
+    }
+    htmlRanges.push({
+      start: indexToPosition(text, currentIndex),
+      end: indexToPosition(text, text.length),
+    })
+
+    return [].concat.apply(
+      [],
+      [
+        ...htmlRanges.map((range) => findClassListsInHtmlRange(doc, range)),
+        ...cssRanges.map((range) => findClassListsInCssRange(doc, range)),
+      ]
+    )
+  }
+
+  return []
 }
 
 function indexToPosition(str: string, index: number): Position {
M src/lsp/util/html.tssrc/lsp/util/html.ts
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
diff --git a/src/lsp/util/html.ts b/src/lsp/util/html.ts
index 8808141906f9545b6ad1c62f838acf6f52f0f88a..7f24b2ea8b41b46a635cddc90ec6c0ed38141721 100644
--- a/src/lsp/util/html.ts
+++ b/src/lsp/util/html.ts
@@ -8,6 +8,8 @@   'django-html',
   'edge',
   'ejs',
   'erb',
+  'gohtml',
+  'GoHTML',
   'haml',
   'handlebars',
   'hbs',