Skip to content

Commit 3a1581f

Browse files
iclantoniclanton
authored
Merge pull request microsoft#7 from Microsoft/ianc/updating-load-themed-styles
Updating load-themed-styles to the latest tools and the updated typescript options.
2 parents b495210 + 3604b16 commit 3a1581f

14 files changed

Lines changed: 51 additions & 743 deletions

File tree

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,4 +38,5 @@ Icon
3838
node_modules
3939
lib
4040
lib-amd
41-
coverage
41+
coverage
42+
temp

‎.pullapprove.yml‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎.travis.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
language: node_js
22
node_js:
3-
- '4.2'
3+
- '6.9'
44
before_script:
55
- npm install -g gulp
66
script: gulp

‎.vscode/settings.json‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
// Place your settings in this file to overwrite default and user settings.
22
{
33
// 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.
4-
"editor.tabSize": 2,
5-
// Controls after how many characters the editor will wrap to the next line. Setting this to 0 turns on viewport width wrapping
6-
"editor.wrappingColumn": 110
4+
"editor.tabSize": 2
75
}

‎package.json‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@microsoft/load-themed-styles",
3-
"version": "1.3.0",
3+
"version": "1.4.0",
44
"description": "Loads themed styles.",
55
"license": "MIT",
66
"repository": {
@@ -11,8 +11,11 @@
1111
"keywords": [],
1212
"dependencies": {},
1313
"devDependencies": {
14-
"chai": "^3.5.0",
15-
"gulp": "^3.9.1",
16-
"@microsoft/node-library-build": "~0.2.2"
14+
"@types/chai": "3.4.34",
15+
"@types/mocha": "2.2.38",
16+
"@types/webpack-env": "1.13.0",
17+
"chai": "~3.5.0",
18+
"gulp": "~3.9.1",
19+
"@microsoft/node-library-build": "~3.0.1"
1720
}
1821
}

‎src/index.ts‎

Lines changed: 31 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@ interface IExtendedHtmlStyleElement extends HTMLStyleElement {
2828
}
2929

3030
interface IThemeState {
31-
theme: ITheme;
31+
theme: ITheme | undefined;
3232
lastStyleElement: IExtendedHtmlStyleElement;
3333
registeredStyles: IStyleRecord[];
34-
loadStyles: (processedStyles: string, rawStyles?: string | ThemableArray) => void;
34+
loadStyles: ((processedStyles: string, rawStyles?: string | ThemableArray) => void) | undefined;
3535
}
3636

