@parcel/transformer-css: Unexpected token Semicolon

[caleb-at-pieces]

🐛 bug report

I have an internal package which uses tailwindcss, and some simple updates to it seem to have led to issues in the css transformation pipeline within parcel. Now whenever I build my app I am getting 'unexpected token semicolon':

🎛 Configuration (.babelrc, package.json, cli command)

//tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{html,js,ts,jsx,tsx}',
    './node_modules/@pieces.app/pieces-copilot-plugin/dist/**/*.{html,js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

// .postcssrc.js
module.exports = {
  "plugins": {
    "tailwindcss": {},
    'postcss-import': require('postcss-import'),
    'postcss-url': { url: 'inline' },
  }
}

// .parcelrc
{
"extends": "@parcel/config-default",
"optimizers": { "*.svg": [] }
}

# built with this command:
npx parcel src/index.html

🤔 Expected Behavior

I would expect that the build would not fail (not too much changed in terms of my adding css). This package is working fine in other projects that I have.

😯 Current Behavior

after attempting to build the package it is giving me this error

💁 Possible Solution

Looking at the class that it is creating it might be how I am applying my css variables in tailwind classes that is causing this issue such as:

element.classList.add('focus:border-[var(--text-accent)]')

🔦 Context

After updating my package to a newer version it is now failing to build, previous versions work fine.

💻 Code Sample

I can't right now as it is a private npm package but we may be able to set something up.

🌍 Your Environment

as mentioned earlier I am using tailwindcss and postcss in order to build my css file. My project is a front end that is written purely in typescript (no framework such as react).

I have used this package extensively in other environments without issue, however I did just get started on a newer integration I am not as familiar with so it may be something that I have missed. (this is the only one built with parcel, the rest have esbuild / postcss as their pipelines)

Software	Version(s)
Parcel	2.9.3
Node	20.3.0
npm/Yarn	npm 9.6.7
Operating System	macos sonoma 14.3.1

[mischnic]

Parcel's CSS handling got stricter at some point after switching to Lightning CSS

I think that is just invalid CSS?

If you can't/don't want to fix this, you could set errorRecovery to silence that error: parcel-bundler/website#1071

[caleb-at-pieces]

Parcel's CSS handling got stricter at some point after switching to Lightning CSS

I think that is just invalid CSS?

If you can't/don't want to fix this, you could set errorRecovery to silence that error: parcel-bundler/website#1071

Yes I think you are correct. I don't think the issue is in parcel or lightningcss but potentially it is auto prefixer that is adding that invalid css into the bundle.

I went back and saw in my other projects that that css rule is still present however the css bundling steps just end up ignoring the error.

Thx for the response.