Merge pull request #21851 from appsforartists/jss

Add @types/jss
2026-10-05 07:17:04 +00:00 · 2017-12-06 13:37:30 -08:00
parent 8f8dda2fd4 990f8c8405
commit cd61a65539
8 changed files with 352 additions and 138 deletions
@@ -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();
@@ -0,0 +1,50 @@
+// Type definitions for jss v0.6
+// Project: https://github.com/Box9/jss
+// Definitions by: Valentin Robert <https://github.com/Ptival>
+// 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;
@@ -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"
+    ]
+}
@@ -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
+    }
+}
@@ -1,50 +1,127 @@
-// Type definitions for jss v0.6
-// Project: https://github.com/Box9/jss
-// Definitions by: Valentin Robert <https://github.com/Ptival>
+// Type definitions for jss 9.3
+// Project: https://github.com/cssinjs/jss#readme
+// Definitions by: Brenton Simpson <https://github.com/appsforartists>
+//                 Oleg Slobodskoi <https://github.com/kof>
 // 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<T> {
+	// 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<RuleOptions>): Rule;
+	addRule(name: string, style: Style, options?: Partial<RuleOptions>): Rule;
+	/**
+	 * Create and add rules.
+	 * Will render also after Style Sheet was rendered the first time.
+	 */
+	addRules(styles: { [key: string]: Style }, options?: Partial<RuleOptions>): 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<T> = (rule: Rule, sheet?: StyleSheet<T>) => 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<any>): void,
+		onProcessStyle(style: Style, rule: Rule, sheet: StyleSheet<any>): Style,
+		onProcessSheet(sheet: StyleSheet<any>): void,
+		onChangeValue(value: any, prop: string, rule: Rule): any,
+		onUpdate(data: {}, rule: Rule, sheet: StyleSheet<any>): void,
+	}>;
+}
+export interface JSSOptions {
+	createGenerateClassName(): GenerateClassName<any>;
+	plugins: ReadonlyArray<JSSPlugin>;
+	virtual: boolean;
+	insertionPoint: string | HTMLElement;
+}
+export interface RuleFactoryOptions {
+	selector: string;
+	classes: { [key: string]: string };
+	sheet: StyleSheet<any>;
+	index: number;
+	jss: JSS;
+	generateClassName: GenerateClassName<any>;
+}
+export interface RuleOptions {
+	index: number;
+	className: string;
+}
+declare class JSS {
+	constructor(options?: Partial<JSSOptions>);
+	createStyleSheet<T>(
+		styles: T,
+		options?: Partial<{
+			media: string,
+			meta: string,
+			link: boolean,
+			element: HTMLStyleElement,
+			index: number,
+			generateClassName: GenerateClassName<T>,
+			classNamePrefix: string,
+		}>,
+	): StyleSheet<T>;
+	removeStyleSheet(sheet: StyleSheet<any>): this;
+	setup(options?: Partial<JSSOptions>): this;
+	use(plugin: JSSPlugin): this;
+	createRule(style: Style, options?: Partial<RuleFactoryOptions>): Rule;
+	createRule(name: string, style: Style, options?: Partial<RuleFactoryOptions>): Rule;
+}
+/**
+ * Creates a new instance of JSS.
+ */
+export function create(options?: Partial<JSSOptions>): JSS;
+declare const sharedInstance: JSS;
+/**
+ * A global JSS instance.
+ */
+export default sharedInstance;
@@ -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',
+	}
+});
@@ -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"
    ]
-}
+}
@@ -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" }