Add TypeScript Definitions for Sass (#10363)

* Add TypeScript Definitions for Sass

* fix test

lint-staged.config.js

@@ -14,7 +14,7 @@ module.exports = {
       `git add ${escapedFileNames}`,
     ]
   },
-  '**/*.{json,md,mdx,css,html,yml,yaml,scss,sass}': filenames => {
+  '**/*.{json,md,mdx,css,html,yml,yaml,scss}': filenames => {
     const escapedFileNames = filenames
       .map(filename => `"${isWin ? filename : escape([filename])}"`)
       .join(' ')

package.json

@@ -23,8 +23,8 @@
     "lint-eslint": "eslint . --ext js,jsx,ts,tsx --max-warnings=0",
     "lint": "run-p lint-typescript prettier-check lint-eslint",
     "lint-fix": "yarn prettier-fix && eslint . --ext js,jsx,ts,tsx --fix --max-warnings=0",
-    "prettier-check": "prettier --check \"**/*.{js,jsx,json,ts,tsx,md,mdx,css,html,yml,yaml,scss,sass}\"",
-    "prettier-fix": "prettier --write \"**/*.{js,jsx,json,ts,tsx,md,mdx,css,html,yml,yaml,scss,sass}\"",
+    "prettier-check": "prettier --check \"**/*.{js,jsx,json,ts,tsx,md,mdx,css,html,yml,yaml,scss}\"",
+    "prettier-fix": "prettier --write \"**/*.{js,jsx,json,ts,tsx,md,mdx,css,html,yml,yaml,scss}\"",
     "types": "lerna run types --stream",
     "typescript": "lerna run typescript",
     "prepublish": "lerna run prepublish",

packages/next/types/global.d.ts

@@ -15,3 +15,13 @@ declare module '*.module.css' {
   const classes: { readonly [key: string]: string }
   export default classes
 }
+
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}
+
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}

test/integration/typescript/components/hello.module.sass

@@ -0,0 +1,2 @@
+.hello
+  content: 'hello'

test/integration/typescript/components/hello.module.scss

@@ -0,0 +1,3 @@
+.hello {
+  content: 'hello';
+}

test/integration/typescript/components/hello.ts

@@ -1,6 +1,10 @@
 import helloStyles from './hello.module.css'
+import helloStyles2 from './hello.module.scss'
+import helloStyles3 from './hello.module.sass'
 
 export function hello(): string {
   console.log(helloStyles.hello)
+  console.log(helloStyles2.hello)
+  console.log(helloStyles3.hello)
   return 'Hello'
 }

test/integration/typescript/next.config.js

@@ -3,5 +3,5 @@ module.exports = {
     // Make sure entries are not getting disposed.
     maxInactiveAge: 1000 * 60 * 60,
   },
-  experimental: { css: true },
+  experimental: { scss: true },
 }