postcss-calc cannot parse objects/_scrollable-pane.scss (moj-frontend v1.6.1)

[ivanELEC]

Prerequisites

• Put an X between the brackets on this line if you have done all of the following:
  • Reproduced the problem
  • Followed all applicable steps in the debugging guide
  • Checked the FAQs on the message board for common solutions
  • Checked that your issue doesn't exist: https://github.com/ministryofjustice/moj-frontend/issues
  • Checked that there is not already a package that provides the described functionality

Description

I am trying to update @ministryofjustice/moj-frontend to v1.6.3 in my Ruby-on-Rails project.
When installing and compiling assets for this project, the following command is run:
bundle exec rails assets:precompile

When this command is run, postcss-calc, a dependency that reduces calculations in css etc files, has the following error:
JisonLexerError: Lexical error on line 1: Unrecognized text.

This is a current issue in postcss-calc which has been open for about a year, but it doesn't look like there's any activity on it

I have found that the following changes to src/moj/objects/_scrollable-pane.scss:

.moj-scrollable-pane {
  $scrollableBgColor: white;
  $scrollableTransparentColor: rgba(255, 255, 255, 0);
  $scrollableShadowColor: rgba(0, 0, 0, 0.2);
  $scrollableShadowSize: 0.75em;

  overflow-x: scroll;
  background: linear-gradient(
      to right,
      $scrollableBgColor,
      $scrollableBgColor,
      $scrollableTransparentColor calc(var($scrollableShadowSize) * 2) //changed line
    ),
    radial-gradient(
      farthest-side at 0 50%,
      $scrollableShadowColor,
      $scrollableTransparentColor
    ),
    linear-gradient(
      to left,
      $scrollableBgColor,
      $scrollableBgColor,
      $scrollableTransparentColor calc(var($scrollableShadowSize) * 2) //changed line
    ),
    radial-gradient(
        farthest-side at 100% 50%,
        $scrollableShadowColor,
        $scrollableTransparentColor
      )
      100%;
  background-color: $scrollableBgColor;
  background-repeat: no-repeat;
  background-attachment: local, scroll, local, scroll;
  background-size: 100% 100%, $scrollableShadowSize 100%, 100% 100%,
    $scrollableShadowSize 100%;
}

@include govuk-media-query($until: 1020px) {
  .moj-scrollable-pane .govuk-table__header,
  .moj-scrollable-pane .govuk-table__cell {
    white-space: nowrap;
  }
}

Steps to Reproduce

1. Include @ministryofjustice/moj-frontend in a rails project
2. Run bundle exec rails assets:precompile

Expected behaviour: Packages successfully install
Actual behaviour: Parser error occurs

Reproduces how often: Always

Versions

From v1.6.1

Additional Information

Note the 2 lines that were changed were originally:
$scrollableTransparentColor calc($scrollableShadowSize * 2)

[gregtyler]

@ivanELEC Thanks for reporting this, I've applied your changes in #425 and confirmed it doesn't affect our dist files, which is good. Could you install that branch (yarn add https://github.com/ministryofjustice/moj-frontend#use-postcss-calc-compatible-syntax) and confirm it fixes the problem for you before I put it out for review/merge?

[ivanELEC]

sure will give it a shot now

[ivanELEC]

Getting this error when trying to run that command:
error Can't add "@ministryofjustice/frontend": invalid package version undefined.
I think this could be fixed by adding the version property to the package.json temporarily? Not sure if there's a way I can hotfix the issue locally

[gregtyler]

Ah sorry, that was naive on my part. I forgot that what we publish to NPM isn't just the plain GitHub repo. I'll publish it to a personal clone instead.

[gregtyler]

Right, this is a bit weird but you can install my clone under the normal namespace with:

yarn add @ministryofjustice/frontend@npm:@gregtyler/[email protected]

You should then be able to see the var(...) change in your node_modules and be able to verify that it builds.

We're working on making prereleases better in moj-frontend, so this process has been a good reminder of why 😄

[ivanELEC]

yeah, I can confirm that works for me - thanks so much. Will look forward to this being added in the next version

[gregtyler]

Amazing, I'll get that in and released ASAP

[gregtyler]

Fixed in 1.6.4 (release upcoming)