diff --git a/types/dvtng-jss/dvtng-jss-tests.ts b/types/dvtng-jss/dvtng-jss-tests.ts new file mode 100644 index 0000000000..2863bbfb66 --- /dev/null +++ b/types/dvtng-jss/dvtng-jss-tests.ts @@ -0,0 +1,16 @@ + + +jss.set('.demo', { + 'font-size': '15px', + 'color': 'red' +}); + +jss.get('.demo'); + +jss.get(); + +jss.getAll('.demo'); + +jss.remove('.demo'); + +jss.remove(); diff --git a/types/dvtng-jss/index.d.ts b/types/dvtng-jss/index.d.ts new file mode 100644 index 0000000000..18278d80d1 --- /dev/null +++ b/types/dvtng-jss/index.d.ts @@ -0,0 +1,50 @@ +// Type definitions for jss v0.6 +// Project: https://github.com/Box9/jss +// Definitions by: Valentin Robert +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +interface Properties { + [name: string]: string; +} + +interface Selectors { + [selector: string]: Properties; +} + +interface JSS { + /** + * Retrieve all rules added via JSS, organized by selectors + */ + get(): Selectors; + + /** + * Retrieve rules added via JSS for a given selector + * @param s CSS selector + */ + get(s: string): Properties; + + /** + * Retrieve all rules specified for a given selector (not necessarily added via JSS) + * @param s CSS selector + */ + getAll(s: string): Properties; + + /** + * Remove all rules added via JSS + */ + remove(): void; + + /** + * Remove all rules added via JSS for the given selector + */ + remove(s: string): void; + + /** + * Add or extend an existing rule + * @param s CSS selector + * @param p CSS properties + */ + set(s: string, p: Properties): void; +} + +declare var jss: JSS; diff --git a/types/dvtng-jss/tsconfig.json b/types/dvtng-jss/tsconfig.json new file mode 100644 index 0000000000..3d47f98d9f --- /dev/null +++ b/types/dvtng-jss/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": false, + "strictFunctionTypes": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "dvtng-jss-tests.ts" + ] +} diff --git a/types/dvtng-jss/tslint.json b/types/dvtng-jss/tslint.json new file mode 100644 index 0000000000..a41bf5d19a --- /dev/null +++ b/types/dvtng-jss/tslint.json @@ -0,0 +1,79 @@ +{ + "extends": "dtslint/dt.json", + "rules": { + "adjacent-overload-signatures": false, + "array-type": false, + "arrow-return-shorthand": false, + "ban-types": false, + "callable-types": false, + "comment-format": false, + "dt-header": false, + "eofline": false, + "export-just-namespace": false, + "import-spacing": false, + "interface-name": false, + "interface-over-type-literal": false, + "jsdoc-format": false, + "max-line-length": false, + "member-access": false, + "new-parens": false, + "no-any-union": false, + "no-boolean-literal-compare": false, + "no-conditional-assignment": false, + "no-consecutive-blank-lines": false, + "no-construct": false, + "no-declare-current-package": false, + "no-duplicate-imports": false, + "no-duplicate-variable": false, + "no-empty-interface": false, + "no-for-in-array": false, + "no-inferrable-types": false, + "no-internal-module": false, + "no-irregular-whitespace": false, + "no-mergeable-namespace": false, + "no-misused-new": false, + "no-namespace": false, + "no-object-literal-type-assertion": false, + "no-padding": false, + "no-redundant-jsdoc": false, + "no-redundant-jsdoc-2": false, + "no-redundant-undefined": false, + "no-reference-import": false, + "no-relative-import-in-test": false, + "no-self-import": false, + "no-single-declare-module": false, + "no-string-throw": false, + "no-unnecessary-callback-wrapper": false, + "no-unnecessary-class": false, + "no-unnecessary-generics": false, + "no-unnecessary-qualifier": false, + "no-unnecessary-type-assertion": false, + "no-useless-files": false, + "no-var-keyword": false, + "no-var-requires": false, + "no-void-expression": false, + "no-trailing-whitespace": false, + "object-literal-key-quotes": false, + "object-literal-shorthand": false, + "one-line": false, + "one-variable-per-declaration": false, + "only-arrow-functions": false, + "prefer-conditional-expression": false, + "prefer-const": false, + "prefer-declare-function": false, + "prefer-for-of": false, + "prefer-method-signature": false, + "prefer-template": false, + "radix": false, + "semicolon": false, + "space-before-function-paren": false, + "space-within-parens": false, + "strict-export-declare-modifiers": false, + "trim-file": false, + "triple-equals": false, + "typedef-whitespace": false, + "unified-signatures": false, + "void-return": false, + "whitespace": false + } +} diff --git a/types/jss/index.d.ts b/types/jss/index.d.ts index 18278d80d1..d0136216ed 100644 --- a/types/jss/index.d.ts +++ b/types/jss/index.d.ts @@ -1,50 +1,127 @@ -// Type definitions for jss v0.6 -// Project: https://github.com/Box9/jss -// Definitions by: Valentin Robert +// Type definitions for jss 9.3 +// Project: https://github.com/cssinjs/jss#readme +// Definitions by: Brenton Simpson +// Oleg Slobodskoi // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.2 -interface Properties { - [name: string]: string; +export interface Rule { + className: string; + selector: string; + applyTo(element: HTMLElement): void; + prop(key: string): string; + prop(key: string, value: any): this; + toJSON(): string; } - -interface Selectors { - [selector: string]: Properties; +export interface StyleSheet { + // Gives auto-completion on the rules declared in `createStyleSheet` without + // causing errors for rules added dynamically after creation. + classes: { + [K in keyof T]: string; + } & { [key: string]: string }; + options: any; + linked: boolean; + attached: boolean; + /** + * Attach renderable to the render tree. + */ + attach(): this; + /** + * Remove renderable from render tree. + */ + detach(): this; + /** + * Add a rule to the current stylesheet. + * Will insert a rule also after the stylesheet has been rendered first time. + */ + addRule(style: Style, options?: Partial): Rule; + addRule(name: string, style: Style, options?: Partial): Rule; + /** + * Create and add rules. + * Will render also after Style Sheet was rendered the first time. + */ + addRules(styles: { [key: string]: Style }, options?: Partial): Rule[]; + /** + * Get a rule by name. + */ + getRule(name: string): Rule; + /** + * Delete a rule by name. + * Returns `true`: if rule has been deleted from the DOM. + */ + deleteRule(name: string): boolean; + /** + * Get index of a rule. + */ + indexOf(rule: Rule): number; + /** + * Update the function values with a new data. + */ + update(data?: {}): this; + update(name: string, data: {}): this; + /** + * Convert rules to a CSS string. + */ + toString(options?: { indent?: number }): string; } - -interface JSS { - /** - * Retrieve all rules added via JSS, organized by selectors - */ - get(): Selectors; - - /** - * Retrieve rules added via JSS for a given selector - * @param s CSS selector - */ - get(s: string): Properties; - - /** - * Retrieve all rules specified for a given selector (not necessarily added via JSS) - * @param s CSS selector - */ - getAll(s: string): Properties; - - /** - * Remove all rules added via JSS - */ - remove(): void; - - /** - * Remove all rules added via JSS for the given selector - */ - remove(s: string): void; - - /** - * Add or extend an existing rule - * @param s CSS selector - * @param p CSS properties - */ - set(s: string, p: Properties): void; +export type GenerateClassName = (rule: Rule, sheet?: StyleSheet) => string; +export interface Style { + [key: string]: any; } - -declare var jss: JSS; +export interface JSSPlugin { + [key: string]: () => Partial<{ + onCreateRule(name: string, style: Style, options: RuleOptions): Rule, + onProcessRule(rule: Rule, sheet: StyleSheet): void, + onProcessStyle(style: Style, rule: Rule, sheet: StyleSheet): Style, + onProcessSheet(sheet: StyleSheet): void, + onChangeValue(value: any, prop: string, rule: Rule): any, + onUpdate(data: {}, rule: Rule, sheet: StyleSheet): void, + }>; +} +export interface JSSOptions { + createGenerateClassName(): GenerateClassName; + plugins: ReadonlyArray; + virtual: boolean; + insertionPoint: string | HTMLElement; +} +export interface RuleFactoryOptions { + selector: string; + classes: { [key: string]: string }; + sheet: StyleSheet; + index: number; + jss: JSS; + generateClassName: GenerateClassName; +} +export interface RuleOptions { + index: number; + className: string; +} +declare class JSS { + constructor(options?: Partial); + createStyleSheet( + styles: T, + options?: Partial<{ + media: string, + meta: string, + link: boolean, + element: HTMLStyleElement, + index: number, + generateClassName: GenerateClassName, + classNamePrefix: string, + }>, + ): StyleSheet; + removeStyleSheet(sheet: StyleSheet): this; + setup(options?: Partial): this; + use(plugin: JSSPlugin): this; + createRule(style: Style, options?: Partial): Rule; + createRule(name: string, style: Style, options?: Partial): Rule; +} +/** + * Creates a new instance of JSS. + */ +export function create(options?: Partial): JSS; +declare const sharedInstance: JSS; +/** + * A global JSS instance. + */ +export default sharedInstance; diff --git a/types/jss/jss-tests.ts b/types/jss/jss-tests.ts index 2863bbfb66..0cf3f51350 100644 --- a/types/jss/jss-tests.ts +++ b/types/jss/jss-tests.ts @@ -1,16 +1,62 @@ +// API docs at http://cssinjs.org/js-api +import { + create as createJSS, + default as sharedInstance +} from 'jss'; -jss.set('.demo', { - 'font-size': '15px', - 'color': 'red' +const jss = createJSS().setup({}); + +const styleSheet = jss.createStyleSheet( + { + ruleWithMockObservable: { + subscribe() {} + }, + container: { + display: 'flex', + width: 100, + opacity: .5, + }, + }, + { + link: true, + } +).attach(); + +styleSheet.classes.container; // $ExpectType string +styleSheet.classes.ruleWithMockObservable; // $ExpectType string + +const rule = styleSheet.addRule('dynamicRule', { color: 'indigo' }); +rule.prop('border-radius', 5).prop('color'); // $ExpectType string +styleSheet.classes.dynamicRule; // $ExpectType string + +styleSheet.deleteRule('dynamicRule'); + +// test that `addRule` supports the shorthand signature +const dynamicRule = styleSheet.addRule({ color: 'red' }); + +const div = document.createElement('div'); +dynamicRule.applyTo(div); + +const containerRule = styleSheet.getRule('container'); +const containerJSON = containerRule.toJSON(); +const css = styleSheet.toString(); + +styleSheet.addRules({ + rule1: { + fontFamily: 'Roboto', + color: '#FFFFFF', + }, + rule2: { + fontFamily: 'Inconsolata', + fontSize: 17, + }, }); -jss.get('.demo'); +styleSheet.detach(); -jss.get(); - -jss.getAll('.demo'); - -jss.remove('.demo'); - -jss.remove(); +sharedInstance.createStyleSheet({ + container: { + background: '#000099', + } +}); diff --git a/types/jss/tsconfig.json b/types/jss/tsconfig.json index d22eb9d75e..f34791192c 100644 --- a/types/jss/tsconfig.json +++ b/types/jss/tsconfig.json @@ -2,11 +2,12 @@ "compilerOptions": { "module": "commonjs", "lib": [ - "es6" + "es6", + "dom" ], "noImplicitAny": true, "noImplicitThis": true, - "strictNullChecks": false, + "strictNullChecks": true, "strictFunctionTypes": true, "baseUrl": "../", "typeRoots": [ @@ -20,4 +21,4 @@ "index.d.ts", "jss-tests.ts" ] -} \ No newline at end of file +} diff --git a/types/jss/tslint.json b/types/jss/tslint.json index a41bf5d19a..3db14f85ea 100644 --- a/types/jss/tslint.json +++ b/types/jss/tslint.json @@ -1,79 +1 @@ -{ - "extends": "dtslint/dt.json", - "rules": { - "adjacent-overload-signatures": false, - "array-type": false, - "arrow-return-shorthand": false, - "ban-types": false, - "callable-types": false, - "comment-format": false, - "dt-header": false, - "eofline": false, - "export-just-namespace": false, - "import-spacing": false, - "interface-name": false, - "interface-over-type-literal": false, - "jsdoc-format": false, - "max-line-length": false, - "member-access": false, - "new-parens": false, - "no-any-union": false, - "no-boolean-literal-compare": false, - "no-conditional-assignment": false, - "no-consecutive-blank-lines": false, - "no-construct": false, - "no-declare-current-package": false, - "no-duplicate-imports": false, - "no-duplicate-variable": false, - "no-empty-interface": false, - "no-for-in-array": false, - "no-inferrable-types": false, - "no-internal-module": false, - "no-irregular-whitespace": false, - "no-mergeable-namespace": false, - "no-misused-new": false, - "no-namespace": false, - "no-object-literal-type-assertion": false, - "no-padding": false, - "no-redundant-jsdoc": false, - "no-redundant-jsdoc-2": false, - "no-redundant-undefined": false, - "no-reference-import": false, - "no-relative-import-in-test": false, - "no-self-import": false, - "no-single-declare-module": false, - "no-string-throw": false, - "no-unnecessary-callback-wrapper": false, - "no-unnecessary-class": false, - "no-unnecessary-generics": false, - "no-unnecessary-qualifier": false, - "no-unnecessary-type-assertion": false, - "no-useless-files": false, - "no-var-keyword": false, - "no-var-requires": false, - "no-void-expression": false, - "no-trailing-whitespace": false, - "object-literal-key-quotes": false, - "object-literal-shorthand": false, - "one-line": false, - "one-variable-per-declaration": false, - "only-arrow-functions": false, - "prefer-conditional-expression": false, - "prefer-const": false, - "prefer-declare-function": false, - "prefer-for-of": false, - "prefer-method-signature": false, - "prefer-template": false, - "radix": false, - "semicolon": false, - "space-before-function-paren": false, - "space-within-parens": false, - "strict-export-declare-modifiers": false, - "trim-file": false, - "triple-equals": false, - "typedef-whitespace": false, - "unified-signatures": false, - "void-return": false, - "whitespace": false - } -} +{ "extends": "dtslint/dt.json" }