初始化

This commit is contained in:
yziiy
2025-08-11 11:06:07 +08:00
parent 083bc37c00
commit 5607d11395
19772 changed files with 3108723 additions and 18 deletions

View File

@@ -0,0 +1,199 @@
# Changelog
## 4.3.1
- Fixed errors when using shorthand selectors by Felix Bruns (@fxb) https://github.com/madyankin/postcss-modules/pull/130
## 4.3.0
- Updated the `generic-names` dependency to reduce packages size by Bogdan Chadkin (@TrySound) https://github.com/madyankin/postcss-modules/pull/129
## 4.2.2
- Fix the build
## 4.2.1
- Fixed the `resolve` option behaviour by @kamilic https://github.com/madyankin/postcss-modules/pull/127
## 4.2.0
- Added the `resolve` option to configure lookup paths for composes/from by @kamilic https://github.com/madyankin/postcss-modules/pull/126
## 4.1.3
- Fixed package contents
## 4.1.1
- Fixed TypeScript typings by Shuman Lim (@origin-master) https://github.com/madyankin/postcss-modules/pull/124
## 4.1.0
- Added TypeScript typings by Shuman Lim (@origin-master) https://github.com/madyankin/postcss-modules/pull/123
## 4.0.0
- Upgraded to PostCSS 8 by Evan You (@yyx990803) https://github.com/css-modules/postcss-modules/pull/114
## 3.2.2
### Fixed
- Fixed user plugins order by Tom Jenkinson (@tjenkinson) https://github.com/css-modules/postcss-modules/pull/112
## 3.2.1
### Fixed
- Fixed an issue when some plugins were running multiple times by Tom Jenkinson (@tjenkinson) https://github.com/css-modules/postcss-modules/pull/111
## 3.2.0
### Changed
- [`localsConvention` option] now supports a custom function `(originalClassName: string, generatedClassName: string, inputFile: string) => className: string` by Gregory Waxman (@Akkuma) https://github.com/css-modules/postcss-modules/pull/109
## 3.1.0
### Added
- Added `exportGlobals` option
## 3.0.0
### Changed
- Dropped `css-modules-loader-core` dependency
- [Upgraded all the dependencies](https://github.com/css-modules/postcss-modules/pull/108)
### Breaking changes
- Dropped support for unsupported Node versions. Supported versions are 10, 12 and 14+ https://nodejs.org/en/about/releases/
## 2.0.0
### Added
- [`localsConvention` option](https://github.com/css-modules/postcss-modules#localsconvention) by Hamza Mihai Daniel (@allocenx) <https://github.com/css-modules/postcss-modules/pull/103>, <https://github.com/css-modules/postcss-modules/issues/93>
### Breaking changes
- `camelCase` camelCase removed, use the [`localsConvention` option](https://github.com/css-modules/postcss-modules#localsconvention) instead.
## 1.5.0
- Added `hashPrefix` option by Jesse Thomson (@jessethomson) <https://github.com/css-modules/postcss-modules/pull/98>
## 1.4.1
- Rebublished the previous release. Sorry :(
## 1.4.0
- Added export for other plugins by Evilebot Tnawi (@evilebottnawi) <https://github.com/css-modules/postcss-modules/pull/88>, <https://github.com/css-modules/postcss-modules/issues/29>
## 1.3.1
- Move dev tools to devDependecies by Anton Khlynovskiy (@ubzey) <https://github.com/css-modules/postcss-modules/pull/85>
## 1.3.0
- Updated dependecies
- Added prettier to format code
## 1.2.0
- Added option to transform classes to camelCase by Igor Ribeiro (@igor-ribeiro) <https://github.com/css-modules/postcss-modules/pull/82>
## 1.1.0
- Added ability to transmit outputFileName into getJSON by @lutien <https://github.com/css-modules/postcss-modules/pull/72>
## 1.0.0
- Dropped support for Node < 6
- Updated dependencies
## 0.8.0
- Updated PostCSS to 6 by Alexey Litvinov (@sullenor) <https://github.com/css-modules/postcss-modules/pull/65>
## 0.7.1
- Allowed empty string as opts.root by Sharon Rolel (@Mosho1) <https://github.com/css-modules/postcss-modules/pull/56>
## 0.7.0
- Allow async getJSON by Philipp A. (@flying-sheep) <https://github.com/css-modules/postcss-modules/pull/59>
## 0.6.4
- Added the `root` option to pass the root path by Sharon Rolel (@Mosho1) (<https://github.com/css-modules/postcss-modules/pull/55>)
## 0.6.3
- Fixed regression in `isValidBehaviour` function (<https://github.com/css-modules/postcss-modules/issues/53>)
## 0.6.2
- Refactored `getDefaultPluginsList` function
## 0.6.1
- Fixed `generateScopedName` bug with multiple postcss-modules instances (<https://github.com/css-modules/postcss-modules/issues/37>)
## 0.6.0
- Added `globalModulePaths` option (Thanks to @pospi).
- Refactored all the things.
## 0.5.2
- Updated dependencies
## 0.5.1
- Fixed sorting for composed dependencies by Josh Johnston (@joshwnj) (<https://github.com/css-modules/postcss-modules/issues/38>)
## 0.5.0
- Added `scopeBehaviour` option (<https://github.com/css-modules/postcss-modules/issues/22>)
- Added ability to pass a string to `generateScopedName` (<https://github.com/css-modules/postcss-modules/issues/21>)
- Updated dependencies
## 0.4.1
- Fixed processing errors capturing by Boris Serdiuk (@just-boris)
## 0.4.0
- Added support for custom loaders by Björn Brauer (@ZauberNerd)
## 0.3.0
- Fixed processing for imported CSS
- Added default callback for saving exported JSON
## 0.2.0
- Fixed JSON export with shallow imports (<https://github.com/outpunk/postcss-modules/issues/12>)
- Fixed lookup paths (<https://github.com/outpunk/postcss-modules/issues/13>)
- Fixed imports overriding (<https://github.com/outpunk/postcss-modules/issues/15>)
- Global refactoring under the hood
## 0.1.3
Fixed failing on comments by @dfreeman (<https://github.com/outpunk/postcss-modules/pull/14>)
## 0.1.2
Fixed module export for ES5 (<https://github.com/outpunk/postcss-modules/issues/9>)
## 0.1.1
Call getExports only for top level css
## 0.1.0
Initial version

View File

@@ -0,0 +1,20 @@
The MIT License (MIT)
Copyright 2015-present Alexander Madyankin <alexander@madyankin.name>
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@@ -0,0 +1,332 @@
# postcss-modules
A [PostCSS] plugin to use [CSS Modules] everywhere. Not only at the client side.
[postcss]: https://github.com/postcss/postcss
[css modules]: https://github.com/css-modules/css-modules
## Support the developer
I maintain the plugin in my free time, so I don't receive any payment for this work.
To have better docs, new features and integrations with frameworks, you can [support me on Patreon](https://www.patreon.com/bePatron?u=25976212).
The sponsors are listed [below in the README](#sponsors)
## What is this?
For example, you have the following CSS:
```css
/* styles.css */
:global .page {
padding: 20px;
}
.title {
composes: title from "./mixins.css";
color: green;
}
.article {
font-size: 16px;
}
/* mixins.css */
.title {
color: black;
font-size: 40px;
}
.title:hover {
color: red;
}
```
After the transformation it will become like this:
```css
._title_116zl_1 {
color: black;
font-size: 40px;
}
._title_116zl_1:hover {
color: red;
}
.page {
padding: 20px;
}
._title_xkpkl_5 {
color: green;
}
._article_xkpkl_10 {
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"
}
```
## Usage
### Saving exported classes
By default, a JSON file with exported classes will be placed next to corresponding CSS.
But you have a freedom to make everything you want with exported classes, just
use the `getJSON` callback. For example, save data about classes into a corresponding JSON file:
```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));
},
}),
]);
```
`getJSON` may also return a `Promise`.
### Generating scoped names
By default, the plugin assumes that all the classes are local. You can change
this behaviour using the `scopeBehaviour` option:
```js
postcss([
require("postcss-modules")({
scopeBehaviour: "global", // can be 'global' or 'local',
}),
]);
```
To define paths for global modules, use the `globalModulePaths` option.
It is an array with regular expressions defining the paths:
```js
postcss([
require('postcss-modules')({
globalModulePaths: [/path\/to\/legacy-styles/, /another\/paths/],
});
]);
```
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;
},
}),
]);
```
Or just pass an interpolated string to the `generateScopedName` option
(More details [here](https://github.com/webpack/loader-utils#interpolatename)):
```js
postcss([
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",
}),
]);
```
### Exporting globals
If you need to export global names via the JSON object along with the local ones, add the `exportGlobals` option:
```js
postcss([
require("postcss-modules")({
exportGlobals: true,
}),
]);
```
### Loading source files
If you need, you can pass a custom loader (see [FileSystemLoader] for example):
```js
postcss([
require("postcss-modules")({
Loader: CustomLoader,
}),
]);
```
You can also pass any needed root path:
```js
postcss([
require('postcss-modules')({
root: 'C:\\',
});
]);
```
### localsConvention
Type: `String | (originalClassName: string, generatedClassName: string, inputFile: string) => className: string`
Default: `null`
Style of exported classnames, the keys in your json.
| Name | Type | Description |
| :-------------------: | :--------: | :----------------------------------------------------------------------------------------------- |
| **`'camelCase'`** | `{String}` | Class names will be camelized, the original class name will not to be removed from the locals |
| **`'camelCaseOnly'`** | `{String}` | Class names will be camelized, the original class name will be removed from the locals |
| **`'dashes'`** | `{String}` | Only dashes in class names will be camelized |
| **`'dashesOnly'`** | `{String}` | Dashes in class names will be camelized, the original class name will be removed from the locals |
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.
It's useful when you need to resolve custom path alias.
```js
postcss([
require("postcss-modules")({
resolve: function (file) {
return file.replace(/^@/, process.cwd());
},
}),
]);
```
`resolve` may also return a `Promise<string>`.
## Integration with templates
The plugin only transforms CSS classes to CSS modules.
But you probably want to integrate these CSS modules with your templates.
Here are some examples.
Assume you've saved project's CSS modules in `cssModules.json`:
```json
{
"title": "_title_xkpkl_5 _title_116zl_1",
"article": "_article_xkpkl_10"
}
```
### Pug (ex-Jade)
Let's say you have a Pug template `about.jade`:
```jade
h1(class=css.title) postcss-modules
article(class=css.article) A PostCSS plugin to use CSS Modules everywhere
```
Render it:
```js
var jade = require("jade");
var cssModules = require("./cssModules.json");
var html = jade.compileFile("about.jade")({ css: cssModules });
console.log(html);
```
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
</article>
```
### HTML
For HTML transformation we'll use [PostHTML](https://github.com/posthtml/posthtml) and [PostHTML CSS Modules](https://github.com/maltsev/posthtml-css-modules):
```bash
npm install --save posthtml posthtml-css-modules
```
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
</article>
```
Transform it:
```js
var fs = require("fs");
var posthtml = require("posthtml");
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);
});
```
(for using other build systems please check [the documentation of PostHTML](https://github.com/posthtml/posthtml/blob/master/README.md))
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
</article>
```
## May I see the plugin in action?
Sure! Take a look at the [example](https://github.com/outpunk/postcss-modules-example).
See [PostCSS] docs for examples for your environment and don't forget to run
```
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

View File

@@ -0,0 +1,50 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.behaviours = undefined;
exports.getDefaultPlugins = getDefaultPlugins;
exports.isValidBehaviour = isValidBehaviour;
var _postcssModulesLocalByDefault = require("postcss-modules-local-by-default");
var _postcssModulesLocalByDefault2 = _interopRequireDefault(_postcssModulesLocalByDefault);
var _postcssModulesExtractImports = require("postcss-modules-extract-imports");
var _postcssModulesExtractImports2 = _interopRequireDefault(_postcssModulesExtractImports);
var _postcssModulesScope = require("postcss-modules-scope");
var _postcssModulesScope2 = _interopRequireDefault(_postcssModulesScope);
var _postcssModulesValues = require("postcss-modules-values");
var _postcssModulesValues2 = _interopRequireDefault(_postcssModulesValues);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const behaviours = exports.behaviours = {
LOCAL: "local",
GLOBAL: "global"
};
function getDefaultPlugins({
behaviour,
generateScopedName,
exportGlobals
}) {
const scope = (0, _postcssModulesScope2.default)({ generateScopedName, exportGlobals });
const plugins = {
[behaviours.LOCAL]: [_postcssModulesValues2.default, (0, _postcssModulesLocalByDefault2.default)({ mode: 'local' }), _postcssModulesExtractImports2.default, scope],
[behaviours.GLOBAL]: [_postcssModulesValues2.default, (0, _postcssModulesLocalByDefault2.default)({ mode: 'global' }), _postcssModulesExtractImports2.default, scope]
};
return plugins[behaviour];
}
function isValidBehaviour(behaviour) {
return Object.keys(behaviours).map(key => behaviours[key]).indexOf(behaviour) > -1;
}

View File

@@ -0,0 +1,121 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _postcss = require("postcss");
var _postcss2 = _interopRequireDefault(_postcss);
var _fs = require("fs");
var _fs2 = _interopRequireDefault(_fs);
var _path = require("path");
var _path2 = _interopRequireDefault(_path);
var _parser = require("./parser");
var _parser2 = _interopRequireDefault(_parser);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// Copied from https://github.com/css-modules/css-modules-loader-core
class Core {
constructor(plugins) {
this.plugins = plugins || Core.defaultPlugins;
}
load(sourceString, sourcePath, trace, pathFetcher) {
let parser = new _parser2.default(pathFetcher, trace);
return (0, _postcss2.default)(this.plugins.concat([parser.plugin()])).process(sourceString, { from: "/" + sourcePath }).then(result => {
return {
injectableSource: result.css,
exportTokens: parser.exportTokens
};
});
}
}
// Sorts dependencies in the following way:
// AAA comes before AA and A
// AB comes after AA and before A
// All Bs come after all As
// This ensures that the files are always returned in the following order:
// - In the order they were required, except
// - After all their dependencies
const traceKeySorter = (a, b) => {
if (a.length < b.length) {
return a < b.substring(0, a.length) ? -1 : 1;
} else if (a.length > b.length) {
return a.substring(0, b.length) <= b ? -1 : 1;
} else {
return a < b ? -1 : 1;
}
};
class FileSystemLoader {
constructor(root, plugins) {
this.root = root;
this.sources = {};
this.traces = {};
this.importNr = 0;
this.core = new Core(plugins);
this.tokensByFile = {};
}
fetch(_newPath, relativeTo, _trace) {
let newPath = _newPath.replace(/^["']|["']$/g, ""),
trace = _trace || String.fromCharCode(this.importNr++);
return new Promise((resolve, reject) => {
let relativeDir = _path2.default.dirname(relativeTo),
rootRelativePath = _path2.default.resolve(relativeDir, newPath),
fileRelativePath = _path2.default.resolve(_path2.default.join(this.root, relativeDir), newPath);
// if the path is not relative or absolute, try to resolve it in node_modules
if (newPath[0] !== "." && newPath[0] !== "/") {
try {
fileRelativePath = require.resolve(newPath);
} catch (e) {
// noop
}
}
const tokens = this.tokensByFile[fileRelativePath];
if (tokens) {
return resolve(tokens);
}
_fs2.default.readFile(fileRelativePath, "utf-8", (err, source) => {
if (err) reject(err);
this.core.load(source, rootRelativePath, trace, this.fetch.bind(this)).then(({ injectableSource, exportTokens }) => {
this.sources[fileRelativePath] = injectableSource;
this.traces[trace] = fileRelativePath;
this.tokensByFile[fileRelativePath] = exportTokens;
resolve(exportTokens);
}, reject);
});
});
}
get finalSource() {
const traces = this.traces;
const sources = this.sources;
let written = new Set();
return Object.keys(traces).sort(traceKeySorter).map(key => {
const filename = traces[key];
if (written.has(filename)) {
return null;
}
written.add(filename);
return sources[filename];
}).join("");
}
}
exports.default = FileSystemLoader;

View File

@@ -0,0 +1,80 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _icssReplaceSymbols = require("icss-replace-symbols");
var _icssReplaceSymbols2 = _interopRequireDefault(_icssReplaceSymbols);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// Copied from https://github.com/css-modules/css-modules-loader-core
const importRegexp = /^:import\((.+)\)$/;
class Parser {
constructor(pathFetcher, trace) {
this.pathFetcher = pathFetcher;
this.plugin = this.plugin.bind(this);
this.exportTokens = {};
this.translations = {};
this.trace = trace;
}
plugin() {
const parser = this;
return {
postcssPlugin: "css-modules-parser",
OnceExit(css) {
return Promise.all(parser.fetchAllImports(css)).then(() => parser.linkImportedSymbols(css)).then(() => parser.extractExports(css));
}
};
}
fetchAllImports(css) {
let imports = [];
css.each(node => {
if (node.type == "rule" && node.selector.match(importRegexp)) {
imports.push(this.fetchImport(node, css.source.input.from, imports.length));
}
});
return imports;
}
linkImportedSymbols(css) {
(0, _icssReplaceSymbols2.default)(css, this.translations);
}
extractExports(css) {
css.each(node => {
if (node.type == "rule" && node.selector == ":export") this.handleExport(node);
});
}
handleExport(exportNode) {
exportNode.each(decl => {
if (decl.type == "decl") {
Object.keys(this.translations).forEach(translation => {
decl.value = decl.value.replace(translation, this.translations[translation]);
});
this.exportTokens[decl.prop] = decl.value;
}
});
exportNode.remove();
}
fetchImport(importNode, relativeTo, depNr) {
let file = importNode.selector.match(importRegexp)[1],
depTrace = this.trace + String.fromCharCode(depNr);
return this.pathFetcher(file, relativeTo, depTrace).then(exports => {
importNode.each(decl => {
if (decl.type == "decl") {
this.translations[decl.prop] = exports[decl.value];
}
});
importNode.remove();
}, err => console.log(err));
}
}
exports.default = Parser;

View File

@@ -0,0 +1,20 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = generateScopedName;
var _stringHash = require("string-hash");
var _stringHash2 = _interopRequireDefault(_stringHash);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function generateScopedName(name, filename, css) {
const i = css.indexOf(`.${name}`);
const lineNumber = css.substr(0, i).split(/[\r\n]/).length;
const hash = (0, _stringHash2.default)(css).toString(36).substr(0, 5);
return `_${name}_${hash}_${lineNumber}`;
}

View File

@@ -0,0 +1,182 @@
"use strict";
var _postcss = require("postcss");
var _postcss2 = _interopRequireDefault(_postcss);
var _lodash = require("lodash.camelcase");
var _lodash2 = _interopRequireDefault(_lodash);
var _genericNames = require("generic-names");
var _genericNames2 = _interopRequireDefault(_genericNames);
var _unquote = require("./unquote");
var _unquote2 = _interopRequireDefault(_unquote);
var _parser = require("./css-loader-core/parser");
var _parser2 = _interopRequireDefault(_parser);
var _loader = require("./css-loader-core/loader");
var _loader2 = _interopRequireDefault(_loader);
var _generateScopedName = require("./generateScopedName");
var _generateScopedName2 = _interopRequireDefault(_generateScopedName);
var _saveJSON = require("./saveJSON");
var _saveJSON2 = _interopRequireDefault(_saveJSON);
var _behaviours = require("./behaviours");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
const PLUGIN_NAME = "postcss-modules";
function getDefaultScopeBehaviour(opts) {
if (opts.scopeBehaviour && (0, _behaviours.isValidBehaviour)(opts.scopeBehaviour)) {
return opts.scopeBehaviour;
}
return _behaviours.behaviours.LOCAL;
}
function getScopedNameGenerator(opts) {
const scopedNameGenerator = opts.generateScopedName || _generateScopedName2.default;
if (typeof scopedNameGenerator === "function") return scopedNameGenerator;
return (0, _genericNames2.default)(scopedNameGenerator, {
context: process.cwd(),
hashPrefix: opts.hashPrefix
});
}
function getLoader(opts, plugins) {
const root = typeof opts.root === "undefined" ? "/" : opts.root;
return typeof opts.Loader === "function" ? new opts.Loader(root, plugins) : new _loader2.default(root, plugins);
}
function isGlobalModule(globalModules, inputFile) {
return globalModules.some(regex => inputFile.match(regex));
}
function getDefaultPluginsList(opts, inputFile) {
const globalModulesList = opts.globalModulePaths || null;
const exportGlobals = opts.exportGlobals || false;
const defaultBehaviour = getDefaultScopeBehaviour(opts);
const generateScopedName = getScopedNameGenerator(opts);
if (globalModulesList && isGlobalModule(globalModulesList, inputFile)) {
return (0, _behaviours.getDefaultPlugins)({
behaviour: _behaviours.behaviours.GLOBAL,
generateScopedName,
exportGlobals
});
}
return (0, _behaviours.getDefaultPlugins)({
behaviour: defaultBehaviour,
generateScopedName,
exportGlobals
});
}
function isOurPlugin(plugin) {
return plugin.postcssPlugin === PLUGIN_NAME;
}
function dashesCamelCase(string) {
return string.replace(/-+(\w)/g, (_, firstLetter) => firstLetter.toUpperCase());
}
module.exports = (opts = {}) => {
return {
postcssPlugin: PLUGIN_NAME,
OnceExit(css, { result }) {
return _asyncToGenerator(function* () {
const getJSON = opts.getJSON || _saveJSON2.default;
const inputFile = css.source.input.file;
const pluginList = getDefaultPluginsList(opts, inputFile);
const resultPluginIndex = result.processor.plugins.findIndex(function (plugin) {
return isOurPlugin(plugin);
});
if (resultPluginIndex === -1) {
throw new Error('Plugin missing from options.');
}
const earlierPlugins = result.processor.plugins.slice(0, resultPluginIndex);
const loaderPlugins = [...earlierPlugins, ...pluginList];
const loader = getLoader(opts, loaderPlugins);
const fetcher = function fetcher(file, relativeTo, depTrace) {
const unquoteFile = (0, _unquote2.default)(file);
const resolvedResult = typeof opts.resolve === 'function' && opts.resolve(unquoteFile);
const resolvedFile = resolvedResult instanceof Promise ? resolvedResult : Promise.resolve(resolvedResult);
return resolvedFile.then(function (f) {
return loader.fetch.call(loader, `"${f || unquoteFile}"`, relativeTo, depTrace);
});
};
const parser = new _parser2.default(fetcher);
yield (0, _postcss2.default)([...pluginList, parser.plugin()]).process(css, {
from: inputFile
});
const out = loader.finalSource;
if (out) css.prepend(out);
if (opts.localsConvention) {
const isFunc = typeof opts.localsConvention === "function";
parser.exportTokens = Object.entries(parser.exportTokens).reduce(function (tokens, [className, value]) {
if (isFunc) {
tokens[opts.localsConvention(className, value, inputFile)] = value;
return tokens;
}
switch (opts.localsConvention) {
case "camelCase":
tokens[className] = value;
tokens[(0, _lodash2.default)(className)] = value;
break;
case "camelCaseOnly":
tokens[(0, _lodash2.default)(className)] = value;
break;
case "dashes":
tokens[className] = value;
tokens[dashesCamelCase(className)] = value;
break;
case "dashesOnly":
tokens[dashesCamelCase(className)] = value;
break;
}
return tokens;
}, {});
}
result.messages.push({
type: "export",
plugin: "postcss-modules",
exportTokens: parser.exportTokens
});
// getJSON may return a promise
return getJSON(css.source.input.file, parser.exportTokens, result.opts.to);
})();
}
};
};
module.exports.postcss = true;

View File

@@ -0,0 +1,14 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = saveJSON;
var _fs = require("fs");
function saveJSON(cssFile, json) {
return new Promise((resolve, reject) => {
(0, _fs.writeFile)(`${cssFile}.json`, JSON.stringify(json), e => e ? reject(e) : resolve(json));
});
}

View File

@@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = unquote;
// copied from https://github.com/lakenen/node-unquote
var reg = /['"]/;
function unquote(str) {
if (!str) {
return "";
}
if (reg.test(str.charAt(0))) {
str = str.substr(1);
}
if (reg.test(str.charAt(str.length - 1))) {
str = str.substr(0, str.length - 1);
}
return str;
}

View File

@@ -0,0 +1,62 @@
import type { Plugin } from "postcss";
declare type GenerateScopedNameFunction = (
name: string,
filename: string,
css: string
) => string;
declare type LocalsConventionFunction = (
originalClassName: string,
generatedClassName: string,
inputFile: string
) => string;
declare class Loader {
constructor(root: string, plugins: Plugin[]);
fetch(
file: string,
relativeTo: string,
depTrace: string
): Promise<{ [key: string]: string }>;
finalSource?: string | undefined;
}
declare interface Options {
getJSON?(
cssFilename: string,
json: { [name: string]: string },
outputFilename?: string
): void;
localsConvention?:
| "camelCase"
| "camelCaseOnly"
| "dashes"
| "dashesOnly"
| LocalsConventionFunction;
scopeBehaviour?: "global" | "local";
globalModulePaths?: RegExp[];
generateScopedName?: string | GenerateScopedNameFunction;
hashPrefix?: string;
exportGlobals?: boolean;
root?: string;
Loader?: typeof Loader;
resolve?: (file: string) => string | Promise<string>;
}
declare interface PostcssModulesPlugin {
(options: Options): Plugin;
postcss: true;
}
declare const PostcssModulesPlugin: PostcssModulesPlugin;
export = PostcssModulesPlugin;

View File

@@ -0,0 +1,65 @@
{
"name": "postcss-modules",
"version": "4.3.1",
"description": "PostCSS plugin to use CSS Modules everywhere",
"main": "build/index.js",
"types": "index.d.ts",
"keywords": [
"postcss",
"css",
"postcss-plugin",
"modules",
"css modules",
"components"
],
"author": "Alexander Madyankin <alexander@madyankin.name>",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/css-modules/postcss-modules.git"
},
"dependencies": {
"generic-names": "^4.0.0",
"icss-replace-symbols": "^1.1.0",
"lodash.camelcase": "^4.3.0",
"postcss-modules-extract-imports": "^3.0.0",
"postcss-modules-local-by-default": "^4.0.0",
"postcss-modules-scope": "^3.0.0",
"postcss-modules-values": "^4.0.0",
"string-hash": "^1.1.1"
},
"peerDependencies": {
"postcss": "^8.0.0"
},
"devDependencies": {
"autoprefixer": "^10.0.2",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "^10.1.0",
"babel-preset-env": "^1.7.0",
"eslint": "^7.3.1",
"eslint-plugin-import": "^2.21.2",
"eslint-plugin-jest": "^23.17.0",
"husky": "^4.2.5",
"jest": "^26.0.1",
"lint-staged": "^10.2.11",
"postcss": "^8.1.9",
"prettier": "^2.0.5"
},
"scripts": {
"test": "make test",
"precommit": "lint-staged"
},
"lint-staged": {
"*.{json,md}": [
"prettier --write",
"git add"
],
"*.js": [
"prettier --write",
"eslint --fix",
"git add"
]
},
"require": "babel-core/register"
}