From 4eb2295312495f57b8405eea37f57165c8ddae17 Mon Sep 17 00:00:00 2001 From: Neek Sandhu Date: Tue, 11 Jul 2017 22:17:11 -0700 Subject: [PATCH 1/5] Add types for css-modules Enables users to `import styles from '../main.css'` in your TypeScript files. From there on, assuming user is using `webpack` with `css-loader`, they can also do `styles.toString()` or `classNames(styles.productLabel...` without any squiggly lines, instead works with intellisense beautifully (both of ops have `string` as return type) --- types/css-modules/css-modules-tests.ts | 21 +++++++++++++++++++++ types/css-modules/index.d.ts | 16 ++++++++++++++++ types/css-modules/tsconfig.json | 22 ++++++++++++++++++++++ 3 files changed, 59 insertions(+) create mode 100644 types/css-modules/css-modules-tests.ts create mode 100644 types/css-modules/index.d.ts create mode 100644 types/css-modules/tsconfig.json diff --git a/types/css-modules/css-modules-tests.ts b/types/css-modules/css-modules-tests.ts new file mode 100644 index 0000000000..9456029319 --- /dev/null +++ b/types/css-modules/css-modules-tests.ts @@ -0,0 +1,21 @@ +import styles from './main.css' +import * as classNames from 'classnames' + +class App { + private theme: string + constructor(theme: string) { + this.theme = theme + } + + render() { + // as a style tag (using webpack's css-loader) + const tpl = `
` + // or as scoped unique classes, also latest typescript versions allow prop access using dot like styles.darkUI instead of styles['darkUI'] + return ` +
+
+ ` + } +} diff --git a/types/css-modules/index.d.ts b/types/css-modules/index.d.ts new file mode 100644 index 0000000000..1e9a21823b --- /dev/null +++ b/types/css-modules/index.d.ts @@ -0,0 +1,16 @@ +declare module '*.css' { + type Stringifyable = { + /** + * Stringifies the imported stylesheet for use with inline style tags + */ + toString: () => string + } + type SelectorNode = { + /** + * Returns the specific selector from imported stylesheet as string + */ + [key: string]: string + } + const styles: SelectorNode & Stringifyable + export default styles +} \ No newline at end of file diff --git a/types/css-modules/tsconfig.json b/types/css-modules/tsconfig.json new file mode 100644 index 0000000000..aff10df5a6 --- /dev/null +++ b/types/css-modules/tsconfig.json @@ -0,0 +1,22 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": false, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "css-modules-tests.ts" + ] +} \ No newline at end of file From ead0824c8767750ce7995acc4a93aee1761532bb Mon Sep 17 00:00:00 2001 From: Neek Sandhu Date: Fri, 14 Jul 2017 19:15:34 -0700 Subject: [PATCH 2/5] Add DefinitelyTyped headers --- types/css-modules/index.d.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/types/css-modules/index.d.ts b/types/css-modules/index.d.ts index 1e9a21823b..8b65145a52 100644 --- a/types/css-modules/index.d.ts +++ b/types/css-modules/index.d.ts @@ -1,3 +1,8 @@ +// Type definitions for css-modules 1506 +// Project: https://github.com/css-modules/css-modules +// Definitions by: NeekSandhu +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + declare module '*.css' { type Stringifyable = { /** @@ -13,4 +18,4 @@ declare module '*.css' { } const styles: SelectorNode & Stringifyable export default styles -} \ No newline at end of file +} From 868ee465adb872d1971ba34063072477bb4509d4 Mon Sep 17 00:00:00 2001 From: Neek Sandhu Date: Mon, 17 Jul 2017 17:03:36 -0700 Subject: [PATCH 3/5] Create tslint.json --- types/css-modules/tslint.json | 1 + 1 file changed, 1 insertion(+) create mode 100644 types/css-modules/tslint.json diff --git a/types/css-modules/tslint.json b/types/css-modules/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/css-modules/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" } From 1c3089e2a8d4cbc879a1e2bcb11a8d27cd040f2d Mon Sep 17 00:00:00 2001 From: Neek Sandhu Date: Mon, 17 Jul 2017 23:02:35 -0700 Subject: [PATCH 4/5] Update index.d.ts Add support for css pre-processors like `sass`, `less` etc. --- types/css-modules/index.d.ts | 47 ++++++++++++++++++++++++------------ 1 file changed, 32 insertions(+), 15 deletions(-) diff --git a/types/css-modules/index.d.ts b/types/css-modules/index.d.ts index 8b65145a52..7d7bd52abd 100644 --- a/types/css-modules/index.d.ts +++ b/types/css-modules/index.d.ts @@ -1,21 +1,38 @@ -// Type definitions for css-modules 1506 +// Type definitions for css-modules 1.0 // Project: https://github.com/css-modules/css-modules // Definitions by: NeekSandhu // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.3 + +interface Stringifyable { + /** + * Stringifies the imported stylesheet for use with inline style tags + */ + toString(): string; +} +interface SelectorNode { + /** + * Returns the specific selector from imported stylesheet as string + */ + [key: string]: string; +} declare module '*.css' { - type Stringifyable = { - /** - * Stringifies the imported stylesheet for use with inline style tags - */ - toString: () => string - } - type SelectorNode = { - /** - * Returns the specific selector from imported stylesheet as string - */ - [key: string]: string - } - const styles: SelectorNode & Stringifyable - export default styles + const styles: SelectorNode & Stringifyable; + export default styles; +} + +declare module '*.scss' { + const styles: SelectorNode & Stringifyable; + export default styles; +} + +declare module '*.sass' { + const styles: SelectorNode & Stringifyable; + export default styles; +} + +declare module '*.less' { + const styles: SelectorNode & Stringifyable; + export default styles; } From ed7bf7126e9bb90bceeaa36324aa8d01692b89dc Mon Sep 17 00:00:00 2001 From: Neek Sandhu Date: Mon, 17 Jul 2017 23:03:38 -0700 Subject: [PATCH 5/5] Fulfill compliance with tslint.json --- types/css-modules/css-modules-tests.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/types/css-modules/css-modules-tests.ts b/types/css-modules/css-modules-tests.ts index 9456029319..5876f5beae 100644 --- a/types/css-modules/css-modules-tests.ts +++ b/types/css-modules/css-modules-tests.ts @@ -1,21 +1,21 @@ -import styles from './main.css' -import * as classNames from 'classnames' +import styles from './main.sass'; +import * as classNames from 'classnames'; class App { - private theme: string + private theme: string; constructor(theme: string) { - this.theme = theme + this.theme = theme; } render() { // as a style tag (using webpack's css-loader) - const tpl = `
` + const tpl = `
`; // or as scoped unique classes, also latest typescript versions allow prop access using dot like styles.darkUI instead of styles['darkUI'] return ` -
+
- ` + `; } }