less / less/less.js

processImports set to false and using @import results in TypeError: Cannot read property 'rules' of undefined

Open
#3,504 8 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug medium priority up-for-grabs
Dominant language
JavaScript
Stars
17k
Forks
3.4k
Avg merge
7h 42m
Merged PRs (30d)
26

Description

I've looked through the issues, but couldn't find something similar. The below code used to work in less 2.x.

const less = require('less');
const raw = ` @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');`;

less.render(raw, { processImports: false })
    .then(() => console.info('Less ok!'))
    .catch(error => console.error('Less failed!', error));

When trying this with less 3.11.1 it fails with TypeError: Cannot read property 'rules' of undefined on the following less-code from less.cjs.js:

else {
  ruleset = new Ruleset(null, copyArray(this.root.rules));
  ruleset.evalImports(context);
  return this.features ? new Media(ruleset.rules, this.features.value) : ruleset.rules;
} 

this.root seems to be undefined. I'm just wondering if it's something I did wrong on my end or that it's a bug we can fix?

Setting processImports to true > Ok
Adding more css/less > Same error.

Managed to fix it by changing the less code to

else if (this.root) {
  ruleset = new Ruleset(null, copyArray(this.root.rules));
  ruleset.evalImports(context);
  return this.features ? new Media(ruleset.rules, this.features.value) : ruleset.rules;
} else { return []; }

But I'm not sure if that's the best approach here, there might be an underlying bug somewhere.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue with the provided less.render example using processImports: false, then inspect less.cjs.js around the ruleset and evalImports branch where this.root is accessed. Done means the external @import no longer throws a TypeError when imports are disabled, while the existing processImports: true behavior remains working.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
compilers
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.