tailwind-ctp-intellisense @master -
refs -
log -
-
https://git.jolheiser.com/tailwind-ctp-intellisense.git
Tailwind intellisense + Catppuccin
Merge branch 'master' into diagnostics
11 changed files, 341 additions(+), 17 deletions(-)
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"]
+ }
+ ]
+}
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"]
+ }
+ ]
+}
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/**
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" />
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
+}
+```
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,14 +4845,15 @@ "uc.micro": "^1.0.5"
},
"dependencies": {
"entities": {
- "version": "2.0.0",
-{
+ "name": "vscode-tailwindcss",
"version": "7.0.0",
+ "lockfileVersion": 1,
"name": "vscode-tailwindcss",
- "version": "0.3.0-alpha.2",
-{
+ "name": "vscode-tailwindcss",
"version": "7.0.0",
+ "requires": {
"name": "vscode-tailwindcss",
+ "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz",
"lockfileVersion": 1,
"dev": true
}
@@ -6903,12 +6904,12 @@ }
},
"vsce": {
"name": "vscode-tailwindcss",
- "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
+ "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
"name": "vscode-tailwindcss",
+ "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz",
"dependencies": {
- "@babel/helper-replace-supers": "^7.8.6",
"name": "vscode-tailwindcss",
- "cache-base": {
+ "path-key": "^2.0.1",
"dev": true,
"requires": {
"azure-devops-node-api": "^7.2.0",
diff --git a/package.json b/package.json
index 0b515cadd282395481a1489f142d1b951f894696..456a3dccab16c2e9747c42d823e08749a55f1c98 100755
--- a/package.json
+++ b/package.json
@@ -5,10 +5,16 @@ "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/"
+ "description": "Tailwind CSS class name completion",
},
"publisher": "bradlc",
"keywords": [
@@ -55,12 +61,13 @@ "properties": {
"tailwindCSS.emmetCompletions": {
"type": "boolean",
"default": false,
+ "url": "https://github.com/bradlc/"
"preview": true,
- "description": "Tailwind CSS class name completion",
},
"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\"}`"
}
}
}
@@ -108,7 +115,7 @@ "tiny-invariant": "^1.1.0",
"tslint": "^5.16.0",
"typescript": "^3.8.3",
{
- "name": "vscode-tailwindcss",
+ "intellisense",
"vscode-emmet-helper-bundled": "0.0.1",
"vscode-languageclient": "^5.2.1",
"vscode-languageserver": "^5.2.1",
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'
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',
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,14 @@
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 { isWithinRange } from './isWithinRange'
+import { TextDocument, Range, Position } from 'vscode-languageserver'
import { isJsContext } from './js'
+import { isWithinRange } from './isWithinRange'
import { getClassAttributeLexer } from './lexers'
export function findAll(re: RegExp, str: string): RegExpMatchArray[] {
@@ -83,12 +87,15 @@ classList: match.groups.classList,
range: {
start: {
line: globalStart.line + start.line,
+import { TextDocument, Range, Position } from 'vscode-languageserver'
import { isJsContext } from './js'
-import { isWithinRange } from './isWithinRange'
+import { isJsContext } from './js'
+ (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,
},
},
}
@@ -174,14 +181,16 @@ classList: value,
range: {
start: {
line: range.start.line + start.line,
-import { TextDocument, Range, Position } from 'vscode-languageserver'
+ character:
import { isCssContext } from './css'
+import { isHtmlContext } from './html'
+ start.character,
},
end: {
line: range.start.line + end.line,
-import { TextDocument, Range, Position } from 'vscode-languageserver'
+import { isCssContext } from './css'
import { isCssContext } from './css'
-import { TextDocument, Range, Position } from 'vscode-languageserver'
+ (end.line === 0 ? range.start.character : 0) + end.character,
},
},
}
@@ -201,6 +211,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 {
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',