[Bug]: plugin fails for calc(infinity * 1s) #210
Comments
…x using the calc-constant infinity (#1261) Building a nuxt project using the module would just hang up due to an issue within the postcss plugin "calc" used by nanocss which is used by nuxt's default postcss config. This fix simply disables the plugin for nuxt projects using the module for now. An issue was created for the postcss plugin (see: postcss/postcss-calc#210)
|
Any plans to fix this? Tailwind CSS v4 uses |
How do you think postcss-calc should handle infinity? Should it try to minify it or just skip processing it? |
|
If I add test(
'infinity',
testValue('calc(infinity * 1px)', 'calc(infinity * 1px)')
);to |
|
@ludofischer Thanks for the response. I've made a reproduction scenario with minimal setup. mkdir webpack-css-project
cd webpack-css-project
yarn add webpack webpack-cli css-loader mini-css-extract-plugin css-minimizer-webpack-plugin --save-dev
mkdir src
touch src/style.css webpack.config.jssrc/style.css .rounded-full {
border-radius: calc(infinity * 1px);
}webpack.config.js const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
entry: './src/style.css',
output: {
path: path.resolve(__dirname, 'dist'),
clean: true,
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
],
},
],
},
optimization: {
minimize: true,
minimizer: [
`...`,
new CssMinimizerPlugin(),
],
},
plugins: [
new MiniCssExtractPlugin({
filename: 'style.min.css',
}),
],
mode: 'production',
};yarn webpackWill output: In this reproduction I could only get it to show as a warning but in my actual project this is a error which breaks the build. |
The warning is expected, what's strange is that it crashes. We changed it a few years back to just log a warning on unrecognized syntax (125be6a). Did |
|
Thanks a lot for fixing this @ludofischer. |
Describe the bug
Running the plugin fails on css containing a calculation using constant values. (See: https://developer.mozilla.org/en-US/docs/Web/CSS/calc-constant)
Expected behaviour
I'd expect the plugin to support calc-constant values or to at least not touch calculations it can't optimize to not cause such issues.
Steps to reproduce
Either create a new nuxt app and use
calc(infinity * 1px)somewhere inside the css and try to run a build or:pnpm ipackages/nuxt/src/module.tsand comment out the line disabling calc for cssnano:pnpm run build:allpackages/nuxtpnpm run dev:buildYou will see vite starting to build the client and then just hanging up because the calc plugin isn't able to work with the expression
calc(infinity * 1s)used insidepackages/sit-onyx/src/components/OnyxInput/OnyxInput.vue.Version
9.0.1
Environment
System: OS: macOS 14.5 CPU: (10) arm64 Apple M1 Max Memory: 932.81 MB / 32.00 GB Shell: 5.9 - /bin/zshPackage details
Additional context
I got here as I encountered a bug within a Nuxt Js app using css with the statement
calc(infinity *1s). It worked during development but at build time vite just hung up so I investigated further. Turns out nuxt uses postcss with nanocss by default. Nanocss again includes this plugin which causes the issue.It would be really great if the plugin could support these relatively new but stable constants. Thanks
The text was updated successfully, but these errors were encountered: