Cannot convert undefined or null to object

[andrevandal]

Hi, I use Gridsome and I'm trying upgrade Tailwind to v1.0.0 but I've got an error:

 error  in ./src/assets/css/main.css?vue&type=style&index=0&lang=css&

Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at tailwindColorVarsPlugin (D:\dev\derevandal\node_modules\tailwind-color-vars\index.js:14:24)
    at plugins.forEach.plugin (D:\dev\derevandal\node_modules\tailwindcss\lib\util\processPlugins.js:45:5)
    at Array.forEach (<anonymous>)
    at _default (D:\dev\derevandal\node_modules\tailwindcss\lib\util\processPlugins.js:44:11)
    at D:\dev\derevandal\node_modules\tailwindcss\lib\processTailwindFeatures.js:33:58
    at LazyResult.run (D:\dev\derevandal\node_modules\postcss\lib\lazy-result.js:295:14)
    at LazyResult.asyncTick (D:\dev\derevandal\node_modules\postcss\lib\lazy-result.js:208:26)
    at LazyResult.asyncTick (D:\dev\derevandal\node_modules\postcss\lib\lazy-result.js:221:14)
    at LazyResult.asyncTick (D:\dev\derevandal\node_modules\postcss\lib\lazy-result.js:221:14)
    at LazyResult.asyncTick (D:\dev\derevandal\node_modules\postcss\lib\lazy-result.js:221:14)
    at LazyResult.asyncTick (D:\dev\derevandal\node_modules\postcss\lib\lazy-result.js:221:14)
    at D:\dev\derevandal\node_modules\postcss\lib\lazy-result.js:213:17

 @ ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js??ref--2-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--2-oneOf-1-2!./src/assets/css/main.css?vue&type=style&index=0&lang=css& 4:14-265 14:3-18:5 15:22-273
 @ ./src/assets/css/main.css?vue&type=style&index=0&lang=css&
 @ ./src/layouts/Default.vue
 @ ./src/main.js
 @ ./node_modules/gridsome/app/main.js
 @ ./node_modules/gridsome/app/app.js
 @ ./node_modules/gridsome/app/entry.client.js
 @ multi webpack/hot/dev-server webpack-hot-middleware/client?name=app&reload=true ./node_modules/gridsome/app/entry.client.js

tailwind.config.js

module.exports = {
  prefix: '',
  important: false,
  separator: ':',
  theme: {
    colors: {
      primary: '#1FDE91',
      secondary: '#083EA7'
    },

    fontFamily: {
      sans: [
        'system-ui',
        'BlinkMacSystemFont',
        '-apple-system',
        'Segoe UI',
        'Roboto',
        'Oxygen',
        'Ubuntu',
        'Cantarell',
        'Fira Sans',
        'Droid Sans',
        'Helvetica Neue',
        'sans-serif'
      ],
      mono: [
        'Menlo',
        'Monaco',
        'Consolas',
        'Liberation Mono',
        'Courier New',
        'monospace'
      ]
    },

    boxShadow: {
      'outline-primary': '0 0 0 3px rgba(31, 222, 145,0.5)'
    },
    container: {
      center: true,
      padding: '1rem'
    }
  },

  plugins: [
    require('tailwindcss-important')(),
    require('tailwindcss-aspect-ratio')({
      ratios: {
        square: [1, 1],
        '16/9': [16, 9],
        '4/3': [4, 3],
        '21/9': [21, 9]
      }
    }),
    require('tailwindcss-transitions')({
      variants: ['responsive'],
      properties: {
        all: 'all',
        'box-shadow': 'box-shadow',
        opacity: 'opacity',
        'opacity-and-color': ['opacity', 'color']
      },
      durations: {
        default: '100ms',
        '200': '200ms',
        '300': '300ms',
        '400': '400ms',
        '500': '500ms'
      },
      timingFunctions: {
        default: 'linear',
        ease: 'ease'
      },
      delays: {
        none: '0s'
      },
      willChange: {
        opacity: 'opacity',
        transform: 'transform',
        'box-shadow': 'box-shadow'
      }
    }),
    require('tailwind-color-vars')()
  ]
}

Postcss plugins:

const postcssPlugins = [
  require('postcss-import'),
  require('postcss-url'),
  require('postcss-nested-ancestors'),
  require('postcss-nested'),
  require('tailwindcss')('./tailwind.config.js'),
  require('autoprefixer')({
    cascade: false,
    grid: true
  }),
  require('postcss-preset-env')({
    stage: 0
  }),
  require('cssnano')({
    preset: 'default',
    discardComments: { removeAll: true },
    zindex: false
  }),
  require('postcss-at-rules-variables'),
  require('postcss-each')
]

could anyone help me?

thanks

[hacknug]

The issue comes from tailwind-color-vars that expects colors to be an object but it's not getting anything. This is due to how v1.x works.

I've forked the plugin and added support for 1.x. I don't think it'll work on 0.x but I'll fix it before opening a PR there.

In the meantime, you can simply copy and paste this into your plugins and it should work as expected:

(function ({
  colors,
  strategy = 'override',
  colorTransform = (color) => color,
} = {}) {
  return function ({ addComponents, e, config }) {
    if (colors && typeof colors === 'object') {
      if (strategy === 'override') {
        colors = Object.assign({}, config('theme.colors'), colors)
      } else if (strategy === 'replace') {
        colors = colors
      } else if (strategy === 'extend') {
        colors = Object.assign({}, colors, config('theme.colors'))
      }
    } else {
      colors = config('theme.colors')
    }

    let root = {}
    Object.keys(colors).forEach(colorKey => {
      root[`--${e(colorKey)}`] = colorTransform(colors[colorKey])
    })

    addComponents({ ':root': root })
  }
})( /* { colors: yourCustomColors } */ )

[andrevandal]

Oh, man! Thanks!
Do you mind to send a PR to original repo?

[hacknug]

Done!