Skip to content

Commit

Permalink
Drop the old resolve option's implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
madyankin committed Nov 4, 2022
1 parent 86d8135 commit 6afaf50
Show file tree
Hide file tree
Showing 7 changed files with 146 additions and 190 deletions.
32 changes: 32 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,37 @@
# Changelog

## 6.0.0

### Breaking
The `resolve` option has two parameters now and can return `null`. Thanks to Rene Haas (@KingSora)
https://github.com/madyankin/postcss-modules/commit/86d8135cb5014d0b2848ef395608ee74d82bd179

Parameters:
- `file` — a module we want to resolve
- `importer` — the file that imports the module we want to resolve

Return value: `string | null | Promise<string | null>`

```js
postcss([
require("postcss-modules")({
resolve: function (file, importer) {
return path.resolve(
path.dirname(importer),
file.replace(/^@/, process.cwd()
);
},
}),
]);
```
### Fixed
- #140 "'Failed to obtain root' error on Windows" fixed by Pierre LeMoine (@DrInfiniteExplorer) https://github.com/madyankin/postcss-modules/pull/144
## Improved
- `icss-replace-symbols` replaced with with `icss-utils` by Jason Quense (@jquense). The updated replacer works better and will replace values in selectors, which didn't work until now. https://github.com/madyankin/postcss-modules/pull/145
## 5.0.0
- Fixed `composes` on Windows by @sapphi-red https://github.com/madyankin/postcss-modules/pull/135
Expand Down
144 changes: 75 additions & 69 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,60 +12,60 @@ For example, you have the following CSS:
```css
/* styles.css */
:global .page {
padding: 20px;
padding: 20px;
}

.title {
composes: title from "./mixins.css";
color: green;
composes: title from "./mixins.css";
color: green;
}

.article {
font-size: 16px;
font-size: 16px;
}

/* mixins.css */
.title {
color: black;
font-size: 40px;
color: black;
font-size: 40px;
}

.title:hover {
color: red;
color: red;
}
```

After the transformation it will become like this:

```css
._title_116zl_1 {
color: black;
font-size: 40px;
color: black;
font-size: 40px;
}

._title_116zl_1:hover {
color: red;
color: red;
}

.page {
padding: 20px;
padding: 20px;
}

._title_xkpkl_5 {
color: green;
color: green;
}

._article_xkpkl_10 {
font-size: 16px;
font-size: 16px;
}
```

And the plugin will give you a JSON object for transformed classes:

```json
{
"title": "_title_xkpkl_5 _title_116zl_1",
"article": "_article_xkpkl_10"
"title": "_title_xkpkl_5 _title_116zl_1",
"article": "_article_xkpkl_10"
}
```

Expand All @@ -79,14 +79,14 @@ use the `getJSON` callback. For example, save data about classes into a correspo

```js
postcss([
require("postcss-modules")({
getJSON: function (cssFileName, json, outputFileName) {
var path = require("path");
var cssName = path.basename(cssFileName, ".css");
var jsonFileName = path.resolve("./build/" + cssName + ".json");
fs.writeFileSync(jsonFileName, JSON.stringify(json));
},
}),
require("postcss-modules")({
getJSON: function (cssFileName, json, outputFileName) {
var path = require("path");
var cssName = path.basename(cssFileName, ".css");
var jsonFileName = path.resolve("./build/" + cssName + ".json");
fs.writeFileSync(jsonFileName, JSON.stringify(json));
},
}),
]);
```

Expand All @@ -99,9 +99,9 @@ this behaviour using the `scopeBehaviour` option:

```js
postcss([
require("postcss-modules")({
scopeBehaviour: "global", // can be 'global' or 'local',
}),
require("postcss-modules")({
scopeBehaviour: "global", // can be 'global' or 'local',
}),
]);
```

Expand All @@ -120,16 +120,16 @@ To generate custom classes, use the `generateScopedName` callback:

```js
postcss([
require("postcss-modules")({
generateScopedName: function (name, filename, css) {
var path = require("path");
var i = css.indexOf("." + name);
var line = css.substr(0, i).split(/[\r\n]/).length;
var file = path.basename(filename, ".css");

return "_" + file + "_" + line + "_" + name;
},
}),
require("postcss-modules")({
generateScopedName: function (name, filename, css) {
var path = require("path");
var i = css.indexOf("." + name);
var line = css.substr(0, i).split(/[\r\n]/).length;
var file = path.basename(filename, ".css");

return "_" + file + "_" + line + "_" + name;
},
}),
]);
```

Expand All @@ -138,20 +138,20 @@ Or just pass an interpolated string to the `generateScopedName` option

