Merge branch 'master' into restructure-explorer

Author: bradlc

README.md

@@ -56,6 +56,14 @@ Enable completions when using [Emmet](https://emmet.io/)-style syntax, for examp
 }
 ```
 
+### `tailwindCSS.colorDecorators`
+
+Controls whether the editor should render inline color decorators for Tailwind CSS classes and helper functions.
+
+- `inherit`: Color decorators are rendered if `editor.colorDecorators` is enabled.
+- `on`: Color decorators are rendered.
+- `off`: Color decorators are not rendered.
+
 ### `tailwindCSS.validate`
 
 Enable linting. Rules can be configured individually using the `tailwindcss.lint` settings:

package-lock.json

@@ -5,7 +5,7 @@
   "preview": true,
   "author": "Brad Cornes <hello@bradley.dev>",
   "license": "MIT",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "homepage": "https://github.com/tailwindcss/intellisense",
   "bugs": {
     "url": "https://github.com/tailwindcss/intellisense/issues",
@@ -71,6 +71,22 @@
           "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": "string",
+          "enum": [
+            "inherit",
+            "on",
+            "off"
+          ],
+          "markdownEnumDescriptions": [
+            "Color decorators are rendered if `editor.colorDecorators` is enabled.",
+            "Color decorators are rendered.",
+            "Color decorators are not rendered."
+          ],
+          "default": "inherit",
+          "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,
@@ -209,6 +225,7 @@
     "@babel/core": "^7.9.6",
     "@babel/register": "^7.9.0",
     "@ctrl/tinycolor": "^3.1.0",
+    "@types/debounce": "^1.2.0",
     "@types/mocha": "^5.2.0",
     "@types/moo": "^0.5.3",
     "@types/node": "^13.9.3",
@@ -218,6 +235,7 @@
     "chokidar": "^3.3.1",
     "concurrently": "^5.1.0",
     "css.escape": "^1.5.1",
+    "debounce": "^1.2.0",
     "detect-indent": "^6.0.0",
     "dlv": "^1.1.3",
     "dset": "^2.0.1",

package.json

@@ -10,24 +10,12 @@ import invariant from 'tiny-invariant'
 import getPlugins from './getPlugins'
 import getVariants from './getVariants'
 import resolveConfig from './resolveConfig'
-import * as util from 'util'
 import * as path from 'path'
 import * as fs from 'fs'
 import { getUtilityConfigMap } from './getUtilityConfigMap'
 import glob from 'fast-glob'
 import normalizePath from 'normalize-path'
 
-function TailwindConfigError(error) {
-  Error.call(this)
-  Error.captureStackTrace(this, this.constructor)
-
-  this.name = this.constructor.name
-  this.message = error.message
-  this.stack = error.stack
-}
-
-util.inherits(TailwindConfigError, Error)
-
 function arraysEqual(arr1, arr2) {
   return (
     JSON.stringify(arr1.concat([]).sort()) ===
@@ -47,6 +35,7 @@ export default async function getClassNames(
     let tailwindcss
     let browserslistModule
     let version
+    let featureFlags = { future: [], experimental: [] }
 
     const configPaths = (
       await glob(CONFIG_GLOB, {
@@ -75,6 +64,10 @@ export default async function getClassNames(
       browserslistModule = importFrom(tailwindBase, 'browserslist')
     } catch (_) {}
 
+    try {
+      featureFlags = importFrom(tailwindBase, './lib/featureFlags.js').default
+    } catch (_) {}
+
     const sepLocation = semver.gte(version, '0.99.0')
       ? ['separator']
       : ['options', 'separator']
@@ -93,23 +86,34 @@ export default async function getClassNames(
     try {
       config = __non_webpack_require__(configPath)
     } catch (error) {
-      throw new TailwindConfigError(error)
+      hook.unwatch()
+      hook.unhook()
+      throw error
     }
+
     hook.unwatch()
 
-    const [base, components, utilities] = await Promise.all(
-      [
-        semver.gte(version, '0.99.0') ? 'base' : 'preflight',
-        'components',
-        'utilities',
-      ].map((group) =>
-        postcss([tailwindcss(configPath)]).process(`@tailwind ${group};`, {
-          from: undefined,
-        })
+    let postcssResult
+
+    try {
+      postcssResult = await Promise.all(
+        [
+          semver.gte(version, '0.99.0') ? 'base' : 'preflight',
+          'components',
+          'utilities',
+        ].map((group) =>
+          postcss([tailwindcss(configPath)]).process(`@tailwind ${group};`, {
+            from: undefined,
+          })
+        )
       )
-    )
+    } catch (error) {
+      throw error
+    } finally {
+      hook.unhook()
+    }
 
-    hook.unhook()
+    const [base, components, utilities] = postcssResult
 
     if (typeof userSeperator !== 'undefined') {
       dset(config, sepLocation, userSeperator)
@@ -152,6 +156,7 @@ export default async function getClassNames(
         tailwindcss,
         postcss,
       },
+      featureFlags,
     }
   }
 
@@ -174,12 +179,7 @@ export default async function getClassNames(
     try {
       result = await run()
     } catch (error) {
-      if (error instanceof TailwindConfigError) {
-        onChange({ error })
-      } else {
-        unwatch()
-        onChange(null)
-      }
+      onChange({ error })
       return
     }
     const newDeps = [result.configPath, ...result.dependencies]

src/class-names/index.js

@@ -25,6 +25,7 @@ import { dedupe, equal } from './util/array'
 import { registerConfigExplorer, ConfigExplorerApi } from './lib/configExplorer'
 import { createEmitter } from './lib/emitter'
 import { onMessage } from './lsp/notifications'
+import { registerColorDecorator } from './lib/registerColorDecorator'
 
 const CLIENT_ID = 'tailwindcss-intellisense'
 const CLIENT_NAME = 'Tailwind CSS IntelliSense'
@@ -159,6 +160,7 @@ export function activate(context: ExtensionContext) {
       }
       explorer.addWorkspace({ client, emitter })
       registerConfigErrorHandler(emitter)
+      registerColorDecorator(client, context, emitter)
       onMessage(client, 'getConfiguration', async (scope) => {
         return Workspace.getConfiguration('tailwindCSS', scope)
       })

src/extension.ts

@@ -0,0 +1,132 @@
+import { window, workspace, ExtensionContext, TextEditor } from 'vscode'
+import { NotificationEmitter } from './emitter'
+import { LanguageClient } from 'vscode-languageclient'
+import debounce from 'debounce'
+
+const colorDecorationType = window.createTextEditorDecorationType({
+  before: {
+    width: '0.8em',
+    height: '0.8em',
+    contentText: ' ',
+    border: '0.1em solid',
+    margin: '0.1em 0.2em 0',
+  },
+  dark: {
+    before: {
+      borderColor: '#eeeeee',
+    },
+  },
+  light: {
+    before: {
+      borderColor: '#000000',
+    },
+  },
+})
+
+export function registerColorDecorator(
+  client: LanguageClient,
+  context: ExtensionContext,
+  emitter: NotificationEmitter
+) {
+  let activeEditor = window.activeTextEditor
+
+  async function updateDecorations() {
+    return updateDecorationsInEditor(activeEditor)
+  }
+
+  async function updateDecorationsInEditor(editor: TextEditor) {
+    if (!editor) return
+    if (editor.document.uri.scheme !== 'file') return
+
+    let workspaceFolder = workspace.getWorkspaceFolder(editor.document.uri)
+    if (
+      !workspaceFolder ||
+      workspaceFolder.uri.toString() !==
+        client.clientOptions.workspaceFolder.uri.toString()
+    ) {
+      return
+    }
+
+    let preference =
+      workspace.getConfiguration('tailwindCSS', editor.document)
+        .colorDecorators || 'inherit'
+
+    let enabled: boolean =
+      preference === 'inherit'
+        ? Boolean(workspace.getConfiguration('editor').colorDecorators)
+        : preference === 'on'
+
+    if (!enabled) {
+      editor.setDecorations(colorDecorationType, [])
+      return
+    }
+
+    let { colors } = await emitter.emit('getDocumentColors', {
+      document: editor.document.uri.toString(),
+    })
+
+    editor.setDecorations(
+      colorDecorationType,
+      colors
+        .filter(({ color }) => color !== 'rgba(0, 0, 0, 0.01)')
+        .map(({ range, color }) => ({
+          range,
+          renderOptions: { before: { backgroundColor: color } },
+        }))
+    )
+  }
+
+  const triggerUpdateDecorations = debounce(updateDecorations, 200)
+
+  if (activeEditor) {
+    triggerUpdateDecorations()
+  }
+
+  window.onDidChangeActiveTextEditor(
+    (editor) => {
+      activeEditor = editor
+      if (editor) {
+        triggerUpdateDecorations()
+      }
+    },
+    null,
+    context.subscriptions
+  )
+
+  workspace.onDidChangeTextDocument(
+    (event) => {
+      if (activeEditor && event.document === activeEditor.document) {
+        triggerUpdateDecorations()
+      }
+    },
+    null,
+    context.subscriptions
+  )
+
+  workspace.onDidOpenTextDocument(
+    (document) => {
+      if (activeEditor && document === activeEditor.document) {
+        triggerUpdateDecorations()
+      }
+    },
+    null,
+    context.subscriptions
+  )
+
+  workspace.onDidChangeConfiguration((e) => {
+    if (
+      e.affectsConfiguration('editor.colorDecorators') ||
+      e.affectsConfiguration('tailwindCSS.colorDecorators')
+    ) {
+      window.visibleTextEditors.forEach(updateDecorationsInEditor)
+    }
+  })
+
+  emitter.on('configUpdated', () => {
+    window.visibleTextEditors.forEach(updateDecorationsInEditor)
+  })
+
+  emitter.on('configError', () => {
+    window.visibleTextEditors.forEach(updateDecorationsInEditor)
+  })
+}