@css-modules-kit/ts-plugin 0.0.3 → 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 CHANGED
@@ -2,75 +2,9 @@
2
2
 
3
3
  A TypeScript Language Service Plugin for CSS Modules
4
4
 
5
- ## Features
5
+ ## What is this?
6
6
 
7
- <details>
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
 
@@ -78,15 +12,23 @@ https://github.com/user-attachments/assets/3502150a-985d-45f3-9912-bbc183e41c03
78
12
  npm i -D @css-modules-kit/ts-plugin
79
13
  ```
80
14
 
81
- ## Usage
15
+ ## How to setup your editor
16
+
17
+ ### Neovim
82
18
 
83
- Add the "plugin" option to your tsconfig.json file. For example:
19
+ ```lua
20
+ local lspconfig = require('lspconfig')
84
21
 
85
- ```jsonc
86
- {
87
- "compilerOptions": {
88
- "plugins": [{ "name": "@css-modules-kit/ts-plugin" }],
22
+ lspconfig.ts_ls.setup {
23
+ init_options = {
24
+ plugins = {
25
+ {
26
+ name = '@css-modules-kit/ts-plugin',
27
+ languages = { 'css' },
28
+ },
29
+ },
89
30
  },
31
+ filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'css' },
90
32
  }
91
33
  ```
92
34
 
package/dist/index.js CHANGED
@@ -30,7 +30,7 @@ const plugin = (0, createLanguageServicePlugin_js_1.createLanguageServicePlugin)
30
30
  return { languagePlugins: [] };
31
31
  }
32
32
  }
33
- const resolver = (0, core_1.createResolver)(config.paths);
33
+ const resolver = (0, core_1.createResolver)(config.compilerOptions);
34
34
  const matchesPattern = (0, core_1.createMatchesPattern)(config);
35
35
  return {
36
36
  languagePlugins: [(0, language_plugin_js_1.createCSSModuleLanguagePlugin)(resolver, matchesPattern)],
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AACA,gDAA6F;AAC7F,gDAAkE;AAClE,oHAA8G;AAC9G,6DAAqE;AACrE,0DAAmE;AAEnE,MAAM,MAAM,GAAG,IAAA,4DAA2B,EAAC,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE;IACtD,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,KAAK,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,UAAU,EAAE,CAAC;QAClE,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,8DAA8D,CAAC,CAAC;QACxG,OAAO,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC;IACjC,CAAC;IAED,IAAI,MAAiB,CAAC;IACtB,IAAI,CAAC;QACH,MAAM,GAAG,IAAA,qBAAc,EAAC,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;QACvD,2BAA2B;QAC3B,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,CACrC,4DAA4D,MAAM,CAAC,cAAc,GAAG,CACrF,CAAC;IACJ,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,uDAAuD;QACvD,IAAI,KAAK,YAAY,gCAAyB,EAAE,CAAC;YAC/C,OAAO,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC;QACjC,CAAC;aAAM,CAAC;YACN,IAAI,GAAG,GAAG,8DAA8D,CAAC;YACzE,IAAI,KAAK,YAAY,KAAK,EAAE,CAAC;gBAC3B,GAAG,IAAI,OAAO,KAAK,CAAC,OAAO,EAAE,CAAC;gBAC9B,GAAG,IAAI,KAAK,KAAK,CAAC,KAAK,EAAE,CAAC;YAC5B,CAAC;YACD,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC7C,OAAO,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC;QACjC,CAAC;IACH,CAAC;IAED,MAAM,QAAQ,GAAG,IAAA,qBAAc,EAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,cAAc,GAAG,IAAA,2BAAoB,EAAC,MAAM,CAAC,CAAC;IAEpD,OAAO;QACL,eAAe,EAAE,CAAC,IAAA,kDAA6B,EAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QAC1E,KAAK,EAAE,CAAC,QAAQ,EAAE,EAAE;YAClB,IAAI,CAAC,eAAe,GAAG,IAAA,+BAAoB,EACzC,QAAQ,EACR,IAAI,CAAC,eAAe,EACpB,IAAI,CAAC,OAAO,EACZ,QAAQ,EACR,cAAc,CACf,CAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAS,MAAM,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AACA,gDAA6F;AAC7F,gDAAkE;AAClE,oHAA8G;AAC9G,6DAAqE;AACrE,0DAAmE;AAEnE,MAAM,MAAM,GAAG,IAAA,4DAA2B,EAAC,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE;IACtD,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,KAAK,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,UAAU,EAAE,CAAC;QAClE,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,8DAA8D,CAAC,CAAC;QACxG,OAAO,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC;IACjC,CAAC;IAED,IAAI,MAAiB,CAAC;IACtB,IAAI,CAAC;QACH,MAAM,GAAG,IAAA,qBAAc,EAAC,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;QACvD,2BAA2B;QAC3B,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,CACrC,4DAA4D,MAAM,CAAC,cAAc,GAAG,CACrF,CAAC;IACJ,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,uDAAuD;QACvD,IAAI,KAAK,YAAY,gCAAyB,EAAE,CAAC;YAC/C,OAAO,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC;QACjC,CAAC;aAAM,CAAC;YACN,IAAI,GAAG,GAAG,8DAA8D,CAAC;YACzE,IAAI,KAAK,YAAY,KAAK,EAAE,CAAC;gBAC3B,GAAG,IAAI,OAAO,KAAK,CAAC,OAAO,EAAE,CAAC;gBAC9B,GAAG,IAAI,KAAK,KAAK,CAAC,KAAK,EAAE,CAAC;YAC5B,CAAC;YACD,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC7C,OAAO,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC;QACjC,CAAC;IACH,CAAC;IAED,MAAM,QAAQ,GAAG,IAAA,qBAAc,EAAC,MAAM,CAAC,eAAe,CAAC,CAAC;IACxD,MAAM,cAAc,GAAG,IAAA,2BAAoB,EAAC,MAAM,CAAC,CAAC;IAEpD,OAAO;QACL,eAAe,EAAE,CAAC,IAAA,kDAA6B,EAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QAC1E,KAAK,EAAE,CAAC,QAAQ,EAAE,EAAE;YAClB,IAAI,CAAC,eAAe,GAAG,IAAA,+BAAoB,EACzC,QAAQ,EACR,IAAI,CAAC,eAAe,EACpB,IAAI,CAAC,OAAO,EACZ,QAAQ,EACR,cAAc,CACf,CAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAS,MAAM,CAAC"}
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.3",
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.3"
42
+ "@css-modules-kit/core": "^0.0.5"
43
43
  },
44
44
  "peerDependencies": {
45
45
  "typescript": ">=5.6.3"
package/src/index.ts CHANGED
@@ -33,7 +33,7 @@ const plugin = createLanguageServicePlugin((ts, info) => {
33
33
  }
34
34
  }
35
35
 
36
- const resolver = createResolver(config.paths);
36
+ const resolver = createResolver(config.compilerOptions);
37
37
  const matchesPattern = createMatchesPattern(config);
38
38
 
39
39
  return {