Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CSS variables in LESS variables breaks sourcemaps

See original GitHub issue

@color: var(--foo); // works if this isn't a css variable

body {
	border-left: 1px solid @color;
	width: calc(50% - 5px);
	border-top: 1px solid @color; // Fails here
}

If you compile this with sourcemaps on, it fails with SyntaxError: Cannot read property 'substring' of undefined on the border-top. If you don’t use a CSS variable for @color it will work fine, and also until a use of calc() everything will also work fine. But any rules after the use of calc will fail if the rule is a mix of css and a variable.

Issue Analytics

State:
Created 5 years ago
Comments:11 (6 by maintainers)

Top GitHub Comments

1reaction

matthew-deancommented, Aug 8, 2018

@eamodio Good to hear! You’re welcome!

1reaction

matthew-deancommented, Aug 7, 2018

@pascallaprade-beslogic Can you test against that branch as well as it should have your fix?

Top Results From Across the Web

css - inline less source map compiled from node code

I'm having trouble adding an inline source map to the compiled css from my less files. From node we are running the following...

Command Line Usage - Less CSS

Less extends CSS with dynamic behavior such as variables, mixins, operations and functions. Less runs on both the server-side (with Node.js and Rhino)...

https://www.hopelink.org/sites/all/libraries/less....

PluginLoader(less), plugin, plugins = []; var args = process.argv.slice(1); ... sourceMap = true; break; case 'source-map-less-inline': sourceMapOptions.

Debug Node.js Apps using Visual Studio Code

Set breakpoints, step-in, inspect variables and more. ... You'll find instruction for debugging with source maps, stepping over external code, doing remote ...

less-plugin-css-george - npm

A plugin for Less to allow runtime manipulation of variables.. Latest version: 2.1.0, last published: 2 years ago.