Skip to content

Commit b64ee6b

Browse files
retyuiretyui
committed
Add typescript
1 parent d55e0d4 commit b64ee6b

23 files changed

+1582
-5748
lines changed

‎.eslintrc.js

-17
This file was deleted.

‎.github/workflows/nodejs.yml

+3
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ on:
1010
jobs:
1111
test_and_lint:
1212
runs-on: ubuntu-latest
13+
strategy:
14+
matrix:
15+
node: [10, 12, 14, 16]
1316
steps:
1417
- uses: actions/checkout@v2
1518

‎CHANGELOG.md

+7
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@
22

33
This project adheres to [Semantic Versioning](http://semver.org/).
44

5+
## 4.0.0
6+
7+
- Drop support `webpack@1.x.x`
8+
- Add Typescript
9+
- Add Schema validation
10+
- Migrate to the latest [`clean-css`](https://clean-css.github.io/) version `5.x.x`
11+
512
## 3.0.0
613

714
- Drop support node v8

‎README.md

+36-65
Original file line numberDiff line numberDiff line change
@@ -11,64 +11,54 @@ A [clean-css](https://github.com/jakubpawlowicz/clean-css) loader for [webpack](
1111
# clean-css-loader
1212

1313
[![npm](https://img.shields.io/npm/v/clean-css-loader.svg)](https://www.npmjs.com/package/clean-css-loader)
14+
[![CI](https://github.com/retyui/clean-css-loader/actions/workflows/nodejs.yml/badge.svg)](https://github.com/retyui/clean-css-loader/actions/workflows/nodejs.yml)
1415
[![npm clean-css-loader](https://img.shields.io/npm/dm/clean-css-loader.svg)](https://www.npmjs.com/package/clean-css-loader)
15-
[![AppVeyor](https://img.shields.io/appveyor/ci/retyui/clean-css-loader.svg?label=windows)](https://ci.appveyor.com/project/retyui/clean-css-loader)
16-
[![Travis](https://img.shields.io/travis/retyui/clean-css-loader.svg?label=unix)](https://travis-ci.org/retyui/clean-css-loader)
1716

18-
## Install
17+
## Getting Started
18+
19+
To begin, you'll need to install clean-css-loader:
1920

2021
```bash
2122
yarn add -D clean-css-loader
2223
```
2324

24-
## Usage
25-
26-
Use the loader either via your webpack config, CLI or inline.
27-
28-
### Via webpack config (recommended)
29-
30-
**webpack.config.js**
31-
32-
```js
33-
const isProductionMode = process.env.NODE_ENV === "production";
34-
35-
const cssLoaders = ["style-loader", "css-loader"];
25+
Then add the plugin to your webpack config. For example:
3626

37-
if (isProductionMode) {
38-
// push loader for production mode only
39-
cssLoaders.push("clean-css-loader");
40-
41-
// exmaple with options
42-
cssLoaders.push({
43-
loader: "clean-css-loader",
44-
options: {
45-
compatibility: "ie9",
46-
level: 2,
47-
inline: ["remote"],
48-
},
49-
});
50-
}
27+
```tsx
28+
// webpack.config.js
29+
const isProduction = process.env.NODE_ENV === "production";
5130

5231
module.exports = {
53-
mode: isProductionMode ? "production" : "development",
32+
mode: isProduction ? "production" : "development",
5433
module: {
5534
rules: [
5635
{
5736
test: /\.css$/,
58-
use: cssLoaders,
37+
use: [
38+
"style-loader",
39+
"css-loader",
40+
{
41+
loader: "clean-css-loader",
42+
options: {
43+
// Loader options
44+
disable: !isProduction,
45+
skipWarn: false,
46+
47+
// CleasCSS options
48+
compatibility: "ie9",
49+
level: 2,
50+
inline: ["remote"],
51+
//...
52+
},
53+
},
54+
],
5955
},
6056
],
6157
},
6258
};
6359
```
6460

65-
**In your application**
66-
67-
```js
68-
import cssMin from "style.css";
69-
```
70-
71-
### CLI
61+
### CLI usage
7262

7363
```bash
7464
webpack --module-bind 'css=style-loader!css-loader!clean-css-loader'
@@ -90,35 +80,16 @@ import cssMin from "style-loader!css-loader!clean-css-loader!./style.css";
9080

9181
## Options
9282

93-
### `skipWarn` default: `false`
83+
#### `disable`
9484

95-
This option disable output warnings
85+
This option enables/disables minify, useful to easily disable on development mode (default: `false`)
9686

97-
More option: [https://github.com/jakubpawlowicz/clean-css#constructor-options](https://github.com/jakubpawlowicz/clean-css#constructor-options)
87+
#### `skipWarn`
9888

99-
## Webpack 1.x
89+
This option enables/disables output warnings (default: `false`)
10090

101-
**Example config (for webpack 1.x):**
91+
---
10292

103-
```js
104-
module.exports = {
105-
module: {
106-
loaders: [
107-
{
108-
test: /\.css$/,
109-
loader: "css!clean-css",
110-
},
111-
{
112-
test: /\.styl$/,
113-
loader: "css!clean-css!stylus?reslve url",
114-
},
115-
//...
116-
],
117-
// Example Set options (Key "clean-css" or cleancss or CleanCSS):
118-
"clean-css": {
119-
debug: true,
120-
mediaMerging: true,
121-
},
122-
},
123-
};
124-
```
93+
## `CleanCSS` module options
94+
95+
- [clean-css/clean-css#constructor-options](https://github.com/jakubpawlowicz/clean-css#constructor-options)

‎babel.config.js

-4
This file was deleted.

‎lint-staged.config.js

-7
This file was deleted.

‎package.json

+31-27
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,33 @@
11
{
22
"name": "clean-css-loader",
3-
"version": "3.0.0",
3+
"version": "4.0.0",
44
"main": "lib/index.js",
5-
"dependencies": {
6-
"clean-css": "^4.2.3",
7-
"loader-utils": "^2.0.0"
5+
"types": "lib/index.d.ts",
6+
"dependencies": {
7+
"clean-css": "^5.0.0"
88
},
99
"peerDependencies": {
10-
"webpack": ">=1.0.0"
10+
"loader-utils": "^1.0.0 || ^2.0.0",
11+
"webpack": ">=2.0.0"
12+
},
13+
"peerDependenciesMeta": {
14+
"webpack": {
15+
"optional": true
16+
},
17+
"loader-utils": {
18+
"optional": true
19+
}
1120
},
1221
"scripts": {
13-
"e2e": "yarn build && yarn update-e2e && yarn test",
22+
"pree2e": "yarn build",
23+
"e2e": "yarn update-e2e && yarn test",
1424
"force-clean": "rimraf ./test/e2e/webpack*/node_modules/ ./test/e2e/webpack*/tests/**/*.test.js",
15-
"install-sub": "yarn link && cd ./test/e2e/webpack1 && yarn && yarn link clean-css-loader && yarn build && cd ../webpack5 && yarn && yarn link clean-css-loader && yarn build && cd ../../..",
25+
"install-sub": "yarn link && cd test/e2e/webpack5 && yarn && yarn build && cd ../../..",
1626
"update-e2e": "yarn force-clean && yarn install-sub",
1727
"prebuild": "rimraf ./lib",
18-
"build": "babel src --out-dir lib",
19-
"pretest": "yarn build",
20-
"test": "jest",
21-
"precommit": "lint-staged"
28+
"build": "tsc",
29+
"postbuild": "prettier --write ./lib",
30+
"test": "jest"
2231
},
2332
"description": "CleanCSS loader module for webpack",
2433
"keywords": [
@@ -36,22 +45,17 @@
3645
"node": ">= 10.13.0"
3746
},
3847
"devDependencies": {
39-
"@babel/cli": "^7.15.4",
40-
"@babel/core": "^7.15.5",
41-
"@babel/preset-env": "^7.15.4",
42-
"babel-eslint": "^10.1.0",
43-
"babel-jest": "^27.1.0",
44-
"babel-plugin-add-module-exports": "^1.0.4",
45-
"eslint": "^7.32.0",
46-
"eslint-config-prettier": "^8.3.0",
47-
"eslint-config-webpack": "^1.2.5",
48-
"eslint-plugin-import": "^2.24.2",
49-
"eslint-plugin-prettier": "^4.0.0",
50-
"husky": "^7.0.2",
48+
"@tsconfig/node10": "^1.0.8",
49+
"@types/clean-css": "^4.2.5",
50+
"@types/loader-utils": "^2.0.3",
51+
"@types/node": "^16.9.6",
52+
"@types/schema-utils": "^2.4.0",
5153
"jest": "^27.1.0",
52-
"lint-staged": "^11.1.2",
53-
"npm-run-all": "^4.1.5",
54-
"prettier": "^2.3.2",
55-
"rimraf": "^3.0.2"
54+
"loader-utils": "^2.0.0",
55+
"prettier": "^2.4.1",
56+
"rimraf": "^3.0.2",
57+
"schema-utils": "^3.1.1",
58+
"typescript": "^4.4.3",
59+
"webpack": "^5.53.0"
5660
}
5761
}

‎src/index.js

-37
This file was deleted.

‎src/index.ts

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import CleanCSS from "clean-css";
2+
import { getOptions } from "loader-utils";
3+
import { validate } from "schema-utils";
4+
5+
import type { LoaderContext } from "webpack";
6+
import type { JSONSchema7 } from "schema-utils/declarations/validate";
7+
8+
import schema from "./schema.json";
9+
10+
type CleanCSSOptions = Omit<
11+
Exclude<ConstructorParameters<typeof CleanCSS>[0], undefined>,
12+
"returnPromise"
13+
>;
14+
15+
interface LoaderOptions extends CleanCSSOptions {
16+
skipWarn?: boolean;
17+
disable?: boolean;
18+
}
19+
20+
interface SourceMap {
21+
version: number;
22+
sources: string[];
23+
mappings: string;
24+
file?: string;
25+
sourceRoot?: string;
26+
sourcesContent?: string[];
27+
names?: string[];
28+
}
29+
30+
interface AdditionalData {
31+
[index: string]: any;
32+
webpackAST: object;
33+
}
34+
35+
function cleanCssLoader(
36+
this: LoaderContext<LoaderOptions>,
37+
content: string | Buffer,
38+
prevSourceMap?: string | SourceMap,
39+
additionalData?: AdditionalData
40+
): void {
41+
const callback = this.async();
42+
// 1.x.x return null if empty query
43+
// 2.x.x return empty object if empty query
44+
const loaderOptions = getOptions(this) || {};
45+
46+
validate(schema as JSONSchema7, loaderOptions, {
47+
name: "group-css-media-queries-loader",
48+
});
49+
50+
const { disable, skipWarn, ...options } = loaderOptions;
51+
52+
if (disable) {
53+
return callback(null, content, prevSourceMap, additionalData);
54+
}
55+
56+
new CleanCSS({
57+
returnPromise: true,
58+
...options,
59+
})
60+
.minify(
61+
content,
62+
// @ts-ignore
63+
prevSourceMap
64+
)
65+
.then((output) => {
66+
if (!skipWarn && Array.isArray(output.warnings)) {
67+
output.warnings.forEach((warning) => {
68+
this.emitWarning(new Error(warning));
69+
});
70+
}
71+
72+
return callback(
73+
null,
74+
output.styles,
75+
// @ts-ignore
76+
output.sourceMap,
77+
additionalData
78+
);
79+
})
80+
.catch(callback);
81+
}
82+
83+
export = cleanCssLoader;

0 commit comments

Comments
 (0)