Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dropbox/typed-css-modules-webpack-plugin
Generate TypeScript typing declarations for your TypeScript + CSS Modules project.
https://github.com/dropbox/typed-css-modules-webpack-plugin
css css-modules typescript webpack
Last synced: 14 days ago
JSON representation
Generate TypeScript typing declarations for your TypeScript + CSS Modules project.
- Host: GitHub
- URL: https://github.com/dropbox/typed-css-modules-webpack-plugin
- Owner: dropbox
- License: apache-2.0
- Created: 2018-12-04T17:53:21.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-08-31T14:31:32.000Z (about 1 year ago)
- Last Synced: 2024-10-15T02:22:27.272Z (about 1 month ago)
- Topics: css, css-modules, typescript, webpack
- Language: TypeScript
- Homepage:
- Size: 859 KB
- Stars: 69
- Watchers: 11
- Forks: 16
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
⚠️ **This project is no longer maintained! We recommend you use a separate tool to build type definitions from the CSS modules.**
* * *
# typed-css-modules-webpack-plugin 
This is a Webpack plugin to generate TypeScript typing declarations for a TypeScript + CSS Modules
project. The plugin generates `.css.d.ts` file co-located with the corresponding `.css` file before
compilation phase so all CSS imports in TypeScript source code type check.
This plugin is different from [typings-for-css-modules-loader][1] and [dts-css-modules-loader][2] in
that it generates the typings **before** loaders process source files during the compilation. That
means your TypeScript loader will type check the **up-to-date** typing definitions of your CSS modules.
# Installation
```
yarn add --dev typed-css-modules-webpack-plugin
# Or if you use npm
npm install --save-dev typed-css-modules-webpack-plugin
```
# Usage
A minimal TypeScript + CSS Modules Webpack configuration would look like this:
```javascript
const path = require('path');
const {TypedCssModulesPlugin} = require('typed-css-modules-webpack-plugin');
module.exports = {
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
},
{
test: /\.css$/,
use: [
'style-loader',
// Use CSS Modules
{
loader: 'css-loader',
options: {
modules: true,
},
},
],
},
],
},
// Generate typing declarations for all CSS files under `src/` directory.
plugins: [
new TypedCssModulesPlugin({
globPattern: 'src/**/*.css',
}),
],
};
```
Other than emitting the JS bundle, the build would produce the side-effect of generating `.css.d.ts`
files for all `.css` files in `src/` directory.
# Options
The available options for the plugin are:
## `globPattern: string`
This is the glob pattern used to match CSS Modules in the project. The plugin only generates `.d.ts`
for the matching CSS files. See [node-glob](https://github.com/isaacs/node-glob) for the pattern
syntax.
## `postCssPlugins?: Plugin[] | (defaults: Plugin[]) => Plugin[]`
This field is optional. If specified, the plugin would use the specified PostCSS plugin to transform
CSS files instead of the default
[`css-modules-loader-core`](https://github.com/css-modules/css-modules-loader-core) plugins.
If a function is supplied, it will be called with the default plugin list. This is useful if you
chain a `postcss-loader` before `css-loader` for some custom transformations. For example:
```javascript
// In CSS rules
[
// ...
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
},
},
// Some PostCSS transformations applied before css-loader
{
loader: 'postcss-loader',
options: {
plugins: () => [require('postcss-theme')({themePath: './theme'})],
},
},
];
```
Now to ensure CSS Modules recognize the custom syntax, we can inject the same transform in the
plugin options:
```javascript
new TypedCSSModulesPlugin({
globPattern: '**/*.css',
postCssPlugins: defaultPlugins => [
require('postcss-theme')({themePath: './theme'}),
...defaultPlugins,
],
});
```
## `camelCase?: boolean`
This field is optional. When set to `true` the CSS field definitions will be emitted using camel case naming conventions. When `undefined` or `false` the CSS field definitions will be emitted verbatim.
## `rootDir?: string`
This field is optional. Project root directory (default: `process.cwd()`).
## `searchDir?: string`
This field is optional. Directory which includes target `*.css` files (default: `'./'`).
## `outDir?: string`
This field is optional. Output directory (default: `option.searchDir`).
# License
Copyright (c) 2018 Dropbox, Inc.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in
compliance with the License. You may obtain a copy of the License at
```
http://www.apache.org/licenses/LICENSE-2.0
```
Unless required by applicable law or agreed to in writing, software distributed under the License is
distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied. See the License for the specific language governing permissions and limitations under the
License.
[1]: https://github.com/Jimdo/typings-for-css-modules-loader
[2]: https://github.com/Megaputer/dts-css-modules-loader