style-resources-loader - npm Package Compare versions

Comparing version 1.2.1 to 1.3.0

CHANGELOG.md

@@ -0,1 +1,7 @@
+## 1.3.0 (November 11, 2019)
+
+* Support for relative path in patterns.
+* Ensure each resource ends with a newline.
+* More detailed validation messages.
+
 ## 1.2.1 (August 12, 2018)
@@ -2,0 +8,0 @@

lib/index.d.ts

 import loader from './loader';
+export * from './schema';
 export * from './types';
 export default loader;

lib/index.js

 "use strict";
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -7,3 +10,4 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 const loader_1 = __importDefault(require("./loader"));
+__export(require("./schema"));
 exports.default = loader_1.default;
 //# sourceMappingURL=index.js.map

lib/loader.js

@@ -8,7 +8,10 @@ "use strict";
     if (!utils_1.isFunction(callback)) {
-        throw new Error('[style-resources-loader] Synchronous compilation is not supported.');
+        throw new Error(utils_1.errorMessage.syncCompilation);
     }
-    Reflect.apply(utils_1.loadResources, this, [source, callback]);
+    if (typeof source !== 'string') {
+        throw new Error(utils_1.errorMessage.impossible);
+    }
+    utils_1.loadResources(this, source, callback);
 };
 exports.default = loader;
 //# sourceMappingURL=loader.js.map

lib/types.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="node" />
 import { loader } from 'webpack';
@@ -7,3 +6,3 @@ import glob from 'glob';
 export declare type LoaderCallback = loader.loaderCallback;
-export declare type StyleResourcesFileExt = 'css' | 'sass' | 'scss' | 'less' | 'styl';
+export declare type StyleResourcesFileFormat = 'css' | 'sass' | 'scss' | 'less' | 'styl';
 export interface StyleResource {
@@ -13,4 +12,4 @@ file: string;
 }
-export declare type StyleResources = ReadonlyArray<StyleResource>;
-export declare type StyleResourcesFunctionalInjector = (source: string | Buffer, resources: StyleResources) => string | Buffer | Promise<string | Buffer>;
+export declare type StyleResources = StyleResource[];
+export declare type StyleResourcesFunctionalInjector = (source: string, resources: StyleResources) => string | Promise<string>;
 export declare type StyleResourcesInjector = 'prepend' | 'append' | StyleResourcesFunctionalInjector;
@@ -24,7 +23,5 @@ export declare type StyleResourcesNormalizedInjector = StyleResourcesFunctionalInjector;
 }
