Update app dependencies, migrate from styled-jsx to CSS Modules.

app/.babelrc

@@ -1,13 +1,4 @@
 {
-  "plugins": ["graphql-tag"],
+  "presets": ["next/babel"],
-  "presets": [
+  "plugins": ["graphql-tag"]
-    [
-      "next/babel",
-      {
-        "styled-jsx": {
-          "optimizeForSpeed": false
-        }
-      }
-    ]
-  ]
 }

app/.stylelintrc.json

@@ -0,0 +1,12 @@
+{
+  "extends": ["stylelint-config-recommended", "stylelint-prettier/recommended"],
+  "rules": {
+    "max-nesting-depth": 0,
+    "rule-empty-line-before": [
+      "always",
+      {
+        "except": ["after-single-line-comment", "first-nested"]
+      }
+    ]
+  }
+}

app/components/Header.js

@@ -1,10 +1,5 @@
+import styles from './Header.module.css';
+
 export const Header = (props) => (
-  <>
+  <header {...props} className={styles.header} />
-    <header {...props} />
-    <style jsx>{`
-      header {
-        margin: var(--daui-spacing);
-      }
-    `}</style>
-  </>
 );

app/components/Header.module.css

@@ -0,0 +1,3 @@
+.header {
+  margin: var(--daui-spacing);
+}

app/components/Section.js

@@ -1,10 +1,5 @@
+import styles from './Section.module.css';
+
 export const Section = (props) => (
-  <>
+  <section {...props} className={styles.section} />
-    <section {...props} />
-    <style jsx>{`
-      section {
-        margin: calc(var(--daui-spacing) * 2) 0;
-      }
-    `}</style>
-  </>
 );

app/components/Section.module.css

@@ -0,0 +1,3 @@
+.section {
+  margin: calc(var(--daui-spacing) * 2) 0;
+}

app/package.json

@@ -21,31 +21,36 @@
   },
   "browserslist": "Node 12 - 13 and Node < 13, Node >= 13.7.0, > 0.5%, not OperaMini all, not dead",
   "dependencies": {
-    "@apollo/client": "^3.3.6",
+    "@apollo/client": "^3.3.8",
     "apollo-upload-client": "^14.1.3",
-    "device-agnostic-ui": "^6.0.0",
+    "device-agnostic-ui": "^7.0.1",
-    "graphql": "^15.4.0",
+    "graphql": "^15.5.0",
-    "next": "^10.0.4",
+    "next": "^10.0.6",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
   "devDependencies": {
-    "babel-eslint": "^10.1.0",
+    "@babel/eslint-parser": "^7.12.13",
-    "babel-plugin-graphql-tag": "^3.1.0",
+    "babel-plugin-graphql-tag": "^3.2.0",
-    "eslint": "^7.16.0",
+    "eslint": "^7.19.0",
-    "eslint-config-env": "^15.0.1",
+    "eslint-config-env": "^18.0.1",
-    "eslint-config-prettier": "^7.1.0",
+    "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsdoc": "^30.7.9",
+    "eslint-plugin-jsdoc": "^31.6.1",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^3.3.0",
+    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "prettier": "^2.2.1"
+    "prettier": "^2.2.1",
+    "stylelint": "^13.9.0",
+    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-recommended": "^3.0.0",
+    "stylelint-prettier": "^1.1.2"
   },
   "scripts": {
-    "test": "npm run test:eslint && npm run test:prettier",
+    "test": "npm run test:eslint && npm run test:stylelint && npm run test:prettier",
     "test:eslint": "eslint .",
+    "test:stylelint": "stylelint '**/*.css'",
     "test:prettier": "prettier -c .",
     "dev": "next",
     "build": "next build",

app/pages/_app.js

@@ -1,6 +1,17 @@
+import 'device-agnostic-ui/public/theme.css';
+import 'device-agnostic-ui/public/global.css';
+import 'device-agnostic-ui/public/components/Button.css';
+import 'device-agnostic-ui/public/components/ButtonSubmit.css';
+import 'device-agnostic-ui/public/components/Code.css';
+import 'device-agnostic-ui/public/components/Fieldset.css';
+import 'device-agnostic-ui/public/components/Heading.css';
+import 'device-agnostic-ui/public/components/Loading.css';
+import 'device-agnostic-ui/public/components/Margin.css';
+import 'device-agnostic-ui/public/components/Scroll.css';
+import 'device-agnostic-ui/public/components/Table.css';
+import 'device-agnostic-ui/public/components/Textbox.css';
 import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
 import { createUploadLink } from 'apollo-upload-client';
-import { stylesGlobal, stylesGlobalTheme } from 'device-agnostic-ui';
 import Head from 'next/head';
 
 const createApolloClient = (cache = {}) =>
@@ -24,12 +35,6 @@ const App = ({
       <link rel="manifest" href="/manifest.webmanifest" />
     </Head>
     <Component {...pageProps} />
-    <style jsx global>
-      {stylesGlobalTheme}
-    </style>
-    <style jsx global>
-      {stylesGlobal}
-    </style>
   </ApolloProvider>
 );