feat/fix: fix typing issues, add typings for css modules

Author: duanwilliam

website/next.config.js

@@ -1,4 +1,36 @@
+
+const withTypedCssModules = (nextConfig = {}) => ({
+  ...nextConfig,
+  webpack (config) {
+    const cssLoaderRegex = /(?<!post)css-loader/;
+    const typingsForCssModulesLoader = {
+      loader: "@teamsupercell/typings-for-css-modules-loader",
+      options: {
+        disableLocalsExport: true,
+        verifyOnly: process.env.NODE_ENV === "production",
+        banner: `// AUTOGENERATED FILE -- DO NOT EDIT DIRECTLY\n`,
+      },
+    };
+
+    // looking for the webpack rules where `css-loader` is specified 
+    const { oneOf } = config.module.rules.find((rule) => Array.isArray(rule.oneOf));
+    const rules = oneOf.filter((rule) => Array.isArray(rule.use));
+
+    rules.forEach((rule) => {
+      const cssLoaderIndex = rule.use.findIndex((loader) => cssLoaderRegex.test(loader.loader));
+      // no `css-loader` here -> skip
+      if (cssLoaderIndex === -1) { return; }
+      // webpack loaders are executed in reverse order
+      // we want to inject the typings loader after `css-loader`,
+      // but before other loaders `style-loader` or `mini-css-extract`
+      rule.use.splice(cssLoaderIndex, 0, { ...typingsForCssModulesLoader });
+    })
+
+    return config;
+  }
+})
+
 /** @type {import('next').NextConfig} */
-module.exports = {
+module.exports = withTypedCssModules({
   reactStrictMode: true,
-}
+})

website/package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@teamsupercell/typings-for-css-modules-loader": "^2.5.1",
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.0.1",
     "glob": "^7.2.0",

website/src/components/Navbar/index.tsx

@@ -36,11 +36,9 @@ const Navbar = (): JSX.Element => {
             <a className={s.navItem}>{label}</a>
           </Link>
         ))}
-        <Link href={"https://github.com/acmucsd/acm-ai-workshops"}>
-          <a className={s.githubButton}>
-            <img src="/static/github.svg" alt="GitHub" />
-          </a>
-        </Link>
+        <Link href={"https://github.com/acmucsd/acm-ai-workshops"}><a>
+          <img src="/static/github.svg" alt="GitHub" />
+        </a></Link>
       </div>
 
       {/* TODO - mobile nav links */}

website/src/components/Navbar/styles.module.scss.d.ts

@@ -0,0 +1,16 @@
+// AUTOGENERATED FILE -- DO NOT EDIT DIRECTLY
+
+declare namespace StylesModuleScssNamespace {
+  export interface IStylesModuleScss {
+    hidden: string;
+    left: string;
+    logo: string;
+    navItem: string;
+    navbar: string;
+    right: string;
+  }
+}
+
+declare const StylesModuleScssModule: StylesModuleScssNamespace.IStylesModuleScss;
+
+export = StylesModuleScssModule;

website/src/components/Sidebar/styles.module.scss.d.ts

@@ -0,0 +1,17 @@
+// AUTOGENERATED FILE -- DO NOT EDIT DIRECTLY
+
+declare namespace StylesModuleScssNamespace {
+  export interface IStylesModuleScss {
+    active: string;
+    arrow: string;
+    category: string;
+    collapsed: string;
+    desktop: string;
+    items: string;
+    link: string;
+  }
+}
+
+declare const StylesModuleScssModule: StylesModuleScssNamespace.IStylesModuleScss;
+
+export = StylesModuleScssModule;

website/src/layouts/Layout/styles.module.scss.d.ts

@@ -0,0 +1,27 @@
+// AUTOGENERATED FILE -- DO NOT EDIT DIRECTLY
+
+declare namespace StylesModuleScssNamespace {
+  export interface IStylesModuleScss {
+    active: string;
+    arrow: string;
+    category: string;
+    collapsed: string;
+    contentContainer: string;
+    contentWrapper: string;
+    desktop: string;
+    hidden: string;
+    items: string;
+    left: string;
+    link: string;
+    logo: string;
+    navItem: string;
+    navbar: string;
+    right: string;
+    sidebarContainer: string;
+    wrapper: string;
+  }
+}
+
+declare const StylesModuleScssModule: StylesModuleScssNamespace.IStylesModuleScss;
+
+export = StylesModuleScssModule;

website/src/layouts/pages/CategoryPage/styles.module.scss.d.ts

@@ -0,0 +1,15 @@
+// AUTOGENERATED FILE -- DO NOT EDIT DIRECTLY
+
+declare namespace StylesModuleScssNamespace {
+  export interface IStylesModuleScss {
+    card: string;
+    description: string;
+    grid: string;
+    title: string;
+    truncate: string;
+  }
+}
+
+declare const StylesModuleScssModule: StylesModuleScssNamespace.IStylesModuleScss;
+
+export = StylesModuleScssModule;

website/src/layouts/pages/types/index.d.ts

@@ -27,13 +27,17 @@ export interface WithBreadcrumbs {
   sidebar: SidebarItemType[];
 }
 
-export interface DocPageProps extends WithSidebar, WithBreadcrumbs {
+export interface CommonPageProps extends WithSidebar, WithBreadcrumbs {
+
+}
+
+export interface DocPageProps extends CommonPageProps {
   type: Doc['type'];
   title: string;
   source: MDXRemoteSerializeResult<Record<string, unknown>>;
 }
 
-export interface CategoryPageProps extends WithSidebar, WithBreadcrumbs {
+export interface CategoryPageProps extends CommonPageProps {
   type: 'category';
   items: Array<Item>
 }

website/src/mdx/CodeBlock/CopyButton.tsx

@@ -33,11 +33,7 @@ interface CopyButtonProps {
        type="button"
        aria-label={isCopied ? 'Copied' : 'Copy code to clipboard'}
        title="Copy"
-       className={c(
-         s.copyButton,
-         s.cleanBtn,
-         isCopied && s.copied,
-       )}
+       className={c(s.copyButton, isCopied && s.copied)}
        onClick={handleCopyCode}>
        <span className={s.icons} aria-hidden="true">
          <svg className={s.copyIcon} viewBox="0 0 24 24">

website/src/mdx/CodeBlock/styles.export.module.scss.d.ts

@@ -0,0 +1,27 @@
+// AUTOGENERATED FILE -- DO NOT EDIT DIRECTLY
+
+declare namespace StylesExportModuleScssNamespace {
+  export interface IStylesExportModuleScss {
+    codeBlock: string;
+    codeBlockContainer: string;
+    content: string;
+    copied: string;
+    copyButton: string;
+    copyIcon: string;
+    icons: string;
+    line: string;
+    lineContent: string;
+    lineNumber: string;
+    lines: string;
+    numbered: string;
+    prismBackgroundColor: string;
+    prismColor: string;
+    standalone: string;
+    successIcon: string;
+    title: string;
+  }
+}
+
+declare const StylesExportModuleScssModule: StylesExportModuleScssNamespace.IStylesExportModuleScss;
+
+export = StylesExportModuleScssModule;