diff --git a/types/jss/index.d.ts b/types/jss/index.d.ts index d0136216ed..0f77605b2c 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>; + readonly 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..a5c6f34126 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,42 @@ 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.index = 5; // $ExpectError +sheetsRegistry.toString(); // $ExpectType string +// With css options +sheetsRegistry.toString({indent: 5}); // $ExpectType string + +sheetsRegistry.reset();