Negative value?

[QJan84]

This calc(-1 * var(--space-xl)); should be a negative value.... but the -1 is ignored!
The output is 3.25em but should be -3.25em.

CSS:

    --space-unit: 1em;
    --space-xl: calc(3.25 * var(--space-unit));

    .offset {
      top: inherit; 
      @include mq(md) {
        top: calc(-1 * 3.25em); // this works
        top: calc(-1 * var(--space-xl)); // don't work - should be negative
      }
    }

Gulp Task:

    .pipe($.postcss([
      /*
      Stylelint
      */
      $.stylelint(),
      /*
      Parse CSS and add vendor prefixes to rules by Can I Use
       */
      $.autoprefixer(),
      /*
      cssnano is a modern, modular compression tool written on top of the PostCSS ecosystem, which allows us to use a lot of powerful features in order to compact CSS appropriately.
       */
      $.cssnano({
        discardComments: {
          removeAll: true
        },
        discardDuplicates: true,
        discardEmpty: true,
        minifyFontValues: true,
        minifySelectors: true
      }),
      /*
      PostCSS-Custom-Properties lets you use Custom Properties in CSS, following the CSS Custom Properties specification.
      Example: h1 { color: var(--color); } <-- BECOMES --> h1 { color: red; color: var(--color); }
       */
      $.postcssCustomProperties(), // IE 11 polyfill
      /*
      PostCSS plugin to reduce calc()

      IE11 don't understand nested calc functions like this:
      margin-bottom: calc(calc(1.25*1em)*1)
      */
      $.postcssCalc(),
      /*
      PostCSS Error Reporter
      */
      $.postcssReporter({
        clearReportedMessages: true
      })
    ]))

Any ideas?

[alexander-akait]

Please provide full css code, i can't understand problem

[alexander-akait]

What you expected from calc(-1 * var(--space-xl))? It is variable, we can change this line, because it is unsafe

[QJan84]

I multiply by -1 so that the result should be negative, ie -3.25em. But it is positive, which should not be, since it is multiplied by -1.

[alexander-akait]

I still can't understand problem. What should be negative but positive now?

[QJan84]

I have a css variable with the value 3.25em and I just want to negate it.
For this to work I use calc () and multiply 3.25em by -1. Mathematically, the result would be -3.25em. Something does not work and the -1 is apparently ignored.

[alexander-akait]

Something does not work and the -1 is apparently ignored.

I think problem in your code, i can't find here problem

[alecmarcus]

Just to elucidate this problem, @evilebottnawi...

Multiplying any number by a negative number switches its positivity.

Which means @QJan84's code, which is multiplying -1 by var(--space-unit), or 3.25em, should return a negative number — regardless of whether a variable is used. Anything multiplied by -1 should become negative, this is a rule of mathematics, which postcss-calc currently ignores. This is not a problem in @QJan84's code.

If there's anything I can do to help get a release out with the fix, please let me know. This is not a minor bug.

[Semigradsky]

@alecmarcus I tried this code: calc(-1 * var(--space-xl)) and it reduced correctly to calc(-1*var(--space-xl)). Maybe you can provide working example?

[ktabors]

The react-spectrum team at Adobe ran into this issue too. I wrote a postcss-calc test to try to reproduce this and it passed. I think this is an interaction with another library. In our code we found calc(var(--space-xl) * -1); worked. One of my colleges is looking at cssnano/cssnano#816 as a possible problem since it caused issues for us elsewhere.

[ludofischer]

I cannot find a clear reproduction or even what the issue is. calc(-1 * var(--space-xl)) works correctly. The original issue does not seem related to nested variables, anyway #91 is keeping track of that.