Less compilation error

[usulix]

ERROR in ./~/css-loader?{"sourceMap":true,"importLoaders":2}!./~/postcss-loader/lib?{"sourceMap":true}!./~/less-loader/dist?{"sourceMap":true,"strictMath":true}!./~/preact-material-components/Button/style.css
Module build failed: 

        .mdc-button.mdc-button--primary::before {
          background-color: color(var(--mdc-theme-primary, #3f51b5) a(12%)); } }
                          ^
Error evaluating function `color`: keyword.toLowerCase is not a function
      in /home/usulix/Development/accountsgui/node_modules/preact-material-components/Button/style.css (line 426, column 28)
 @ ./~/preact-material-components/Button/style.css 4:14-160 18:2-22:4 19:20-166
 @ ./src/lib/FormComponents/LoginButton.js
 @ ./src/components/login/index.js
 @ ./src/components/app.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js

Points me to trying to find the correct css processing configuration for webpack
Currently I have

use: ExtractTextPlugin.extract({
					fallback: 'style-loader',
					use: [
						{
							loader: 'css-loader',
							options: { sourceMap: CSS_MAPS, importLoaders: 2 }
						},
						{
							loader: `postcss-loader`,
							options: {
								sourceMap: CSS_MAPS,
								plugins: () => {
									autoprefixer({ browsers: [ 'last 2 versions' ] });
								}
							}
						},
						{
							loader: 'less-loader',
							options: { sourceMap: CSS_MAPS, strictMath: true }
						}
					]
				})

and the strictMath: true appears to be required to get through a different portion of the css

ERROR in ./~/css-loader?{"sourceMap":true,"importLoaders":2}!./~/postcss-loader/lib?{"sourceMap":true}!./~/less-loader/dist?{"sourceMap":true}!./~/preact-material-components/LayoutGrid/style.css
Module build failed: 

  padding: 8px;
  padding: calc(var(--mdc-layout-grid-margin, 16px) - var(--mdc-layout-grid-gutter, 16px) / 2); }
^
Operation on an invalid type
      in /home/usulix/Development/accountsgui/node_modules/preact-material-components/LayoutGrid/style.css (line 21, column 2)
 @ ./~/preact-material-components/LayoutGrid/style.css 4:14-160 18:2-22:4 19:20-166
 @ ./src/components/login/index.js
 @ ./src/components/app.js

I was moving along well.. until this keyword.toLowerCase error popped up.

and it seems to be the inability of the webpack config I have to get a value from

var(--mdc-theme-primary, #3f51b5) a(12%)

what are you doing to support var() in your css processing, please.

Thanks and best regards

Greg

[prateekbh]

Hi @usulix!
I honestly haven't worked with less for a ong long time. I had similar issues with pre-css because of postcss-custom-properties.

I don't exactly know from what breaks in less from the top of my head, but if there is a repo where i can peep into i'll for sure give it a look.

[usulix]

Thanks prateekbh and I appreciate the response..
I will look into postcss-custom-properties and see if that give me any extra info on my issue.

Regards,
Greg

[filoozom]

Any news on this? Are you using or have you tried preact-cli?

[john1jan]

I have solved it. After searching a lot got this issue from less repo.

You have to enable strictMath: true in your webpack less loader option.

By default less was not supporting math function in css like calc, scale ..etc

{
	loader: 'less-loader',
	options: { strictMath: true}
}

[prateekbh]

Thanks so much @john1jan u rock 👍 .
@usulix lemme know if this still persist for you.