@css-modules-kit/ts-plugin 0.0.4 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -85
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -2,102 +2,33 @@
|
|
|
2
2
|
|
|
3
3
|
A TypeScript Language Service Plugin for CSS Modules
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## What is this?
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
<summary>Go to Definition</summary>
|
|
9
|
-
|
|
10
|
-
https://github.com/user-attachments/assets/bdeb2c8a-d615-4223-bae4-e7446f62d353
|
|
11
|
-
|
|
12
|
-
</details>
|
|
13
|
-
|
|
14
|
-
<details>
|
|
15
|
-
<summary>Rename class names or `@value`</summary>
|
|
16
|
-
|
|
17
|
-
https://github.com/user-attachments/assets/db39a95e-2fc8-42a6-a64d-02f2822afbfe
|
|
18
|
-
|
|
19
|
-
</details>
|
|
20
|
-
|
|
21
|
-
<details>
|
|
22
|
-
<summary>Find all references</summary>
|
|
23
|
-
|
|
24
|
-
https://github.com/user-attachments/assets/df1e2feb-2a1a-4bf5-ae70-1cac36d90409
|
|
25
|
-
|
|
26
|
-
</details>
|
|
27
|
-
|
|
28
|
-
<!-- <details>
|
|
29
|
-
<summary>Automatically update import statements when moving `*.module.css`</summary>
|
|
30
|
-
|
|
31
|
-
https://github.com/user-attachments/assets/4af168fa-357d-44e1-b010-3053802bf1a2
|
|
32
|
-
|
|
33
|
-
</details> -->
|
|
34
|
-
|
|
35
|
-
<details>
|
|
36
|
-
<summary>Create CSS Module file for current file.</summary>
|
|
37
|
-
|
|
38
|
-
If there is no CSS Module file corresponding to `xxx.tsx`, create one.
|
|
39
|
-
|
|
40
|
-
https://github.com/user-attachments/assets/05f9e839-9617-43dc-a519-d5a20adf1146
|
|
41
|
-
|
|
42
|
-
</details>
|
|
43
|
-
|
|
44
|
-
<!-- <details>
|
|
45
|
-
<summary>Complete `className={...}` instead of `className="..."`</summary>
|
|
46
|
-
|
|
47
|
-
In projects where CSS Modules are used, the element is styled with `className={styles.xxx}`. However, when you type `className`, `className="..."` is completed. This is annoying to the user.
|
|
48
|
-
|
|
49
|
-
So, instead of `className="..."` instead of `className={...}` instead of `className="..."`.
|
|
50
|
-
|
|
51
|
-
https://github.com/user-attachments/assets/b3609c8a-123f-4f4b-af8c-3c8bf7ab4363
|
|
52
|
-
|
|
53
|
-
</details> -->
|
|
54
|
-
|
|
55
|
-
<details>
|
|
56
|
-
<summary>Prioritize the `styles' import for the current component file</summary>
|
|
57
|
-
|
|
58
|
-
When you request `styles` completion, the CSS Module file `styles` will be suggested. If there are many CSS Module files in the project, more items will be suggested. This can be confusing to the user.
|
|
59
|
-
|
|
60
|
-
So I have made it so that the `styles` of the CSS Module file corresponding to the current file is shown first.
|
|
61
|
-
|
|
62
|
-
<img width="821" alt="image" src="https://github.com/user-attachments/assets/413373ec-1258-484d-9248-bc173e4f6d4a" />
|
|
63
|
-
|
|
64
|
-
</details>
|
|
65
|
-
|
|
66
|
-
<!-- <details>
|
|
67
|
-
<summary>Add missing CSS rule</summary>
|
|
68
|
-
|
|
69
|
-
If you are trying to use a class name that is not defined, you can add it with Quick Fixes.
|
|
70
|
-
|
|
71
|
-
https://github.com/user-attachments/assets/3502150a-985d-45f3-9912-bbc183e41c03
|
|
72
|
-
|
|
73
|
-
</details> -->
|
|
7
|
+
`@css-modules-kit/ts-plugin` is a TypeScript Language Service Plugin that extends tsserver to handle `*.module.css` files. As a result, many language features like code navigation and rename refactoring become available.
|
|
74
8
|
|
|
75
9
|
## Installation
|
|
76
10
|
|
|
77
|
-
First, install the package.
|
|
78
|
-
|
|
79
11
|
```bash
|
|
80
12
|
npm i -D @css-modules-kit/ts-plugin
|
|
81
13
|
```
|
|
82
14
|
|
|
83
|
-
##
|
|
84
|
-
|
|
85
|
-
Second, add the "plugin" option to your tsconfig.json file. For example:
|
|
15
|
+
## How to setup your editor
|
|
86
16
|
|
|
87
|
-
|
|
88
|
-
{
|
|
89
|
-
"compilerOptions": {
|
|
90
|
-
"plugins": [{ "name": "@css-modules-kit/ts-plugin", "languages": ["css"] }],
|
|
91
|
-
},
|
|
92
|
-
}
|
|
93
|
-
```
|
|
17
|
+
### Neovim
|
|
94
18
|
|
|
95
|
-
|
|
19
|
+
```lua
|
|
20
|
+
local lspconfig = require('lspconfig')
|
|
96
21
|
|
|
97
|
-
|
|
98
|
-
{
|
|
99
|
-
|
|
100
|
-
|
|
22
|
+
lspconfig.ts_ls.setup {
|
|
23
|
+
init_options = {
|
|
24
|
+
plugins = {
|
|
25
|
+
{
|
|
26
|
+
name = '@css-modules-kit/ts-plugin',
|
|
27
|
+
languages = { 'css' },
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
},
|
|
31
|
+
filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'css' },
|
|
101
32
|
}
|
|
102
33
|
```
|
|
103
34
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@css-modules-kit/ts-plugin",
|
|
3
3
|
"description": "A TypeScript Language Service Plugin for CSS Modules",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.5",
|
|
5
5
|
"type": "commonjs",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"repository": {
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@volar/language-core": "^2.4.11",
|
|
41
41
|
"@volar/typescript": "^2.4.11",
|
|
42
|
-
"@css-modules-kit/core": "^0.0.
|
|
42
|
+
"@css-modules-kit/core": "^0.0.5"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"typescript": ">=5.6.3"
|