Merge pull request #17963 from NeekSandhu/NeekSandhu-css-modules

Add types for css-modules

types/css-modules/css-modules-tests.ts

@@ -0,0 +1,21 @@
+import styles from './main.sass';
+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 = `<div style="${styles.toString()}"></div>`;
+        // or as scoped unique classes, also latest typescript versions allow prop access using dot like styles.darkUI instead of styles['darkUI']
+        return `
+            <div class="${classNames((this.theme === 'dark') ?
+                styles.darkUI :
+                styles.lightUI.toString())}">
+            </div>
+        `;
+    }
+}

types/css-modules/index.d.ts

@@ -0,0 +1,38 @@
+// Type definitions for css-modules 1.0
+// Project: https://github.com/css-modules/css-modules
+// Definitions by: NeekSandhu <https://github.com/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' {
+    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;
+}

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"
+    ]
+}

types/css-modules/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }