vanillajs-datepicker@1.2.0, breaks scss build, webpack 5, mini-css-extract-plugin

[edgar0011]

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "...ize-base * math": expected expression (e.g. 1px, bold), was ".div(7, 8);"
on line 53 of node_modules/vanillajs-datepicker/sass/datepicker.scss
from line 69 of node_modules/vanillajs-datepicker/sass/datepicker-bulma.scss
from line 6 of src/index.scss

-shrinked-width: $dp-cell-size-base * math.div(7, 8);

------------------------------------------^

webpack config:

  {
    test: /\.(sa|sc|c)ss$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
      },
      {
        loader: 'css-loader',
        options: {
          sourceMap: !isProdServer,
        },
      },
      'resolve-url-loader',
      'postcss-loader',
      {
        loader: 'sass-loader',
        options: {
          sourceMap: !isProdServer,
        },
      },
    ],
  },

[mymth]

I think you use node-sass and migrating to dart sass should solve the problem.

I did a test build using #87's setup with some modifications to use v1.2 and your webpack config, and was able compile successfully with only one warning from resolve-url-loader about source map configuration.

It's been a while since node-sass became deprecated. I highly recommend switching to dart sass.
And in case you're unfamiliar with math.div(7, 8), it's dart sass's way to write division operation. If it's written as 7 / 8, dart sass warns that using / as a division operator is deprecated. FYI.

[ddzmichal]

SassError: Invalid CSS after "...ize-base * math": expected expression (e.g. 1px, bold), was ".div(7, 8);" on line 53 of node_modules/vanillajs-datepicker/sass/datepicker.scss from line 4 of src/assets/styles/style.scss >> -shrinked-width: $dp-cell-size-base * math.div(7, 8);

i have the same problem. adding additional settings in webpack does not fix this problem

{
// scss
test: /.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: { sourceMap: true },
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
config: { path: './postcss.config.js' },
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
sassOptions: {
importer: globImporter(),
includePaths: [
path.resolve(__dirname, './node_modules'),
],
},
},
},
],
},

This solution does not work. Anyone else have any ideas ?

package.json

"devDependencies": {
"@babel/core": "^7.10.5",
"@babel/preset-env": "^7.10.4",
"babel-loader": "^8.1.0",
"css-loader": "^4.1.1",
"eslint": "^7.18.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-plugin-import": "^2.22.1",
"file-loader": "^6.0.0",
"nice-select2": "^1.0.0",
"node-sass": "^4.14.1",
"postcss-loader": "^3.0.0",
"pug": "^3.0.2",
"sass-loader": "^9.0.2",
"simple-pug-loader": "^0.2.0",
"style-loader": "^1.2.1",
"svg-url-loader": "^7.1.1",
"tinymce": "^5.9.2",
"ts-loader": "^8.1.0",
"typescript": "^4.3.5",
"vanillajs-datepicker": "^1.1.4",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"autoprefixer": "^9.8.5",
"copy-webpack-plugin": "^6.0.3",
"countup.js": "^2.0.8",
"cropperjs": "^1.5.12",
"cssnano": "^4.1.10",
"dropzone": "^5.9.2",
"html-webpack-plugin": "^4.3.0",
"html-webpack-pug-plugin": "^3.0.0",
"mini-css-extract-plugin": "^0.9.0",
"node-sass-glob-importer": "^5.3.2",
"swiper": "^6.8.4",
"terser-webpack-plugin": "^4.2.3",
"webpack-merge": "^5.0.9"
}

[Comediant24]

When building a project on rails, I also encountered this problem.
There were no build errors on 1.1.4

This error appeared after updating the version to 1.2.0

---

ERROR in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/lib??ref--5-3!./node_modules/sass-loader/lib/loader.js??ref--5-4!./node_modules/vanillajs-datepicker/sass/datepicker.scss
[08:33:59] 01 Module build failed:
[08:33:59] 01 $dp-cell-shrinked-width: $dp-cell-size-base * math.div(7, 8);
[08:33:59] 01 ^
[08:33:59] 01 Invalid CSS after "...ize-base * math": expected expression (e.g. 1px, bold), was ".div(7, 8);"
[08:33:59] 01 in /home/blizko/sites/blizko/releases/20220114082027/node_modules/vanillajs-datepicker/sass/datepicker.scss (line 53, column 51)
[08:33:59] 01 @ ./node_modules/vanillajs-datepicker/sass/datepicker.scss 2:14-166
[08:33:59] 01 @ ./node_modules/@apress/apress-frontend-utils/utils/datepicker/datepicker.js
[08:33:59] 01 @ ./frontend/packs/blizko/assets/desktop/portal/catalogue_show.js
[08:33:59] 01
[08:33:59] 01 ERROR in ./node_modules/vanillajs-datepicker/sass/datepicker.scss
[08:33:59] 01 Module build failed: ModuleBuildError: Module build failed:
[08:33:59] 01 $dp-cell-shrinked-width: $dp-cell-size-base * math.div(7, 8);
[08:33:59] 01 ^
[08:33:59] 01 Invalid CSS after "...ize-base * math": expected expression (e.g. 1px, bold), was ".div(7, 8);"
[08:33:59] 01 in /home/blizko/sites/blizko/releases/20220114082027/node_modules/vanillajs-datepicker/sass/datepicker.scss (line 53, column 51)

[ddzmichal]

I blocked on package.json version that one
"vanillajs-datepicker": "1.1.4",
and working normally

[mymth]

I've just updated the change log.

Since I have no intention to add backward compatibility for software already deprecated, that compile error will never be fixed through this library's update.

[mymth]

For poeple who like to use v1.2 but have to stick with node-sass for some reason,

If you don't use Bootstrap 5, you can do it with the following:

1. update to v1.2

npm i -D vanillajs-datepicker@latest

2. install v1.1 as vanillajs-datepicker-11

npm i -D vanillajs-datepicker-11@mpm:vanillajs-datepicker@1.1.4

3. change your sass stylesheet's import path to the one of v1.1

@import 'path/to/node_modules/vanillajs-datepicker-11/sass/datepicker';

In terms of style, there are no changes in v1.2.0. All the chages made on the stylesheets are adding bs5 stylesheet and update for dart sass syntax. Thus, unless your CSS framework is BS5, there should be no problem with using v1.1's stylesheet with v1.2's JS.