v0.3.0 TypeError: Cannot read property 'type' of null

[sklawren]

What version of @tailwindcss/forms are you using?

0.3.0

What version of Node.js are you using?

12.18.4

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://www.youtube.com/watch?v=3O_3X7InOw8

Not sure what changed but I updated this to 0.3.0 today and this error appeared:

ERROR in ./src/styles/tailwind.css (./node_modules/@storybook/addon-postcss/node_modules/css-loader/dist/cjs.js!./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js??ref--13-2!./src/styles/tailwind.css)
Module build failed (from ./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read property 'type' of null
    at extractCandidates (/Users/me/project/node_modules/@tailwindcss/jit/src/lib/setupContext.js:314:22)
    at /Users/me/project/node_modules/@tailwindcss/jit/src/lib/setupContext.js:328:22
    at Array.flatMap (<anonymous>)
    at withIdentifiers (/Users/me/project/node_modules/@tailwindcss/jit/src/lib/setupContext.js:326:30)
    at addBase (/Users/me/project/node_modules/@tailwindcss/jit/src/lib/setupContext.js:390:38)
    at /Users/me/project/node_modules/@tailwindcss/forms/src/index.js:252:5
    at registerPlugins (/Users/me/project/node_modules/@tailwindcss/jit/src/lib/setupContext.js:580:7)

...etc

Rolled back to 0.2.1 and the error disappears.

I'm using the latest version of everything else.

{
    "@tailwindcss/jit": "^0.1.10",
    "@tailwindcss/typography": "^0.4.0",
    "autoprefixer": "^10.2.5",
    "postcss": "^8.2.8",
    "postcss-focus-visible": "^5.0.0",
    "postcss-loader": "^5.2.0",
    "postcss-nesting": "^7.0.1",
    "tailwindcss": "^2.0.4",
}

[ghost]

What version of @tailwindcss/forms are you using?

"@tailwindcss/forms": "^0.3.0",

What version of Node.js are you using?

v14.15.4

What operating system are you using?

XUbuntu 20.04

Package.json

    "dependencies": {
        "alpinejs": "^2.8.2",
        "axios": "^0.21.1"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.3.0",
        "@symfony/webpack-encore": "^1.0.0",
        "@tailwindcss/aspect-ratio": "^0.2.0",
        "@tailwindcss/jit": "^0.1.8",
        "@tailwindcss/typography": "^0.4.0",
        "autoprefixer": "^10.2.5",
        "core-js": "^3.0.0",
        "postcss": "^8.2.8",
        "postcss-import": "^14.0.0",
        "postcss-loader": "^5.2.0",
        "regenerator-runtime": "^0.13.2",
        "tailwindcss": "^2.0.4",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    }
}

webpack.config.js

const Encore = require('@symfony/webpack-encore');
const fs = require('fs');
const path = require('path');
const jsFolder = path.join(__dirname, 'assets/js/components');

let files = fs.readdirSync(jsFolder);


files.forEach((item) => {
    Encore.addEntry(item.replace(".js", ""), "./assets/js/components/"+item);
})


Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build');

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}


    // only needed for CDN's or sub-directory deploy
    //.setManifestKeyPrefix('build/')

Encore
    /*
     * ENTRY CONFIG
     *
     * Each entry will result in one JavaScript file (e.g. site.js)
     * and one CSS file (e.g. site.css) if your JavaScript imports CSS.
     */
    .addEntry('site-js', './assets/js/site.js')
    .addStyleEntry('site-css', './assets/css/site.css')

    // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
    .splitEntryChunks()

    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()

    /*
     * FEATURE CONFIG
     *
     * Enable & configure other features below. For a full
     * list of features, see:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    .configureBabel((config) => {
        config.plugins.push('@babel/plugin-proposal-class-properties');
    })

    // enables @babel/preset-env polyfills
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    // .autoProvideVariables({
    //     alpine: 'alpine',
    //     axios: 'axios'
    // })

    // uncomment to get integrity="..." attributes on your script & link tags
    // requires WebpackEncoreBundle 1.4 or higher
    //.enableIntegrityHashes(Encore.isProduction())

    // uncomment if you're having problems with a jQuery plugin
    //.autoProvidejQuery()
    .enablePostCssLoader()
;

module.exports = Encore.getWebpackConfig();

postcss.config.js

module.exports = {
    plugins: {
        '@tailwindcss/jit': {},
        autoprefixer: {},
    }
}

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors');

module.exports = {
    purge: [
        './templates/**/*.html.twig',
    ],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {
            colors: {
                gray: colors.coolGray,
                orange: colors.orange,
            }
        },
    },
    variants: {
        extend: {},
    },
    plugins: [
        require('@tailwindcss/typography'),
        require('@tailwindcss/aspect-ratio'),
        require('@tailwindcss/forms')
    ],
}

site.css

@import "fontello.css";
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Error message

 ERROR  Failed to compile with 1 errors                                                                       11:01:31 am

 error  in ./assets/css/site.css

TypeError: Cannot read property 'type' of null
    at Array.flatMap (<anonymous>)


Entrypoint site-js 10.8 KiB = runtime.js 10.3 KiB site-js.js 517 bytes
Entrypoint site-css 10.3 KiB = runtime.js
webpack compiled with 2 errors

What I am doing

I am using Symfony 5 "@symfony/webpack-encore": "^1.0.0" to process my javascript and css files. And getting this error.

Update

I downgraded the forms plugin to "@tailwindcss/forms": "^0.2.1",
everything working fine.

[ghost]

similar after 0.2.1 -> 0.3.0 (with jit only!)

[aeons]

It seems that jit can't handle the nulls returned from the change in this commit: 224e966

It works with strategy set back to 'base' though.

[adamwathan]

Should be fixed in v0.3.2 🤦 Thanks for reporting!