From 30a2c6bb27c92c5ced9261e7519fd76e820d9012 Mon Sep 17 00:00:00 2001 From: Denis Augsburger Date: Fri, 23 Feb 2018 10:43:32 +0100 Subject: [PATCH 1/4] Expand jss typings to represent SheetsRegistry --- types/jss/index.d.ts | 15 ++++++++++- types/jss/jss-tests.ts | 58 +++++++++++++++++++++++++++++++++--------- 2 files changed, 60 insertions(+), 13 deletions(-) diff --git a/types/jss/index.d.ts b/types/jss/index.d.ts index d0136216ed..dfd705710f 100644 --- a/types/jss/index.d.ts +++ b/types/jss/index.d.ts @@ -5,6 +5,10 @@ // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.2 +export interface toCSSOptions { + indent?: number; +} + export interface Rule { className: string; selector: string; @@ -62,7 +66,7 @@ export interface StyleSheet { /** * Convert rules to a CSS string. */ - toString(options?: { indent?: number }): string; + toString(options?: toCSSOptions): string; } export type GenerateClassName = (rule: Rule, sheet?: StyleSheet) => string; export interface Style { @@ -96,6 +100,15 @@ export interface RuleOptions { index: number; className: string; } +export declare class SheetsRegistry { + constructor(); + registry: ReadonlyArray>; + index(): number; + add(sheet: StyleSheet): void; + reset(): void; + remove(sheet: StyleSheet): void; + toString(options?: toCSSOptions): string; +} declare class JSS { constructor(options?: Partial); createStyleSheet( diff --git a/types/jss/jss-tests.ts b/types/jss/jss-tests.ts index 0cf3f51350..948dca39a2 100644 --- a/types/jss/jss-tests.ts +++ b/types/jss/jss-tests.ts @@ -2,7 +2,8 @@ import { create as createJSS, - default as sharedInstance + SheetsRegistry, + default as sharedInstance, } from 'jss'; const jss = createJSS().setup({}); @@ -21,28 +22,30 @@ const styleSheet = jss.createStyleSheet( { link: true, } -).attach(); +); -styleSheet.classes.container; // $ExpectType string -styleSheet.classes.ruleWithMockObservable; // $ExpectType string +const attachedStyleSheet = styleSheet.attach(); -const rule = styleSheet.addRule('dynamicRule', { color: 'indigo' }); +attachedStyleSheet.classes.container; // $ExpectType string +attachedStyleSheet.classes.ruleWithMockObservable; // $ExpectType string + +const rule = attachedStyleSheet.addRule('dynamicRule', { color: 'indigo' }); rule.prop('border-radius', 5).prop('color'); // $ExpectType string -styleSheet.classes.dynamicRule; // $ExpectType string +attachedStyleSheet.classes.dynamicRule; // $ExpectType string -styleSheet.deleteRule('dynamicRule'); +attachedStyleSheet.deleteRule('dynamicRule'); // test that `addRule` supports the shorthand signature -const dynamicRule = styleSheet.addRule({ color: 'red' }); +const dynamicRule = attachedStyleSheet.addRule({ color: 'red' }); const div = document.createElement('div'); dynamicRule.applyTo(div); -const containerRule = styleSheet.getRule('container'); +const containerRule = attachedStyleSheet.getRule('container'); const containerJSON = containerRule.toJSON(); -const css = styleSheet.toString(); +const css = attachedStyleSheet.toString(); -styleSheet.addRules({ +attachedStyleSheet.addRules({ rule1: { fontFamily: 'Roboto', color: '#FFFFFF', @@ -53,10 +56,41 @@ styleSheet.addRules({ }, }); -styleSheet.detach(); +attachedStyleSheet.detach(); sharedInstance.createStyleSheet({ container: { background: '#000099', } }); + +/* SheetsRegistry test */ +const sheetsRegistry = new SheetsRegistry(); +sheetsRegistry.add(styleSheet); + +const secondStyleSheet = jss.createStyleSheet( + { + ruleWithMockObservable: { + subscribe() {} + }, + container2: { + display: 'flex', + width: 150, + opacity: .8, + }, + }, + { + link: true, + } +); + +sheetsRegistry.add(secondStyleSheet); +sheetsRegistry.registry.length; // $ExpectType number +sheetsRegistry.remove(secondStyleSheet); + +sheetsRegistry.index(); // $ExpectType number +sheetsRegistry.toString(); // $ExpectType string +// With css options +sheetsRegistry.toString({indent: 5}); // $ExpectType string + +sheetsRegistry.reset(); From f3e5f751b71b523783671302a3f838a26f7f143f Mon Sep 17 00:00:00 2001 From: Denis Augsburger Date: Tue, 27 Feb 2018 09:58:21 +0100 Subject: [PATCH 2/4] Rename interface --- types/jss/index.d.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/types/jss/index.d.ts b/types/jss/index.d.ts index dfd705710f..e106a70c74 100644 --- a/types/jss/index.d.ts +++ b/types/jss/index.d.ts @@ -5,7 +5,7 @@ // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.2 -export interface toCSSOptions { +export interface ToCssOptions { indent?: number; } @@ -66,7 +66,7 @@ export interface StyleSheet { /** * Convert rules to a CSS string. */ - toString(options?: toCSSOptions): string; + toString(options?: ToCssOptions): string; } export type GenerateClassName = (rule: Rule, sheet?: StyleSheet) => string; export interface Style { @@ -107,7 +107,7 @@ export declare class SheetsRegistry { add(sheet: StyleSheet): void; reset(): void; remove(sheet: StyleSheet): void; - toString(options?: toCSSOptions): string; + toString(options?: ToCssOptions): string; } declare class JSS { constructor(options?: Partial); From 6b53e1fbde3df53a8c2b2feae2188e25e7e970ee Mon Sep 17 00:00:00 2001 From: Denis Augsburger Date: Tue, 27 Feb 2018 10:10:56 +0100 Subject: [PATCH 3/4] Index as a function which returns a number --- types/jss/jss-tests.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/types/jss/jss-tests.ts b/types/jss/jss-tests.ts index 948dca39a2..80f4c1e94f 100644 --- a/types/jss/jss-tests.ts +++ b/types/jss/jss-tests.ts @@ -89,6 +89,7 @@ sheetsRegistry.registry.length; // $ExpectType number sheetsRegistry.remove(secondStyleSheet); sheetsRegistry.index(); // $ExpectType number +sheetsRegistry.index; // $ExpectType () => number sheetsRegistry.toString(); // $ExpectType string // With css options sheetsRegistry.toString({indent: 5}); // $ExpectType string From d70bcc668aff1d50607e94bdc73672728b7afab8 Mon Sep 17 00:00:00 2001 From: Denis Augsburger Date: Tue, 27 Feb 2018 10:48:05 +0100 Subject: [PATCH 4/4] Change to represent get index --- types/jss/index.d.ts | 2 +- types/jss/jss-tests.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/types/jss/index.d.ts b/types/jss/index.d.ts index e106a70c74..0f77605b2c 100644 --- a/types/jss/index.d.ts +++ b/types/jss/index.d.ts @@ -103,7 +103,7 @@ export interface RuleOptions { export declare class SheetsRegistry { constructor(); registry: ReadonlyArray>; - index(): number; + readonly index: number; add(sheet: StyleSheet): void; reset(): void; remove(sheet: StyleSheet): void; diff --git a/types/jss/jss-tests.ts b/types/jss/jss-tests.ts index 80f4c1e94f..a5c6f34126 100644 --- a/types/jss/jss-tests.ts +++ b/types/jss/jss-tests.ts @@ -88,8 +88,8 @@ sheetsRegistry.add(secondStyleSheet); sheetsRegistry.registry.length; // $ExpectType number sheetsRegistry.remove(secondStyleSheet); -sheetsRegistry.index(); // $ExpectType number -sheetsRegistry.index; // $ExpectType () => number +sheetsRegistry.index; // $ExpectType number +sheetsRegistry.index = 5; // $ExpectError sheetsRegistry.toString(); // $ExpectType string // With css options sheetsRegistry.toString({indent: 5}); // $ExpectType string