Examples: with-typings-for-css-modules (#5446)

* added example for using typings-for-css-modules-loader

* Update examples/with-typings-for-css-modules/README.md

* Update examples/with-typings-for-css-modules/README.md

* Update examples/with-typings-for-css-modules/next.config.js

examples/with-typings-for-css-modules/.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "next/babel",
+    "@zeit/next-typescript/babel"
+  ]
+}

examples/with-typings-for-css-modules/README.md

@@ -0,0 +1,44 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-typings-for-css-modules)
+
+# Typings for CSS Modules example
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-typings-for-css-modules with-typings-for-css-modules-app
+# or
+yarn create next-app --example with-typings-for-css-modules with-typings-for-css-modules-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-typings-for-css-modules
+cd with-typings-for-css-modules
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## The idea behind the example
+
+This example shows how to generate type declarations for using CSS modules with TypeScript. It uses the [next-css](https://github.com/zeit/next-plugins/tree/master/packages/next-css) and [next-typescript](https://github.com/zeit/next-plugins/tree/master/packages/next-typescript) plugins with [typings-for-css-modules-loader](https://www.npmjs.com/package/typings-for-css-modules-loader). With additional samples of how to apply using sass, less and stylus.

examples/with-typings-for-css-modules/next.config.js

@@ -0,0 +1,54 @@
+const withCSS = require('@zeit/next-css')
+const withTypescript = require('@zeit/next-typescript')
+
+/* With additional configuration on top of CSS Modules */
+module.exports = withTypescript(withCSS({
+  cssModules: true,
+  cssLoaderOptions: {
+    camelCase: true,
+    namedExport: true
+  },
+  webpack (config, options) {
+    if (!options.isServer) {
+      /* Using next-css */
+      for (let entry of options.defaultLoaders.css) {
+        if (entry.loader === 'css-loader') {
+          entry.loader = 'typings-for-css-modules-loader'
+          break
+        }
+      }
+
+      /* Using next-less */
+      /*
+      for (let entry of options.defaultLoaders.less) {
+        if (entry.loader === 'css-loader') {
+          entry.loader = 'typings-for-css-modules-loader';
+          break;
+        }
+      }
+      */
+
+      /* Using next-sass */
+      /*
+      for (let entry of options.defaultLoaders.sass) {
+        if (entry.loader === 'css-loader') {
+          entry.loader = 'typings-for-css-modules-loader';
+          break;
+        }
+      }
+      */
+
+      /* Using next-stylus */
+      /*
+      for (let entry of options.defaultLoaders.stylus) {
+        if (entry.loader === 'css-loader') {
+          entry.loader = 'typings-for-css-modules-loader';
+          break;
+        }
+      }
+      */
+    }
+
+    return config
+  }
+}))

examples/with-typings-for-css-modules/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "with-typings-for-css-modules",
+  "version": "1.0.0",
+  "license": "ISC",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start",
+    "type-check": "tsc"
+  },
+  "dependencies": {
+    "@zeit/next-css": "^1.0.1",
+    "@zeit/next-typescript": "^1.1.1",
+    "next": "latest",
+    "react": "16.4.2",
+    "react-dom": "16.4.2",
+    "typings-for-css-modules-loader": "^1.7.0"
+  },
+  "devDependencies": {
+    "@types/next": "7.0.2",
+    "@types/react": "16.4.16",
+    "@types/react-dom": "16.0.9",
+    "typescript": "3.1.3"
+  }
+}

examples/with-typings-for-css-modules/pages/index.tsx

@@ -0,0 +1,8 @@
+/* With CSS Modules */
+import css from "../style.css"
+
+export default () => (
+    <div className={css.example}>
+        <p className={css.exampleDescription}>Hello World, I am being styled using <strong>Typed</strong> CSS Modules!</p>
+    </div>
+)

examples/with-typings-for-css-modules/style.css

@@ -0,0 +1,10 @@
+.example {
+  font-size: 50px;
+  color: papayawhip;
+}
+
+.example__description > strong {
+  color: tomato;
+  text-transform: uppercase;
+  font-style: italic;
+}

examples/with-typings-for-css-modules/style.css.d.ts

@@ -0,0 +1,3 @@
+export const example: string;
+export const example__description: string;
+export const exampleDescription: string;

examples/with-typings-for-css-modules/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "jsx": "preserve",
+    "lib": ["dom", "es2017"],
+    "moduleResolution": "node",
+    "allowJs": true,
+    "noEmit": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "removeComments": false,
+    "preserveConstEnums": true,
+    "sourceMap": true
+  }
+}