Problem since 1.40.0 with bootstrap 5 #1496

kris2kris · 2021-09-21T04:39:35Z

Hello,

The following code of bootstrap produce a build error since sass 1.40.0 (https://github.com/twbs/bootstrap/blob/main/scss/mixins/_grid.scss)

margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list
margin-right: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list
margin-left: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list

If I remove the minus sign before 1 or .5 it works. I'm not sure that multiplication should failed because of a minus sign.

The text was updated successfully, but these errors were encountered:

yudielcurbelo · 2021-09-21T14:55:04Z

Same here.

Encapsulating the negative number in parenthesis as follows and everything works fine.

Original

margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list
margin-right: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list
margin-left: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list

Changed to

margin-top: calc(var(--#{$variable-prefix}gutter-y) * (-1)); // stylelint-disable-line function-disallowed-list
margin-right: calc(var(--#{$variable-prefix}gutter-x) * (-.5)); // stylelint-disable-line function-disallowed-list
margin-left: calc(var(--#{$variable-prefix}gutter-x) * (-.5)); // stylelint-disable-line function-disallowed-list

nex3 · 2021-09-21T21:38:43Z

I can't reproduce this with Dart Sass 1.42.0:

a {
  $variable-prefix: foo-;
  margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list
  margin-right: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list
  margin-left: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list
}

This produces:

a {
  margin-top: calc(var(--foo-gutter-y) * -1);
  margin-right: calc(var(--foo-gutter-x) * -0.5);
  margin-left: calc(var(--foo-gutter-x) * -0.5);
}

as expected.

What version of Sass are you using? Can you provide a minimal stylesheet that reproduces the issue?

kris2kris · 2021-09-22T05:09:28Z

Hello @nex3
I tried with all versions from 1.40.0 to 1.42.0

For my test,

I create an app with create-react-app
I add bootstrap 5.1.1 and sass 1.42.0
import bootstrap from node_modules in a .scss file

This is the package.json file

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1",
    "bootstrap": "5.1.1",
    "sass": "1.42.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

bradbajuz · 2021-09-22T12:59:42Z

Still having the issues with sass 1.42.1 and boostrap 5.1.1. Had to fall back to sass 1.39.2 to be able compile bootstrap 5.1.1

maicol07 · 2021-09-22T15:22:28Z

I have the same issue with mwc checkbox:

PS C:\Users\Maicol\Documents\Progetti\Web\osm_rewrite> sass node_modules\.pnpm\@material+checkbox@12.0.0\node_modules\@material\checkbox\_checkbox-theme.scss
Error: Expected "(" or ".".
    ╷
329 │   $checkbox-padding: calc((_ripple-size - _icon-size) / 2);
    │                                        ^
    ╵
  node_modules\.pnpm\@material+checkbox@12.0.0\node_modules\@material\checkbox\_checkbox-theme.scss 329:40  root stylesheet

stof · 2021-09-24T07:46:13Z

@maicol07 What are you expected to get for _ripple-size ? If you expect to use a variable, it misses a $.

maicol07 · 2021-09-24T07:47:57Z

@maicol07 What are you expected to get for _ripple-size ? If you expect to use a variable, it misses a $.

That's not a file of mine. It's a file of MWC checkbox (a library I use in my project)

stof · 2021-09-24T08:12:33Z

Well, if I look at the _checkbox-theme.scss file in the link you gave, it does not contain that source code at all...

maicol07 · 2021-09-24T08:17:24Z

Yes, you're right, because that file belongs to a dependency of mwc checkbox: mdc checkbox.

Here is the related lines:

https://github.com/material-components/material-components-web/blob/65084baffaca256dd9eb77aae8fbafd379d8da00/packages/mdc-checkbox/_checkbox-theme.scss#L329

stof · 2021-09-24T08:33:13Z

@maicol07 and they already fixed the issue in their code (but they haven't released it yet) when they were intended to use a string containing a template for a calc() for their JS code instead of a valid CSS calc computation.

maicol07 · 2021-09-24T08:36:58Z

Oh, yeah, you're right. I haven't read the last commit

stof · 2021-09-24T08:57:21Z

@maicol07 I suggest you close this issue then (I cannot do it myself, as I'm neither the author nor a maintainer, but only a contributor)

maicol07 · 2021-09-24T10:23:29Z

@maicol07 I suggest you close this issue then (I cannot do it myself, as I'm neither the author nor a maintainer, but only a contributor)

I don't know if the OP has fixed his issue yet

stof · 2021-09-24T10:33:04Z

@maicol07 ah yeah, I forgot that your reported your own issue in response to a different one.

nex3 · 2021-09-27T23:36:51Z

@kris2kris That isn't a minimal reproduction—I'm looking for a single Sass file without any dependencies that compiles to something unexpected. Nevertheless, I tried installing that version of bootstrap and running sass node_modules/bootstrap/scss/bootstrap.scss and it compiled successfully and produced reasonable-looking output.

stof · 2021-09-28T08:36:47Z

I tried debugging this in create-react-app, and the error does not come from the Sass compiler at all.
It comes from postcss-values-parser (used by postcss) when trying to parse calc(var(--bs-gutter-y)*-1). and given that this is definetely valid CSS, it indicates a bug in postcss-values-parser

For reference, here is the stack trace I managed to get:

      ModuleBuildError: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
      ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
      ParserError: Syntax Error at line: 1, column 25
          at /home/stof/tmp/dart_sass_1496/test/src/index.scss:6:8164
          at Parser.error (/home/stof/tmp/dart_sass_1496/test/node_modules/postcss-values-parser/lib/parser.js:127:11)
          at Parser.operator (/home/stof/tmp/dart_sass_1496/test/node_modules/postcss-values-parser/lib/parser.js:162:20)
          at Parser.parseTokens (/home/stof/tmp/dart_sass_1496/test/node_modules/postcss-values-parser/lib/parser.js:245:14)
          at Parser.loop (/home/stof/tmp/dart_sass_1496/test/node_modules/postcss-values-parser/lib/parser.js:132:12)
          at Parser.parse (/home/stof/tmp/dart_sass_1496/test/node_modules/postcss-values-parser/lib/parser.js:51:17)
          at parse (/home/stof/tmp/dart_sass_1496/test/node_modules/postcss-custom-properties/index.cjs.js:47:30)
          at /home/stof/tmp/dart_sass_1496/test/node_modules/postcss-custom-properties/index.cjs.js:333:24
          at /home/stof/tmp/dart_sass_1496/test/node_modules/postcss/lib/container.js:194:18
          at /home/stof/tmp/dart_sass_1496/test/node_modules/postcss/lib/container.js:139:18
          at Rule.each (/home/stof/tmp/dart_sass_1496/test/node_modules/postcss/lib/container.js:105:16)
          at Rule.walk (/home/stof/tmp/dart_sass_1496/test/node_modules/postcss/lib/container.js:135:17)
          at /home/stof/tmp/dart_sass_1496/test/node_modules/postcss/lib/container.js:152:24
          at Root.each (/home/stof/tmp/dart_sass_1496/test/node_modules/postcss/lib/container.js:105:16)
          at Root.walk (/home/stof/tmp/dart_sass_1496/test/node_modules/postcss/lib/container.js:135:17)
          at Root.walkDecls (/home/stof/tmp/dart_sass_1496/test/node_modules/postcss/lib/container.js:192:19)
          at transformProperties (/home/stof/tmp/dart_sass_1496/test/node_modules/postcss-custom-properties/index.cjs.js:330:8)
          at /home/stof/tmp/dart_sass_1496/test/node_modules/webpack/lib/NormalModule.js:316:20
          at /home/stof/tmp/dart_sass_1496/test/node_modules/loader-runner/lib/LoaderRunner.js:367:11
          at /home/stof/tmp/dart_sass_1496/test/node_modules/loader-runner/lib/LoaderRunner.js:233:18
          at context.callback (/home/stof/tmp/dart_sass_1496/test/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
          at /home/stof/tmp/dart_sass_1496/test/node_modules/postcss-loader/src/index.js:208:9
          at /home/stof/tmp/dart_sass_1496/test/node_modules/webpack/lib/NormalModule.js:316:20
          at /home/stof/tmp/dart_sass_1496/test/node_modules/loader-runner/lib/LoaderRunner.js:367:11
          at /home/stof/tmp/dart_sass_1496/test/node_modules/loader-runner/lib/LoaderRunner.js:182:20
          at context.callback (/home/stof/tmp/dart_sass_1496/test/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
          at /home/stof/tmp/dart_sass_1496/test/node_modules/mini-css-extract-plugin/dist/loader.js:148:14
          at /home/stof/tmp/dart_sass_1496/test/node_modules/webpack/lib/Compiler.js:343:11
          at /home/stof/tmp/dart_sass_1496/test/node_modules/webpack/lib/Compiler.js:681:15
          at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/stof/tmp/dart_sass_1496/test/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
          at AsyncSeriesHook.lazyCompileHook (/home/stof/tmp/dart_sass_1496/test/node_modules/tapable/lib/Hook.js:154:20)
          at /home/stof/tmp/dart_sass_1496/test/node_modules/webpack/lib/Compiler.js:678:31
          at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/stof/tmp/dart_sass_1496/test/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
          at AsyncSeriesHook.lazyCompileHook (/home/stof/tmp/dart_sass_1496/test/node_modules/tapable/lib/Hook.js:154:20)
          at /home/stof/tmp/dart_sass_1496/test/node_modules/webpack/lib/Compilation.js:1423:35
          at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/stof/tmp/dart_sass_1496/test/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
          at AsyncSeriesHook.lazyCompileHook (/home/stof/tmp/dart_sass_1496/test/node_modules/tapable/lib/Hook.js:154:20)
          at /home/stof/tmp/dart_sass_1496/test/node_modules/webpack/lib/Compilation.js:1414:32

nex3 · 2021-09-28T20:53:24Z

Thanks for debugging, @stof! In that case, I'll close this down.

sass/dart-sass#1496

* fixes double dep of babel loader and jest * Update HomeReelItem.js * fix build storybook - remove global bootstrap * add dark mode * Update package.json $ NODE_OPTIONS=--openssl-legacy-provider build-storybook -s public --quiet /opt/hostedtoolcache/node/16.18.1/x64/bin/node: --openssl-legacy-provider is not allowed in NODE_OPTIONS error Command failed with exit code 9. * remove automatic test temporarily * downgrade sass to 1.39 following issue in dart sass sass/dart-sass#1496 * Update storybook-test.yml * Update storybook-test.yml Co-authored-by: Daniele Guido <gui.daniele@gmail.com>

kris2kris mentioned this issue Sep 21, 2021

Importing bootstrap.scss breaks SASS compilation twbs/bootstrap#35018

Closed

nex3 added bug needs info labels Sep 21, 2021

jeanlescure mentioned this issue Sep 26, 2021

Versions v1.42.x broken (and maybe other previous ones...) #1512

Closed

stof mentioned this issue Sep 28, 2021

Cannot parse calculations without spaces around the * operator shellscape/postcss-values-parser#138

Closed

nex3 closed this as completed Sep 28, 2021

jathak mentioned this issue Sep 29, 2021

Error compiling calc with negative values at the end #1516

Closed

ClementLmn added a commit to BagageStudio/vranken-pommery-monopole that referenced this issue Jan 12, 2022

🔧 downgrade dart-sass because of bug in the lib

0880fb9

sass/dart-sass#1496

afrz mentioned this issue Aug 18, 2022

React Build Fails with 5.2 twbs/bootstrap#36851

Closed

3 tasks

danieleguido added a commit to C2DH/journal-of-digital-history that referenced this issue Dec 21, 2022

downgrade sass to 1.39 following issue in dart sass

618e711

sass/dart-sass#1496

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Problem since 1.40.0 with bootstrap 5 #1496

Problem since 1.40.0 with bootstrap 5 #1496

kris2kris commented Sep 21, 2021

yudielcurbelo commented Sep 21, 2021 •

edited

nex3 commented Sep 21, 2021

kris2kris commented Sep 22, 2021 •

edited

bradbajuz commented Sep 22, 2021

maicol07 commented Sep 22, 2021

stof commented Sep 24, 2021

maicol07 commented Sep 24, 2021

stof commented Sep 24, 2021

maicol07 commented Sep 24, 2021

stof commented Sep 24, 2021

maicol07 commented Sep 24, 2021

stof commented Sep 24, 2021

maicol07 commented Sep 24, 2021

stof commented Sep 24, 2021

nex3 commented Sep 27, 2021

stof commented Sep 28, 2021 •

edited

nex3 commented Sep 28, 2021

Problem since 1.40.0 with bootstrap 5 #1496

Problem since 1.40.0 with bootstrap 5 #1496

Comments

kris2kris commented Sep 21, 2021

yudielcurbelo commented Sep 21, 2021 • edited

nex3 commented Sep 21, 2021

kris2kris commented Sep 22, 2021 • edited

bradbajuz commented Sep 22, 2021

maicol07 commented Sep 22, 2021

stof commented Sep 24, 2021

maicol07 commented Sep 24, 2021

stof commented Sep 24, 2021

maicol07 commented Sep 24, 2021

stof commented Sep 24, 2021

maicol07 commented Sep 24, 2021

stof commented Sep 24, 2021

maicol07 commented Sep 24, 2021

stof commented Sep 24, 2021

nex3 commented Sep 27, 2021

stof commented Sep 28, 2021 • edited

nex3 commented Sep 28, 2021

yudielcurbelo commented Sep 21, 2021 •

edited

kris2kris commented Sep 22, 2021 •

edited

stof commented Sep 28, 2021 •

edited