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

import { window, workspace, ExtensionContext, TextEditor } from 'vscode'
import { NotificationEmitter } from './emitter'
import { LanguageClient } from 'vscode-languageclient'

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
  let timeout: NodeJS.Timer | undefined = undefined

  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 settings = workspace.getConfiguration(
      'tailwindCSS.colorDecorators',
      editor.document
    )

    if (settings.enabled !== true) {
      editor.setDecorations(colorDecorationType, [])
      return
    }

    let { colors } = await emitter.emit('getDocumentColors', {
      document: editor.document.uri.toString(),
      classes: settings.classes,
      cssHelpers: settings.cssHelpers,
    })

    editor.setDecorations(
      colorDecorationType,
      colors
        .filter(({ color }) => color !== 'rgba(0, 0, 0, 0.01)')
        .map(({ range, color }) => ({
          range,
          renderOptions: { before: { backgroundColor: color } },
        }))
    )
  }

  function triggerUpdateDecorations() {
    if (timeout) {
      clearTimeout(timeout)
      timeout = undefined
    }
    timeout = setTimeout(updateDecorations, 500)
  }

  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('tailwindCSS.colorDecorators')) {
      window.visibleTextEditors.forEach(updateDecorationsInEditor)
    }
  })
}