3737
interface IStyleRecord {
@@ -56,9 +56,8 @@ const _themeState: IThemeState = _root.__themeState__ = _root.__themeState__ ||
5656
/**
5757
* Matches theming tokens. For example, "[theme: themeSlotName, default: #FFF]" (including the quotes).
5858
*/
59-
/* tslint:disable: max-line-length */
59+
// tslint:disable-next-line:max-line-length
6060
const _themeTokenRegex: RegExp = /[\'\"]\[theme:\s*(\w+)\s*(?:\,\s*default:\s*([\\"\']?[\.\,\(\)\#\-\s\w]*[\.\,\(\)\#\-\w][\"\']?))?\s*\][\'\"]/g;
61-
/* tslint:enable: max-line-length */
6261

6362
/** Maximum style text length, for supporting IE style restrictions. */
6463
const MAX_STYLE_CONTENT_SIZE: number = 10000;
@@ -80,11 +79,11 @@ export function loadStyles(styles: string | ThemableArray): void {
8079

8180
/**
8281
* Allows for customizable loadStyles logic. e.g. for server side rendering application
83-
* @param {(processedStyles: string, rawStyles?: string | ThemableArray) => void}
82+
* @param {(processedStyles: string, rawStyles?: string | ThemableArray) => void}
8483
* a loadStyles callback that gets called when styles are loaded or reloaded
8584
*/
8685
export function configureLoadStyles(
87-
loadStyles: (processedStyles: string, rawStyles?: string | ThemableArray) => void
86+
loadStyles: ((processedStyles: string, rawStyles?: string | ThemableArray) => void) | undefined
8887
): void {
8988
_themeState.loadStyles = loadStyles;
9089
}
@@ -110,7 +109,7 @@ function applyThemableStyles(stylesArray: ThemableArray, styleRecord?: IStyleRec
110109
* replaced.
111110
* @param {theme} theme JSON object of theme tokens to values.
112111
*/
113-
export function loadTheme(theme: ITheme): void {
112+
export function loadTheme(theme: ITheme | undefined): void {
114113
_themeState.theme = theme;
115114

116115
// reload styles.
@@ -145,7 +144,7 @@ function reloadStyles(): void {
145144
* Find theme tokens and replaces them with provided theme values.
146145
* @param {string} styles Tokenized styles to fix.
147146
*/
148-
export function detokenize(styles: string): string {
147+
export function detokenize(styles: string | undefined): string | undefined {
149148
if (styles) {
150149
styles = resolveThemableArray(splitStyles(styles));
151150
}
@@ -159,36 +158,29 @@ export function detokenize(styles: string): string {
159158
*/
160159
function resolveThemableArray(splitStyleArray: ThemableArray): string {
161160
const { theme }: IThemeState = _themeState;
162-
let resolvedCss: string;
163-
if (splitStyleArray) {
164-
// Resolve the array of theming instructions to an array of strings.
165-
// Then join the array to produce the final CSS string.
166-
const resolvedArray: string[] = splitStyleArray.map((currentValue: IThemingInstruction) => {
167-
const themeSlot: string = currentValue.theme;
168-
if (themeSlot) {
169-
// A theming annotation. Resolve it.
170-
const themedValue: string = theme ? theme[themeSlot] : undefined;
171-
const defaultValue: string = currentValue.defaultValue;
172-
173-
// Warn to console if we hit an unthemed value even when themes are provided.
174-
// Allow the themedValue to be undefined to explicitly request the default value.
175-
if (theme && !themedValue && console && !(themeSlot in theme)) {
176-
/* tslint:disable: max-line-length */
177-
console.warn(`Theming value not provided for "${themeSlot}". Falling back to "${defaultValue || 'inherit'}".`);
178-
/* tslint:enable: max-line-length */
179-
}
180-
181-
return themedValue || defaultValue || 'inherit';
182-
} else {
183-
// A non-themable string. Preserve it.
184-
return currentValue.rawString;
161+
// Resolve the array of theming instructions to an array of strings.
162+
// Then join the array to produce the final CSS string.
163+
const resolvedArray: (string | undefined)[] = (splitStyleArray || []).map((currentValue: IThemingInstruction) => {
164+
const themeSlot: string | undefined = currentValue.theme;
165+
if (themeSlot) {
166+
// A theming annotation. Resolve it.
167+
const themedValue: string | undefined = theme ? theme[themeSlot] : undefined;
168+
const defaultValue: string = currentValue.defaultValue || 'inherit';
169+
170+
// Warn to console if we hit an unthemed value even when themes are provided, unless "DEBUG" is false
171+
// Allow the themedValue to be undefined to explicitly request the default value.
172+
if (theme && !themedValue && console && !(themeSlot in theme) && (typeof DEBUG === 'undefined' || DEBUG)) {
173+
console.warn(`Theming value not provided for "${themeSlot}". Falling back to "${defaultValue}".`);
185174
}
186-
});
187175

188-
resolvedCss = resolvedArray.join('');
189-
}
176+
return themedValue || defaultValue;
177+
} else {
178+
// A non-themable string. Preserve it.
179+
return currentValue.rawString;
180+
}
181+
});
190182

191-
return resolvedCss;
183+
return resolvedArray.join('');
192184
}
193185

194186
/**
@@ -199,7 +191,7 @@ export function splitStyles(styles: string): ThemableArray {
199191
const result: ThemableArray = [];
200192
if (styles) {
201193
let pos: number = 0; // Current position in styles.
202-
let tokenMatch: RegExpExecArray;
194+
let tokenMatch: RegExpExecArray | null; // tslint:disable-line:no-null-keyword
203195
while (tokenMatch = _themeTokenRegex.exec(styles)) {
204196
const matchIndex: number = tokenMatch.index;
205197
if (matchIndex > pos) {
@@ -262,9 +254,10 @@ function registerStyles(styleArray: ThemableArray, styleRecord?: IStyleRecord):
262254
*/
263255
function registerStylesIE(styleArray: ThemableArray, styleRecord?: IStyleRecord): void {
264256
const head: HTMLHeadElement = document.getElementsByTagName('head')[0];
265-
let { lastStyleElement, registeredStyles }: IThemeState = _themeState;
257+
const registeredStyles: IStyleRecord[] = _themeState.registeredStyles;
258+
let lastStyleElement: IExtendedHtmlStyleElement = _themeState.lastStyleElement;
266259

267-
const stylesheet: IStyleSheet = lastStyleElement ? lastStyleElement.styleSheet : undefined;
260+
const stylesheet: IStyleSheet | undefined = lastStyleElement ? lastStyleElement.styleSheet : undefined;
268261
const lastStyleContent: string = stylesheet ? stylesheet.cssText : '';
269262
let lastRegisteredStyle: IStyleRecord = registeredStyles[registeredStyles.length - 1];
270263
const resolvedStyleText: string = resolveThemableArray(styleArray);

‎src/tests.js‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

src/index.test.ts renamed to src/tests/index.test.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
/// <reference types="mocha" />
2+
13
import { expect } from 'chai';
24
import {
35
detokenize,
@@ -6,7 +8,7 @@ import {
68
loadStyles,
79
configureLoadStyles,
810
IThemingInstruction
9-
} from './index';
11+
} from './../index';
1012

1113
describe('detokenize', () => {
1214
it('handles colors', () => {
@@ -67,7 +69,7 @@ describe('detokenize', () => {
6769

6870
it('passes the styles to loadStyles override callback', () => {
6971
const expected: string = 'xxx.foo { color: #FFF }xxx';
70-
let subject: string;
72+
let subject: string | undefined = undefined;
7173

7274
const callback: (str: string) => void = (str: string) => {
7375
subject = 'xxx' + str + 'xxx';

‎tsconfig.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
{
22
"compilerOptions": {
33
"target": "es5",
4+
"forceConsistentCasingInFileNames": true,
45
"module": "commonjs",
56
"jsx": "react",
67
"declaration": true,
78
"sourceMap": true,
89
"experimentalDecorators": true,
9-
"noEmitOnError": false,
10-
"moduleResolution": "node"
10+
"types": [
11+
"webpack-env"
12+
],
13+
"strictNullChecks": true
1114
}
1215
}

‎tsd.json‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

0 commit comments

Comments
 (0)