```js
postcss([
require("postcss-modules")({
generateScopedName: "[name]__[local]___[hash:base64:5]",
}),
require("postcss-modules")({
generateScopedName: "[name]__[local]___[hash:base64:5]",
}),
]);
```

It's possible to add custom hash to generate more unique classes using the `hashPrefix` option (like in [css-loader](https://webpack.js.org/loaders/css-loader/#hashprefix)):

```js
postcss([
require("postcss-modules")({
generateScopedName: "[name]__[local]___[hash:base64:5]",
hashPrefix: "prefix",
}),
require("postcss-modules")({
generateScopedName: "[name]__[local]___[hash:base64:5]",
hashPrefix: "prefix",
}),
]);
```

Expand All @@ -161,9 +161,9 @@ If you need to export global names via the JSON object along with the local ones

```js
postcss([
require("postcss-modules")({
exportGlobals: true,
}),
require("postcss-modules")({
exportGlobals: true,
}),
]);
```

Expand All @@ -173,9 +173,9 @@ If you need, you can pass a custom loader (see [FileSystemLoader] for example):

```js
postcss([
require("postcss-modules")({
Loader: CustomLoader,
}),
require("postcss-modules")({
Loader: CustomLoader,
}),
]);
```

Expand Down Expand Up @@ -207,22 +207,28 @@ In lieu of a string, a custom function can generate the exported class names.

### Resolve path alias

You can rewrite paths for `composes/from` by using `resolve` options.
You can rewrite paths for `composes/from` by using the `resolve` option.
It's useful when you need to resolve custom path alias.

Parameters:
- `file` — a module we want to resolve
- `importer` — the file that imports the module we want to resolve

Return value: `string | null | Promise<string | null>`

```js
postcss([
require("postcss-modules")({
resolve: function (file) {
return file.replace(/^@/, process.cwd());
},
}),
require("postcss-modules")({
resolve: function (file, importer) {
return path.resolve(
path.dirname(importer),
file.replace(/^@/, process.cwd()
);
},
}),
]);
```
`resolve` may also return a `Promise<string>`.


## Integration with templates
The plugin only transforms CSS classes to CSS modules.
Expand All @@ -233,8 +239,8 @@ Assume you've saved project's CSS modules in `cssModules.json`:
```json
{
"title": "_title_xkpkl_5 _title_116zl_1",
"article": "_article_xkpkl_10"
"title": "_title_xkpkl_5 _title_116zl_1",
"article": "_article_xkpkl_10"
}
```
Expand All @@ -261,7 +267,7 @@ And you'll get the following HTML:
```html
<h1 class="_title_xkpkl_5 _title_116zl_1">postcss-modules</h1>
<article class="_article_xkpkl_10">
A PostCSS plugin to use CSS Modules everywhere
A PostCSS plugin to use CSS Modules everywhere
</article>
```
Expand All @@ -278,7 +284,7 @@ Here is our template `about.html`:
```html
<h1 css-module="title">postcss-modules</h1>
<article css-module="article">
A PostCSS plugin to use CSS Modules everywhere
A PostCSS plugin to use CSS Modules everywhere
</article>
```
Expand All @@ -291,10 +297,10 @@ var posthtmlCssModules = require("posthtml-css-modules");
var template = fs.readFileSync("./about.html", "utf8");

posthtml([posthtmlCssModules("./cssModules.json")])
.process(template)
.then(function (result) {
console.log(result.html);
});
.process(template)
.then(function (result) {
console.log(result.html);
});
```
(for using other build systems please check [the documentation of PostHTML](https://github.com/posthtml/posthtml/blob/master/readme.md))
Expand All @@ -304,7 +310,7 @@ And you'll get the following HTML:
```html
<h1 class="_title_xkpkl_5 _title_116zl_1">postcss-modules</h1>
<article class="_article_xkpkl_10">
A PostCSS plugin to use CSS Modules everywhere
A PostCSS plugin to use CSS Modules everywhere
</article>
```
Expand All @@ -320,6 +326,6 @@ npm install --save-dev postcss postcss-modules
[filesystemloader]: https://github.com/css-modules/css-modules-loader-core/blob/master/src/file-system-loader.js

## Sponsors
- Dmitry Olyenyov
- Dmitry Olyenyov
4 changes: 1 addition & 3 deletions index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,7 @@ declare interface Options {

Loader?: typeof Loader;

resolve?: (file: string) => string | Promise<string>;

fileResolve?: (
resolve?: (
file: string,
importer: string
) => string | null | Promise<string | null>;
Expand Down

0 comments on commit 6afaf50

Please sign in to comment.