[pull] master from gatsbyjs:master

examples/using-css-modules/src/pages/another-page.js

@@ -1,14 +1,14 @@
 import React from "react"
 import { Link } from "gatsby"
 
-import styles from "../styles/another-page.module.css"
+import { page, link, header } from "../styles/another-page.module.css"
 
 class IndexComponent extends React.Component {
   render() {
     return (
-      <div className={styles.page}>
-        <h1 className={styles.header}>Hello mildly weary world</h1>
-        <Link to="/" className={styles.link}>
+      <div className={page}>
+        <h1 className={header}>Hello mildly weary world</h1>
+        <Link to="/" className={link}>
           Back home
         </Link>
       </div>

examples/using-css-modules/src/pages/index.js

@@ -1,30 +1,30 @@
 import React from "react"
 import { Link } from "gatsby"
 
-import indexStyles from "../styles/index.module.css"
+import { index, subheader, link } from "../styles/index.module.css"
 
 class IndexComponent extends React.Component {
   render() {
     return (
-      <div className={indexStyles.index}>
+      <div className={index}>
         <h1>Hello world</h1>
-        <h2 className={indexStyles.subheader}>
+        <h2 className={subheader}>
           {`You've`} arrived at the world renowned css modules & gatsby example
           site
         </h2>
         <p>
-          <Link className={indexStyles.link} to="/another-page/">
+          <Link className={link} to="/another-page/">
             Travel through the cyber linkspace
           </Link>
         </p>
         <p>
-          <Link className={indexStyles.link} to="/sassy-page/">
+          <Link className={link} to="/sassy-page/">
             Partake of sassy goodness
           </Link>
         </p>
         <p>
           <a
-            className={indexStyles.link}
+            className={link}
             href="https://github.com/gatsbyjs/gatsby/tree/master/examples/using-css-modules"
           >
             Code for example site on GitHub

examples/using-css-modules/src/pages/sassy-page.js

@@ -1,15 +1,15 @@
 import React from "react"
 import { Link } from "gatsby"
 
-import styles from "../styles/sass.module.scss"
+import { page, header, link } from "../styles/sass.module.scss"
 
 class IndexComponent extends React.Component {
   render() {
     return (
-      <div className={styles.page}>
-        <h1 className={styles.header}>Cheese: Do you like it?</h1>
-        <h1 className={styles.header}>🧀 🧀 🧀 🧀 🧀 🧀 🧀</h1>
-        <Link to="/" className={styles.link}>
+      <div className={page}>
+        <h1 className={header}>Cheese: Do you like it?</h1>
+        <h1 className={header}>🧀 🧀 🧀 🧀 🧀 🧀 🧀</h1>
+        <Link to="/" className={link}>
           Back home
         </Link>
       </div>

examples/using-css-modules/src/styles/another-page.module.css

@@ -8,9 +8,10 @@
   font-size: 10rem;
   line-height: 1.5;
   text-decoration: none;
-  &:hover {
-    text-decoration: underline;
-  }
+}
+
+.link:hover {
+  text-decoration: underline;
 }
 
 .header {

packages/gatsby/package.json

@@ -31,7 +31,6 @@
     "ansi-html": "^0.0.7",
     "autoprefixer": "^9.8.4",
     "axios": "^0.21.1",
-    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-add-module-exports": "^1.0.4",
     "babel-plugin-dynamic-import-node": "^2.3.3",
@@ -262,4 +261,4 @@
   "yargs": {
     "boolean-negation": false
   }
-}
+}

packages/gatsby/src/utils/eslint-config.ts

@@ -1,11 +1,11 @@
 import { printSchema, GraphQLSchema } from "graphql"
-import { CLIEngine } from "eslint"
+import { ESLint } from "eslint"
 import path from "path"
 
 const eslintRulePaths = path.resolve(`${__dirname}/eslint-rules`)
 const eslintRequirePreset = require.resolve(`./eslint/required`)
 
-export const eslintRequiredConfig: CLIEngine.Options = {
+export const eslintRequiredConfig: ESLint.Options = {
   rulePaths: [eslintRulePaths],
   useEslintrc: false,
   allowInlineConfig: false,
@@ -19,6 +19,12 @@ export const eslintRequiredConfig: CLIEngine.Options = {
       ecmaFeatures: {
         jsx: true,
       },
+      // TODO proper check for custom babel & plugins config
+      // Currently when a babelrc is added to the project, it will override our babelOptions
+      babelOptions: {
+        presets: [`babel-preset-gatsby`],
+      },
+      requireConfigFile: false,
     },
     globals: {
       graphql: true,
@@ -32,7 +38,7 @@ export const eslintRequiredConfig: CLIEngine.Options = {
 export const eslintConfig = (
   schema: GraphQLSchema,
   usingJsxRuntime: boolean
-): CLIEngine.Options => {
+): ESLint.Options => {
   return {
     useEslintrc: false,
     resolvePluginsRelativeTo: __dirname,
@@ -47,6 +53,20 @@ export const eslintConfig = (
         require.resolve(`eslint-config-react-app`),
         eslintRequirePreset,
       ],
+      parser: require.resolve(`@babel/eslint-parser`),
+      parserOptions: {
+        ecmaVersion: 2020,
+        sourceType: `module`,
+        ecmaFeatures: {
+          jsx: true,
+        },
+        // TODO proper check for custom babel & plugins config
+        // Currently when a babelrc is added to the project, it will override our babelOptions
+        babelOptions: {
+          presets: [`babel-preset-gatsby`],
+        },
+        requireConfigFile: false,
+      },
       plugins: [`graphql`],
       rules: {
         // New versions of react use a special jsx runtime that remove the requirement
@@ -75,13 +95,12 @@ export const eslintConfig = (
         "jsx-a11y/aria-proptypes": `warn`,
         "jsx-a11y/aria-role": `warn`,
         "jsx-a11y/aria-unsupported-elements": `warn`,
-        // TODO: It looks like the `autocomplete-valid` rule hasn't been published yet
-        // "jsx-a11y/autocomplete-valid": [
-        //   "warn",
-        //   {
-        //     inputComponents: [],
-        //   },
-        // ],
+        "jsx-a11y/autocomplete-valid": [
+          `warn`,
+          {
+            inputComponents: [],
+          },
+        ],
         "jsx-a11y/click-events-have-key-events": `warn`,
         "jsx-a11y/control-has-associated-label": [
           `warn`,