Repository: tailwindlabs/tailwindcss (ts)

Issue:
tailwindcss/resolveConfig causing an error with version 1.9.0
### Describe the problem:

After upgrading to tailwindcss 1.9.0 Next.js began throwing an error during development:

<img width="427" alt="Screenshot 2020-10-13 at 11 38 21" src="https://user-images.githubusercontent.com/5160414/95843993-af03cb80-0d48-11eb-9485-f96b9ab8c2be.png">

I was able to narrow it down to components that use tailwindcss/resolveConfig to access the theme.
If I roll back to tailwindcss 1.8.13 everything works as expected.

### Link to a minimal reproduction:

[https://github.com/haydencleary/tailwind-issue](https://github.com/haydencleary/tailwind-issue)


Pull request:
Don't import corePlugins in resolveConfig
Fixes #2547.

Patch:
diff --git a/src/corePluginList.js b/src/corePluginList.js
new file mode 100644
index 00000000..a060d8be
--- /dev/null
+++ b/src/corePluginList.js
@@ -0,0 +1,115 @@
+export const corePluginList = [
+  'preflight',
+  'container',
+  'space',
+  'divideWidth',
+  'divideColor',
+  'divideStyle',
+  'divideOpacity',
+  'accessibility',
+  'appearance',
+  'backgroundAttachment',
+  'backgroundClip',
+  'backgroundColor',
+  'backgroundImage',
+  'gradientColorStops',
+  'backgroundOpacity',
+  'backgroundPosition',
+  'backgroundRepeat',
+  'backgroundSize',
+  'borderCollapse',
+  'borderColor',
+  'borderOpacity',
+  'borderRadius',
+  'borderStyle',
+  'borderWidth',
+  'boxSizing',
+  'cursor',
+  'display',
+  'flexDirection',
+  'flexWrap',
+  'placeItems',
+  'placeContent',
+  'placeSelf',
+  'alignItems',
+  'alignContent',
+  'alignSelf',
+  'justifyItems',
+  'justifyContent',
+  'justifySelf',
+  'flex',
+  'flexGrow',
+  'flexShrink',
+  'order',
+  'float',
+  'clear',
+  'fontFamily',
+  'fontWeight',
+  'height',
+  'fontSize',
+  'lineHeight',
+  'listStylePosition',
+  'listStyleType',
+  'margin',
+  'maxHeight',
+  'maxWidth',
+  'minHeight',
+  'minWidth',
+  'objectFit',
+  'objectPosition',
+  'opacity',
+  'outline',
+  'overflow',
+  'overscrollBehavior',
+  'padding',
+  'placeholderColor',
+  'placeholderOpacity',
+  'pointerEvents',
+  'position',
+  'inset',
+  'resize',
+  'boxShadow',
+  'fill',
+  'stroke',
+  'strokeWidth',
+  'tableLayout',
+  'textAlign',
+  'textColor',
+  'textOpacity',
+  'fontStyle',
+  'textTransform',
+  'textDecoration',
+  'fontSmoothing',
+  'fontVariantNumeric',
+  'letterSpacing',
+  'userSelect',
+  'verticalAlign',
+  'visibility',
+  'whitespace',
+  'wordBreak',
+  'width',
+  'zIndex',
+  'gap',
+  'gridAutoFlow',
+  'gridTemplateColumns',
+  'gridAutoColumns',
+  'gridColumn',
+  'gridColumnStart',
+  'gridColumnEnd',
+  'gridTemplateRows',
+  'gridAutoRows',
+  'gridRow',
+  'gridRowStart',
+  'gridRowEnd',
+  'transform',
+  'transformOrigin',
+  'scale',
+  'rotate',
+  'translate',
+  'skew',
+  'transitionProperty',
+  'transitionTimingFunction',
+  'transitionDuration',
+  'transitionDelay',
+  'animation',
+]
diff --git a/src/corePlugins.js b/src/corePlugins.js
index 861730e3..fb736f44 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -1,237 +1,10 @@
-import preflight from './plugins/preflight'
-import container from './plugins/container'
-import space from './plugins/space'
-import divideWidth from './plugins/divideWidth'
-import divideColor from './plugins/divideColor'
-import divideStyle from './plugins/divideStyle'
-import accessibility from './plugins/accessibility'
-import appearance from './plugins/appearance'
-import backgroundAttachment from './plugins/backgroundAttachment'
-import backgroundClip from './plugins/backgroundClip'
-import backgroundColor from './plugins/backgroundColor'
-import backgroundImage from './plugins/backgroundImage'
-import gradientColorStops from './plugins/gradientColorStops'
-import backgroundPosition from './plugins/backgroundPosition'
-import backgroundRepeat from './plugins/backgroundRepeat'
-import backgroundSize from './plugins/backgroundSize'
-import borderCollapse from './plugins/borderCollapse'
-import borderColor from './plugins/borderColor'
-import borderRadius from './plugins/borderRadius'
-import borderStyle from './plugins/borderStyle'
-import borderWidth from './plugins/borderWidth'
-import boxSizing from './plugins/boxSizing'
-import cursor from './plugins/cursor'
-import display from './plugins/display'
-import flexDirection from './plugins/flexDirection'
-import flexWrap from './plugins/flexWrap'
-import placeItems from './plugins/placeItems'
-import placeContent from './plugins/placeContent'
-import placeSelf from './plugins/placeSelf'
-import alignItems from './plugins/alignItems'
-import alignContent from './plugins/alignContent'
-import alignSelf from './plugins/alignSelf'
-import justifyItems from './plugins/justifyItems'
-import justifyContent from './plugins/justifyContent'
-import justifySelf from './plugins/justifySelf'
-import flex from './plugins/flex'
-import flexGrow from './plugins/flexGrow'
-import flexShrink from './plugins/flexShrink'
-import order from './plugins/order'
-import float from './plugins/float'
-import clear from './plugins/clear'
-import fontFamily from './plugins/fontFamily'
-import fontWeight from './plugins/fontWeight'
-import height from './plugins/height'
-import lineHeight from './plugins/lineHeight'
-import listStylePosition from './plugins/listStylePosition'
-import listStyleType from './plugins/listStyleType'
-import margin from './plugins/margin'
-import maxHeight from './plugins/maxHeight'
-import maxWidth from './plugins/maxWidth'
-import minHeight from './plugins/minHeight'
-import minWidth from './plugins/minWidth'
-import objectFit from './plugins/objectFit'
-import objectPosition from './plugins/objectPosition'
-import opacity from './plugins/opacity'
-import outline from './plugins/outline'
-import overflow from './plugins/overflow'
-import overscrollBehavior from './plugins/overscrollBehavior'
-import padding from './plugins/padding'
-import placeholderColor from './plugins/placeholderColor'
-import pointerEvents from './plugins/pointerEvents'
-import position from './plugins/position'
-import inset from './plugins/inset'
-import resize from './plugins/resize'
-import boxShadow from './plugins/boxShadow'
-import fill from './plugins/fill'
-import stroke from './plugins/stroke'
-import strokeWidth from './plugins/strokeWidth'
-import tableLayout from './plugins/tableLayout'
-import textAlign from './plugins/textAlign'
-import textColor from './plugins/textColor'
-import fontSize from './plugins/fontSize'
-import fontStyle from './plugins/fontStyle'
-import textTransform from './plugins/textTransform'
-import textDecoration from './plugins/textDecoration'
-import fontSmoothing from './plugins/fontSmoothing'
-import fontVariantNumeric from './plugins/fontVariantNumeric'
-import letterSpacing from './plugins/letterSpacing'
-import userSelect from './plugins/userSelect'
-import verticalAlign from './plugins/verticalAlign'
-import visibility from './plugins/visibility'
-import whitespace from './plugins/whitespace'
-import wordBreak from './plugins/wordBreak'
-import width from './plugins/width'
-import zIndex from './plugins/zIndex'
-import gap from './plugins/gap'
-import gridAutoFlow from './plugins/gridAutoFlow'
-import gridTemplateColumns from './plugins/gridTemplateColumns'
-import gridAutoColumns from './plugins/gridAutoColumns'
-import gridColumn from './plugins/gridColumn'
-import gridColumnStart from './plugins/gridColumnStart'
-import gridColumnEnd from './plugins/gridColumnEnd'
-import gridTemplateRows from './plugins/gridTemplateRows'
-import gridAutoRows from './plugins/gridAutoRows'
-import gridRow from './plugins/gridRow'
-import gridRowStart from './plugins/gridRowStart'
-import gridRowEnd from './plugins/gridRowEnd'
-import transform from './plugins/transform'
-import transformOrigin from './plugins/transformOrigin'
-import scale from './plugins/scale'
-import rotate from './plugins/rotate'
-import translate from './plugins/translate'
-import skew from './plugins/skew'
-import transitionProperty from './plugins/transitionProperty'
-import transitionTimingFunction from './plugins/transitionTimingFunction'
-import transitionDuration from './plugins/transitionDuration'
-import transitionDelay from './plugins/transitionDelay'
-import divideOpacity from './plugins/divideOpacity'
-import backgroundOpacity from './plugins/backgroundOpacity'
-import borderOpacity from './plugins/borderOpacity'
-import textOpacity from './plugins/textOpacity'
-import placeholderOpacity from './plugins/placeholderOpacity'
-import animation from './plugins/animation'
+import { corePluginList } from './corePluginList.js'
+import * as plugins from './plugins/index.js'
 
 import configurePlugins from './util/configurePlugins'
 
-export const corePluginList = {
-  preflight,
-  container,
-  space,
-  divideWidth,
-  divideColor,
-  divideStyle,
-  divideOpacity,
-  accessibility,
-  appearance,
-  backgroundAttachment,
-  backgroundClip,
-  backgroundColor,
-  backgroundImage,
-  gradientColorStops,
-  backgroundOpacity,
-  backgroundPosition,
-  backgroundRepeat,
-  backgroundSize,
-  borderCollapse,
-  borderColor,
-  borderOpacity,
-  borderRadius,
-  borderStyle,
-  borderWidth,
-  boxSizing,
-  cursor,
-  display,
-  flexDirection,
-  flexWrap,
-  placeItems,
-  placeContent,
-  placeSelf,
-  alignItems,
-  alignContent,
-  alignSelf,
-  justifyItems,
-  justifyContent,
-  justifySelf,
-  flex,
-  flexGrow,
-  flexShrink,
-  order,
-  float,
-  clear,
-  fontFamily,
-  fontWeight,
-  height,
-  fontSize,
-  lineHeight,
-  listStylePosition,
-  listStyleType,
-  margin,
-  maxHeight,
-  maxWidth,
-  minHeight,
-  minWidth,
-  objectFit,
-  objectPosition,
-  opacity,
-  outline,
-  overflow,
-  overscrollBehavior,
-  padding,
-  placeholderColor,
-  placeholderOpacity,
-  pointerEvents,
-  position,
-  inset,
-  resize,
-  boxShadow,
-  fill,
-  stroke,
-  strokeWidth,
-  tableLayout,
-  textAlign,
-  textColor,
-  textOpacity,
-  fontStyle,
-  textTransform,
-  textDecoration,
-  fontSmoothing,
-  fontVariantNumeric,
-  letterSpacing,
-  userSelect,
-  verticalAlign,
-  visibility,
-  whitespace,
-  wordBreak,
-  width,
-  zIndex,
-  gap,
-  gridAutoFlow,
-  gridTemplateColumns,
-  gridAutoColumns,
-  gridColumn,
-  gridColumnStart,
-  gridColumnEnd,
-  gridTemplateRows,
-  gridAutoRows,
-  gridRow,
-  gridRowStart,
-  gridRowEnd,
-  transform,
-  transformOrigin,
-  scale,
-  rotate,
-  translate,
-  skew,
-  transitionProperty,
-  transitionTimingFunction,
-  transitionDuration,
-  transitionDelay,
-  animation,
-}
-
 export default function({ corePlugins: corePluginConfig }) {
-  return configurePlugins(corePluginConfig, Object.keys(corePluginList)).map(pluginName => {
-    return corePluginList[pluginName]()
+  return configurePlugins(corePluginConfig, corePluginList).map(pluginName => {
+    return plugins[pluginName]()
   })
 }
diff --git a/src/plugins/index.js b/src/plugins/index.js
new file mode 100644
index 00000000..63e78c66
--- /dev/null
+++ b/src/plugins/index.js
@@ -0,0 +1,113 @@
+export { default as accessibility } from './accessibility'
+export { default as alignContent } from './alignContent'
+export { default as alignItems } from './alignItems'
+export { default as alignSelf } from './alignSelf'
+export { default as animation } from './animation'
+export { default as appearance } from './appearance'
+export { default as backgroundAttachment } from './backgroundAttachment'
+export { default as backgroundClip } from './backgroundClip'
+export { default as backgroundColor } from './backgroundColor'
+export { default as backgroundImage } from './backgroundImage'
+export { default as backgroundOpacity } from './backgroundOpacity'
+export { default as backgroundPosition } from './backgroundPosition'
+export { default as backgroundRepeat } from './backgroundRepeat'
+export { default as backgroundSize } from './backgroundSize'
+export { default as borderCollapse } from './borderCollapse'
+export { default as borderColor } from './borderColor'
+export { default as borderOpacity } from './borderOpacity'
+export { default as borderRadius } from './borderRadius'
+export { default as borderStyle } from './borderStyle'
+export { default as borderWidth } from './borderWidth'
+export { default as boxShadow } from './boxShadow'
+export { default as boxSizing } from './boxSizing'
+export { default as clear } from './clear'
+export { default as container } from './container'
+export { default as cursor } from './cursor'
+export { default as display } from './display'
+export { default as divideColor } from './divideColor'
+export { default as divideOpacity } from './divideOpacity'
+export { default as divideStyle } from './divideStyle'
+export { default as divideWidth } from './divideWidth'
+export { default as fill } from './fill'
+export { default as flex } from './flex'
+export { default as flexDirection } from './flexDirection'
+export { default as flexGrow } from './flexGrow'
+export { default as flexShrink } from './flexShrink'
+export { default as flexWrap } from './flexWrap'
+export { default as float } from './float'
+export { default as fontFamily } from './fontFamily'
+export { default as fontSize } from './fontSize'
+export { default as fontSmoothing } from './fontSmoothing'
+export { default as fontStyle } from './fontStyle'
+export { default as fontVariantNumeric } from './fontVariantNumeric'
+export { default as fontWeight } from './fontWeight'
+export { default as gap } from './gap'
+export { default as gradientColorStops } from './gradientColorStops'
+export { default as gridAutoColumns } from './gridAutoColumns'
+export { default as gridAutoFlow } from './gridAutoFlow'
+export { default as gridAutoRows } from './gridAutoRows'
+export { default as gridColumn } from './gridColumn'
+export { default as gridColumnEnd } from './gridColumnEnd'
+export { default as gridColumnStart } from './gridColumnStart'
+export { default as gridRow } from './gridRow'
+export { default as gridRowEnd } from './gridRowEnd'
+export { default as gridRowStart } from './gridRowStart'
+export { default as gridTemplateColumns } from './gridTemplateColumns'
+export { default as gridTemplateRows } from './gridTemplateRows'
+export { default as height } from './height'
+export { default as inset } from './inset'
+export { default as justifyContent } from './justifyContent'
+export { default as justifyItems } from './justifyItems'
+export { default as justifySelf } from './justifySelf'
+export { default as letterSpacing } from './letterSpacing'
+export { default as lineHeight } from './lineHeight'
+export { default as listStylePosition } from './listStylePosition'
+export { default as listStyleType } from './listStyleType'
+export { default as margin } from './margin'
+export { default as maxHeight } from './maxHeight'
+export { default as maxWidth } from './maxWidth'
+export { default as minHeight } from './minHeight'
+export { default as minWidth } from './minWidth'
+export { default as objectFit } from './objectFit'
+export { default as objectPosition } from './objectPosition'
+export { default as opacity } from './opacity'
+export { default as order } from './order'
+export { default as outline } from './outline'
+export { default as overflow } from './overflow'
+export { default as overscrollBehavior } from './overscrollBehavior'
+export { default as padding } from './padding'
+export { default as placeContent } from './placeContent'
+export { default as placeholderColor } from './placeholderColor'
+export { default as placeholderOpacity } from './placeholderOpacity'
+export { default as placeItems } from './placeItems'
+export { default as placeSelf } from './placeSelf'
+export { default as pointerEvents } from './pointerEvents'
+export { default as position } from './position'
+export { default as preflight } from './preflight'
+export { default as resize } from './resize'
+export { default as rotate } from './rotate'
+export { default as scale } from './scale'
+export { default as skew } from './skew'
+export { default as space } from './space'
+export { default as stroke } from './stroke'
+export { default as strokeWidth } from './strokeWidth'
+export { default as tableLayout } from './tableLayout'
+export { default as textAlign } from './textAlign'
+export { default as textColor } from './textColor'
+export { default as textDecoration } from './textDecoration'
+export { default as textOpacity } from './textOpacity'
+export { default as textTransform } from './textTransform'
+export { default as transform } from './transform'
+export { default as transformOrigin } from './transformOrigin'
+export { default as transitionDelay } from './transitionDelay'
+export { default as transitionDuration } from './transitionDuration'
+export { default as transitionProperty } from './transitionProperty'
+export { default as transitionTimingFunction } from './transitionTimingFunction'
+export { default as translate } from './translate'
+export { default as userSelect } from './userSelect'
+export { default as verticalAlign } from './verticalAlign'
+export { default as visibility } from './visibility'
+export { default as whitespace } from './whitespace'
+export { default as width } from './width'
+export { default as wordBreak } from './wordBreak'
+export { default as zIndex } from './zIndex'
diff --git a/src/util/resolveConfig.js b/src/util/resolveConfig.js
index 961cc93a..995e3412 100644
--- a/src/util/resolveConfig.js
+++ b/src/util/resolveConfig.js
@@ -7,7 +7,7 @@ import map from 'lodash/map'
 import get from 'lodash/get'
 import toPath from 'lodash/toPath'
 import negateValue from './negateValue'
-import { corePluginList } from '../corePlugins'
+import { corePluginList } from '../corePluginList'
 import configurePlugins from './configurePlugins'
 
 const configUtils = {
@@ -195,7 +195,7 @@ function resolveCorePlugins(corePluginConfigs) {
       return corePluginConfig({ corePlugins: resolved })
     }
     return configurePlugins(corePluginConfig, resolved)
-  }, Object.keys(corePluginList))
+  }, corePluginList)
 
   return result
 }


Test patch:
diff --git a/__tests__/resolveConfig.test.js b/__tests__/resolveConfig.test.js
index f2db50ea..2e7ff728 100644
--- a/__tests__/resolveConfig.test.js
+++ b/__tests__/resolveConfig.test.js
@@ -1,4 +1,4 @@
-import { corePluginList } from '../src/corePlugins'
+import { corePluginList } from '../src/corePluginList'
 import resolveConfig from '../src/util/resolveConfig'
 
 test('prefix key overrides default prefix', () => {
@@ -1821,7 +1821,7 @@ test('core plugin configuration builds on the default list when starting with an
     separator: ':',
     theme: {},
     variants: {},
-    corePlugins: Object.keys(corePluginList).filter(c => c !== 'display'),
+    corePlugins: corePluginList.filter(c => c !== 'display'),
   })
 })