Skip to content

Commit 7e6dbe8

Browse files
sastansastan
committed
feat: new autocompletion based on typescript
1 parent dcb1a01 commit 7e6dbe8

17 files changed

+1506
-786
lines changed

‎README.md

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
# @twind/typescript-plugin
22

3+
<div align="center">
4+
35
> TypeScript language service plugin that adds IntelliSense for tailwindjs
46
57
[![MIT License](https://flat.badgen.net/github/license/tw-in-js/typescript-plugin)](https://github.com/tw-in-js/typescript-plugin/blob/main/LICENSE)
68
[![Latest Release](https://flat.badgen.net/npm/v/@twind/typescript-plugin?icon=npm&label)](https://www.npmjs.com/package/@twind/typescript-plugin)
79
[![Github](https://flat.badgen.net/badge/icon/tw-in-js%2Ftypescript-plugin?icon=github&label)](https://github.com/tw-in-js/typescript-plugin)
810

11+
![Demo](https://raw.githubusercontent.com/tw-in-js/typescript-plugin/main/assets/demo.gif)
12+
13+
</div>
14+
915
---
1016

1117
<!-- prettier-ignore-start -->
@@ -29,7 +35,7 @@ Provides editor support for ```tw`...```` tagged template syntax including:
2935

3036
- Autocomplete for [twind](https://github.com/tw-in-js/twind) classes
3137
- Warnings on unknown classes
32-
- Quick fixes for misspelled property names.
38+
- Warnings on unknown theme values
3339

3440
## Installation
3541

@@ -39,7 +45,7 @@ npm install --save-dev typescript @twind/typescript-plugin
3945

4046
## Usage
4147

42-
This plugin requires TypeScript 2.4 or later. It can provide intellisense in both JavaScript and TypeScript files within any editor that uses TypeScript to power their language features. This includes [VS Code](https://code.visualstudio.com), [Sublime with the TypeScript plugin](https://github.com/Microsoft/TypeScript-Sublime-Plugin), [Atom with the TypeScript plugin](https://atom.io/packages/atom-typescript), [Visual Studio](https://www.visualstudio.com), and others.
48+
This plugin requires TypeScript 4.1 or later. It can provide intellisense in both JavaScript and TypeScript files within any editor that uses TypeScript to power their language features. This includes [VS Code](https://code.visualstudio.com), [Sublime with the TypeScript plugin](https://github.com/Microsoft/TypeScript-Sublime-Plugin), [Atom with the TypeScript plugin](https://atom.io/packages/atom-typescript), [Visual Studio](https://www.visualstudio.com), and others.
4349

4450
### With VS Code
4551

@@ -61,6 +67,16 @@ Then add a `plugins` section to your [`tsconfig.json`](http://www.typescriptlang
6167

6268
Finally, run the `Select TypeScript version` command in VS Code to switch to use the workspace version of TypeScript for VS Code's JavaScript and TypeScript language support. You can find more information about managing typescript versions [in the VS Code documentation](https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-the-workspace-version-of-typescript).
6369

70+
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, particularly when editing Tailwind classes within JSX:
71+
72+
```json
73+
{
74+
"editor.quickSuggestions": {
75+
"strings": true
76+
}
77+
}
78+
```
79+
6480
### With Sublime
6581

6682
This plugin works with the [Sublime TypeScript plugin](https://github.com/Microsoft/TypeScript-Sublime-Plugin).
@@ -199,7 +215,9 @@ yarn link @twind/typescript-plugin
199215
code . # Or launch editor/IDE what you like
200216
```
201217

202-
Of course, you can use other editor which communicates with tsserver .
218+
Of course, you can use other editor which communicates with tsserver.
219+
220+
> To see typescript debug logs start your editor with `TSS_LOG="-logToFile true -file /path/to/tss.log -level verbose"`.
203221
204222
## License
205223

‎assets/demo.gif

2.27 MB
Loading

‎index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/* eslint-env node */
2+
module.exports = require('./typescript-plugin.cjs')

‎package.json

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,17 @@
1414
"bugs": "https://github.com/tw-in-js/typescript-plugin/issues",
1515
"repository": "github:tw-in-js/typescript-plugin",
1616
"license": "MIT",
17-
"contributors": [
18-
"Luke Jackson (lukejacksonn.github.io)",
19-
"Sascha Tandel (https://github.com/sastan)"
17+
"author": "Sascha Tandel (https://github.com/sastan)",
18+
"files": [
19+
"index.js"
2020
],
21-
"main": "dist/node/twind_typescript-plugin.js",
22-
"source": "src/index.ts",
21+
"// The 'module', 'unpkg' and 'types' fields are added by distilt": "",
22+
"main": "src/index.ts",
23+
"// Each entry is expanded into several bundles (module, script, types, require, node, and default)": "",
24+
"exports": {
25+
".": "./src/index.ts",
26+
"./package.json": "./package.json"
27+
},
2328
"browser": false,
2429
"scripts": {
2530
"build": "distilt",
@@ -77,18 +82,32 @@
7782
}
7883
]
7984
},
85+
"sideEffects": false,
86+
"peerDependencies": {
87+
"twind": ">=0.15.9 <2"
88+
},
89+
"peerDependenciesMeta": {
90+
"twind": {
91+
"optional": true
92+
}
93+
},
8094
"dependencies": {
81-
"dlv": "^1.1.3",
82-
"tailwindcss": "^2.0.1",
95+
"cssbeautify": "^0.3.1",
96+
"esbuild": "^0.9.1",
97+
"import-from": "^3.0.0",
98+
"match-sorter": "^6.3.0",
99+
"resolve-from": "^5.0.0",
100+
"twind": "^0.16.0",
83101
"typescript": "^4.1.0",
84102
"typescript-template-language-service-decorator": "^2.2.0",
85103
"vscode-languageserver-types": "^3.13.0"
86104
},
87105
"devDependencies": {
106+
"@types/cssbeautify": "^0.3.1",
107+
"@types/node": "^14.14.34",
88108
"@typescript-eslint/eslint-plugin": "^4.9.1",
89109
"@typescript-eslint/parser": "^4.9.1",
90-
"distilt": "^0.2.1",
91-
"esbuild": "^0.8.23",
110+
"distilt": "^0.10.1",
92111
"eslint": "^7.15.0",
93112
"eslint-config-prettier": "^7.0.0",
94113
"eslint-plugin-prettier": "^3.2.0",

‎src/colors.ts

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
const NAMED_COLORS = new Set([
2+
'transparent',
3+
'currentColor',
4+
'aliceblue',
5+
'antiquewhite',
6+
'aqua',
7+
'aquamarine',
8+
'azure',
9+
'beige',
10+
'bisque',
11+
'black',
12+
'blanchedalmond',
13+
'blue',
14+
'blueviolet',
15+
'brown',
16+
'burlywood',
17+
'cadetblue',
18+
'chartreuse',
19+
'chocolate',
20+
'coral',
21+
'cornflowerblue',
22+
'cornsilk',
23+
'crimson',
24+
'cyan',
25+
'darkblue',
26+
'darkcyan',
27+
'darkgoldenrod',
28+
'darkgray',
29+
'darkgreen',
30+
'darkgrey',
31+
'darkkhaki',
32+
'darkmagenta',
33+
'darkolivegreen',
34+
'darkorange',
35+
'darkorchid',
36+
'darkred',
37+
'darksalmon',
38+
'darkseagreen',
39+
'darkslateblue',
40+
'darkslategray',
41+
'darkslategrey',
42+
'darkturquoise',
43+
'darkviolet',
44+
'deeppink',
45+
'deepskyblue',
46+
'dimgray',
47+
'dimgrey',
48+
'dodgerblue',
49+
'firebrick',
50+
'floralwhite',
51+
'forestgreen',
52+
'fuchsia',
53+
'gainsboro',
54+
'ghostwhite',
55+
'gold',
56+
'goldenrod',
57+
'gray',
58+
'green',
59+
'greenyellow',
60+
'grey',
61+
'honeydew',
62+
'hotpink',
63+
'indianred',
64+
'indigo',
65+
'ivory',
66+
'khaki',
67+
'lavender',
68+
'lavenderblush',
69+
'lawngreen',
70+
'lemonchiffon',
71+
'lightblue',
72+
'lightcoral',
73+
'lightcyan',
74+
'lightgoldenrodyellow',
75+
'lightgray',
76+
'lightgreen',
77+
'lightgrey',
78+
'lightpink',
79+
'lightsalmon',
80+
'lightseagreen',
81+
'lightskyblue',
82+
'lightslategray',
83+
'lightslategrey',
84+
'lightsteelblue',
85+
'lightyellow',
86+
'lime',
87+
'limegreen',
88+
'linen',
89+
'magenta',
90+
'maroon',
91+
'mediumaquamarine',
92+
'mediumblue',
93+
'mediumorchid',
94+
'mediumpurple',
95+
'mediumseagreen',
96+
'mediumslateblue',
97+
'mediumspringgreen',
98+
'mediumturquoise',
99+
'mediumvioletred',
100+
'midnightblue',
101+
'mintcream',
102+
'mistyrose',
103+
'moccasin',
104+
'navajowhite',
105+
'navy',
106+
'oldlace',
107+
'olive',
108+
'olivedrab',
109+
'orange',
110+
'orangered',
111+
'orchid',
112+
'palegoldenrod',
113+
'palegreen',
114+
'paleturquoise',
115+
'palevioletred',
116+
'papayawhip',
117+
'peachpuff',
118+
'peru',
119+
'pink',
120+
'plum',
121+
'powderblue',
122+
'purple',
123+
'rebeccapurple',
124+
'red',
125+
'rosybrown',
126+
'royalblue',
127+
'saddlebrown',
128+
'salmon',
129+
'sandybrown',
130+
'seagreen',
131+
'seashell',
132+
'sienna',
133+
'silver',
134+
'skyblue',
135+
'slateblue',
136+
'slategray',
137+
'slategrey',
138+
'snow',
139+
'springgreen',
140+
'steelblue',
141+
'tan',
142+
'teal',
143+
'thistle',
144+
'tomato',
145+
'transparent',
146+
'turquoise',
147+
'violet',
148+
'wheat',
149+
'white',
150+
'whitesmoke',
151+
'yellow',
152+
'yellowgreen',
153+
])
154+
155+
const DEPRECATED_SYSTEM_COLORS = new Set([
156+
'ActiveBorder',
157+
'ActiveCaption',
158+
'AppWorkspace',
159+
'Background',
160+
'ButtonFace',
161+
'ButtonHighlight',
162+
'ButtonShadow',
163+
'ButtonText',
164+
'CaptionText',
165+
'GrayText',
166+
'Highlight',
167+
'HighlightText',
168+
'InactiveBorder',
169+
'InactiveCaption',
170+
'InactiveCaptionText',
171+
'InfoBackground',
172+
'InfoText',
173+
'Menu',
174+
'MenuText',
175+
'Scrollbar',
176+
'ThreeDDarkShadow',
177+
'ThreeDFace',
178+
'ThreeDHighlight',
179+
'ThreeDLightShadow',
180+
'ThreeDShadow',
181+
'Window',
182+
'WindowFrame',
183+
'WindowText',
184+
])
185+
186+
const COLORS = new Set([...NAMED_COLORS, ...DEPRECATED_SYSTEM_COLORS])
187+
188+
const isColorLike = (value: string): boolean =>
189+
/^((#[\da-f]{3,8})|(((rgb|hsl)[a]?)\(?([\d]?\.?[\d]+%?,?\s?){3,4}\)?))$/i.test(value)
190+
191+
// TODO function with opacityValue
192+
export const getColor = (value: unknown): string | undefined => {
193+
if (typeof value == 'string' && (COLORS.has(value) || isColorLike(value))) {
194+
return value
195+
}
196+
197+
return undefined
198+
}

‎src/configuration.ts

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1-
export interface TailwindjsPluginConfiguration {
1+
export interface TwindPluginConfiguration {
22
readonly tags: ReadonlyArray<string>
3+
readonly debug: boolean
34
// Readonly validate: boolean;
45
// readonly lint: { [key: string]: any };
56
// readonly emmet: { [key: string]: any };
67
}
78

89
export class ConfigurationManager {
9-
private static readonly defaultConfiguration: TailwindjsPluginConfiguration = {
10+
private static readonly defaultConfiguration: TwindPluginConfiguration = {
1011
tags: ['tw', 'apply'],
12+
debug: false,
1113
// Validate: true,
1214
// lint: {
1315
// emptyRules: 'ignore',
@@ -17,18 +19,23 @@ export class ConfigurationManager {
1719

1820
private readonly _configUpdatedListeners = new Set<() => void>()
1921

20-
public get config(): TailwindjsPluginConfiguration {
22+
public get config(): TwindPluginConfiguration {
2123
return this._configuration
2224
}
2325

24-
private _configuration: TailwindjsPluginConfiguration = ConfigurationManager.defaultConfiguration
26+
private _configuration: TwindPluginConfiguration = ConfigurationManager.defaultConfiguration
2527

26-
public updateFromPluginConfig(config: TailwindjsPluginConfiguration): void {
27-
this._configuration = {
28+
public updateFromPluginConfig(config: Partial<TwindPluginConfiguration> = {}): void {
29+
const mergedConfig = {
2830
...ConfigurationManager.defaultConfiguration,
2931
...config,
3032
}
3133

34+
this._configuration = {
35+
...mergedConfig,
36+
debug: 'true' == String(mergedConfig.debug),
37+
}
38+
3239
for (const listener of this._configUpdatedListeners) {
3340
listener()
3441
}

‎src/index.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
// https://github.com/tailwindlabs/tailwindcss-intellisense/tree/master/packages/tailwindcss-language-service
55

66
import type * as ts from 'typescript/lib/tsserverlibrary'
7-
import { TailwindjsPlugin } from './plugin'
7+
import { TwindPlugin } from './plugin'
88

9-
export = (config: { typescript: typeof ts }): TailwindjsPlugin =>
10-
new TailwindjsPlugin(config.typescript)
9+
export = (config: { typescript: typeof ts }): TwindPlugin => new TwindPlugin(config.typescript)

0 commit comments

Comments
 (0)