add lerna and separate language server package

.gitignore

@@ -1,3 +1,2 @@
 node_modules
-dist
+/*.vsix
-*.vsix

.vscode/launch.json

@@ -7,10 +7,10 @@
       "request": "launch",
       "name": "Launch Client",
       "runtimeExecutable": "${execPath}",
-      "args": ["--extensionDevelopmentPath=${workspaceRoot}"],
+      "args": ["--extensionDevelopmentPath=${workspaceRoot}/packages/vscode-tailwindcss"],
       "stopOnEntry": false,
       "sourceMaps": true,
-      "outFiles": ["${workspaceRoot}/dist/extension/**/*.js"],
+      "outFiles": ["${workspaceRoot}/packages/vscode-tailwindcss/dist/**/*.js"]
       // "preLaunchTask": "npm: dev"
     },
     {
@@ -21,7 +21,7 @@
       "protocol": "inspector",
       "port": 6011,
       "sourceMaps": true,
-      "outFiles": ["${workspaceRoot}/dist/server/**/*.js"]
+      "outFiles": ["${workspaceRoot}/packages/vscode-tailwindcss/dist/**/*.js"]
     },
     {
       "type": "node",
@@ -31,7 +31,7 @@
       "protocol": "inspector",
       "port": 6012,
       "sourceMaps": true,
-      "outFiles": ["${workspaceRoot}/dist/server/**/*.js"]
+      "outFiles": ["${workspaceRoot}/packages/vscode-tailwindcss/dist/**/*.js"]
     }
   ]
 }

README.md

