build: enable raw css files consumption via styled-jsx

Author: Hotell

globals.d.ts

@@ -12,3 +12,23 @@ declare module '*.css' {
   const value: Record<string, string>
   export default value
 }
+
+declare module '@zeit/next-css' {
+  type Api = any
+  export = Api
+}
+declare module 'styled-jsx/webpack' {
+  type Api = { loader?: string }
+  export = Api
+}
+
+declare module 'styled-jsx/webpack-config' {
+  type ValidTypes = 'scoped' | 'global' | 'resolve'
+  type FileNameQuery = { query: { type: ValidTypes } }
+
+  export type Options = {
+    type:
+      | ValidTypes
+      | ((fileName: string, options: FileNameQuery) => ValidTypes)
+  }
+}

next.config.js

@@ -7,10 +7,29 @@ const cfg = {
    * @type {import('./next-config').WebpackConfig}
    */
   webpack: (config, options) => {
-    // config.module.rules.push({
-    //   test: /\.raw.css$/,
-    //   use: 'raw-loader',
-    // })
+    /**
+     * @type {import('webpack').Rule}
+     * @see https://github.com/zeit/styled-jsx#styles-in-regular-css-files
+     */
+    const styledJsxRule = {
+      test: /\.css$/,
+      use: [
+        options.defaultLoaders.babel,
+        {
+          loader: require('styled-jsx/webpack').loader,
+
+          options: /** @type {import('styled-jsx/webpack-config').Options} */ ({
+            type: (fileName, options) =>
+              fileName.endsWith('.module.css')
+                ? 'scoped'
+                : options.query.type || 'global',
+          }),
+        },
+      ],
+    }
+
+    config.module.rules.push(styledJsxRule)
+
     return config
   },
 }
@@ -20,4 +39,4 @@ const config = withCSS({
   ...cfg,
 })
 
-module.exports = config
+module.exports = cfg

package.json

@@ -27,6 +27,7 @@
     "@types/node": "12.12.7",
     "@types/react": "16.9.11",
     "@types/styled-jsx": "2.2.8",
+    "@types/webpack": "4.41.0",
     "@zeit/next-css": "1.0.1",
     "husky": "3.0.9",
     "lint-staged": "9.4.2",

tsconfig.json

@@ -25,6 +25,7 @@
     "next-env.d.ts",
     "typings",
     "**/*.ts",
-    "**/*.tsx"
+    "**/*.tsx",
+    "next.config.js"
   ]
 }

yarn.lock

@@ -843,6 +843,11 @@
   dependencies:
     any-observable "^0.3.0"
 
+"@types/anymatch@*":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
+  integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==
+
 "@types/events@*":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
@@ -893,13 +898,51 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/source-list-map@*":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
+  integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==
+
 "@types/[email protected]":
   version "2.2.8"
   resolved "https://registry.yarnpkg.com/@types/styled-jsx/-/styled-jsx-2.2.8.tgz#b50d13d8a3c34036282d65194554cf186bab7234"
   integrity sha512-Yjye9VwMdYeXfS71ihueWRSxrruuXTwKCbzue4+5b2rjnQ//AtyM7myZ1BEhNhBQ/nL/RE7bdToUoLln2miKvg==
   dependencies:
     "@types/react" "*"
 
+"@types/tapable@*":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.4.tgz#b4ffc7dc97b498c969b360a41eee247f82616370"
+  integrity sha512-78AdXtlhpCHT0K3EytMpn4JNxaf5tbqbLcbIRoQIHzpTIyjpxLQKRoxU55ujBXAtg3Nl2h/XWvfDa9dsMOd0pQ==
+
+"@types/uglify-js@*":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.0.4.tgz#96beae23df6f561862a830b4288a49e86baac082"
+  integrity sha512-SudIN9TRJ+v8g5pTG8RRCqfqTMNqgWCKKd3vtynhGzkIIjxaicNAMuY5TRadJ6tzDu3Dotf3ngaMILtmOdmWEQ==
+  dependencies:
+    source-map "^0.6.1"
+
+"@types/webpack-sources@*":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-0.1.5.tgz#be47c10f783d3d6efe1471ff7f042611bd464a92"
+  integrity sha512-zfvjpp7jiafSmrzJ2/i3LqOyTYTuJ7u1KOXlKgDlvsj9Rr0x7ZiYu5lZbXwobL7lmsRNtPXlBfmaUD8eU2Hu8w==
+  dependencies:
+    "@types/node" "*"
+    "@types/source-list-map" "*"
+    source-map "^0.6.1"
+
+"@types/[email protected]":
+  version "4.41.0"
+  resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.41.0.tgz#b813a044d8b0dec7dfcd7622fdbe327bde06eb9a"
+  integrity sha512-tWkdf9nO0zFgAY/EumUKwrDUhraHKDqCPhwfFR/R8l0qnPdgb9le0Gzhvb7uzVpouuDGBgiE//ZdY+5jcZy2TA==
+  dependencies:
+    "@types/anymatch" "*"
+    "@types/node" "*"
+    "@types/tapable" "*"
+    "@types/uglify-js" "*"
+    "@types/webpack-sources" "*"
+    source-map "^0.6.0"
+
 "@webassemblyjs/[email protected]":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"