-export interface StyleResourcesLoaderNormalizedOptions {
+export interface StyleResourcesLoaderNormalizedOptions extends NonNullable<StyleResourcesLoaderOptions> {
     patterns: string[];
     injector: StyleResourcesNormalizedInjector;
-    globOptions: glob.IOptions;
-    resolveUrl: boolean;
 }

lib/utils/index.d.ts

@@ -1,8 +0,10 @@
-export { default as getResources } from './getResources';
-export { default as injectResources } from './injectResources';
-export { default as loadResources } from './loadResources';
-export { default as normalizeOptions } from './normalizeOptions';
-export { default as resolveImportUrl } from './resolveImportUrl';
-export { default as validateOptions } from './validateOptions';
-export * from './supportedFileExts';
-export * from './typeGuards';
+export * from './constants';
+export * from './error-message';
+export * from './get-resources';
+export * from './inject-resources';
+export * from './load-resources';
+export * from './match-files';
+export * from './normalize-options';
+export * from './resolve-import-url';
+export * from './type-guards';
+export * from './validate-options';

lib/utils/index.js

@@ -6,16 +6,12 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var getResources_1 = require("./getResources");
-exports.getResources = getResources_1.default;
-var injectResources_1 = require("./injectResources");
-exports.injectResources = injectResources_1.default;
-var loadResources_1 = require("./loadResources");
-exports.loadResources = loadResources_1.default;
-var normalizeOptions_1 = require("./normalizeOptions");
-exports.normalizeOptions = normalizeOptions_1.default;
-var resolveImportUrl_1 = require("./resolveImportUrl");
-exports.resolveImportUrl = resolveImportUrl_1.default;
-var validateOptions_1 = require("./validateOptions");
-exports.validateOptions = validateOptions_1.default;
-__export(require("./supportedFileExts"));
-__export(require("./typeGuards"));
+__export(require("./constants"));
+__export(require("./error-message"));
+__export(require("./get-resources"));
+__export(require("./inject-resources"));
+__export(require("./load-resources"));
+__export(require("./match-files"));
+__export(require("./normalize-options"));
+__export(require("./resolve-import-url"));
+__export(require("./type-guards"));
+__export(require("./validate-options"));
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "style-resources-loader",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "CSS processor resources loader for webpack",
@@ -17,9 +17,10 @@ "author": "Shi Yan <[e-mail]> (https://github.com/yenshih)",
   "scripts": {
-    "clean": "rimraf lib coverage",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx && tslint -p .",
-    "test": "jest --colors",
+    "clean": "rimraf lib coverage test/**/outputs",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "prettier": "prettier {src,test}/**/*.{js,jsx,ts,tsx} --write",
+    "test": "jest --detectOpenHandles",
     "coverage": "npm test -- --coverage",
     "posttest": "rimraf test/**/outputs",
-    "start": "tsc --outDir lib -w",
-    "build": "tsc --outDir lib -d",
+    "start": "tsc -w",
+    "build": "tsc -d",
     "prepare": "npm run clean && npm run lint && npm run build && npm run coverage"
@@ -45,32 +46,34 @@ },
   "dependencies": {
-    "glob": "^7.1.2",
-    "is-callable": "^1.1.4",
-    "is-plain-object": "^2.0.4",
+    "glob": "^7.1.6",
     "is-promise": "^2.1.0",
-    "loader-utils": "^1.1.0"
+    "loader-utils": "^1.2.3",
+    "schema-utils": "^2.5.0"
   },
   "devDependencies": {
-    "@types/glob": "^5.0.35",
-    "@types/is-callable": "^1.1.0",
+    "@commitlint/cli": "^8.2.0",
+    "@commitlint/config-conventional": "^8.2.0",
+    "@types/glob": "^7.1.1",
     "@types/is-promise": "^2.1.0",
-    "@types/jest": "^23.3.1",
+    "@types/jest": "^24.0.22",
     "@types/loader-utils": "^1.1.3",
-    "@types/node": "^10.5.7",
-    "@types/webpack": "^4.4.9",
-    "@types/webpack-merge": "^4.1.3",
-    "coveralls": "^3.0.2",
-    "cross-env": "^5.2.0",
-    "eslint": "^5.3.0",
-    "eslint-plugin-import": "^2.13.0",
-    "husky": "^0.14.3",
-    "jest": "^23.4.2",
-    "lint-staged": "^7.2.0",
-    "raw-loader": "^0.5.1",
-    "ts-jest": "^23.1.3",
-    "tslint": "^5.11.0",
-    "tslint-config-airbnb": "^5.9.2",
-    "typescript": "^3.0.1",
-    "typescript-eslint-parser": "^18.0.0",
-    "webpack": "^4.16.5",
-    "webpack-merge": "^4.1.4"
+    "@types/node": "^12.12.7",
+    "@types/webpack": "^4.39.8",
+    "@types/webpack-merge": "^4.1.5",
+    "@typescript-eslint/eslint-plugin": "^2.6.1",
+    "@typescript-eslint/parser": "^2.6.1",
+    "coveralls": "^3.0.7",
+    "cross-env": "^6.0.3",
+    "eslint": "^6.6.0",
+    "eslint-config-prettier": "^6.5.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-prettier": "^3.1.1",
+    "husky": "^3.0.9",
+    "jest": "^24.9.0",
+    "lint-staged": "^9.4.2",
+    "prettier": "^1.19.1",
+    "raw-loader": "^3.1.0",
+    "ts-jest": "^24.1.0",
+    "typescript": "^3.7.2",
+    "webpack": "^4.41.2",
+    "webpack-merge": "^4.2.2"
   },
@@ -77,0 +80,0 @@ "peerDependencies": {

README.md

@@ -6,2 +6,3 @@ [![npm][npm]][npm-url]
 [![coverage][coverage]][coverage-url]
+[![996.icu][996.icu]][996.icu-url]
 
@@ -29,8 +30,12 @@ <div align="center">
 
-This loader is a CSS processor resources loader for webpack, which injects your style resources (e.g. `variables / mixins`) into multiple imported `css / sass / scss / less / stylus` modules.
+This loader is a CSS processor resources loader for webpack, which injects your style resources (e.g. `variables, mixins`) into multiple imported `css, sass, scss, less, stylus` modules.
 
 It's mainly used to
- - share your `variables / mixins / functions` across all style files, so you don't need to `@import` them manually.
+ - share your `variables, mixins, functions` across all style files, so you don't need to `@import` them manually.
  - override `variables` in style files provided by other libraries (e.g. [ant-design](https://github.com/ant-design/ant-design)) and customize your own theme.
 
+### Usage with Vue CLI
+
+See [automatic imports](https://cli.vuejs.org/guide/css.html#automatic-imports) for more details.
+
 <h2 align="center">Examples</h2>
@@ -51,4 +56,4 @@
                     patterns: [
-                        path.resolve(__dirname, 'path/to/scss/variables/*.scss'),
-                        path.resolve(__dirname, 'path/to/scss/mixins/*.scss'),
+                        './path/from/context/to/scss/variables/*.scss',
+                        './path/from/context/to/scss/mixins/*.scss',
                     ]
@@ -121,23 +126,26 @@ }
 |:--:|:--:|:-----:|:----------|
-|**[`patterns`](#patterns)**|`{String \| String[]}`|`/`|Path to the resources you would like to inject|
-|**[`injector`](#injector)**|`{Function \| 'prepend' \| 'append'}`|`prepend`|Controls the resources injection precisely|
+|**[`patterns`](#patterns)**|`{string \| string[]}`|`/`|Path to the resources you would like to inject|
+|**[`injector`](#injector)**|`{Function \| 'prepend' \| 'append'}`|`'prepend'`|Controls the resources injection precisely|
 |**[`globOptions`](#globoptions)**|`{Object}`|`{}`|An options that can be passed to `glob(...)`|
-|**[`resolveUrl`](#resolveurl)**|`{Boolean}`|`true`|Enable/Disable `@import` url to be resolved|
+|**[`resolveUrl`](#resolveurl)**|`{boolean}`|`true`|Enable/Disable `@import` url to be resolved|
 
+See [the type definition file](https://github.com/yenshih/style-resources-loader/blob/master/src/types.ts) for more details.
+
 ### `patterns`
 
-A string or an array of string, represents the path to the resources you would like to inject.
+A string or an array of string, which represents the path to the resources you would like to inject. If the path is relative, it would relative to [webpack context](https://webpack.js.org/configuration/entry-context/).
 
 It supports [globbing](https://github.com/isaacs/node-glob). You could include many files using a file mask.
 
-For example, `path.resolve(__dirname, './styles/*/*.less')` would include all `less` files from `variables` and `mixins` directories and ignore `reset.less` in such following structure.
+For example, `'./styles/*/*.less'` would include all `less` files from `variables` and `mixins` directories and ignore `reset.less` in such following structure.
 
 ```
-./styles
-  /variables
-    |-- fonts.less
-    |-- colors.less
-  /mixins
-    |-- size.less
-  |-- reset.less
+./src  <-- webpack context
+  /styles
+    /variables
+      |-- fonts.less
+      |-- colors.less
+    /mixins
+      |-- size.less
+    |-- reset.less
 ```
@@ -149,27 +157,33 @@
 
-An optional function which controls the resources injection precisely. It also supports `prepend` and `append` for convenience.
+An optional function which controls the resources injection precisely. It also supports `'prepend'` and `'append'` for convenience, which means the loader will prepend or append all resources to source files, respectively.
 
-It defaults to `prepend` (equivalent to `(source, resources) => resources.map(({ content }) => content).join('') + source` internally), which means the loader prepends all resources to source file.
+It defaults to `'prepend'`, which implements as an injector function internally.
 
-It could be asynchronous. You could use `async / await` syntax in your own injector function.
+Furthermore, an injector function should match the following type signature:
 
-An injector function receives two parameters:
+```ts
+(source: string, resources: StyleResource[]) => string | Promise<string>
+```
 
+It receives two parameters:
+
 |Name|Type|Default|Description|
 |:--:|:--:|:-----:|:----------|
-|**`source`**|`{String}`|`/`|Content of the source file|
-|**[`resources`](#resources)**|`{Object[]}`|`/`|Resource descriptors|
+|**`source`**|`{string}`|`/`|Content of the source file|
+|**[`resources`](#resources)**|`{StyleResource[]}`|`/`|Resource descriptors|
 
 #### `resources`
 
-An array of resource, each contains `file` and `content` property:
+An array of resource descriptor, each contains `file` and `content` properties:
 
 |Name|Type|Default|Description|
 |:--:|:--:|:-----:|:----------|
-|**`file`**|`{String}`|`/`|Absolute path to the resource|
-|**`content`**|`{String}`|`/`|Content of the resource file|
+|**`file`**|`{string}`|`/`|Absolute path to the resource|
+|**`content`**|`{string}`|`/`|Content of the resource file|
 
+It can be asynchronous. You could use `async / await` syntax in your own injector function or just return a promise.
+
 ### `globOptions`
 
-An options that can be passed to `glob(...)`. See [node-glob options](https://github.com/isaacs/node-glob#options) for more details.
+Options that can be passed to `glob(...)`. See [node-glob options](https://github.com/isaacs/node-glob#options) for more details.
 
@@ -180,3 +194,3 @@ ### `resolveUrl`
 
-If you were to use `@import` or `@require` statements in style resource file, you should make sure that the url is relative to that resource file, rather than the source file.
+If you were to use `@import` or `@require` statements in style resource files, you should make sure that the URL is relative to that resource file, rather than the source file.
 
@@ -199,1 +213,3 @@ You could disable this feature by setting `resolveUrl` to `false`.
 [coverage-url]: https://coveralls.io/github/yenshih/style-resources-loader?branch=master
+[996.icu]: https://img.shields.io/badge/link-996.icu-%23FF4D5B.svg?style=flat-square
+[996.icu-url]: https://996.icu/#/en_US

src/index.ts

 import loader from './loader';
 
+export * from './schema';
 export * from './types';
 
 export default loader;

src/loader.ts

@@ -1,7 +0,7 @@
-import { loadResources, isFunction } from './utils';
+import {errorMessage, isFunction, loadResources} from './utils';
 
-import { Loader, LoaderCallback } from '.';
+import {Loader, LoaderCallback} from '.';
 
-/* eslint-disable-next-line func-style */
-const loader: Loader = function (source) {
+/* eslint-disable no-invalid-this */
+const loader: Loader = function(source) {
     this.cacheable && this.cacheable();
@@ -12,8 +12,15 @@
     if (!isFunction<LoaderCallback>(callback)) {
-        throw new Error('[style-resources-loader] Synchronous compilation is not supported.');
+        throw new Error(errorMessage.syncCompilation);
     }
 
-    Reflect.apply(loadResources, this, [source, callback]);
+    /* istanbul ignore if: not possible to test */
+    if (typeof source !== 'string') {
+        throw new Error(errorMessage.impossible);
+    }
+
+    /* eslint-disable-next-line @typescript-eslint/no-floating-promises */
+    loadResources(this, source, callback);
 };
+/* eslint-enable no-invalid-this */
 
 export default loader;

src/types.ts

@@ -1,2 +0,2 @@
-import { loader } from 'webpack';
+import {loader} from 'webpack';
 import glob from 'glob';
@@ -10,3 +10,3 @@
 
-export type StyleResourcesFileExt = 'css' | 'sass' | 'scss' | 'less' | 'styl';
+export type StyleResourcesFileFormat = 'css' | 'sass' | 'scss' | 'less' | 'styl';
 
@@ -18,6 +18,5 @@ export interface StyleResource {
 
-export type StyleResources = ReadonlyArray<StyleResource>;
+export type StyleResources = StyleResource[];
 
-export type StyleResourcesFunctionalInjector = (source: string | Buffer, resources: StyleResources) =>
-    string | Buffer | Promise<string | Buffer>;
+export type StyleResourcesFunctionalInjector = (source: string, resources: StyleResources) => string | Promise<string>;
 
@@ -35,7 +34,5 @@ export type StyleResourcesInjector = 'prepend' | 'append' | StyleResourcesFunctionalInjector;
 
-export interface StyleResourcesLoaderNormalizedOptions {
+export interface StyleResourcesLoaderNormalizedOptions extends NonNullable<StyleResourcesLoaderOptions> {
     patterns: string[];
     injector: StyleResourcesNormalizedInjector;
-    globOptions: glob.IOptions;
-    resolveUrl: boolean;
 }

src/utils/index.ts

@@ -1,9 +0,10 @@
-export { default as getResources } from './getResources';
-export { default as injectResources } from './injectResources';
-export { default as loadResources } from './loadResources';
-export { default as normalizeOptions } from './normalizeOptions';
-export { default as resolveImportUrl } from './resolveImportUrl';
-export { default as validateOptions } from './validateOptions';
-
-export * from './supportedFileExts';
-export * from './typeGuards';
+export * from './constants';
+export * from './error-message';
+export * from './get-resources';
+export * from './inject-resources';
+export * from './load-resources';
+export * from './match-files';
+export * from './normalize-options';
+export * from './resolve-import-url';
+export * from './type-guards';
+export * from './validate-options';

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

44573

increased by3.28%

Dependency count

5

decreased by-16.67%

Number of package files

65

increased by22.64%

Lines of code

583

increased by10.63%

Number of lines in readme file

209

increased by8.29%

Worsened metrics

Dev dependency count

26

increased by13.04%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedschema-utils@^2.5.0

• + Added@types/json-schema@7.0.15(transitive)

• + Addedschema-utils@2.7.1(transitive)

• - Removedis-callable@^1.1.4

• - Removedis-plain-object@^2.0.4

• - Removedis-callable@1.2.7(transitive)

• Updatedglob@^7.1.6

• Updatedloader-utils@^1.2.3