chore(gatsby): Remove __experimentalThemes (#29127)

packages/gatsby/src/bootstrap/load-themes/index.js

@@ -85,11 +85,9 @@ const resolveTheme = async (
 // off track and creating their own set of themes
 const processTheme = (
   { themeName, themeConfig, themeSpec, themeDir, configFilePath },
-  { useLegacyThemes, rootDir }
+  { rootDir }
 ) => {
-  const themesList = useLegacyThemes
-    ? themeConfig && themeConfig.__experimentalThemes
-    : themeConfig && themeConfig.plugins
+  const themesList = themeConfig && themeConfig.plugins
   // Gatsby themes don't have to specify a gatsby-config.js (they might only use gatsby-node, etc)
   // in this case they're technically plugins, but we should support it anyway
   // because we can't guarantee which files theme creators create first
@@ -98,7 +96,7 @@ const processTheme = (
     // gatsby config and return it in order [parentA, parentB, child]
     return Promise.mapSeries(themesList, async spec => {
       const themeObj = await resolveTheme(spec, configFilePath, false, themeDir)
-      return processTheme(themeObj, { useLegacyThemes, rootDir: themeDir })
+      return processTheme(themeObj, { rootDir: themeDir })
     }).then(arr =>
       arr.concat([
         { themeName, themeConfig, themeSpec, themeDir, parentDir: rootDir },
@@ -110,20 +108,17 @@ const processTheme = (
   }
 }
 
-module.exports = async (
-  config,
-  { useLegacyThemes = false, configFilePath, rootDir }
-) => {
+module.exports = async (config, { configFilePath, rootDir }) => {
   const themesA = await Promise.mapSeries(
-    useLegacyThemes ? config.__experimentalThemes || [] : config.plugins || [],
+    config.plugins || [],
     async themeSpec => {
       const themeObj = await resolveTheme(
         themeSpec,
         configFilePath,
         true,
         rootDir
       )
-      return processTheme(themeObj, { useLegacyThemes, rootDir })
+      return processTheme(themeObj, { rootDir })
     }
   ).then(arr => _.flattenDeep(arr))
 

packages/gatsby/src/internal-plugins/webpack-theme-component-shadowing/gatsby-node.js

@@ -4,21 +4,19 @@ exports.onCreateWebpackConfig = (
   { store, stage, getConfig, rules, loaders, actions },
   pluginOptions
 ) => {
-  const { themes, flattenedPlugins, program } = store.getState()
+  const { flattenedPlugins, program } = store.getState()
 
   actions.setWebpackConfig({
     resolve: {
       plugins: [
         new GatsbyThemeComponentShadowingResolverPlugin({
           extensions: getConfig().resolve.extensions,
-          themes: themes.themes
-            ? themes.themes
-            : flattenedPlugins.map(plugin => {
-                return {
-                  themeDir: plugin.pluginFilepath,
-                  themeName: plugin.name,
-                }
-              }),
+          themes: flattenedPlugins.map(plugin => {
+            return {
+              themeDir: plugin.pluginFilepath,
+              themeName: plugin.name,
+            }
+          }),
           projectRoot: program.directory,
         }),
       ],

packages/gatsby/src/joi-schemas/joi.ts

@@ -12,7 +12,6 @@ const addLeadingSlash = (chain: Joi.StringSchema): Joi.StringSchema =>
 
 export const gatsbyConfigSchema: Joi.ObjectSchema<IGatsbyConfig> = Joi.object()
   .keys({
-    __experimentalThemes: Joi.array(),
     flags: Joi.object(),
     polyfill: Joi.boolean().default(true),
     assetPrefix: stripTrailingSlash(

packages/gatsby/src/query/query-compiler.js

@@ -52,8 +52,7 @@ const overlayErrorID = `graphql-compiler`
 export default async function compile({ parentSpan } = {}): Promise<
   Map<string, RootQuery>
 > {
-  // TODO: swap plugins to themes
-  const { program, schema, themes, flattenedPlugins } = store.getState()
+  const { program, schema, flattenedPlugins } = store.getState()
 
   const activity = report.activityTimer(`extract queries from components`, {
     parentSpan,
@@ -67,13 +66,11 @@ export default async function compile({ parentSpan } = {}): Promise<
   const parsedQueries = await parseQueries({
     base: program.directory,
     additional: resolveThemes(
-      themes.themes
-        ? themes.themes
-        : flattenedPlugins.map(plugin => {
-            return {
-              themeDir: plugin.pluginFilepath,
-            }
-          })
+      flattenedPlugins.map(plugin => {
+        return {
+          themeDir: plugin.pluginFilepath,
+        }
+      })
     ),
     addError,
     parentSpan,

packages/gatsby/src/redux/reducers/index.ts

@@ -8,7 +8,6 @@ import { staticQueryComponentsReducer } from "./static-query-components"
 import { statusReducer } from "./status"
 import { webpackReducer } from "./webpack"
 import { pageDataReducer } from "./page-data"
-import { themesReducer } from "./themes"
 import { webpackCompilationHashReducer } from "./webpack-compilation-hash"
 import { configReducer } from "./config"
 import { lastActionReducer } from "./last-action"
@@ -55,7 +54,6 @@ export {
   redirectsReducer as redirects,
   babelrcReducer as babelrc,
   schemaCustomizationReducer as schemaCustomization,
-  themesReducer as themes,
   logReducer as logs,
   inferenceMetadataReducer as inferenceMetadata,
   pageDataStatsReducer as pageDataStats,

packages/gatsby/src/redux/types.ts

@@ -266,7 +266,6 @@ export interface IGatsbyState {
       string | { typeOrTypeDef: DocumentNode; plugin: IGatsbyPlugin }
     >
   }
-  themes: any // TODO
   logs: IGatsbyCLIState
   inferenceMetadata: {
     step: string // TODO make enum or union
@@ -615,11 +614,6 @@ export interface ICreateRedirectAction {
   payload: IRedirect
 }
 
-export interface ISetResolvedThemesAction {
-  type: `SET_RESOLVED_THEMES`
-  payload: any // TODO
-}
-
 export interface IDeleteCacheAction {
   type: `DELETE_CACHE`
   cacheIsCorrupt?: boolean

packages/gatsby/src/services/initialize.ts

@@ -227,24 +227,8 @@ export async function initialize({
   }
 
   // theme gatsby configs can be functions or objects
-  if (config && config.__experimentalThemes) {
-    reporter.warn(
-      `The gatsby-config key "__experimentalThemes" has been deprecated. Please use the "plugins" key instead.`
-    )
-    const themes = await loadThemes(config, {
-      useLegacyThemes: true,
-      configFilePath,
-      rootDir: program.directory,
-    })
-    config = themes.config
-
-    store.dispatch({
-      type: `SET_RESOLVED_THEMES`,
-      payload: themes.themes,
-    })
-  } else if (config) {
+  if (config) {
     const plugins = await loadThemes(config, {
-      useLegacyThemes: false,
       configFilePath,
       rootDir: program.directory,
     })

packages/gatsby/src/utils/did-you-mean.ts

@@ -1,7 +1,7 @@
 import meant from "meant"
 
 export const KNOWN_CONFIG_KEYS = [
-  `__experimentalThemes`,
+  `flags`,
   `polyfill`,
   `assetPrefix`,
   `pathPrefix`,

packages/gatsby/src/utils/get-static-dir.ts

@@ -10,16 +10,14 @@ import { store } from "../redux"
  */
 export const copyStaticDirs = (): void => {
   // access the store to get themes
-  const { themes, flattenedPlugins } = store.getState()
+  const { flattenedPlugins } = store.getState()
   // if there are legacy themes, only use them. Otherwise proceed with plugins
-  const themesSet = themes.themes
-    ? themes.themes
-    : flattenedPlugins.map(plugin => {
-        return {
-          themeDir: plugin.pluginFilepath,
-          themeName: plugin.name,
-        }
-      })
+  const themesSet = flattenedPlugins.map(plugin => {
+    return {
+      themeDir: plugin.pluginFilepath,
+      themeName: plugin.name,
+    }
+  })
 
   themesSet
     // create an array of potential theme static folders

packages/gatsby/src/utils/webpack.config.js

@@ -322,18 +322,6 @@ module.exports = async (
       )
     }
 
-    if (store.getState().themes.themes) {
-      configRules = configRules.concat(
-        store.getState().themes.themes.map(theme => {
-          return {
-            test: /\.jsx?$/,
-            include: theme.themeDir,
-            use: [loaders.js()],
-          }
-        })
-      )
-    }
-
     switch (stage) {
       case `develop`: {
         // get schema to pass to eslint config and program for directory