Why scss-bundle raised this error after Angular / Material 12 migration? - css

We have an Angular 11 project that use Angular Material and some scss files. I try to update it to Angular 11.
I executed the first command for Angular and Angular CLI without problem / error and our build works well :
npx #angular/cli#12 update #angular/core#12 #angular/cli#12
We have a problem after the command line that update Angular Material 12 :
npx #angular/cli#12 update #angular/material#12
It updates the package.json with the new 12 versions and modify our scss files ( with #use for instance and othe things , I don't know exactly the process update...)
We use scss-bundle ( version 2.4.0 ) to bundle several scss files in one with this command ( I hide my company name with XXX ;-) ):
scss-bundle -p . -e ./projects/#XXX/ang-ui/src/assets/XXX-theme.raw.scss -d ./projects/#XXX/ang-ui/src/assets/XXX-theme.scss
and the following error is thrown :
[Error] There is an error in your styles:
Invalid CSS after "...typography: mat": expected expression (e.g. 1px, bold), was ".define-typography-" on line (386, 24)
I don't know where is the file with line 386, I did not find it but after isolation th problems seems to come from this content and I really don't know what is the problem :
#use '~#angular/material' as mat;
#import '~#angular/material/theming';
$custom-typography: mat.define-typography-config($font-family: 'Arial,Helvetica,sans-serif',
$headline: mat.define-typography-level(32px, 48px, 700),
$body-1: mat.define-typography-level($text-size, 24px, 500));
...
Any idea ?

Related

NextJS Error - HookWebpackError: Expected a pseudo-class or pseudo-element

