less / less/less.js

Single quotation marks within comments break source maps

Open
#2,484 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug needs info
Dominant language
JavaScript
Stars
17k
Forks
3.4k
Avg merge
7h 42m
Merged PRs (30d)
26

Description

Hi guys,

We ran into the problem of having to replace all our single quotation marks(') to 'multi' quotation marks(") in all our Less file comments, in order to get source maps running.

Versions:
OS ~ Ubuntu 14.04.1 LTS
Browser ~ Google Chrome 40.0.2214.111 (64-bit)
Node ~ node-v0.12.0-linux-x64
Lessc ~ v2.4.0 (https://github.com/less/less.js/commit/6fd2a5751cc8313481913bcb1623bf6c50089df8)

Command used:

bin/node less/bin/lessc foo.less foo.css --source-map-less-inline --source-map-map-inline

Broken CSS output example:

#titanic {
    float: none;
}
/* foo's bar */
/*# sourceMappingURL=data:application/json,%7B%22version%22%3A3%2C%22sources%22%3A%5Bfoo.less%22%5D%2C%22names%22%3A%5B%5D%2C%22mappings%22%3A%22AAAS%3BEACL%2CWAAA%22%2C%22sourcesContent%22%3A%5B%22%23titanic%20%7B%5Cn%20%20%20%20float%3A%20none%3B%5Cn%7D%5Cn%2F*%20foo's%20bar%20*%2F%22%5D%7D */

Working CSS output examples:

#titanic {
    float: none;
}
/* foos bar */
/*# sourceMappingURL=data:application/json,%7B%22version%22%3A3%2C%22sources%22%3A%5Bfoo.less%22%5D%2C%22names%22%3A%5B%5D%2C%22mappings%22%3A%22AAAS%3BEACL%2CWAAA%22%2C%22sourcesContent%22%3A%5B%22%23titanic%20%7B%5Cn%20%20%20%20float%3A%20none%3B%5Cn%7D%5Cn%2F*%20foos%20bar%20*%2F%22%5D%7D */
#titanic {
    float: none;
}
/* foo"s bar */
/*# sourceMappingURL=data:application/json,%7B%22version%22%3A3%2C%22sources%22%3A%5Bfoo.less%22%5D%2C%22names%22%3A%5B%5D%2C%22mappings%22%3A%22AAAS%3BEACL%2CWAAA%22%2C%22sourcesContent%22%3A%5B%22%23titanic%20%7B%5Cn%20%20%20%20float%3A%20none%3B%5Cn%7D%5Cn%2F*%20foo%5C%22s%20bar%20*%2F%22%5D%7D */

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 shown lessc command and a foo.less comment containing an apostrophe. Trace the inline source-map generation and add a regression test showing that the generated map remains valid while preserving the comment text; the existing broken and working CSS examples define the expected result.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.