TypeError: Cannot read properties of undefined (reading 'charCodeAt')

[christianbundy]

I'm able to reproduce an exception when running this with Tailwind, and thought I'd make a quick issue in case others had a similar problem:

ERROR in ./app/components/main/index.css (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./app/components/main/index.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'charCodeAt')
    at /path/to/project/app/components/main/index.css:7:1
    at module.exports (/path/to/project/node_modules/postcss-value-parser/lib/parse.js:28:20)
    at new ValueParser (/path/to/project/node_modules/postcss-value-parser/lib/index.js:7:18)
    at ValueParser (/path/to/project/node_modules/postcss-value-parser/lib/index.js:10:10)
    at resolveFunctions (/path/to/project/node_modules/tailwindcss/lib/lib/evaluateTailwindFunctions.js:136:44)
    at /path/to/project/node_modules/tailwindcss/lib/lib/evaluateTailwindFunctions.js:231:30
    at /path/to/project/node_modules/postcss/lib/container.js:303:18
    at Root.each (/path/to/project/node_modules/postcss/lib/container.js:53:16)
    at Root.walk (/path/to/project/node_modules/postcss/lib/container.js:300:17)
    at /path/to/project/node_modules/tailwindcss/lib/lib/evaluateTailwindFunctions.js:226:14
    at /path/to/project/node_modules/tailwindcss/lib/processTailwindFeatures.js:56:57
    at plugins (/path/to/project/node_modules/tailwindcss/lib/plugin.js:38:63)
    at LazyResult.runOnRoot (/path/to/project/node_modules/postcss/lib/lazy-result.js:329:16)
    at LazyResult.runAsync (/path/to/project/node_modules/postcss/lib/lazy-result.js:258:26)
    at LazyResult.async (/path/to/project/node_modules/postcss/lib/lazy-result.js:160:30)
    at LazyResult.then (/path/to/project/node_modules/postcss/lib/lazy-result.js:404:17)
 @ ./app/components/main/index.css 8:6-182 20:17-24 24:7-21 50:25-39 51:36-47 51:50-64 55:6-65:7 56:54-65 56:68-82 62:42-53 62:56-70 64:21-28 75:0-152 75:0-152 76:22-29 76:33-47 76:50-64 53:4-66:5
 @ ./app/components/main/index.tsx 5:0-21

webpack 5.94.0 compiled with 1 error in 3273 ms

Here's my postcss config:

const tailwindConfig = require('./tailwind.config')
const tailwindcss = require('tailwindcss')

module.exports = {
  plugins: [tailwindcss(tailwindConfig), ['postcss-font-magician',{
    variants: {
      'Roboto Condensed': {
        '300': [],
        '400': [],
        '700': []
      }
    },
    foundries: ['google']
  }]]
}

My Tailwind config:

{
  "content": [
    "**/*.{html,ts,tsx}",
  ],
  "theme": {
    "extend": {
      "fontFamily": {
        "sans": [
          "\"Roboto Condensed\""
        ]
      }
    }
  }
}

And my index.css, which used to have the usual tailwind directive, but I've reduced to a minimal:

@tailwind base;

Please let me know if there's anything I can do to help debug! I added some console.log statements in the stack trace to see what the value of input was, but everything I logged was undefined, which wasn't super helpful. Cheers!

[romainmenke]

Hi @christianbundy,

I don't see postcss-font-magician in that stacktrace, why do you think this is related to this plugin?

---

I don't know anything of Tailwind so I can't debug this without a complete but minimal reproduction :)

[christianbundy]

I don't see postcss-font-magician in that stacktrace, why do you think this is related to this plugin?

Thanks! I should've mentioned that part: this happens as soon as I create a postcss-font-magician config for the font I'm using. I'll try to put together a complete repro, thanks for the quick response.

[christianbundy]

I think this might be a me problem:

module.exports = {
  plugins: [tailwindcss(tailwindConfig), ['postcss-font-magician',{
    variants: {
      'Roboto Condensed': {
        '300': [],
        '400': [],
        '700': []
      }
    },
    foundries: ['google']
  }]]
}

I think I confused webpack rule syntax with postcss plugin syntax. 🤦 Sorry for the noise!

In case anyone else runs into this issue, here's my fixed postcss config:

/* eslint-env node */

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    'postcss-font-magician': {
      variants: {
        'Roboto Condensed': {
        '300': [],
        '400': [],
        '700': []
      },
      foundries: ['google'],
    },
  },
}