You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
|`customMatcher`|`"\\.module\\.(c\|le\|sa\|sc)ss$"`| Change the file extensions that this plugin works with. |
64
-
|`camelCase`|`false`| Implements the behaviour of the [`camelCase` CSS Loader option](https://github.com/webpack-contrib/css-loader#camelcase) (accepting the same values). |
70
+
Please note that no options are required. However, depending on your configuration, you may need to customise these options.
65
71
66
-
The below is an example that only matches "\*.m.css" files, and [camel-cases dashes](https://github.com/webpack-contrib/css-loader#camelcase).
|`classnameTransform`|`asIs`| See [`classnameTransform`](#classnameTransform) below. |
75
+
|`customMatcher`|`"\\.module\\.(c\|le\|sa\|sc)ss$"`| Changes the file extensions that this plugin processes. |
76
+
|`customRenderer`|`false`| See [`customRenderer`](#customRenderer) below. |
77
+
|`dotenvOptions`|`{}`| Provides options for [`dotenv`](https://github.com/motdotla/dotenv#options). |
78
+
|`postCssOptions`|`{}`| See [`postCssOptions`](#postCssOptions) below. |
79
+
|`rendererOptions`|`{}`| See [`rendererOptions`](#rendererOptions) below. |
67
80
68
81
```json
69
82
{
@@ -72,22 +85,75 @@ The below is an example that only matches "\*.m.css" files, and [camel-cases das
72
85
{
73
86
"name": "typescript-plugin-css-modules",
74
87
"options": {
88
+
"classnameTransform": "dashes",
75
89
"customMatcher": "\\.m\\.css$",
76
-
"camelCase": "dashes"
90
+
"customRenderer": "./myRenderer.js",
91
+
"dotenvOptions": {},
92
+
"postCssOptions": {},
93
+
"rendererOptions": {}
77
94
}
78
95
}
79
96
]
80
97
}
81
98
}
82
99
```
83
100
101
+
#### `classnameTransform`
102
+
103
+
Implements the behaviour of the [`localsConvention`](https://github.com/webpack-contrib/css-loader#localsconvention)`css-loader` option.
104
+
105
+
Options available are: `'asIs'`, `'camelCase'`, `'camelCaseOnly'`, `'dashes'`, and `'dashesOnly'`.
106
+
107
+
#### `customRenderer`
108
+
109
+
The `customRenderer` is an advanced option, letting you provide the CSS renderer.
110
+
111
+
When a custom renderer is provided, not other renderers will be used.
112
+
113
+
The path to the `customRenderer` must be relative to the project root (i.e. `./myRenderer.js`).
114
+
115
+
The custom renderer itself should be a JavaScript file. The function will be called with two arguments: a `css` string, and an `options` object (see [`options.ts`](https://github.com/mrmckeb/typescript-plugin-css-modules/blob/master/src/options.ts#L36-L39)). It must be synchronous, and must return valid CSS.
116
+
117
+
```js
118
+
module.exports= (css, { fileName, logger }) => {
119
+
try {
120
+
// ...process css here
121
+
return renderedCss;
122
+
} catch (error) {
123
+
logger.error(error.message);
124
+
}
125
+
};
126
+
```
127
+
128
+
You can find an example custom renderer in our test fixtures ([`customRenderer.js`](https://github.com/mrmckeb/typescript-plugin-css-modules/blob/master/src/helpers/__tests__/fixtures/customRenderer.js)).
129
+
130
+
The [internal `logger`](https://github.com/mrmckeb/typescript-plugin-css-modules/blob/master/src/helpers/logger.ts) is provided for [debugging](#troubleshooting).
|`less`|`{}`| Set [renderer options for Less](http://lesscss.org/usage/#less-options). |
144
+
|`sass`|`{}`| Set [renderer options for Sass](https://sass-lang.com/documentation/js-api#options). |
145
+
84
146
### Visual Studio Code
85
147
86
-
By default, VSCode will use its own version of TypeScript. To make it work with this plugin, you have two options:
148
+
#### Recommended usage
149
+
150
+
To use this plugin with Visual Studio Code, you should set your workspace's version of TypeScript, which will load plugins from your `tsconfig.json` file.
151
+
152
+
For instructions, see: [Using the workspace version of TypeScript](https://code.visualstudio.com/docs/languages/typescript#_using-the-workspace-version-of-typescript).
87
153
88
-
1. Use your workspace's version of TypeScript, which will load plugins from your `tsconfig.json` file. This is the recommended approach. For instructions, see: [Using the workspace version of TypeScript](https://code.visualstudio.com/docs/languages/typescript#_using-the-workspace-version-of-typescript).
154
+
#### Alternative usage
89
155
90
-
2. Add this plugin to `"typescript.tsserver.pluginPaths"` in settings. Note that this method doesn't currently support plugin options.
156
+
If you aren't using any [plugin options](#options), you can simple add this plugin to `"typescript.tsserver.pluginPaths"` in settings. You cannot provide plugin options with this approach.
91
157
92
158
```json
93
159
{
@@ -101,9 +167,9 @@ _Note: Create React App users can skip this section if you're using `react-scrip
101
167
102
168
If your project doesn't already have global declarations for CSS Modules, you will need to add these to help TypeScript understand the general shape of the imported CSS during build.
103
169
104
-
Where you store global declarations is up to you. An example might look like: `src/custom.d.ts`.
170
+
Where you store global declarations is up to you. An example might look like: `./src/custom.d.ts`.
105
171
106
-
The below is an example that you can copy or modify. If you use a `customMatcher`, you'll need to modify it.
172
+
The below is an example that you can copy or modify. If you use a [`customMatcher`], you'll need to modify this.
If you're having issues with this extension, you can view the TypeScript Server Log in VSCode by entering `Typescript: Open TS Server log` in the [command palette](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette).
198
+
For troubleshooting and debugging, you can view the TypeScript Server Log in Visual Studio Code by entering `Typescript: Open TS Server log` in the [command palette](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette).
199
+
200
+
If you're not using Visual Studio Code or are having trouble with the above method, you can set the [`TSS_LOG` environment variable](https://github.com/Microsoft/TypeScript/wiki/Standalone-Server-%28tsserver%29#logging).
201
+
202
+
You can include these logs with any issues you open for this project.
133
203
134
-
If that doesn't work, or you're not using VSCode, you can set the [TSS_LOG environment variable](https://github.com/Microsoft/TypeScript/wiki/Standalone-Server-%28tsserver%29#logging).
204
+
## About this project
135
205
136
-
You can also include this with any issues you file on this project.
206
+
This project was inspired by a Create React App [issue](https://github.com/facebook/create-react-app/issues/5677)
207
+
and built on prior work from [`css-module-types`](https://github.com/timothykang/css-module-types).
0 commit comments