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

Comparing version 1.3.0 to 1.4.0

.vscode/settings.json

 // Place your settings in this file to overwrite default and user settings.
 {
   // Controls the rendering size of tabs in characters. Accepted values: "auto", 2, 4, 6, etc. If set to "auto", the value will be guessed when a file is opened.
-  "editor.tabSize": 2,
-  // Controls after how many characters the editor will wrap to the next line. Setting this to 0 turns on viewport width wrapping
-  "editor.wrappingColumn": 110
+  "editor.tabSize": 2
 }

lib-amd/index.d.ts

@@ -21,3 +21,3 @@ export interface IThemingInstruction {
  */
-export declare function configureLoadStyles(loadStyles: (processedStyles: string, rawStyles?: string | ThemableArray) => void): void;
+export declare function configureLoadStyles(loadStyles: ((processedStyles: string, rawStyles?: string | ThemableArray) => void) | undefined): void;
 /**
@@ -28,3 +28,3 @@ * Registers a set theme tokens to find and replace. If styles were already registered, they will be
  */
-export declare function loadTheme(theme: ITheme): void;
+export declare function loadTheme(theme: ITheme | undefined): void;
 /**
@@ -38,3 +38,3 @@ * Clear already registered style elements and style records in theme_State object
  */
-export declare function detokenize(styles: string): string;
+export declare function detokenize(styles: string | undefined): string | undefined;
 /**
@@ -41,0 +41,0 @@ * Split tokenized CSS into an array of strings and theme specification objects

lib-amd/index.js

@@ -7,2 +7,3 @@ /**
     "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
     // IE needs to inject styles using cssText. However, we need to evaluate this lazily, so this
@@ -22,5 +23,4 @@ // value will initialize as undefined, and later will be set once on first loadStyles injection.
      */
-    /* tslint:disable: max-line-length */
+    // tslint:disable-next-line:max-line-length
     var _themeTokenRegex = /[\'\"]\[theme:\s*(\w+)\s*(?:\,\s*default:\s*([\\"\']?[\.\,\(\)\#\-\s\w]*[\.\,\(\)\#\-\w][\"\']?))?\s*\][\'\"]/g;
-    /* tslint:enable: max-line-length */
     /** Maximum style text length, for supporting IE style restrictions. */
@@ -118,28 +118,23 @@ var MAX_STYLE_CONTENT_SIZE = 10000;
         var theme = _themeState.theme;
-        var resolvedCss;
-        if (splitStyleArray) {
-            // Resolve the array of theming instructions to an array of strings.
-            // Then join the array to produce the final CSS string.
-            var resolvedArray = splitStyleArray.map(function (currentValue) {
-                var themeSlot = currentValue.theme;
-                if (themeSlot) {
-                    // A theming annotation. Resolve it.
-                    var themedValue = theme ? theme[themeSlot] : undefined;
-                    var defaultValue = currentValue.defaultValue;
-                    // Warn to console if we hit an unthemed value even when themes are provided.
-                    // Allow the themedValue to be undefined to explicitly request the default value.
-                    if (theme && !themedValue && console && !(themeSlot in theme)) {
-                        /* tslint:disable: max-line-length */
-                        console.warn("Theming value not provided for \"" + themeSlot + "\". Falling back to \"" + (defaultValue || 'inherit') + "\".");
-                    }
-                    return themedValue || defaultValue || 'inherit';
+        // Resolve the array of theming instructions to an array of strings.
+        // Then join the array to produce the final CSS string.
+        var resolvedArray = (splitStyleArray || []).map(function (currentValue) {
+            var themeSlot = currentValue.theme;
+            if (themeSlot) {
+                // A theming annotation. Resolve it.
+                var themedValue = theme ? theme[themeSlot] : undefined;
+                var defaultValue = currentValue.defaultValue || 'inherit';
+                // Warn to console if we hit an unthemed value even when themes are provided, unless "DEBUG" is false
+                // Allow the themedValue to be undefined to explicitly request the default value.
+                if (theme && !themedValue && console && !(themeSlot in theme) && (typeof DEBUG === 'undefined' || DEBUG)) {
+                    console.warn("Theming value not provided for \"" + themeSlot + "\". Falling back to \"" + defaultValue + "\".");
                 }
-                else {
-                    // A non-themable string. Preserve it.
-                    return currentValue.rawString;
-                }
-            });
-            resolvedCss = resolvedArray.join('');
-        }
-        return resolvedCss;
+                return themedValue || defaultValue;
+            }
+            else {
+                // A non-themable string. Preserve it.
+                return currentValue.rawString;
+            }
+        });
+        return resolvedArray.join('');
     }
@@ -154,3 +149,3 @@ /**
             var pos = 0; // Current position in styles.
-            var tokenMatch = void 0;
+            var tokenMatch = void 0; // tslint:disable-line:no-null-keyword
             while (tokenMatch = _themeTokenRegex.exec(styles)) {
@@ -211,3 +206,4 @@ var matchIndex = tokenMatch.index;
         var head = document.getElementsByTagName('head')[0];
-        var lastStyleElement = _themeState.lastStyleElement, registeredStyles = _themeState.registeredStyles;
+        var registeredStyles = _themeState.registeredStyles;
+        var lastStyleElement = _themeState.lastStyleElement;
         var stylesheet = lastStyleElement ? lastStyleElement.styleSheet : undefined;
@@ -254,1 +250,3 @@ var lastStyleContent = stylesheet ? stylesheet.cssText : '';
 });
+
+//# sourceMappingURL=index.js.map

lib/index.d.ts

@@ -21,3 +21,3 @@ export interface IThemingInstruction {
  */
-export declare function configureLoadStyles(loadStyles: (processedStyles: string, rawStyles?: string | ThemableArray) => void): void;
+export declare function configureLoadStyles(loadStyles: ((processedStyles: string, rawStyles?: string | ThemableArray) => void) | undefined): void;
 /**
@@ -28,3 +28,3 @@ * Registers a set theme tokens to find and replace. If styles were already registered, they will be
  */
-export declare function loadTheme(theme: ITheme): void;
+export declare function loadTheme(theme: ITheme | undefined): void;
 /**
@@ -38,3 +38,3 @@ * Clear already registered style elements and style records in theme_State object
  */
-export declare function detokenize(styles: string): string;
+export declare function detokenize(styles: string | undefined): string | undefined;
 /**
@@ -41,0 +41,0 @@ * Split tokenized CSS into an array of strings and theme specification objects

lib/index.js

@@ -6,2 +6,3 @@ /**
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 // IE needs to inject styles using cssText. However, we need to evaluate this lazily, so this
@@ -21,5 +22,4 @@ // value will initialize as undefined, and later will be set once on first loadStyles injection.
  */
-/* tslint:disable: max-line-length */
+// tslint:disable-next-line:max-line-length
 var _themeTokenRegex = /[\'\"]\[theme:\s*(\w+)\s*(?:\,\s*default:\s*([\\"\']?[\.\,\(\)\#\-\s\w]*[\.\,\(\)\#\-\w][\"\']?))?\s*\][\'\"]/g;
-/* tslint:enable: max-line-length */
 /** Maximum style text length, for supporting IE style restrictions. */
@@ -117,28 +117,23 @@ var MAX_STYLE_CONTENT_SIZE = 10000;
     var theme = _themeState.theme;
-    var resolvedCss;
-    if (splitStyleArray) {
-        // Resolve the array of theming instructions to an array of strings.
-        // Then join the array to produce the final CSS string.
-        var resolvedArray = splitStyleArray.map(function (currentValue) {
-            var themeSlot = currentValue.theme;
-            if (themeSlot) {
-                // A theming annotation. Resolve it.
-                var themedValue = theme ? theme[themeSlot] : undefined;
-                var defaultValue = currentValue.defaultValue;
-                // Warn to console if we hit an unthemed value even when themes are provided.
-                // Allow the themedValue to be undefined to explicitly request the default value.
-                if (theme && !themedValue && console && !(themeSlot in theme)) {
-                    /* tslint:disable: max-line-length */
-                    console.warn("Theming value not provided for \"" + themeSlot + "\". Falling back to \"" + (defaultValue || 'inherit') + "\".");
-                }
-                return themedValue || defaultValue || 'inherit';
+    // Resolve the array of theming instructions to an array of strings.
+    // Then join the array to produce the final CSS string.
+    var resolvedArray = (splitStyleArray || []).map(function (currentValue) {
+        var themeSlot = currentValue.theme;
+        if (themeSlot) {
+            // A theming annotation. Resolve it.
+            var themedValue = theme ? theme[themeSlot] : undefined;
+            var defaultValue = currentValue.defaultValue || 'inherit';
+            // Warn to console if we hit an unthemed value even when themes are provided, unless "DEBUG" is false
+            // Allow the themedValue to be undefined to explicitly request the default value.
+            if (theme && !themedValue && console && !(themeSlot in theme) && (typeof DEBUG === 'undefined' || DEBUG)) {
+                console.warn("Theming value not provided for \"" + themeSlot + "\". Falling back to \"" + defaultValue + "\".");
             }
-            else {
-                // A non-themable string. Preserve it.
-                return currentValue.rawString;
-            }
-        });
-        resolvedCss = resolvedArray.join('');
-    }
-    return resolvedCss;
+            return themedValue || defaultValue;
+        }
+        else {
+            // A non-themable string. Preserve it.
+            return currentValue.rawString;
+        }
+    });
+    return resolvedArray.join('');
 }
@@ -153,3 +148,3 @@ /**
         var pos = 0; // Current position in styles.
-        var tokenMatch = void 0;
+        var tokenMatch = void 0; // tslint:disable-line:no-null-keyword
         while (tokenMatch = _themeTokenRegex.exec(styles)) {
@@ -210,3 +205,4 @@ var matchIndex = tokenMatch.index;
     var head = document.getElementsByTagName('head')[0];
-    var lastStyleElement = _themeState.lastStyleElement, registeredStyles = _themeState.registeredStyles;
+    var registeredStyles = _themeState.registeredStyles;
+    var lastStyleElement = _themeState.lastStyleElement;
     var stylesheet = lastStyleElement ? lastStyleElement.styleSheet : undefined;
@@ -213,0 +209,0 @@ var lastStyleContent = stylesheet ? stylesheet.cssText : '';

package.json

 {
   "name": "@microsoft/load-themed-styles",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Loads themed styles.",
@@ -14,6 +14,9 @@ "license": "MIT",
   "devDependencies": {
-    "chai": "^3.5.0",
-    "gulp": "^3.9.1",
-    "@microsoft/node-library-build": "~0.2.2"
+    "@types/chai": "3.4.34",
+    "@types/mocha": "2.2.38",
+    "@types/webpack-env": "1.13.0",
+    "chai": "~3.5.0",
+    "gulp": "~3.9.1",
+    "@microsoft/node-library-build": "~3.0.1"
   }
 }

src/index.ts

@@ -31,6 +31,6 @@ /**
 interface IThemeState {
-  theme: ITheme;
+  theme: ITheme | undefined;
   lastStyleElement: IExtendedHtmlStyleElement;
   registeredStyles: IStyleRecord[];
-  loadStyles: (processedStyles: string, rawStyles?: string | ThemableArray) => void;
+  loadStyles: ((processedStyles: string, rawStyles?: string | ThemableArray) => void) | undefined;
 }
@@ -60,5 +60,4 @@
  */
-/* tslint:disable: max-line-length */
+// tslint:disable-next-line:max-line-length
 const _themeTokenRegex: RegExp = /[\'\"]\[theme:\s*(\w+)\s*(?:\,\s*default:\s*([\\"\']?[\.\,\(\)\#\-\s\w]*[\.\,\(\)\#\-\w][\"\']?))?\s*\][\'\"]/g;
-/* tslint:enable: max-line-length */
 
@@ -85,7 +84,7 @@ /** Maximum style text length, for supporting IE style restrictions. */
  * Allows for customizable loadStyles logic. e.g. for server side rendering application
- * @param {(processedStyles: string, rawStyles?: string | ThemableArray) => void} 
+ * @param {(processedStyles: string, rawStyles?: string | ThemableArray) => void}
  * a loadStyles callback that gets called when styles are loaded or reloaded
  */
 export function configureLoadStyles(
-    loadStyles: (processedStyles: string, rawStyles?: string | ThemableArray) => void
+    loadStyles: ((processedStyles: string, rawStyles?: string | ThemableArray) => void) | undefined
   ): void {
@@ -116,3 +115,3 @@ _themeState.loadStyles = loadStyles;
  */
-export function loadTheme(theme: ITheme): void {
+export function loadTheme(theme: ITheme | undefined): void {
   _themeState.theme = theme;
@@ -152,3 +151,3 @@
  */
-export function detokenize(styles: string): string {
+export function detokenize(styles: string | undefined): string | undefined {
   if (styles) {
@@ -167,32 +166,25 @@ styles = resolveThemableArray(splitStyles(styles));
   const { theme }: IThemeState = _themeState;
-  let resolvedCss: string;
-  if (splitStyleArray) {
-    // Resolve the array of theming instructions to an array of strings.
-    // Then join the array to produce the final CSS string.
-    const resolvedArray: string[] = splitStyleArray.map((currentValue: IThemingInstruction) => {
-      const themeSlot: string = currentValue.theme;
-      if (themeSlot) {
-        // A theming annotation. Resolve it.
-        const themedValue: string = theme ? theme[themeSlot] : undefined;
-        const defaultValue: string = currentValue.defaultValue;
+  // Resolve the array of theming instructions to an array of strings.
+  // Then join the array to produce the final CSS string.
+  const resolvedArray: (string | undefined)[] = (splitStyleArray || []).map((currentValue: IThemingInstruction) => {
+    const themeSlot: string | undefined = currentValue.theme;
+    if (themeSlot) {
+      // A theming annotation. Resolve it.
+      const themedValue: string | undefined = theme ? theme[themeSlot] : undefined;
+      const defaultValue: string = currentValue.defaultValue || 'inherit';
 
-        // Warn to console if we hit an unthemed value even when themes are provided.
-        // Allow the themedValue to be undefined to explicitly request the default value.
-        if (theme && !themedValue && console && !(themeSlot in theme)) {
-          /* tslint:disable: max-line-length */
-          console.warn(`Theming value not provided for "${themeSlot}". Falling back to "${defaultValue || 'inherit'}".`);
-          /* tslint:enable: max-line-length */
-        }
-
-        return themedValue || defaultValue || 'inherit';
-      } else {
-        // A non-themable string. Preserve it.
-        return currentValue.rawString;
+      // Warn to console if we hit an unthemed value even when themes are provided, unless "DEBUG" is false
+      // Allow the themedValue to be undefined to explicitly request the default value.
+      if (theme && !themedValue && console && !(themeSlot in theme) && (typeof DEBUG === 'undefined' || DEBUG)) {
+        console.warn(`Theming value not provided for "${themeSlot}". Falling back to "${defaultValue}".`);
       }
-    });
 
-    resolvedCss = resolvedArray.join('');
-  }
+      return themedValue || defaultValue;
+    } else {
+      // A non-themable string. Preserve it.
+      return currentValue.rawString;
+    }
+  });
 
-  return resolvedCss;
+  return resolvedArray.join('');
 }
@@ -208,3 +200,3 @@
     let pos: number = 0; // Current position in styles.
-    let tokenMatch: RegExpExecArray;
+    let tokenMatch: RegExpExecArray | null; // tslint:disable-line:no-null-keyword
     while (tokenMatch = _themeTokenRegex.exec(styles)) {
@@ -272,5 +264,6 @@ const matchIndex: number = tokenMatch.index;
   const head: HTMLHeadElement = document.getElementsByTagName('head')[0];
-  let { lastStyleElement, registeredStyles }: IThemeState = _themeState;
+  const registeredStyles: IStyleRecord[] = _themeState.registeredStyles;
+  let lastStyleElement: IExtendedHtmlStyleElement = _themeState.lastStyleElement;
 
-  const stylesheet: IStyleSheet = lastStyleElement ? lastStyleElement.styleSheet : undefined;
+  const stylesheet: IStyleSheet | undefined = lastStyleElement ? lastStyleElement.styleSheet : undefined;
   const lastStyleContent: string = stylesheet ? stylesheet.cssText : '';
@@ -277,0 +270,0 @@ let lastRegisteredStyle: IStyleRecord = registeredStyles[registeredStyles.length - 1];

tsconfig.json

 {
   "compilerOptions": {
     "target": "es5",
+    "forceConsistentCasingInFileNames": true,
     "module": "commonjs",
@@ -9,5 +10,7 @@ "jsx": "react",
     "experimentalDecorators": true,
-    "noEmitOnError": false,
-    "moduleResolution": "node"
+    "types": [
+      "webpack-env"
+    ],
+    "strictNullChecks": true
   }
 }

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

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

Improved metrics

Total package byte prevSize

93856

increased by3.54%

Worsened metrics

Dev dependency count

6

increased by100%

Number of package files

20

decreased by-23.08%

Lines of code

1098

decreased by-28.75%

No dependency changes