Skip to content

Commit 6930880

Browse files
committed
update to postcss v8 and fix tests file path resolve
1 parent 3d83770 commit 6930880

15 files changed

+4304
-252
lines changed

README.md

Lines changed: 58 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,30 @@
11
# CSS Module Loader Core
2-
> A loader-agnostic CSS Modules implementation, based on PostCSS
2+
> A loader-agnostic CSS Modules implementation, based on `PostCSS@8`
33
4-
[![Build Status](https://travis-ci.org/css-modules/css-modules-loader-core.svg?branch=master)](https://travis-ci.org/css-modules/css-modules-loader-core)
4+
> If you don't use plugins for `PostCSS@8`, use the original package instead.
5+
6+
[![Build Status](https://travis-ci.org/demching/demching-loader-core.svg?branch=master)](https://travis-ci.org/demching/demching-loader-core)
7+
8+
## Notice
9+
This is a modified repository of [css-modules-loader-core](https://github.com/css-modules/css-modules-loader-core) with the following changes:
10+
11+
1. Rewrite in `Typescript`.
12+
2. Update some dependencies to latest version: `PostCSS` and related plugins.
13+
3. Change the usage of `file-system-loader`.
14+
15+
The original package depends on `PostCSS@6` which has a different usage of plugins to the latest `PostCSS@8`. Incompatible plugins is the main reason I created this package. You may install the original package if you are not using custom plugins.
16+
17+
Usage of this package should be the same as original repo unless you are using `file-system-loader`. Check [here](#file-system-loader) for details.
518

619
## API
720

821
```js
9-
import Core from 'css-modules-loader-core'
22+
import Core from '@demching113/css-modules-loader-core'
1023
let core = new Core()
1124
```
1225

13-
### core.load( sourceString , sourcePath , pathFetcher ) =><br>&nbsp;&nbsp;Promise({ injectableSource, exportTokens })
26+
### core.load
27+
> __core.load( sourceString , sourcePath, depTrace , pathFetcher ) => Promise({ injectableSource, exportTokens })__
1428
1529
Processes the input CSS `sourceString`, looking for dependencies such as `@import` or `:import`. Any localisation will happen by prefixing a sanitised version of `sourcePath` When dependencies are found, it will ask the `pathFetcher` for each dependency, resolve & inline any imports, and return the following object:
1630

@@ -24,16 +38,51 @@ These should map nicely to what your build-tool-specific loader needs to do its
2438
The default set of plugins is [[postcss-modules-local-by-default](https://github.com/css-modules/postcss-modules-local-by-default), [postcss-modules-extract-imports](https://github.com/css-modules/postcss-modules-extract-imports), [postcss-modules-scope](https://github.com/css-modules/postcss-modules-scope)] (i.e. the CSS Modules specification). This can override which PostCSS plugins you wish to execute, e.g.
2539

2640
```js
27-
import Core from 'css-loader-core'
41+
import Core from '@demching113/css-modules-loader-core'
2842
import autoprefixer from 'autoprefixer'
2943
import colorFunctions from 'postcss-color-function'
3044

31-
// Don't run local-by-default, but use colorFunctions
45+
// Don't run local-by-default, but use colorFunctions
3246
// beforehand and autoprefixer afterwards:
3347
let core = new Core([
34-
colorFunctions,
35-
core.plugins.extractImports,
36-
core.plugins.scope,
48+
colorFunctions,
49+
Core.extractImports,
50+
Core.scope,
3751
autoprefixer("Last 2 Versions")
3852
])
3953
```
54+
55+
## File System Loader
56+
This loader was used only for testing in original repository. However, it doesn't work because the file path is not resolved correctly. See related [issue](https://github.com/css-modules/css-modules-loader-core/issues/232).
57+
58+
So I try to fix the bug and end up changing its usage.
59+
60+
> P.S. This is tested on Windows only so it may not work on Unix system.
61+
62+
```js
63+
import { FileSystemLoader } from '@demching113/css-modules-loader-core';
64+
// Specify the absolute path of root. E.g. C:\users\your\root\of\src
65+
let fileLoader = new FileSystemLoader(rootAbsolutePath);
66+
67+
// or with using plugins
68+
let fileLoader = new FileSystemLoader(rootAbsolutePath, [
69+
// your plugins
70+
]);
71+
```
72+
73+
### fileLoader.load
74+
> __fileLoader.load( sourceString , sourceRelativePath , depTrace ) => Promise({ injectableSource, exportTokens })__
75+
76+
The usage is similar to [`core.load`](#coreload) except you don't need to provide `pathFetcher`.
77+
78+
Also, you may need to provide the file path `sourceRelativePath` relative to `rootAbsolutePath`.
79+
80+
For example, the `rootAbsolutePath` is `/root/of/src` and you want to load `/root/of/src/styles/main.css`:
81+
82+
```js
83+
let fileLoader = new FileSystemLoader(`/root/of/src`);
84+
fileLoader.load(
85+
contents, // contents of main.css
86+
`styles/main.css`, // relative path
87+
)
88+
```

babel.config.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["@babel/preset-env", "@babel/preset-typescript"]
3+
}

package.json

Lines changed: 27 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,44 @@
11
{
2-
"name": "css-modules-loader-core",
2+
"name": "@demching113/css-modules-loader-core",
33
"version": "1.1.0",
4-
"description": "A loader-agnostic CSS Modules implementation, based on PostCSS",
4+
"description": "A loader-agnostic CSS Modules implementation, based on PostCSS@8.x",
55
"main": "lib/index.js",
66
"directories": {
77
"test": "test"
88
},
99
"dependencies": {
1010
"icss-replace-symbols": "1.1.0",
11-
"postcss": "6.0.1",
12-
"postcss-modules-extract-imports": "1.1.0",
13-
"postcss-modules-local-by-default": "1.2.0",
14-
"postcss-modules-scope": "1.1.0",
15-
"postcss-modules-values": "1.3.0"
11+
"postcss": "8.4.12",
12+
"postcss-modules-extract-imports": "3.0.0",
13+
"postcss-modules-local-by-default": "4.0.0",
14+
"postcss-modules-scope": "3.0.0",
15+
"postcss-modules-values": "4.0.0"
1616
},
1717
"devDependencies": {
18-
"babel": "5.8.29",
19-
"babel-eslint": "7.1.0",
20-
"babelify": "7.3.0",
18+
"@babel/cli": "^7.17.6",
19+
"@babel/core": "^7.17.8",
20+
"@babel/preset-env": "^7.16.11",
21+
"@babel/preset-typescript": "^7.16.7",
22+
"@types/chai": "^4.3.0",
23+
"@types/mocha": "^9.1.0",
24+
"@types/node": "^17.0.21",
25+
"babelify": "10.0.0",
2126
"chokidar-cli": "1.1.0",
2227
"eslint": "3.10.1",
23-
"mocha": "3.1.2"
28+
"mocha": "3.1.2",
29+
"ts-node": "^10.7.0",
30+
"typescript": "^4.6.2"
2431
},
2532
"scripts": {
2633
"lint": "eslint src",
27-
"build": "babel --out-dir lib src",
34+
"build": "babel --extensions '.ts' --out-dir lib src && tsc",
2835
"autotest": "chokidar src test -c 'npm test'",
29-
"test": "mocha --compilers js:babel/register",
36+
"test": "mocha --compilers ts:ts-node/register",
3037
"prepublish": "rm -rf lib/* && npm run build"
3138
},
3239
"repository": {
3340
"type": "git",
34-
"url": "https://github.com/css-modules/css-modules-loader-core.git"
41+
"url": "https://github.com/demching/css-modules-loader-core.git"
3542
},
3643
"keywords": [
3744
"css-modules",
@@ -41,10 +48,13 @@
4148
"files": [
4249
"lib"
4350
],
44-
"author": "Glen Maddern",
51+
"author": "Dem Ching",
4552
"license": "ISC",
4653
"bugs": {
47-
"url": "https://github.com/css-modules/css-modules-loader-core/issues"
54+
"url": "https://github.com/demching/css-modules-loader-core/issues"
4855
},
49-
"homepage": "https://github.com/css-modules/css-modules-loader-core"
56+
"homepage": "https://github.com/demching/css-modules-loader-core",
57+
"publishConfig": {
58+
"access": "public"
59+
}
5060
}

0 commit comments

Comments
 (0)