@@ -1,125 +0,0 @@
-<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/.github/banner-dark.png" alt="" />
-
-Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting.
-
-## Installation
-
-**[Install via the Visual Studio Code Marketplace →](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)**
-
-In order for the extension to activate you must have [`tailwindcss` installed](https://tailwindcss.com/docs/installation) and a [Tailwind config file](https://tailwindcss.com/docs/installation#create-your-configuration-file) named `tailwind.config.js` in your workspace.
-
-## Features
-
-### Autocomplete
-
-Intelligent suggestions for class names, as well as [CSS functions and directives](https://tailwindcss.com/docs/functions-and-directives/).
-
-<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/.github/autocomplete.png" alt="" />
-
-### Linting
-
-Highlights errors and potential bugs in both your CSS and your markup.
-
-<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/.github/linting.png" alt="" />
-
-### Hover Preview
-
-See the complete CSS for a Tailwind class name by hovering over it.
-
-<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/.github/hover.png" alt="" />
-
-### CSS Syntax Highlighting
-
-Provides syntax definitions so that Tailwind features are highlighted correctly.
-
-## Recommended VS Code Settings
-
-VS Code has built-in CSS validation which may display errors when using Tailwind-specific syntax, such as `@apply`. You can disable this with the `css.validate` setting:
-
-```
-"css.validate": false
-```
-
-By default VS Code will not trigger completions when editing "string" content, for example within JSX attribute values. Updating the `editor.quickSuggestions` setting may improve your experience:
-
-```
-"editor.quickSuggestions": {
-  "strings": true
-}
-```
-
-## Extension 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`**
-
-### `tailwindCSS.colorDecorators`
-
-Controls whether the editor should render inline color decorators for Tailwind CSS classes and helper functions. **Default: `true`**
-
-> Note that `editor.colorDecorators` must be enabled for color decorators to be shown.
-
-### `tailwindCSS.showPixelEquivalents`
-
-Show `px` equivalents for `rem` CSS values in completions and hovers. **Default: `true`**
-
-### `tailwindCSS.rootFontSize`
-
-Root font size in pixels. Used to convert `rem` CSS values to their `px` equivalents. See [`tailwindCSS.showPixelEquivalents`](#tailwindcssshowpixelequivalents). **Default: `16`**
-
-### `tailwindCSS.validate`
-
-Enable linting. Rules can be configured individually using the `tailwindcss.lint` settings:
-
-- `ignore`: disable lint rule entirely
-- `warning`: rule violations will be considered "warnings," typically represented by a yellow underline
-- `error`: rule violations will be considered "errors," typically represented by a red underline
-
-#### `tailwindCSS.lint.invalidScreen`
-
-Unknown screen name used with the [`@screen` directive](https://tailwindcss.com/docs/functions-and-directives/#screen). **Default: `error`**
-
-#### `tailwindCSS.lint.invalidVariant`
-
-Unknown variant name used with the [`@variants` directive](https://tailwindcss.com/docs/functions-and-directives/#variants). **Default: `error`**
-
-#### `tailwindCSS.lint.invalidTailwindDirective`
-
-Unknown value used with the [`@tailwind` directive](https://tailwindcss.com/docs/functions-and-directives/#tailwind). **Default: `error`**
-
-#### `tailwindCSS.lint.invalidApply`
-
-Unsupported use of the [`@apply` directive](https://tailwindcss.com/docs/functions-and-directives/#apply). **Default: `error`**
-
-#### `tailwindCSS.lint.invalidConfigPath`
-
-Unknown or invalid path used with the [`theme` helper](https://tailwindcss.com/docs/functions-and-directives/#theme). **Default: `error`**
-
-#### `tailwindCSS.lint.cssConflict`
-
-Class names on the same HTML element which apply the same CSS property or properties. **Default: `warning`**
-
-#### `tailwindCSS.lint.recommendedVariantOrder`
-
-Class variants not in the recommended order (applies in [JIT mode](https://tailwindcss.com/docs/just-in-time-mode) only). **Default: `warning`**
-
-## Troubleshooting
-
-If you’re having issues getting the IntelliSense features to activate, there are a few things you can check:
-
-- Ensure that you have a Tailwind config file in your workspace and that this is named `tailwind.config.js`. Check out the Tailwind documentation for details on [creating a config file](https://tailwindcss.com/docs/installation#create-your-configuration-file).
-- Ensure that the `tailwindcss` module is installed in your workspace, via `npm`, `yarn`, or `pnpm`.
-- Make sure your VS Code settings aren’t causing your Tailwind config file to be excluded from search, for example via the `search.exclude` setting.

README.md

@@ -0,0 +1 @@
+./packages/vscode-tailwindcss/README.md

lerna.json

@@ -0,0 +1,4 @@
+{
+  "version": "independent",
+  "packages": ["packages/*"]
+}

package.json

@@ -1,243 +1,10 @@
 {
-  "name": "vscode-tailwindcss",
+  "name": "root",
-  "displayName": "Tailwind CSS IntelliSense",
+  "private": true,
-  "description": "Intelligent Tailwind CSS tooling for VS Code",
-  "preview": true,
-  "author": "Brad Cornes <hello@bradley.dev>",
-  "license": "MIT",
-  "version": "0.6.6",
-  "homepage": "https://github.com/tailwindlabs/tailwindcss-intellisense",
-  "bugs": {
-    "url": "https://github.com/tailwindlabs/tailwindcss-intellisense/issues",
-    "email": "hello@bradley.dev"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/tailwindlabs/tailwindcss-intellisense.git"
-  },
-  "publisher": "bradlc",
-  "keywords": [
-    "tailwind",
-    "tailwindcss",
-    "css",
-    "intellisense",
-    "autocomplete",
-    "vscode"
-  ],
-  "engines": {
-    "vscode": "^1.52.0"
-  },
-  "categories": [
-    "Linters",
-    "Other"
-  ],
-  "galleryBanner": {
-    "color": "#f9fafb"
-  },
-  "icon": "media/icon.png",
-  "activationEvents": [
-    "onStartupFinished"
-  ],
-  "main": "dist/extension/index.js",
-  "contributes": {
-    "commands": [
-      {
-        "command": "tailwindCSS.showOutput",
-        "title": "Tailwind CSS: Show Output",
-        "enablement": "tailwindCSS.hasOutputChannel"
-      }
-    ],
-    "grammars": [
-      {
-        "scopeName": "tailwindcss.injection",
-        "path": "./syntaxes/tailwind.tmLanguage.json",
-        "injectTo": [
-          "source.css",
-          "source.css.scss",
-          "source.css.less",
-          "source.css.postcss",
-          "source.vue",
-          "source.svelte",
-          "text.html"
-        ]
-      }
-    ],
-    "configuration": {
-      "title": "Tailwind CSS IntelliSense",
-      "properties": {
-        "tailwindCSS.emmetCompletions": {
-          "type": "boolean",
-          "default": false,
-          "markdownDescription": "Enable class name completions when using Emmet-style syntax, for example `div.bg-red-500.uppercase`"
-        },
-        "tailwindCSS.includeLanguages": {
-          "type": "object",
-          "additionalProperties": {
-            "type": "string"
-          },
-          "default": {},
-          "markdownDescription": "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\"}`"
-        },
-        "tailwindCSS.colorDecorators": {
-          "type": "boolean",
-          "default": true,
-          "markdownDescription": "Controls whether the editor should render inline color decorators for Tailwind CSS classes and helper functions.",
-          "scope": "language-overridable"
-        },
-        "tailwindCSS.validate": {
-          "type": "boolean",
-          "default": true,
-          "markdownDescription": "Enable linting. Rules can be configured individually using the `tailwindcss.lint.*` settings",
-          "scope": "language-overridable"
-        },
-        "tailwindCSS.lint.cssConflict": {
-          "type": "string",
-          "enum": [
-            "ignore",
-            "warning",
-            "error"
-          ],
-          "default": "warning",
-          "markdownDescription": "Class names on the same HTML element which apply the same CSS property or properties",
-          "scope": "language-overridable"
-        },
-        "tailwindCSS.lint.invalidApply": {
-          "type": "string",
-          "enum": [
-            "ignore",
-            "warning",
-            "error"
-          ],
-          "default": "error",
-          "markdownDescription": "Unsupported use of the [`@apply` directive](https://tailwindcss.com/docs/functions-and-directives/#apply)",
-          "scope": "language-overridable"
-        },
-        "tailwindCSS.lint.invalidScreen": {
-          "type": "string",
-          "enum": [
-            "ignore",
-            "warning",
-            "error"
-          ],
-          "default": "error",
-          "markdownDescription": "Unknown screen name used with the [`@screen` directive](https://tailwindcss.com/docs/functions-and-directives/#screen)",
-          "scope": "language-overridable"
-        },
-        "tailwindCSS.lint.invalidVariant": {
-          "type": "string",
-          "enum": [
-            "ignore",
-            "warning",
-            "error"
-          ],
-          "default": "error",
-          "markdownDescription": "Unknown variant name used with the [`@variants` directive](https://tailwindcss.com/docs/functions-and-directives/#variants)",
-          "scope": "language-overridable"
-        },
-        "tailwindCSS.lint.invalidConfigPath": {
-          "type": "string",
-          "enum": [
-            "ignore",
-            "warning",
-            "error"
-          ],
-          "default": "error",
-          "markdownDescription": "Unknown or invalid path used with the [`theme` helper](https://tailwindcss.com/docs/functions-and-directives/#theme)",
-          "scope": "language-overridable"
-        },
-        "tailwindCSS.lint.invalidTailwindDirective": {
-          "type": "string",
-          "enum": [
-            "ignore",
-            "warning",
-            "error"
-          ],
-          "default": "error",
-          "markdownDescription": "Unknown value used with the [`@tailwind` directive](https://tailwindcss.com/docs/functions-and-directives/#tailwind)",
-          "scope": "language-overridable"
-        },
-        "tailwindCSS.lint.recommendedVariantOrder": {
-          "type": "string",
-          "enum": [
-            "ignore",
-            "warning",
-            "error"
-          ],
-          "default": "warning",
-          "markdownDescription": "Class variants not in the recommended order (applies in [JIT mode](https://tailwindcss.com/docs/just-in-time-mode) only)",
-          "scope": "language-overridable"
-        },
-        "tailwindCSS.experimental.classRegex": {
-          "type": "array",
-          "scope": "language-overridable"
-        },
-        "tailwindCSS.showPixelEquivalents": {
-          "type": "boolean",
-          "default": true,
-          "markdownDescription": "Show `px` equivalents for `rem` CSS values."
-        },
-        "tailwindCSS.rootFontSize": {
-          "type": "number",
-          "default": 16,
-          "markdownDescription": "Root font size in pixels. Used to convert `rem` CSS values to their `px` equivalents. See `#tailwindCSS.showPixelEquivalents#`."
-        }
-      }
-    }
-  },
   "scripts": {
-    "dev": "npm run clean && glob-exec --foreach --parallel \"src/*.ts\" -- \"ncc build {{file}} --watch -o dist/{{file.toString().replace(/^src\\//, '').replace(/\\.ts$/, '')}}\"",
+    "bootstrap": "lerna bootstrap --hoist"
-    "build": "npm run clean && glob-exec --foreach --parallel \"src/*.ts\" -- \"ncc build {{file}} -o dist/{{file.toString().replace(/^src\\//, '').replace(/\\.ts$/, '')}}\" && mv dist/server/index.js dist/server/tailwindServer.js && npm run minify",
-    "minify": "glob-exec --foreach --parallel \"dist/**/*.js\" -- \"terser {{file}} --compress --mangle --output {{file.toString()}}\"",
-    "package": "vsce package",
-    "publish": "vsce publish",
-    "vscode:prepublish": "npm run build",
-    "clean": "rimraf dist",
-    "test": "jest"
-  },
-  "dependencies": {
-    "@ctrl/tinycolor": "3.1.4",
-    "@types/debounce": "1.2.0",
-    "@types/mocha": "5.2.0",
-    "@types/node": "14.14.34",
-    "@types/vscode": "1.54.0",
-    "@vercel/ncc": "0.28.4",
-    "builtin-modules": "3.2.0",
-    "chokidar": "3.5.1",
-    "debounce": "1.2.0",
-    "dlv": "1.1.3",
-    "dset": "2.0.1",
-    "enhanced-resolve": "5.8.0",
-    "fast-glob": "3.2.4",
-    "find-up": "5.0.0",
-    "glob-exec": "0.1.1",
-    "jest": "25.5.4",
-    "klona": "2.0.4",
-    "normalize-path": "3.0.0",
-    "pkg-up": "3.1.0",
-    "postcss": "8.2.6",
-    "postcss-load-config": "3.0.1",
-    "postcss-selector-parser": "6.0.2",
-    "prettier": "^2.2.1",
-    "rimraf": "3.0.2",
-    "semver": "7.3.2",
-    "stack-trace": "0.0.10",
-    "tailwindcss": "2.0.3",
-    "terser": "4.6.12",
-    "typescript": "4.2.4",
-    "vsce": "1.87.0",
-    "vscode-languageclient": "7.0.0",
-    "vscode-languageserver": "7.0.0",
-    "vscode-languageserver-textdocument": "1.0.1",
-    "vscode-uri": "3.0.2"
   },
   "devDependencies": {
-    "@types/moo": "0.5.3",
+    "lerna": "^3.22.1"
-    "css.escape": "1.5.1",
-    "detect-indent": "6.0.0",
-    "line-column": "1.0.2",
-    "moo": "0.5.1",
-    "multi-regexp2": "1.0.3",
-    "sift-string": "0.0.2",
-    "vscode-emmet-helper-bundled": "0.0.1"
   }
 }

packages/tailwindcss-language-server/.gitignore

@@ -0,0 +1 @@
+/bin

packages/tailwindcss-language-server/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "tailwindcss-language-server",
+  "description": "Tailwind CSS Language Server",
+  "version": "0.0.1",
+  "scripts": {
+    "build": "npm run clean && ncc build src/server.ts -o bin --minify && mv bin/index.js bin/tailwindcss-language-server && npm run hashbang",
+    "clean": "rimraf dist",
+    "hashbang": "echo \"#!/usr/bin/env node\n$(cat bin/tailwindcss-language-server)\" > bin/tailwindcss-language-server"
+  },
+  "bin": {
+    "tailwindcss-language-server": "./bin/tailwindcss-language-server"
+  },
+  "files": [
+    "bin"
+  ],
+  "devDependencies": {
+    "@ctrl/tinycolor": "3.1.4",
+    "@types/debounce": "1.2.0",
+    "@types/node": "14.14.34",
+    "@types/vscode": "1.56.0",
+    "@vercel/ncc": "0.28.4",
+    "builtin-modules": "3.2.0",
+    "chokidar": "3.5.1",
+    "debounce": "1.2.0",
+    "dlv": "1.1.3",
+    "dset": "2.0.1",
+    "enhanced-resolve": "5.8.0",
+    "fast-glob": "3.2.4",
+    "find-up": "5.0.0",
+    "jest": "25.5.4",
+    "klona": "2.0.4",
+    "normalize-path": "3.0.0",
+    "pkg-up": "3.1.0",
+    "postcss": "8.2.6",
+    "postcss-load-config": "3.0.1",
+    "postcss-selector-parser": "6.0.2",
+    "prettier": "2.3.0",
+    "rimraf": "3.0.2",
+    "semver": "7.3.2",
+    "stack-trace": "0.0.10",
+    "tailwindcss": "2.0.3",
+    "terser": "4.6.12",
+    "typescript": "4.2.4",
+    "vscode-languageserver": "7.0.0",
+    "vscode-languageserver-textdocument": "1.0.1",
+    "vscode-uri": "3.0.2"
+  }
+}

packages/tailwindcss-language-server/src/server.ts

@@ -156,9 +156,7 @@ async function createProjectService(
     editor: {
       connection,
       globalSettings: params.initializationOptions.configuration as Settings,
-      userLanguages: params.initializationOptions.userLanguages
+      userLanguages: params.initializationOptions.userLanguages,
-        ? params.initializationOptions.userLanguages
-        : {},
       // TODO
       capabilities: {
         configuration: true,

packages/tailwindcss-language-server/tsconfig.json

@@ -3,16 +3,16 @@
     "module": "commonjs",
     "target": "es6",
     "lib": ["ES2019"],
-    "rootDir": ".",
+    "rootDir": "..",
     "sourceMap": true,
     "moduleResolution": "node",
     "esModuleInterop": true,
     "allowJs": true,
     "resolveJsonModule": true,
-    "baseUrl": ".",
+    "baseUrl": "..",
     "paths": {
-      "tailwindcss-language-service/*": ["packages/tailwindcss-language-service/*"]
+      "tailwindcss-language-service/*": ["../packages/tailwindcss-language-service/*"]
     }
   },
-  "include": ["src", "packages/tailwindcss-language-service"]
+  "include": ["src", "../packages/tailwindcss-language-service"]
 }

packages/tailwindcss-language-service/.gitignore

@@ -1,2 +1 @@
-/node_modules
 /dist

packages/tailwindcss-language-service/package.json

@@ -24,6 +24,7 @@
     "line-column": "1.0.2",
     "moo": "0.5.1",
     "multi-regexp2": "1.0.3",
+    "postcss": "8.2.6",
     "postcss-selector-parser": "6.0.2",
     "semver": "7.3.2",
     "sift-string": "0.0.2",
@@ -33,7 +34,7 @@
     "vscode-languageserver-textdocument": "1.0.1"
   },
   "devDependencies": {
-    "postcss": "8.2.6",
+    "prettier": "2.3.0",
     "tsdx": "0.14.1",
     "tslib": "2.2.0",
     "typescript": "4.2.4"

packages/tailwindcss-language-service/src/util/css.ts

@@ -2,15 +2,14 @@ import type { TextDocument, Position } from 'vscode-languageserver'
 import { isInsideTag, isVueDoc, isSvelteDoc, isHtmlDoc } from './html'
 import { isJsDoc } from './js'
 import { State } from './state'
-
+import { cssLanguages } from './languages'
-export const CSS_LANGUAGES = ['css', 'less', 'postcss', 'sass', 'scss', 'stylus', 'sugarss']
 
 export function isCssDoc(state: State, doc: TextDocument): boolean {
   const userCssLanguages = Object.keys(state.editor.userLanguages).filter((lang) =>
-    CSS_LANGUAGES.includes(state.editor.userLanguages[lang])
+    cssLanguages.includes(state.editor.userLanguages[lang])
   )
 
-  return [...CSS_LANGUAGES, ...userCssLanguages].indexOf(doc.languageId) !== -1
+  return [...cssLanguages, ...userCssLanguages].indexOf(doc.languageId) !== -1
 }
 
 export function isCssContext(state: State, doc: TextDocument, position: Position): boolean {

packages/tailwindcss-language-service/src/util/html.ts

@@ -1,44 +1,13 @@
 import type { TextDocument, Position } from 'vscode-languageserver'
 import { State } from './state'
-
+import { htmlLanguages } from './languages'
-export const HTML_LANGUAGES = [
-  'aspnetcorerazor',
-  'blade',
-  'django-html',
-  'edge',
-  'ejs',
-  'erb',
-  'gohtml',
-  'GoHTML',
-  'haml',
-  'handlebars',
-  'hbs',
-  'html',
-  'HTML (Eex)',
-  'HTML (EEx)',
-  'html-eex',
-  'jade',
-  'leaf',
-  'liquid',
-  'markdown',
-  'mdx',
-  'mustache',
-  'njk',
-  'nunjucks',
-  'php',
-  'razor',
-  'slim',
-  'twig',
-]
 
 export function isHtmlDoc(state: State, doc: TextDocument): boolean {
-  const userHtmlLanguages = Object.keys(
+  const userHtmlLanguages = Object.keys(state.editor.userLanguages).filter((lang) =>
-    state.editor.userLanguages
+    htmlLanguages.includes(state.editor.userLanguages[lang])
-  ).filter((lang) => HTML_LANGUAGES.includes(state.editor.userLanguages[lang]))
-
-  return (
-    [...HTML_LANGUAGES, ...userHtmlLanguages].indexOf(doc.languageId) !== -1
   )
+
+  return [...htmlLanguages, ...userHtmlLanguages].indexOf(doc.languageId) !== -1
 }
 
 export function isVueDoc(doc: TextDocument): boolean {
@@ -49,11 +18,7 @@ export function isSvelteDoc(doc: TextDocument): boolean {
   return doc.languageId === 'svelte'
 }
 
-export function isHtmlContext(
+export function isHtmlContext(state: State, doc: TextDocument, position: Position): boolean {
-  state: State,
-  doc: TextDocument,
-  position: Position
-): boolean {
   let str = doc.getText({
     start: { line: 0, character: 0 },
     end: position,

packages/tailwindcss-language-service/src/util/js.ts

@@ -1,29 +1,17 @@
 import type { TextDocument, Position } from 'vscode-languageserver'
 import { isHtmlDoc, isInsideTag, isVueDoc, isSvelteDoc } from './html'
 import { State } from './state'
-
+import { jsLanguages } from './languages'
-export const JS_LANGUAGES = [
-  'javascript',
-  'javascriptreact',
-  'reason',
-  'rescript',
-  'typescript',
-  'typescriptreact',
-]
 
 export function isJsDoc(state: State, doc: TextDocument): boolean {
-  const userJsLanguages = Object.keys(
+  const userJsLanguages = Object.keys(state.editor.userLanguages).filter((lang) =>
-    state.editor.userLanguages
+    jsLanguages.includes(state.editor.userLanguages[lang])
-  ).filter((lang) => JS_LANGUAGES.includes(state.editor.userLanguages[lang]))
+  )
 
-  return [...JS_LANGUAGES, ...userJsLanguages].indexOf(doc.languageId) !== -1
+  return [...jsLanguages, ...userJsLanguages].indexOf(doc.languageId) !== -1
 }
 
-export function isJsContext(
+export function isJsContext(state: State, doc: TextDocument, position: Position): boolean {
-  state: State,
-  doc: TextDocument,
-  position: Position
-): boolean {
   if (isJsDoc(state, doc)) {
     return true
   }

packages/tailwindcss-language-service/src/util/languages.ts

@@ -1,5 +1,4 @@
-export const DEFAULT_LANGUAGES = [
+export const htmlLanguages = [
-  // html
   'aspnetcorerazor',
   'blade',
   'django-html',
@@ -27,22 +26,19 @@ export const DEFAULT_LANGUAGES = [
   'razor',
   'slim',
   'twig',
-  // css
+]
-  'css',
+
-  'less',
+export const cssLanguages = ['css', 'less', 'postcss', 'sass', 'scss', 'stylus', 'sugarss']
-  'postcss',
+
-  'sass',
+export const jsLanguages = [
-  'scss',
-  'stylus',
-  'sugarss',
-  // js
   'javascript',
   'javascriptreact',
   'reason',
   'rescript',
   'typescript',
   'typescriptreact',
-  // mixed
-  'vue',
-  'svelte',
 ]
+
+export const specialLanguages = ['vue', 'svelte']
+
+export const languages = [...cssLanguages, ...htmlLanguages, ...jsLanguages, ...specialLanguages]

packages/vscode-tailwindcss/.gitignore

@@ -0,0 +1 @@
+/dist

packages/vscode-tailwindcss/README.md

@@ -0,0 +1,125 @@
+<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/packages/vscode-tailwindcss/.github/banner-dark.png" alt="" />
+
+Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting.
+
+## Installation
+
+**[Install via the Visual Studio Code Marketplace →](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)**
+
+In order for the extension to activate you must have [`tailwindcss` installed](https://tailwindcss.com/docs/installation) and a [Tailwind config file](https://tailwindcss.com/docs/installation#create-your-configuration-file) named `tailwind.config.js` in your workspace.
+
+## Features
+
+### Autocomplete
+
+Intelligent suggestions for class names, as well as [CSS functions and directives](https://tailwindcss.com/docs/functions-and-directives/).
+
+<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/packages/vscode-tailwindcss/.github/autocomplete.png" alt="" />
+
+### Linting
+
+Highlights errors and potential bugs in both your CSS and your markup.
+
+<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/packages/vscode-tailwindcss/.github/linting.png" alt="" />
+
+### Hover Preview
+
+See the complete CSS for a Tailwind class name by hovering over it.
+
+<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/packages/vscode-tailwindcss/.github/hover.png" alt="" />
+
+### CSS Syntax Highlighting
+
+Provides syntax definitions so that Tailwind features are highlighted correctly.
+
+## Recommended VS Code Settings
+
+VS Code has built-in CSS validation which may display errors when using Tailwind-specific syntax, such as `@apply`. You can disable this with the `css.validate` setting:
+
+```
+"css.validate": false
+```
+
+By default VS Code will not trigger completions when editing "string" content, for example within JSX attribute values. Updating the `editor.quickSuggestions` setting may improve your experience:
+
+```
+"editor.quickSuggestions": {
+  "strings": true
+}
+```
+
+## Extension 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`**
+
+### `tailwindCSS.colorDecorators`
+
+Controls whether the editor should render inline color decorators for Tailwind CSS classes and helper functions. **Default: `true`**
+
+> Note that `editor.colorDecorators` must be enabled for color decorators to be shown.
+
+### `tailwindCSS.showPixelEquivalents`
+
+Show `px` equivalents for `rem` CSS values in completions and hovers. **Default: `true`**
+
+### `tailwindCSS.rootFontSize`
+
+Root font size in pixels. Used to convert `rem` CSS values to their `px` equivalents. See [`tailwindCSS.showPixelEquivalents`](#tailwindcssshowpixelequivalents). **Default: `16`**
+
+### `tailwindCSS.validate`
+
+Enable linting. Rules can be configured individually using the `tailwindcss.lint` settings:
+
+- `ignore`: disable lint rule entirely
+- `warning`: rule violations will be considered "warnings," typically represented by a yellow underline
+- `error`: rule violations will be considered "errors," typically represented by a red underline
+
+#### `tailwindCSS.lint.invalidScreen`
+
+Unknown screen name used with the [`@screen` directive](https://tailwindcss.com/docs/functions-and-directives/#screen). **Default: `error`**
+
+#### `tailwindCSS.lint.invalidVariant`
+
+Unknown variant name used with the [`@variants` directive](https://tailwindcss.com/docs/functions-and-directives/#variants). **Default: `error`**
+
+#### `tailwindCSS.lint.invalidTailwindDirective`
+
+Unknown value used with the [`@tailwind` directive](https://tailwindcss.com/docs/functions-and-directives/#tailwind). **Default: `error`**
+
+#### `tailwindCSS.lint.invalidApply`
+
+Unsupported use of the [`@apply` directive](https://tailwindcss.com/docs/functions-and-directives/#apply). **Default: `error`**
+
+#### `tailwindCSS.lint.invalidConfigPath`
+
+Unknown or invalid path used with the [`theme` helper](https://tailwindcss.com/docs/functions-and-directives/#theme). **Default: `error`**
+
+#### `tailwindCSS.lint.cssConflict`
+
+Class names on the same HTML element which apply the same CSS property or properties. **Default: `warning`**
+
+#### `tailwindCSS.lint.recommendedVariantOrder`
+
+Class variants not in the recommended order (applies in [JIT mode](https://tailwindcss.com/docs/just-in-time-mode) only). **Default: `warning`**
+
+## Troubleshooting
+
+If you’re having issues getting the IntelliSense features to activate, there are a few things you can check:
+
+- Ensure that you have a Tailwind config file in your workspace and that this is named `tailwind.config.js`. Check out the Tailwind documentation for details on [creating a config file](https://tailwindcss.com/docs/installation#create-your-configuration-file).
+- Ensure that the `tailwindcss` module is installed in your workspace, via `npm`, `yarn`, or `pnpm`.
+- Make sure your VS Code settings aren’t causing your Tailwind config file to be excluded from search, for example via the `search.exclude` setting.

packages/vscode-tailwindcss/package.json

@@ -0,0 +1,207 @@
+{
+  "name": "vscode-tailwindcss",
+  "displayName": "Tailwind CSS IntelliSense",
+  "description": "Intelligent Tailwind CSS tooling for VS Code",
+  "preview": true,
+  "author": "Brad Cornes <hello@bradley.dev>",
+  "license": "MIT",
+  "version": "0.6.6",
+  "homepage": "https://github.com/tailwindlabs/tailwindcss-intellisense",
+  "bugs": {
+    "url": "https://github.com/tailwindlabs/tailwindcss-intellisense/issues",
+    "email": "hello@bradley.dev"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tailwindlabs/tailwindcss-intellisense.git"
+  },
+  "publisher": "bradlc",
+  "keywords": [
+    "tailwind",
+    "tailwindcss",
+    "css",
+    "intellisense",
+    "autocomplete",
+    "vscode"
+  ],
+  "engines": {
+    "vscode": "^1.52.0"
+  },
+  "categories": [
+    "Linters",
+    "Other"
+  ],
+  "galleryBanner": {
+    "color": "#f9fafb"
+  },
+  "icon": "media/icon.png",
+  "activationEvents": [
+    "onStartupFinished"
+  ],
+  "main": "dist/extension/index.js",
+  "contributes": {
+    "commands": [
+      {
+        "command": "tailwindCSS.showOutput",
+        "title": "Tailwind CSS: Show Output",
+        "enablement": "tailwindCSS.hasOutputChannel"
+      }
+    ],
+    "grammars": [
+      {
+        "scopeName": "tailwindcss.injection",
+        "path": "./syntaxes/tailwind.tmLanguage.json",
+        "injectTo": [
+          "source.css",
+          "source.css.scss",
+          "source.css.less",
+          "source.css.postcss",
+          "source.vue",
+          "source.svelte",
+          "text.html"
+        ]
+      }
+    ],
+    "configuration": {
+      "title": "Tailwind CSS IntelliSense",
+      "properties": {
+        "tailwindCSS.emmetCompletions": {
+          "type": "boolean",
+          "default": false,
+          "markdownDescription": "Enable class name completions when using Emmet-style syntax, for example `div.bg-red-500.uppercase`"
+        },
+        "tailwindCSS.includeLanguages": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          },
+          "default": {},
+          "markdownDescription": "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\"}`"
+        },
+        "tailwindCSS.colorDecorators": {
+          "type": "boolean",
+          "default": true,
+          "markdownDescription": "Controls whether the editor should render inline color decorators for Tailwind CSS classes and helper functions.",
+          "scope": "language-overridable"
+        },
+        "tailwindCSS.validate": {
+          "type": "boolean",
+          "default": true,
+          "markdownDescription": "Enable linting. Rules can be configured individually using the `tailwindcss.lint.*` settings",
+          "scope": "language-overridable"
+        },
+        "tailwindCSS.lint.cssConflict": {
+          "type": "string",
+          "enum": [
+            "ignore",
+            "warning",
+            "error"
+          ],
+          "default": "warning",
+          "markdownDescription": "Class names on the same HTML element which apply the same CSS property or properties",
+          "scope": "language-overridable"
+        },
+        "tailwindCSS.lint.invalidApply": {
+          "type": "string",
+          "enum": [
+            "ignore",
+            "warning",
+            "error"
+          ],
+          "default": "error",
+          "markdownDescription": "Unsupported use of the [`@apply` directive](https://tailwindcss.com/docs/functions-and-directives/#apply)",
+          "scope": "language-overridable"
+        },
+        "tailwindCSS.lint.invalidScreen": {
+          "type": "string",
+          "enum": [
+            "ignore",
+            "warning",
+            "error"
+          ],
+          "default": "error",
+          "markdownDescription": "Unknown screen name used with the [`@screen` directive](https://tailwindcss.com/docs/functions-and-directives/#screen)",
+          "scope": "language-overridable"
+        },
+        "tailwindCSS.lint.invalidVariant": {
+          "type": "string",
+          "enum": [
+            "ignore",
+            "warning",
+            "error"
+          ],
+          "default": "error",
+          "markdownDescription": "Unknown variant name used with the [`@variants` directive](https://tailwindcss.com/docs/functions-and-directives/#variants)",
+          "scope": "language-overridable"
+        },
+        "tailwindCSS.lint.invalidConfigPath": {
+          "type": "string",
+          "enum": [
+            "ignore",
+            "warning",
+            "error"
+          ],
+          "default": "error",
+          "markdownDescription": "Unknown or invalid path used with the [`theme` helper](https://tailwindcss.com/docs/functions-and-directives/#theme)",
+          "scope": "language-overridable"
+        },
+        "tailwindCSS.lint.invalidTailwindDirective": {
+          "type": "string",
+          "enum": [
+            "ignore",
+            "warning",
+            "error"
+          ],
+          "default": "error",
+          "markdownDescription": "Unknown value used with the [`@tailwind` directive](https://tailwindcss.com/docs/functions-and-directives/#tailwind)",
+          "scope": "language-overridable"
+        },
+        "tailwindCSS.lint.recommendedVariantOrder": {
+          "type": "string",
+          "enum": [
+            "ignore",
+            "warning",
+            "error"
+          ],
+          "default": "warning",
+          "markdownDescription": "Class variants not in the recommended order (applies in [JIT mode](https://tailwindcss.com/docs/just-in-time-mode) only)",
+          "scope": "language-overridable"
+        },
+        "tailwindCSS.experimental.classRegex": {
+          "type": "array",
+          "scope": "language-overridable"
+        },
+        "tailwindCSS.showPixelEquivalents": {
+          "type": "boolean",
+          "default": true,
+          "markdownDescription": "Show `px` equivalents for `rem` CSS values."
+        },
+        "tailwindCSS.rootFontSize": {
+          "type": "number",
+          "default": 16,
+          "markdownDescription": "Root font size in pixels. Used to convert `rem` CSS values to their `px` equivalents. See `#tailwindCSS.showPixelEquivalents#`."
+        }
+      }
+    }
+  },
+  "scripts": {
+    "dev": "npm run clean && glob-exec --foreach --parallel \"src/*.ts\" -- \"ncc build {{file}} --watch -o dist/{{file.toString().replace(/^src\\//, '').replace(/\\.ts$/, '')}}\"",
+    "build": "npm run clean && glob-exec --foreach --parallel \"src/*.ts\" -- \"ncc build {{file}} -o dist/{{file.toString().replace(/^src\\//, '').replace(/\\.ts$/, '')}}\" && mv dist/server/index.js dist/server/tailwindServer.js && npm run minify",
+    "minify": "glob-exec --foreach --parallel \"dist/**/*.js\" -- \"terser {{file}} --compress --mangle --output {{file.toString()}}\"",
+    "package": "vsce package",
+    "publish": "vsce publish",
+    "vscode:prepublish": "npm run build",
+    "clean": "rimraf dist",
+    "test": "jest"
+  },
+  "devDependencies": {
+    "@ctrl/tinycolor": "3.1.4",
+    "@types/vscode": "1.56.0",
+    "@vercel/ncc": "0.28.4",
+    "glob-exec": "0.1.1",
+    "rimraf": "3.0.2",
+    "terser": "4.6.12",
+    "vsce": "1.87.0",
+    "vscode-languageclient": "7.0.0"
+  }
+}

packages/vscode-tailwindcss/src/extension.ts

@@ -27,8 +27,8 @@ import {
   State as LanguageClientState,
   RevealOutputChannelOn,
 } from 'vscode-languageclient/node'
-import { DEFAULT_LANGUAGES } from './lib/languages'
+import { languages as defaultLanguages } from 'tailwindcss-language-service/src/util/languages'
-import isObject from './util/isObject'
+import isObject from 'tailwindcss-language-service/src/util/isObject'
 import { dedupe, equal } from 'tailwindcss-language-service/src/util/array'
 import { names as namedColors } from '@ctrl/tinycolor'
 
@@ -83,6 +83,7 @@ function getUserLanguages(folder?: WorkspaceFolder): Record<string, string> {
 }
 
 export async function activate(context: ExtensionContext) {
+  console.log(Uri.parse(`command:editor.action.addCommentLine`).toString())
   let module = context.asAbsolutePath(path.join('dist', 'server', 'index.js'))
   let prod = path.join('dist', 'server', 'tailwindServer.js')
 
@@ -126,7 +127,7 @@ export async function activate(context: ExtensionContext) {
           const userLanguages = getUserLanguages(folder)
           if (userLanguages) {
             const userLanguageIds = Object.keys(userLanguages)
-            const newLanguages = dedupe([...DEFAULT_LANGUAGES, ...userLanguageIds])
+            const newLanguages = dedupe([...defaultLanguages, ...userLanguageIds])
             if (!equal(newLanguages, languages.get(folder.uri.toString()))) {
               languages.set(folder.uri.toString(), newLanguages)
 
@@ -168,7 +169,7 @@ export async function activate(context: ExtensionContext) {
     if (!languages.has(folder.uri.toString())) {
       languages.set(
         folder.uri.toString(),
-        dedupe([...DEFAULT_LANGUAGES, ...Object.keys(getUserLanguages(folder))])
+        dedupe([...defaultLanguages, ...Object.keys(getUserLanguages(folder))])
       )
     }
 
@@ -199,6 +200,15 @@ export async function activate(context: ExtensionContext) {
       outputChannel: outputChannel,
       revealOutputChannelOn: RevealOutputChannelOn.Never,
       middleware: {
+        async provideHover(document, position, token, next) {
+          let result = await next(document, position, token)
+          result.contents = result.contents.map((content) => {
+            // @ts-ignore
+            content.isTrusted = true
+            return content
+          })
+          return result
+        },
         async resolveCompletionItem(item, token, next) {
           let result = await next(item, token)
           let selections = Window.activeTextEditor.selections

packages/vscode-tailwindcss/src/server.ts

@@ -0,0 +1 @@
+import 'tailwindcss-language-server/src/server'

packages/vscode-tailwindcss/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es6",
+    "lib": ["ES2019"],
+    "rootDir": "..",
+    "sourceMap": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "baseUrl": "..",
+    "paths": {
+      "tailwindcss-language-service/*": ["../packages/tailwindcss-language-service/*"],
+      "tailwindcss-language-server/*": ["../packages/tailwindcss-language-server/*"]
+    }
+  },
+  "include": [
+    "src",
+    "../packages/tailwindcss-language-service",
+    "../packages/tailwindcss-language-server"
+  ]
+}

src/util/isObject.ts

@@ -1,3 +0,0 @@
-export default function isObject(variable: any): boolean {
-  return Object.prototype.toString.call(variable) === '[object Object]'
-}

src/util/logFull.ts

@@ -1,5 +0,0 @@
-import * as util from 'util'
-
-export function logFull(object: any): void {
-  console.log(util.inspect(object, { showHidden: false, depth: null }))
-}