I get the following error when running next build:
HookWebpackError: Expected a pseudo-class or pseudo-element.
at makeWebpackError (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/webpack/bundle5.js:28:308185)
at /Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/webpack/bundle5.js:28:105236
at eval (eval at create (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/webpack/bundle5.js:13:28771), <anonymous>:34:1)
-- inner error --
Error: Expected a pseudo-class or pseudo-element.
at /Users/eliot/Developer/eliothertenstein.com/static/css/66780ddc5f37cb3b.css:906:3
at Root._error (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:78465)
at Root.error (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:124360)
at Parser.error (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:86811)
at Parser.expected (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:93145)
at Parser.pseudo (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:89313)
at Parser.parse (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:92668)
at Parser.loop (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:92233)
at new Parser (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:78322)
at Processor._root (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:95242)
at Processor._runSync (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:95749)
caused by plugins in Compilation.hooks.processAssets
(See the full error at https://pastebin.com/JLQ2aR2f)
I've been trying to debug this issue for ~3hrs, and it's driving me crazy. I would appreciate any help on how I could better debug the next build command? I tried using the --debug flag, but it didn't seem to do anything.
So far I know this is an issue with tailwindcss (I assume postcss), as when I remove that section of my global.scss the program works again (or actually after I comment out the full file EXCEPT for tailwind it still breaks, commenting out tailwind leads to other issues).
Oh, some other debugging I've tried:
Searching through my entire project w/ regex to find any invliad tailwind classes (using (["'])(.*\b\w+: )(.*)(\1) to locate classes like md: text-red-600 but not md:text-red-600)
reinstalled all node_modules
commenting out all CSS files (which stops the issue!)
used both yarn classic and node to run the command (and npx) as opposed to yarn v3 which is what I currently use for development
Any help is appreciated!
It turns out the answer was an error in tailwind.config.js. One of my keyframes looked like this:
expand: {
...
'80%:': {
opacity: 0.5,
},
...
},
Notice the double colon after 80%.
I would encourage everyone with this issue to check classNames, .css files, and also tailwind.config.js for any extra colons.

getting "Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Invalid CSS after " in angular ag-grid

I'm getting following error after even with node-sass, sass or without both of them. But i remove node modules and node cache clean, I'm still getting this error. I tried adding node-sass and sass versions also. but still this error keep coming. this was happened after I upgrade my ag-grid version to 27.3 from 23.4.
ERROR in ./src/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/dist/cjs.js??ref--13-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after " #return math": expected expression (e.g. 1px, bold), was ".div($lhs, $rhs);"
on line 315 of node_modules/ag-grid-community/src/styles/mixins/_ag-theme-params.scss
from line 1 of node_modules/ag-grid-community/src/styles/ag-theme-base/sass/_ag-theme-base-default-params.scss
from line 1 of node_modules/ag-grid-community/src/styles/ag-theme-base/sass/_ag-theme-base-mixin.scss
from line 1 of node_modules/ag-grid-community/src/styles/ag-theme-base/sass/_ag-theme-base.scss
from line 1 of node_modules/ag-grid-community/src/styles/ag-theme-alpine/sass/_ag-theme-alpine-mixin.scss
from line 2 of D:\Projects\Operative\Repo\ag-grid-update\finance\finance-frontend\src\styles.scss
>> #return math.div($lhs, $rhs);
----------------^
need a help because I tried so many posted answers in SO.
As of Version 26 of AG Grid, Node-Sass will no longer work with AG Grid.
This is due to Node-Sass being deprecated in favor of Dart-Sass, you can find out more about this here.
For users upgrading from versions of AG Grid before 26 or new users, we would highly recommend using Sass.
For more information regarding AG Grid and Sass and how themes and styles work, please visit our documentation.

Symfony encore, variables in sass and scss

I have a variable file in scss and import it with Symfony encore for my scss and sass files (see the code below).
// enables Sass/SCSS support
Encore.enableSassLoader((options) => {
options.implementation = require('sass')
options.additionalData = `#import "#/scss/variables.scss"`
});
The problem is there are sass (node-module(s)) and scss (template) files in my project which needs them.
If I run it like the snippet above it went fine for the sass files, but the scss files give an error: 'SassError: expected ";" after the #import line in the additionalData'.
However if I add the ; after the import line I get an error from the sass files 'SassError: semicolons aren't allowed in the indented syntax.'.
It's probably a small issue which I miss but I have no clue at the moment. I tried it with the added parameter indentedSyntax with true and false in the sassOptions but this was no success.
Anyone have an idea?
With kind regards

What does `!important` without a value mean in CSS?

Situation:
I am trying to use bootstrap 4 stylesheet with NextJS. The bootstrap 4 stylesheet (which is complied from SASS) has many codes like:
.checkbox.checkbox-accent > span {
border-width: !important;
}
which breaks the production build of NextJS, i.e. when issue yarn build I get the following error:
yarn run v1.22.4
$ next build
info - Creating an optimized production build
Failed to compile.
TypeError: Cannot read property 'toLowerCase' of undefined
> Build error occurred
Error: > Build failed because of webpack errors
at /home/musa/codes/paisaha/finance-nextjs/node_modules/next/dist/build/index.js:441:19
at async /home/musa/codes/paisaha/finance-nextjs/node_modules/next/dist/build/tracer.js:1:1441
error Command failed with exit code 1.
However when I add a value before the !important in CSS the build problem is gone, e.g:
.checkbox.checkbox-accent > span {
border-width: unset !important;
}
Question:
What does !important without a value mean and is it a valid CSS piece of code? Or is it a problem with SASS compilation? Or it is something with webpack compiler used by NextJS?
Notes:
yarn dev works fine
"dependencies": { "next": "10.0.6", "react": "17.0.1", "react-dom": "17.0.1" }
NodeJS version: v12.18.2
Platform: WSL2 on Windows 10
I tested !important in a sass file(in vs code) without any property value and it yelled at me:
property value expectedscss(css-propertyvalueexpected)
So, it hasn't any special meaning. I think there may be a problem in your code before compilation that generates this line of code.
I think you’re missing variables.
Check what the original SASS is. It’s probably something like:
border-width: $border-width !important;
But your value for the $border-width variable is an empty string (if it were completely undefined it wouldn’t compile)

SCSS compiler not working properly in PyCharm

I am trying to set up a SCSS transpiler in PyCharm for Django project.
Basically, what I need is to convert /static/scss/main.scss to /static/css/main.css
Here are the configurations of SCSS File Watcher:
Program: /home/maverick/.rvm/gems/ruby-2.2.3/bin/scss
Arguments: --no-cache --update /home/maverick/Documents/DjangoProjects/timberg/static/css/$FileNameWithoutExtension$.css
Working directory: /home/maverick/Documents/DjangoProjects/timberg/static/scss
Output paths to refresh: /home/maverick/Documents/DjangoProjects/timberg/static/css/$FileNameWithoutExtension$.css
What is happening is that main.css is being generated where it should. But it contains only errors, not the expected css, like this:
/*
Error: Inconsistent indentation: 2 spaces were used for indentation, but the rest of the document was indented using 8 spaces.
on line 39 of /home/maverick/Documents/DjangoProjects/timberg/static/css/main.css
and etc.
What is wrong here? How can I fix it?
The problem was in the Arguments part.
It should be:
$FileName$:/home/maverick/Documents/DjangoProjects/timberg/static/css/$FileNameWithoutExtension$.css
not just:
/home/maverick/Documents/DjangoProjects/timberg/static/css/$FileNameWithoutExtension$.css
My mistake was leaving out $FileName$: at the beginning.

Resources