@microsoft/load-themed-styles - npm Package Compare versions

Comparing version 1.2.2 to 1.3.0

.vscode/launch.json

@@ -0,0 +0,0 @@ {

.vscode/settings.json

@@ -0,0 +0,0 @@ // Place your settings in this file to overwrite default and user settings.

.vscode/tasks.json

@@ -0,0 +0,0 @@ {

lib-amd/index.d.ts

@@ -18,5 +18,6 @@ export interface IThemingInstruction {
  * Allows for customizable loadStyles logic. e.g. for server side rendering application
- * @param {(styles: string) => void} a loadStyles callback that gets called when styles are loaded or reloaded
+ * @param {(processedStyles: string, rawStyles?: string | ThemableArray) => void}
+ * a loadStyles callback that gets called when styles are loaded or reloaded
  */
-export declare function configureLoadStyles(callback: (styles: string) => void): void;
+export declare function configureLoadStyles(loadStyles: (processedStyles: string, rawStyles?: string | ThemableArray) => void): void;
 /**
@@ -29,2 +30,6 @@ * Registers a set theme tokens to find and replace. If styles were already registered, they will be
 /**
+ * Clear already registered style elements and style records in theme_State object
+ */
+export declare function clearStyles(): void;
+/**
  * Find theme tokens and replaces them with provided theme values.
@@ -31,0 +36,0 @@ * @param {string} styles Tokenized styles to fix.

lib-amd/index.js

@@ -41,6 +41,7 @@ /**
      * Allows for customizable loadStyles logic. e.g. for server side rendering application
-     * @param {(styles: string) => void} a loadStyles callback that gets called when styles are loaded or reloaded
+     * @param {(processedStyles: string, rawStyles?: string | ThemableArray) => void}
+     * a loadStyles callback that gets called when styles are loaded or reloaded
      */
-    function configureLoadStyles(callback) {
-        _themeState.loadStyles = callback;
+    function configureLoadStyles(loadStyles) {
+        _themeState.loadStyles = loadStyles;
     }
@@ -56,4 +57,3 @@ exports.configureLoadStyles = configureLoadStyles;
         if (_themeState.loadStyles) {
-            var styles = resolveThemableArray(stylesArray);
-            _themeState.loadStyles(styles);
+            _themeState.loadStyles(resolveThemableArray(stylesArray), stylesArray);
         }
@@ -78,2 +78,15 @@ else {
     /**
+     * Clear already registered style elements and style records in theme_State object
+     */
+    function clearStyles() {
+        _themeState.registeredStyles.forEach(function (styleRecord) {
+            var styleElement = styleRecord && styleRecord.styleElement;
+            if (styleElement && styleElement.parentElement) {
+                styleElement.parentElement.removeChild(styleElement);
+            }
+        });
+        _themeState.registeredStyles = [];
+    }
+    exports.clearStyles = clearStyles;
+    /**
      * Reloads styles.
@@ -80,0 +93,0 @@ */

lib-amd/tests.js

@@ -0,0 +0,0 @@ var context = require.context('.', true, /.+\.test\.js?$/);

lib/index.d.ts

@@ -18,5 +18,6 @@ export interface IThemingInstruction {
  * Allows for customizable loadStyles logic. e.g. for server side rendering application
- * @param {(styles: string) => void} a loadStyles callback that gets called when styles are loaded or reloaded
+ * @param {(processedStyles: string, rawStyles?: string | ThemableArray) => void}
+ * a loadStyles callback that gets called when styles are loaded or reloaded
  */
-export declare function configureLoadStyles(callback: (styles: string) => void): void;
+export declare function configureLoadStyles(loadStyles: (processedStyles: string, rawStyles?: string | ThemableArray) => void): void;
 /**
@@ -29,2 +30,6 @@ * Registers a set theme tokens to find and replace. If styles were already registered, they will be
 /**
+ * Clear already registered style elements and style records in theme_State object
+ */
+export declare function clearStyles(): void;
+/**
  * Find theme tokens and replaces them with provided theme values.
@@ -31,0 +36,0 @@ * @param {string} styles Tokenized styles to fix.

lib/index.js

@@ -40,6 +40,7 @@ /**
  * Allows for customizable loadStyles logic. e.g. for server side rendering application
- * @param {(styles: string) => void} a loadStyles callback that gets called when styles are loaded or reloaded
+ * @param {(processedStyles: string, rawStyles?: string | ThemableArray) => void}
+ * a loadStyles callback that gets called when styles are loaded or reloaded
  */
-function configureLoadStyles(callback) {
-    _themeState.loadStyles = callback;
+function configureLoadStyles(loadStyles) {
+    _themeState.loadStyles = loadStyles;
 }
@@ -55,4 +56,3 @@ exports.configureLoadStyles = configureLoadStyles;
     if (_themeState.loadStyles) {
-        var styles = resolveThemableArray(stylesArray);
-        _themeState.loadStyles(styles);
+        _themeState.loadStyles(resolveThemableArray(stylesArray), stylesArray);
     }
@@ -77,2 +77,15 @@ else {
 /**
+ * Clear already registered style elements and style records in theme_State object
+ */
+function clearStyles() {
+    _themeState.registeredStyles.forEach(function (styleRecord) {
+        var styleElement = styleRecord && styleRecord.styleElement;
+        if (styleElement && styleElement.parentElement) {
+            styleElement.parentElement.removeChild(styleElement);
+        }
+    });
+    _themeState.registeredStyles = [];
+}
+exports.clearStyles = clearStyles;
+/**
  * Reloads styles.
@@ -79,0 +92,0 @@ */

lib/tests.js

@@ -0,0 +0,0 @@ var context = require.context('.', true, /.+\.test\.js?$/);

package.json

 {
   "name": "@microsoft/load-themed-styles",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "Loads themed styles.",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -1,2 +0,2 @@
-# load-themed-styles
+# @microsoft/load-themed-styles
 [![npm version](https://badge.fury.io/js/%40microsoft%2Fload-themed-styles.svg)](https://badge.fury.io/js/%40microsoft%2Fload-themed-styles)
@@ -13,3 +13,3 @@
 ```
-$ npm install --save load-themed-styles
+$ npm install --save @microsoft/load-themed-styles
 ```
@@ -19,6 +19,6 @@
 
-To load a given string of styles, you can do this:
+To load a given string of styles, you can do this in TypeScript or ES6:
 
-```js
-import { loadStyles } from 'load-themed-styles';
+```TypeScript
+import { loadStyles } from '@microsoft/load-themed-styles';
 
@@ -43,3 +43,3 @@ loadStyles('body { background: red; }');
 ```js
-import { loadStyles, loadTheme } from 'load-themed-styles';
+import { loadStyles, loadTheme } from '@microsoft/load-themed-styles';
 
@@ -46,0 +46,0 @@ loadTheme({

src/index.test.ts

@@ -0,0 +0,0 @@ import { expect } from 'chai';

src/index.ts

@@ -34,3 +34,3 @@ /**
   registeredStyles: IStyleRecord[];
-  loadStyles: (styles: string) => void;
+  loadStyles: (processedStyles: string, rawStyles?: string | ThemableArray) => void;
 }
@@ -84,6 +84,9 @@
  * Allows for customizable loadStyles logic. e.g. for server side rendering application
- * @param {(styles: string) => void} a loadStyles callback that gets called when styles are loaded or reloaded
+ * @param {(processedStyles: string, rawStyles?: string | ThemableArray) => void} 
+ * a loadStyles callback that gets called when styles are loaded or reloaded
  */
-export function configureLoadStyles(callback: (styles: string) => void): void {
-  _themeState.loadStyles = callback;
+export function configureLoadStyles(
+    loadStyles: (processedStyles: string, rawStyles?: string | ThemableArray) => void
+  ): void {
+  _themeState.loadStyles = loadStyles;
 }
@@ -99,4 +102,3 @@
   if (_themeState.loadStyles) {
-    const styles: string = resolveThemableArray(stylesArray);
-    _themeState.loadStyles(styles);
+    _themeState.loadStyles(resolveThemableArray(stylesArray), stylesArray);
   } else {
@@ -122,2 +124,15 @@ _injectStylesWithCssText ?
 /**
+ * Clear already registered style elements and style records in theme_State object
+ */
+export function clearStyles(): void {
+  _themeState.registeredStyles.forEach((styleRecord: IStyleRecord) => {
+    const styleElement: HTMLStyleElement = styleRecord && styleRecord.styleElement as HTMLStyleElement;
+    if (styleElement && styleElement.parentElement) {
+      styleElement.parentElement.removeChild(styleElement);
+    }
+  });
+  _themeState.registeredStyles = [];
+}
+
+/**
  * Reloads styles.
@@ -124,0 +139,0 @@ */

src/tests.js

@@ -0,0 +0,0 @@ var context = require.context('.', true, /.+\.test\.js?$/);

tsconfig.json

@@ -0,0 +0,0 @@ {

tsd.json

@@ -0,0 +0,0 @@ {

typings/assertion-error/assertion-error.d.ts

@@ -0,0 +0,0 @@ // Type definitions for assertion-error 1.0.0

typings/chai/chai.d.ts

@@ -0,0 +0,0 @@ // Type definitions for chai 3.4.0

typings/mocha/mocha.d.ts

@@ -0,0 +0,0 @@ // Type definitions for mocha 2.2.5

typings/tsd.d.ts

 /// <reference path="assertion-error/assertion-error.d.ts" />
 /// <reference path="chai/chai.d.ts" />
 /// <reference path="mocha/mocha.d.ts" />

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

90647

increased by6.09%

Lines of code

1541

increased by3.35%

No dependency changes