@microsoft/loader-load-themed-styles 1.9.119 → 1.9.123
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +7817 -7748
- package/CHANGELOG.md +2313 -2293
- package/README.md +93 -93
- package/lib/LoadThemedStylesLoader.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/tsdoc-metadata.json +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,93 +1,93 @@
|
|
|
1
|
-
# @microsoft/loader-load-themed-styles
|
|
2
|
-
|
|
3
|
-
## Installation
|
|
4
|
-
|
|
5
|
-
`npm install @microsoft/loader-load-themed-styles --save-dev`
|
|
6
|
-
|
|
7
|
-
## Overview
|
|
8
|
-
|
|
9
|
-
This simple Webpack loader that wraps the loading of CSS in script equivalent
|
|
10
|
-
to `require("load-themed-styles").loadStyles( /* css text */ )`.
|
|
11
|
-
It is designed to be a replacement for style-loader.
|
|
12
|
-
|
|
13
|
-
## Usage
|
|
14
|
-
|
|
15
|
-
[Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)
|
|
16
|
-
|
|
17
|
-
This loader is designed to be used in conjunction with css-loader.
|
|
18
|
-
|
|
19
|
-
``` javascript
|
|
20
|
-
var css = require("@microsoft/loader-load-themed-styles!css!./file.css");
|
|
21
|
-
// => returns css code from file.css, uses load-themed-styles to load the CSS on the page.
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
### Example config
|
|
25
|
-
|
|
26
|
-
``` javascript
|
|
27
|
-
use: [
|
|
28
|
-
{
|
|
29
|
-
loader: "@microsoft/loader-load-themed-styles", // creates style nodes from JS strings
|
|
30
|
-
options: {
|
|
31
|
-
namedExport: 'default',
|
|
32
|
-
async: false
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
loader: "css-loader", // translates CSS into CommonJS
|
|
37
|
-
options: {
|
|
38
|
-
modules: true,
|
|
39
|
-
importLoaders: 2,
|
|
40
|
-
localIdentName: '[name]_[local]_[hash:base64:5]',
|
|
41
|
-
minimize: false
|
|
42
|
-
}
|
|
43
|
-
},
|
|
44
|
-
{
|
|
45
|
-
loader: 'postcss-loader',
|
|
46
|
-
options: {
|
|
47
|
-
plugins: function () {
|
|
48
|
-
return [
|
|
49
|
-
require('autoprefixer')
|
|
50
|
-
];
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
},
|
|
54
|
-
{
|
|
55
|
-
loader: "sass-loader",
|
|
56
|
-
}
|
|
57
|
-
]
|
|
58
|
-
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
## Options
|
|
62
|
-
|
|
63
|
-
### `namedExport` (string, defaults to `undefined`)
|
|
64
|
-
|
|
65
|
-
By default, css modules will be exported as a commonjs export:
|
|
66
|
-
|
|
67
|
-
```js
|
|
68
|
-
module.exports = { ... };
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
To override this, you may provide a named export to export to a specifically named thing. This
|
|
72
|
-
is useful in exporting as the default in es6 module import scenarios. For example, providing
|
|
73
|
-
"default" for the named export will output this:
|
|
74
|
-
|
|
75
|
-
```js
|
|
76
|
-
module.exports.default = { ... };
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
### `async` (boolean, defaults to `false`)
|
|
80
|
-
|
|
81
|
-
By default, `@microsoft/load-themed-styles` loads styles synchronously. This can have adverse performance effects
|
|
82
|
-
if many styles are loaded in quick succession. If the `async` option is set to `true`, the `loadStyles` function
|
|
83
|
-
is called with the second parameter set to `true`, directing the function to debounce style loading causing fewer
|
|
84
|
-
changes to the DOM.
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
## Links
|
|
88
|
-
|
|
89
|
-
- [CHANGELOG.md](
|
|
90
|
-
https://github.com/microsoft/rushstack/blob/master/webpack/loader-load-themed-styles/CHANGELOG.md) - Find
|
|
91
|
-
out what's new in the latest version
|
|
92
|
-
|
|
93
|
-
`@microsoft/loader-load-themed-styles` is part of the [Rush Stack](https://rushstack.io/) family of projects.
|
|
1
|
+
# @microsoft/loader-load-themed-styles
|
|
2
|
+
|
|
3
|
+
## Installation
|
|
4
|
+
|
|
5
|
+
`npm install @microsoft/loader-load-themed-styles --save-dev`
|
|
6
|
+
|
|
7
|
+
## Overview
|
|
8
|
+
|
|
9
|
+
This simple Webpack loader that wraps the loading of CSS in script equivalent
|
|
10
|
+
to `require("load-themed-styles").loadStyles( /* css text */ )`.
|
|
11
|
+
It is designed to be a replacement for style-loader.
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
[Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)
|
|
16
|
+
|
|
17
|
+
This loader is designed to be used in conjunction with css-loader.
|
|
18
|
+
|
|
19
|
+
``` javascript
|
|
20
|
+
var css = require("@microsoft/loader-load-themed-styles!css!./file.css");
|
|
21
|
+
// => returns css code from file.css, uses load-themed-styles to load the CSS on the page.
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
### Example config
|
|
25
|
+
|
|
26
|
+
``` javascript
|
|
27
|
+
use: [
|
|
28
|
+
{
|
|
29
|
+
loader: "@microsoft/loader-load-themed-styles", // creates style nodes from JS strings
|
|
30
|
+
options: {
|
|
31
|
+
namedExport: 'default',
|
|
32
|
+
async: false
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
loader: "css-loader", // translates CSS into CommonJS
|
|
37
|
+
options: {
|
|
38
|
+
modules: true,
|
|
39
|
+
importLoaders: 2,
|
|
40
|
+
localIdentName: '[name]_[local]_[hash:base64:5]',
|
|
41
|
+
minimize: false
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
loader: 'postcss-loader',
|
|
46
|
+
options: {
|
|
47
|
+
plugins: function () {
|
|
48
|
+
return [
|
|
49
|
+
require('autoprefixer')
|
|
50
|
+
];
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
loader: "sass-loader",
|
|
56
|
+
}
|
|
57
|
+
]
|
|
58
|
+
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Options
|
|
62
|
+
|
|
63
|
+
### `namedExport` (string, defaults to `undefined`)
|
|
64
|
+
|
|
65
|
+
By default, css modules will be exported as a commonjs export:
|
|
66
|
+
|
|
67
|
+
```js
|
|
68
|
+
module.exports = { ... };
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
To override this, you may provide a named export to export to a specifically named thing. This
|
|
72
|
+
is useful in exporting as the default in es6 module import scenarios. For example, providing
|
|
73
|
+
"default" for the named export will output this:
|
|
74
|
+
|
|
75
|
+
```js
|
|
76
|
+
module.exports.default = { ... };
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### `async` (boolean, defaults to `false`)
|
|
80
|
+
|
|
81
|
+
By default, `@microsoft/load-themed-styles` loads styles synchronously. This can have adverse performance effects
|
|
82
|
+
if many styles are loaded in quick succession. If the `async` option is set to `true`, the `loadStyles` function
|
|
83
|
+
is called with the second parameter set to `true`, directing the function to debounce style loading causing fewer
|
|
84
|
+
changes to the DOM.
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
## Links
|
|
88
|
+
|
|
89
|
+
- [CHANGELOG.md](
|
|
90
|
+
https://github.com/microsoft/rushstack/blob/master/webpack/loader-load-themed-styles/CHANGELOG.md) - Find
|
|
91
|
+
out what's new in the latest version
|
|
92
|
+
|
|
93
|
+
`@microsoft/loader-load-themed-styles` is part of the [Rush Stack](https://rushstack.io/) family of projects.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoadThemedStylesLoader.js","sourceRoot":"","sources":["../src/LoadThemedStylesLoader.ts"],"names":[],"mappings":";AAAA,4FAA4F;AAC5F,2DAA2D;;;AAS3D,4CAA6C;AAE7C,MAAM,sBAAsB,GAAW,OAAO,CAAC,OAAO,CAAC,+BAA+B,CAAC,CAAC;AAqBxF;;;;;GAKG;AACH,MAAa,sBAAsB;IAGjC;QACE,MAAM,IAAI,KAAK,CAAC,yDAAyD,CAAC,CAAC;IAC7E,CAAC;IAEM,MAAM,KAAK,sBAAsB,CAAC,KAAa;QACpD,sBAAsB,CAAC,uBAAuB,GAAG,KAAK,CAAC;IACzD,CAAC;IAED;;OAEG;IACI,MAAM,KAAK,sBAAsB;QACtC,OAAO,sBAAsB,CAAC,uBAAuB,CAAC;IACxD,CAAC;IAED;;OAEG;IACI,MAAM,CAAC,2BAA2B;QACvC,sBAAsB,CAAC,uBAAuB,GAAG,sBAAsB,CAAC;IAC1E,CAAC;IAEM,MAAM,CAAC,KAAK,CAA6B,gBAAwB;QACtE,MAAM,EAAE,WAAW,EAAE,KAAK,GAAG,KAAK,EAAE,GAAmC,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QAE1G,IAAI,UAAU,GAAW,gBAAgB,CAAC;QAC1C,IAAI,WAAW,EAAE;YACf,UAAU,IAAI,IAAI,WAAW,EAAE,CAAC;SACjC;QAED,OAAO;YACL,yBAAyB,WAAW,CAAC,gBAAgB,CAAC,IAAI,EAAE,IAAI,GAAG,gBAAgB,CAAC,IAAI;YACxF,wBAAwB,IAAI,CAAC,SAAS,CAAC,sBAAsB,CAAC,uBAAuB,CAAC,IAAI;YAC1F,EAAE;YACF,mEAAmE;YACnE,EAAE;YACF,8BAA8B;YAC9B,6EAA6E,KAAK,KAAK,IAAI,IAAI;YAC/F,EAAE;YACF,sBAAsB,UAAU,oBAAoB;SACrD,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACf,CAAC;;AA5CH,wDA6CC;AA5CgB,8CAAuB,GAAW,sBAAsB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.\
|
|
1
|
+
{"version":3,"file":"LoadThemedStylesLoader.js","sourceRoot":"","sources":["../src/LoadThemedStylesLoader.ts"],"names":[],"mappings":";AAAA,4FAA4F;AAC5F,2DAA2D;;;AAS3D,4CAA6C;AAE7C,MAAM,sBAAsB,GAAW,OAAO,CAAC,OAAO,CAAC,+BAA+B,CAAC,CAAC;AAqBxF;;;;;GAKG;AACH,MAAa,sBAAsB;IAGjC;QACE,MAAM,IAAI,KAAK,CAAC,yDAAyD,CAAC,CAAC;IAC7E,CAAC;IAEM,MAAM,KAAK,sBAAsB,CAAC,KAAa;QACpD,sBAAsB,CAAC,uBAAuB,GAAG,KAAK,CAAC;IACzD,CAAC;IAED;;OAEG;IACI,MAAM,KAAK,sBAAsB;QACtC,OAAO,sBAAsB,CAAC,uBAAuB,CAAC;IACxD,CAAC;IAED;;OAEG;IACI,MAAM,CAAC,2BAA2B;QACvC,sBAAsB,CAAC,uBAAuB,GAAG,sBAAsB,CAAC;IAC1E,CAAC;IAEM,MAAM,CAAC,KAAK,CAA6B,gBAAwB;QACtE,MAAM,EAAE,WAAW,EAAE,KAAK,GAAG,KAAK,EAAE,GAAmC,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QAE1G,IAAI,UAAU,GAAW,gBAAgB,CAAC;QAC1C,IAAI,WAAW,EAAE;YACf,UAAU,IAAI,IAAI,WAAW,EAAE,CAAC;SACjC;QAED,OAAO;YACL,yBAAyB,WAAW,CAAC,gBAAgB,CAAC,IAAI,EAAE,IAAI,GAAG,gBAAgB,CAAC,IAAI;YACxF,wBAAwB,IAAI,CAAC,SAAS,CAAC,sBAAsB,CAAC,uBAAuB,CAAC,IAAI;YAC1F,EAAE;YACF,mEAAmE;YACnE,EAAE;YACF,8BAA8B;YAC9B,6EAA6E,KAAK,KAAK,IAAI,IAAI;YAC/F,EAAE;YACF,sBAAsB,UAAU,oBAAoB;SACrD,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACf,CAAC;;AA5CH,wDA6CC;AA5CgB,8CAAuB,GAAW,sBAAsB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.\n// See LICENSE in the project root for license information.\n\n/**\n * This simple loader wraps the loading of CSS in script equivalent to\n * require(\"load-themed-styles\").loadStyles('... css text ...').\n * @packageDocumentation\n */\n\nimport { loader } from 'webpack';\nimport loaderUtils = require('loader-utils');\n\nconst loadedThemedStylesPath: string = require.resolve('@microsoft/load-themed-styles');\n\n/**\n * Options for the loader.\n *\n * @public\n */\nexport interface ILoadThemedStylesLoaderOptions {\n /**\n * If this parameter is specified, override the name of the value exported from this loader. This is useful in\n * exporting as the default in es6 module import scenarios. See the README for more information.\n */\n namedExport?: string;\n\n /**\n * If this parameter is set to \"true,\" the \"loadAsync\" parameter is set to true in the call to loadStyles.\n * Defaults to false.\n */\n async?: boolean;\n}\n\n/**\n * This simple loader wraps the loading of CSS in script equivalent to\n * require(\"load-themed-styles\").loadStyles('... css text ...').\n *\n * @public\n */\nexport class LoadThemedStylesLoader {\n private static _loadedThemedStylesPath: string = loadedThemedStylesPath;\n\n public constructor() {\n throw new Error('Constructing \"LoadThemedStylesLoader\" is not supported.');\n }\n\n public static set loadedThemedStylesPath(value: string) {\n LoadThemedStylesLoader._loadedThemedStylesPath = value;\n }\n\n /**\n * Use this property to override the path to the `@microsoft/load-themed-styles` package.\n */\n public static get loadedThemedStylesPath(): string {\n return LoadThemedStylesLoader._loadedThemedStylesPath;\n }\n\n /**\n * Reset the path to the `@microsoft/load-themed-styles package` to the default.\n */\n public static resetLoadedThemedStylesPath(): void {\n LoadThemedStylesLoader._loadedThemedStylesPath = loadedThemedStylesPath;\n }\n\n public static pitch(this: loader.LoaderContext, remainingRequest: string): string {\n const { namedExport, async = false }: ILoadThemedStylesLoaderOptions = loaderUtils.getOptions(this) || {};\n\n let exportName: string = 'module.exports';\n if (namedExport) {\n exportName += `.${namedExport}`;\n }\n\n return [\n `var content = require(${loaderUtils.stringifyRequest(this, '!!' + remainingRequest)});`,\n `var loader = require(${JSON.stringify(LoadThemedStylesLoader._loadedThemedStylesPath)});`,\n '',\n 'if(typeof content === \"string\") content = [[module.id, content]];',\n '',\n '// add the styles to the DOM',\n `for (var i = 0; i < content.length; i++) loader.loadStyles(content[i][1], ${async === true});`,\n '',\n `if(content.locals) ${exportName} = content.locals;`\n ].join('\\n');\n }\n}\n"]}
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA,4FAA4F;AAC5F,2DAA2D;AAE3D,qEAAkE;AAElE,iBAAS,+CAAsB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.\
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA,4FAA4F;AAC5F,2DAA2D;AAE3D,qEAAkE;AAElE,iBAAS,+CAAsB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.\n// See LICENSE in the project root for license information.\n\nimport { LoadThemedStylesLoader } from './LoadThemedStylesLoader';\n\nexport = LoadThemedStylesLoader;\n"]}
|
package/lib/tsdoc-metadata.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@microsoft/loader-load-themed-styles",
|
|
3
|
-
"version": "1.9.
|
|
3
|
+
"version": "1.9.123",
|
|
4
4
|
"description": "This simple loader wraps the loading of CSS in script equivalent to `require('load-themed-styles').loadStyles( /* css text */ )`. It is designed to be a replacement for style-loader.",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"typings": "lib/index.d.ts",
|
|
@@ -11,13 +11,13 @@
|
|
|
11
11
|
"directory": "webpack/loader-load-themed-styles"
|
|
12
12
|
},
|
|
13
13
|
"dependencies": {
|
|
14
|
-
"@microsoft/load-themed-styles": "1.10.
|
|
14
|
+
"@microsoft/load-themed-styles": "1.10.242",
|
|
15
15
|
"loader-utils": "~1.1.0"
|
|
16
16
|
},
|
|
17
17
|
"devDependencies": {
|
|
18
|
-
"@rushstack/eslint-config": "2.5.
|
|
19
|
-
"@rushstack/heft": "0.
|
|
20
|
-
"@rushstack/heft-node-rig": "1.
|
|
18
|
+
"@rushstack/eslint-config": "2.5.1",
|
|
19
|
+
"@rushstack/heft": "0.44.2",
|
|
20
|
+
"@rushstack/heft-node-rig": "1.5.2",
|
|
21
21
|
"@types/heft-jest": "1.0.1",
|
|
22
22
|
"@types/loader-utils": "1.1.3",
|
|
23
23
|
"@types/node": "12.20.24",
|