From c55bd19de2162ed180d827788f6c3aee55292258 Mon Sep 17 00:00:00 2001 From: Brenton Simpson Date: Wed, 29 Nov 2017 16:24:37 -0800 Subject: [PATCH 1/2] Renamed jss to dvtng-jss Fixes #19974 The type definitions in `@types/jss` don't match the `jss` package on npm, which has nearly 400k monthly downloads. I'm not sure where to put the definitions currently squatting at `jss`, as it [doesn't appear that](https://www.npmjs.com/~dvtng) @dvtng has published them. --- types/{jss/jss-tests.ts => dvtng-jss/dvtng-jss-tests.ts} | 0 types/{jss => dvtng-jss}/index.d.ts | 0 types/{jss => dvtng-jss}/tsconfig.json | 4 ++-- types/{jss => dvtng-jss}/tslint.json | 0 4 files changed, 2 insertions(+), 2 deletions(-) rename types/{jss/jss-tests.ts => dvtng-jss/dvtng-jss-tests.ts} (100%) rename types/{jss => dvtng-jss}/index.d.ts (100%) rename types/{jss => dvtng-jss}/tsconfig.json (93%) rename types/{jss => dvtng-jss}/tslint.json (100%) diff --git a/types/jss/jss-tests.ts b/types/dvtng-jss/dvtng-jss-tests.ts similarity index 100% rename from types/jss/jss-tests.ts rename to types/dvtng-jss/dvtng-jss-tests.ts diff --git a/types/jss/index.d.ts b/types/dvtng-jss/index.d.ts similarity index 100% rename from types/jss/index.d.ts rename to types/dvtng-jss/index.d.ts diff --git a/types/jss/tsconfig.json b/types/dvtng-jss/tsconfig.json similarity index 93% rename from types/jss/tsconfig.json rename to types/dvtng-jss/tsconfig.json index d22eb9d75e..3d47f98d9f 100644 --- a/types/jss/tsconfig.json +++ b/types/dvtng-jss/tsconfig.json @@ -18,6 +18,6 @@ }, "files": [ "index.d.ts", - "jss-tests.ts" + "dvtng-jss-tests.ts" ] -} \ No newline at end of file +} diff --git a/types/jss/tslint.json b/types/dvtng-jss/tslint.json similarity index 100% rename from types/jss/tslint.json rename to types/dvtng-jss/tslint.json From 990f8c840593666d7bb418487e4fb8fa10e55fde Mon Sep 17 00:00:00 2001 From: Brenton Simpson Date: Wed, 29 Nov 2017 17:36:38 -0800 Subject: [PATCH 2/2] Added types for jss These are rudimentary type definitions for `jss`. I optimized for utility over thoroughness - they can probably be improved. Closes https://github.com/cssinjs/jss/issues/362 (and might close https://github.com/cssinjs/jss/issues/361) --- types/jss/index.d.ts | 127 ++++++++++++++++++++++++++++++++++++++++ types/jss/jss-tests.ts | 62 ++++++++++++++++++++ types/jss/tsconfig.json | 24 ++++++++ types/jss/tslint.json | 1 + 4 files changed, 214 insertions(+) create mode 100644 types/jss/index.d.ts create mode 100644 types/jss/jss-tests.ts create mode 100644 types/jss/tsconfig.json create mode 100644 types/jss/tslint.json diff --git a/types/jss/index.d.ts b/types/jss/index.d.ts new file mode 100644 index 0000000000..d0136216ed --- /dev/null +++ b/types/jss/index.d.ts @@ -0,0 +1,127 @@ +// 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 + +export interface Rule { + className: string; + selector: string; + applyTo(element: HTMLElement): void; + prop(key: string): string; + prop(key: string, value: any): this; + toJSON(): string; +} +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; +} +export type GenerateClassName = (rule: Rule, sheet?: StyleSheet) => string; +export interface Style { + [key: string]: any; +} +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 new file mode 100644 index 0000000000..0cf3f51350 --- /dev/null +++ b/types/jss/jss-tests.ts @@ -0,0 +1,62 @@ +// API docs at http://cssinjs.org/js-api + +import { + create as createJSS, + default as sharedInstance +} from 'jss'; + +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, + }, +}); + +styleSheet.detach(); + +sharedInstance.createStyleSheet({ + container: { + background: '#000099', + } +}); diff --git a/types/jss/tsconfig.json b/types/jss/tsconfig.json new file mode 100644 index 0000000000..f34791192c --- /dev/null +++ b/types/jss/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "jss-tests.ts" + ] +} diff --git a/types/jss/tslint.json b/types/jss/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/jss/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }