@microsoft/webpack5-load-themed-styles-loader 0.1.0

package/LICENSE

@@ -0,0 +1,24 @@
+@microsoft/webpack5-load-themed-styles-loader
+
+Copyright (c) Microsoft Corporation. All rights reserved.
+
+MIT License
+
+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.

package/README.md

@@ -0,0 +1,76 @@
+# @microsoft/webpack5-load-themed-styles-loader
+
+## Installation
+
+`npm install @microsoft/webpack5-load-themed-styles-loader --save-dev`
+
+## Overview
+
+This simple Webpack loader that wraps the loading of CSS in script equivalent
+to `require("@microsoft/load-themed-styles").loadStyles( /* css text */ )`.
+It is designed to be a replacement for style-loader.
+
+## Usage
+
+[Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)
+
+This loader is designed to be used in conjunction with css-loader.
+
+``` javascript
+var css = require("@microsoft/webpack5-load-themed-styles-loader!css!./file.css");
+// => returns css code from file.css, uses load-themed-styles to load the CSS on the page.
+```
+
+### Example config
+
+``` javascript
+        use: [
+          {
+            loader: "@microsoft/webpack5-load-themed-styles-loader",  // creates style nodes from JS strings
+            options: {
+              async: false
+            }
+          },
+          {
+            loader: "css-loader", // translates CSS into CommonJS
+            options: {
+              modules: true,
+              importLoaders: 2,
+              localIdentName: '[name]_[local]_[hash:base64:5]',
+              minimize: false
+            }
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins: function () {
+                return [
+                  require('autoprefixer')
+                ];
+              }
+            }
+          },
+          {
+            loader: "sass-loader",
+          }
+        ]
+
+```
+
+## Options
+
+### `async` (boolean, defaults to `false`)
+
+By default, `@microsoft/load-themed-styles` loads styles synchronously. This can have adverse performance effects
+if many styles are loaded in quick succession. If the `async` option is set to `true`, the `loadStyles` function
+is called with the second parameter set to `true`, directing the function to debounce style loading causing fewer
+changes to the DOM.
+
+
+## Links
+
+- [CHANGELOG.md](
+  https://github.com/microsoft/rushstack/blob/main/webpack/webpack5-loader-load-themed-styles/CHANGELOG.md) - Find
+  out what's new in the latest version
+
+`@microsoft/webpack5-load-themed-styles-loader` is part of the [Rush Stack](https://rushstack.io/) family of projects.

package/lib/index.d.ts

@@ -0,0 +1,28 @@
+/**
+ * This simple loader wraps the loading of CSS in script equivalent to
+ *  require("\@microsoft/load-themed-styles").loadStyles('... css text ...').
+ * @packageDocumentation
+ */
+import type { PitchLoaderDefinitionFunction } from 'webpack';
+/**
+ * Options for the loader.
+ *
+ * @public
+ */
+export interface ILoadThemedStylesLoaderOptions {
+    /**
+     * If this parameter is set to "true," the "loadAsync" parameter is set to true in the call to loadStyles.
+     * Defaults to false.
+     */
+    async?: boolean;
+    loadThemedStylesPath?: string;
+    esModule?: boolean;
+}
+/**
+ * This simple loader wraps the loading of CSS in script equivalent to
+ *  require("load-themed-styles").loadStyles('... css text ...').
+ *
+ * @public
+ */
+export declare const pitch: PitchLoaderDefinitionFunction<ILoadThemedStylesLoaderOptions>;
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AAEH,OAAO,KAAK,EAAiB,6BAA6B,EAAE,MAAM,SAAS,CAAC;AAI5E;;;;GAIG;AACH,MAAM,WAAW,8BAA8B;IAC7C;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;GAKG;AAEH,eAAO,MAAM,KAAK,EAAE,6BAA6B,CAAC,8BAA8B,CAqC/E,CAAC"}

package/lib/index.js

@@ -0,0 +1,42 @@
+"use strict";
+// Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
+// See LICENSE in the project root for license information.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pitch = void 0;
+const defaultThemedStylesPath = require.resolve('@microsoft/load-themed-styles');
+/**
+ * This simple loader wraps the loading of CSS in script equivalent to
+ *  require("load-themed-styles").loadStyles('... css text ...').
+ *
+ * @public
+ */
+const pitch = function (remainingRequest) {
+    const loaderContext = this;
+    const options = loaderContext.getOptions() || {};
+    if (options.namedExport) {
+        throw new Error('The "namedExport" option has been removed.');
+    }
+    const { async = false, loadThemedStylesPath = defaultThemedStylesPath, esModule = false } = options;
+    const stringifiedRequest = JSON.stringify(loaderContext.utils.contextify(loaderContext.context, '!!' + remainingRequest));
+    const importCode = esModule
+        ? [
+            `import content from ${stringifiedRequest};`,
+            `import { loadStyles } from ${JSON.stringify(loadThemedStylesPath)};`
+        ]
+        : [
+            `var content = require(${stringifiedRequest});`,
+            `var loader = require(${JSON.stringify(loadThemedStylesPath)});`
+        ];
+    return [
+        ...importCode,
+        '',
+        'if(typeof content === "string") content = [[module.id, content]];',
+        '',
+        '// add the styles to the DOM',
+        `for (var i = 0; i < content.length; i++) ${esModule ? 'loadStyles' : 'loader.loadStyles'}(content[i][1], ${async === true});`,
+        '',
+        'if(content.locals) module.exports = content.locals;'
+    ].join('\n');
+};
+exports.pitch = pitch;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA,4FAA4F;AAC5F,2DAA2D;;;AAU3D,MAAM,uBAAuB,GAAW,OAAO,CAAC,OAAO,CAAC,+BAA+B,CAAC,CAAC;AAiBzF;;;;;GAKG;AAEI,MAAM,KAAK,GAAkE,UAElF,gBAAwB;IAExB,MAAM,aAAa,GAAkD,IAAI,CAAC;IAC1E,MAAM,OAAO,GAAmC,aAAa,CAAC,UAAU,EAAE,IAAI,EAAE,CAAC;IACjF,IAAK,OAAmC,CAAC,WAAW,EAAE;QACpD,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAC;KAC/D;IAED,MAAM,EAAE,KAAK,GAAG,KAAK,EAAE,oBAAoB,GAAG,uBAAuB,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,OAAO,CAAC;IACpG,MAAM,kBAAkB,GAAW,IAAI,CAAC,SAAS,CAC/C,aAAa,CAAC,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,EAAE,IAAI,GAAG,gBAAgB,CAAC,CAC/E,CAAC;IAEF,MAAM,UAAU,GAAkD,QAAQ;QACxE,CAAC,CAAC;YACE,uBAAuB,kBAAkB,GAAG;YAC5C,8BAA8B,IAAI,CAAC,SAAS,CAAC,oBAAoB,CAAC,GAAG;SACtE;QACH,CAAC,CAAC;YACE,yBAAyB,kBAAkB,IAAI;YAC/C,wBAAwB,IAAI,CAAC,SAAS,CAAC,oBAAoB,CAAC,IAAI;SACjE,CAAC;IAEN,OAAO;QACL,GAAG,UAAU;QACb,EAAE;QACF,mEAAmE;QACnE,EAAE;QACF,8BAA8B;QAC9B,4CACE,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,mBAC5B,mBAAmB,KAAK,KAAK,IAAI,IAAI;QACrC,EAAE;QACF,qDAAqD;KACtD,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACf,CAAC,CAAC;AArCW,QAAA,KAAK,SAqChB","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(\"\\@microsoft/load-themed-styles\").loadStyles('... css text ...').\n * @packageDocumentation\n */\n\nimport type { LoaderContext, PitchLoaderDefinitionFunction } from 'webpack';\n\nconst defaultThemedStylesPath: 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 set to \"true,\" the \"loadAsync\" parameter is set to true in the call to loadStyles.\n   * Defaults to false.\n   */\n  async?: boolean;\n  loadThemedStylesPath?: string;\n  esModule?: 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 */\n\nexport const pitch: PitchLoaderDefinitionFunction<ILoadThemedStylesLoaderOptions> = function (\n  this: LoaderContext<ILoadThemedStylesLoaderOptions>,\n  remainingRequest: string\n): string {\n  const loaderContext: LoaderContext<ILoadThemedStylesLoaderOptions> = this;\n  const options: ILoadThemedStylesLoaderOptions = loaderContext.getOptions() || {};\n  if ((options as Record<string, unknown>).namedExport) {\n    throw new Error('The \"namedExport\" option has been removed.');\n  }\n\n  const { async = false, loadThemedStylesPath = defaultThemedStylesPath, esModule = false } = options;\n  const stringifiedRequest: string = JSON.stringify(\n    loaderContext.utils.contextify(loaderContext.context, '!!' + remainingRequest)\n  );\n\n  const importCode: [contentImport: string, loaderImport: string] = esModule\n    ? [\n        `import content from ${stringifiedRequest};`,\n        `import { loadStyles } from ${JSON.stringify(loadThemedStylesPath)};`\n      ]\n    : [\n        `var content = require(${stringifiedRequest});`,\n        `var loader = require(${JSON.stringify(loadThemedStylesPath)});`\n      ];\n\n  return [\n    ...importCode,\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++) ${\n      esModule ? 'loadStyles' : 'loader.loadStyles'\n    }(content[i][1], ${async === true});`,\n    '',\n    'if(content.locals) module.exports = content.locals;'\n  ].join('\\n');\n};\n"]}

package/lib/tsdoc-metadata.json

@@ -0,0 +1,11 @@
+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.33.7"
+    }
+  ]
+}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@microsoft/webpack5-load-themed-styles-loader",
+  "version": "0.1.0",
+  "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.",
+  "main": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/rushstack.git",
+    "directory": "webpack/webpack5-loader-load-themed-styles"
+  },
+  "peerDependencies": {
+    "@microsoft/load-themed-styles": "^2.0.19"
+  },
+  "devDependencies": {
+    "@microsoft/load-themed-styles": "2.0.19",
+    "@rushstack/eslint-config": "3.1.1",
+    "@rushstack/heft-node-rig": "1.11.11",
+    "@rushstack/heft": "0.49.0",
+    "@types/heft-jest": "1.0.1",
+    "@types/node": "12.20.24",
+    "webpack": "~5.68.0",
+    "memfs": "3.4.3",
+    "css-loader": "~6.6.0"
+  },
+  "scripts": {
+    "build": "heft build --clean",
+    "_phase:build": "heft build --clean",
+    "_phase:test": "heft test --no-build"
+  }
+}