Parsing error while parsing Bulma SASS

[kryten87]

The extractor runs into a parsing error when working with the Bulma framework .

The issue seems to stem from the differences between old-style SASS and new-style SCSS. Specifically, I write my styles using the new style, but I also @import some old-style files from a package.

How to replicate the issue I'm seeing:

Set up a new project:

package.json

{
  "name": "sass-extract-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "bulma": "^0.6.2",
    "node-sass": "^4.7.2",
    "sass-extract": "^2.1.0"
  }
}

main.scss - notice that I'm using a new-style .scss file.

// import the initial variables from bulma
//
@import "sass/utilities/initial-variables";
@import "sass/utilities/functions.sass";

// import bulma framework (which happens to be a set of old-style .sass files)
//
@import 'bulma';

test.js

const sass = require('node-sass');
const sassExtract = require('sass-extract');

const includePaths = [
    `${__dirname}/node_modules/bulma`,
];

// load my new-style "base" file
//
const file = `${__dirname}/main.scss`;

const rendered = sass.renderSync({ file, includePaths });

//console.log(rendered);
console.log(rendered.css.toString());

sassExtract.extract(rendered, { file })
    .then((vars) => {
        console.log(vars);
    });

The renderSync step with node-sass works fine - the resulting CSS looks the way it should. Passing it to the sass-extract extract results in the following error:

Unhandled rejection Parsing error: Please check validity of the block starting from line #3

1 | // Float
3*| .is-clearfix
4 |   +clearfix

Syntax: scss
Gonzales PE version: 4.2.3

gonzales-pe is clearly attempting to use the wrong syntax (scss instead of sass) when parsing this particular file. And digging around in the source to this package, I notice that the scss syntax is hard-coded in parse.js at line 147. I've tried manually changing this (just to see what happens), but it breaks with other errors - clearly this is going to take more than just a simple fix.

[jgranstrom]

@Kryten0807 thank for the detailed report. It looks like we have to distinguish between the different syntaxes and use the appropriate parser. Looking at the file type alone is not enough as it might not be available to the parser. I'll look into it this week.

[benvp]

Any news on this? Having the same issue.

[Tofandel]

Same issue 2 years after.. :(
Slightly annoying that this is called sass-extract but can only extract scss...