From c7b050517023ebae62e0068c08609ba212679f43 Mon Sep 17 00:00:00 2001 From: Jiaren Liu Date: Fri, 23 Mar 2018 13:48:42 +0800 Subject: [PATCH] add definition for mini-css-extract-plugin --- types/mini-css-extract-plugin/index.d.ts | 32 ++++++++++ .../mini-css-extract-plugin-tests.ts | 58 +++++++++++++++++++ types/mini-css-extract-plugin/tsconfig.json | 23 ++++++++ types/mini-css-extract-plugin/tslint.json | 1 + 4 files changed, 114 insertions(+) create mode 100644 types/mini-css-extract-plugin/index.d.ts create mode 100644 types/mini-css-extract-plugin/mini-css-extract-plugin-tests.ts create mode 100644 types/mini-css-extract-plugin/tsconfig.json create mode 100644 types/mini-css-extract-plugin/tslint.json diff --git a/types/mini-css-extract-plugin/index.d.ts b/types/mini-css-extract-plugin/index.d.ts new file mode 100644 index 0000000000..f9b57632ef --- /dev/null +++ b/types/mini-css-extract-plugin/index.d.ts @@ -0,0 +1,32 @@ +// Type definitions for mini-css-extract-plugin 0.2 +// Project: https://github.com/webpack-contrib/mini-css-extract-plugin +// Definitions by: JounQin +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.3 + +import { Loader, Plugin } from 'webpack'; + +/** + * Lightweight CSS extraction webpack plugin + * This plugin extract CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps. + * Configuration Detail: https://github.com/webpack-contrib/mini-css-extract-plugin#configuration + */ +declare class MiniCssExtractPlugin extends Plugin { + /** webpack loader used always at the end of loaders list */ + static loader: Loader; + + constructor(options?: MiniCssExtractPlugin.PluginOptions); +} + +declare namespace MiniCssExtractPlugin { + interface PluginOptions { + /** + * Options similar to the same options in webpackOptions.output, both options are optional + * May contain `[name]`, `[id]`, `hash` and `[chunkhash]` + */ + filename?: string; + chunkFilename?: string; + } +} + +export = MiniCssExtractPlugin; diff --git a/types/mini-css-extract-plugin/mini-css-extract-plugin-tests.ts b/types/mini-css-extract-plugin/mini-css-extract-plugin-tests.ts new file mode 100644 index 0000000000..9d418ed211 --- /dev/null +++ b/types/mini-css-extract-plugin/mini-css-extract-plugin-tests.ts @@ -0,0 +1,58 @@ +import webpack = require('webpack'); +import MiniCssExtractPlugin = require('mini-css-extract-plugin'); + +let configuration: webpack.Configuration; + +configuration = { + // The standard entry point and output config + entry: { + posts: './posts', + post: './post', + about: './about', + }, + output: { + filename: '[name].js', + chunkFilename: '[id].js', + }, + module: { + rules: [ + // Extract css files + { + test: /\.css$/, + use: [MiniCssExtractPlugin.loader, 'css-loader'], + }, + // Optionally extract less files + // or any other compile-to-css language + { + test: /\.less$/, + use: [ + MiniCssExtractPlugin.loader, + 'css-loader', + 'style-loader', + ], + }, + // You could also use other loaders the same way. I. e. the autoprefixer-loader + ], + }, + // Use the plugin to specify the resulting filename (and add needed behavior to the compiler) + plugins: [ + new MiniCssExtractPlugin({ + filename: '[name].css', + }), + ], +}; + +configuration = { + // ... + plugins: [new MiniCssExtractPlugin()], +}; + +configuration = { + // ... + plugins: [ + new MiniCssExtractPlugin({ + filename: 'styles.css', + chunkFilename: 'style.css', + }), + ], +}; diff --git a/types/mini-css-extract-plugin/tsconfig.json b/types/mini-css-extract-plugin/tsconfig.json new file mode 100644 index 0000000000..e79daeceef --- /dev/null +++ b/types/mini-css-extract-plugin/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "mini-css-extract-plugin-tests.ts" + ] +} diff --git a/types/mini-css-extract-plugin/tslint.json b/types/mini-css-extract-plugin/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/mini-css-extract-plugin/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }