Having a non-breaking space in css leads to error #1006

blackholegalaxy · 2018-02-20T00:01:43Z

Environment

Using clean-css through Angular CLI 1.7.0 which moved to clean-css. clean-css is imported through webpack plugin as it can seen here: https://github.com/angular/angular-cli/blob/master/packages/@angular/cli/plugins/cleancss-webpack-plugin.ts

Configuration options

 const cleancss = new CleanCSS({
          compatibility: 'ie9',
          level: 2,
          inline: false,
          returnPromise: true,
          sourceMap: this._options.sourceMap,
        });

Input SCSS

Image, since non-breaking space would not show up properly (screenshot taken on VSCode on faulty scss code, with Highlight bad characters VSCode plugin):

This code was transpiled to CSS, which still contains the non-breaking space. Resulting in following error.

Error

/project/node_modules/clean-css/lib/reader/input-source-map-tracker.js:37
if (originalPosition.line === null && line > 1 && selectorFallbacks > 0) {

TypeError: Cannot read property 'line' of undefined
at originalPositionFor (/project/node_modules/clean-css/lib/reader/input-source-map-tracker.js:37:24)
at originalMetadata (/project/node_modules/clean-css/lib/tokenizer/tokenize.js:486:43)
at intoTokens (/project/node_modules/clean-css/lib/tokenizer/tokenize.js:435:68)
at tokenize (/project/node_modules/clean-css/lib/tokenizer/tokenize.js:74:10)
at fromStyles (/project/node_modules/clean-css/lib/reader/read-sources.js:147:12)
at fromString (/project/node_modules/clean-css/lib/reader/read-sources.js:48:10)
at doReadSources (/project/node_modules/clean-css/lib/reader/read-sources.js:33:12)
at readSources (/project/node_modules/clean-css/lib/reader/read-sources.js:24:10)
at /project/node_modules/clean-css/lib/clean.js:99:12
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)

Expected behavior

Presence of non-breaking space should not block the production of css since these kind of spaces should be deleted in the minification process.

Potential fix

We could add a marker for no-break space and replace the character with standard space.

NO_BREAK_SPACE: /\u00A0|\u202F|\uFEFF/g,

then in tokenize:

isNoBreakSpace = Marker.NO_BREAK_SPACE.test(character);
...
else if (isNoBreakSpace) {
      // Replace any kind of no-break-space with standard space
      character = Marker.SPACE;
      buffer.push(character);
    }

Can't open a PR as I don't know how to test that in your test suit.

The text was updated successfully, but these errors were encountered:

joaopslins · 2018-02-20T15:31:00Z

+1

tx8821 · 2018-02-27T11:42:06Z

Please fix this! Angular CLI cant build because of this!

FirassKoubaa · 2018-02-28T15:31:44Z

+1

renatomrcosta · 2018-03-01T11:32:21Z

+1

barocsi · 2018-03-01T14:45:47Z

+1 this is so funny in a sad way.

Mar 2, 2018 · 2018-03-02T03:08:38Z

Any new when it will be fixed?

markgoho-EDT · 2018-03-02T22:19:30Z

@jakubpawlowicz are any contributors able to help with this issue?

vithubati · 2018-03-03T00:08:49Z

any update on this?

barocsi · 2018-03-03T00:11:44Z

if it helps just scan all of your files for non breaking space using Notepad++ or regex in IntelliJ / VS whichever tool you use to spot malformed locations.
regex this:

\xA0

blackholegalaxy · 2018-03-03T00:28:09Z

I gave a code snippet on the main issue post. By patching clean-css with it everything works properly. The fact is I don't know how to write test on clean-css context, so I can't open a PR.

Mar 3, 2018 · 2018-03-03T02:57:19Z

@barocsi @blackholegalaxy for me the error came from a third party lib (materialize-css) i'm using in my project. I can't update those css or scss file.

bozdoz, bop10, vithubati, and enavarro222 reacted with thumbs up emoji

jakubpawlowicz · 2018-03-05T09:59:42Z

Sure, will fix it in 4.1.10 coming out (hopefully) today.

jakubpawlowicz · 2018-03-05T11:07:42Z

Hmmm, I took a look at the source code and we read all files as utf-8 not utf-16, so it will be rather tricky to fix at this point. Could you at least provide me with a test CSS file to test on?

enavarro222 · 2018-03-05T11:34:03Z

@jakubpawlowicz the issue appears with materializecss (tested with v0.100.2) cf https://github.com/Dogfalo/materialize/blob/master/dist/css/materialize.min.css

btw, as mention by @scote, as this issue is raised by a third party lib, this is really annoying ! I hope you could find a solution quickly... Thank you very much to address this issue !

jakubpawlowicz · 2018-03-05T11:49:06Z

Thanks @enavarro222 for a quick reply. I've fetched the file but can't replicate the issue yet - since the it shows up when reading input source maps, can someone please post materialize.css transpiled from SCSS with source map?

enavarro222 · 2018-03-05T14:14:54Z

@jakubpawlowicz not sure is it could help but here is a minimal setup to reproduce the issue with angular cli :

$ npm install -g @angular/cli
$ ng new testproject
$ cd testproject
$ npm install materialize-css

Then you have to add materialize.min.css in .angular-cli.json:

...
      "styles": [
        "styles.css",
        "../node_modules/materialize-css/dist/css/materialize.min.css"
      ],
...

And then:

$ ng build --prod
 92% chunk asset optimization/Users/navarro/workspace/tmp/testproject/node_modules/clean-css/lib/reader/input-source-map-tracker.js:37
  if (originalPosition.line === null && line > 1 && selectorFallbacks > 0) {
                      ^

TypeError: Cannot read property 'line' of undefined
    at originalPositionFor (/Users/navarro/workspace/tmp/testproject/node_modules/clean-css/lib/reader/input-source-map-tracker.js:37:23)
    at originalMetadata (/Users/navarro/workspace/tmp/testproject/node_modules/clean-css/lib/tokenizer/tokenize.js:486:43)
    at intoTokens (/Users/navarro/workspace/tmp/testproject/node_modules/clean-css/lib/tokenizer/tokenize.js:435:68)
    at tokenize (/Users/navarro/workspace/tmp/testproject/node_modules/clean-css/lib/tokenizer/tokenize.js:74:10)
    at fromStyles (/Users/navarro/workspace/tmp/testproject/node_modules/clean-css/lib/reader/read-sources.js:147:12)
    at fromString (/Users/navarro/workspace/tmp/testproject/node_modules/clean-css/lib/reader/read-sources.js:48:10)
    at doReadSources (/Users/navarro/workspace/tmp/testproject/node_modules/clean-css/lib/reader/read-sources.js:33:12)
    at readSources (/Users/navarro/workspace/tmp/testproject/node_modules/clean-css/lib/reader/read-sources.js:24:10)
    at /Users/navarro/workspace/tmp/testproject/node_modules/clean-css/lib/clean.js:99:12
    at _combinedTickCallback (internal/process/next_tick.js:95:7)
    at process._tickCallback (internal/process/next_tick.js:161:9)

Mar 5, 2018 · 2018-03-05T14:16:57Z

@angular/cli version must be greater than 1.6.8.

joaopslins and enavarro222 reacted with thumbs up emoji

blackholegalaxy · 2018-03-05T16:50:25Z

@enavarro222 thx for repro.

You could also simply add any no breaking space anywhere in any css. It will break. Here is the character: " " (reference: http://www.fileformat.info/info/unicode/char/00a0/browsertest.htm)

This character exists in UTF-8 @jakubpawlowicz

The error occurs when any of the three kind of no-break space is present:

\u00A0
\u202F
\uFEFF

jakubpawlowicz · 2018-03-05T17:20:24Z

I've been able to reproduce the issue locally, however it's not entirely clean-css bug but also sass building incorrect source map. I found couple cases when line:column data inside it is invalid (e.g. column being negative causing source-map to explode when verifying it).

However I'll add some code to handle such cases gracefully.

blackholegalaxy · 2018-03-05T17:30:19Z

Great! Thanks @jakubpawlowicz

jakubpawlowicz · 2018-03-05T18:38:13Z

It's fixed in 4.1.10.

Mar 5, 2018 · 2018-03-05T18:42:32Z

@blackholegalaxy will you reopen your issue on angular/cli?

renatomrcosta · 2018-03-05T19:07:54Z

Great work @jakubpawlowicz! Thanks!

blackholegalaxy · 2018-03-05T21:07:25Z

@cote since it will be fixed by version 4.1.10 here angular CLI issue should solve by itself since they have a dependency set to "clean-css": "^4.1.9",

Since the 4.1.10 is out, we can test with no-break space in css code and reinstall angular CLI to check if the builds now succeeds. If it doesn't, let me know, i'll may reopen issue.

blackholegalaxy · 2018-03-05T21:25:26Z

Just a quick real project test with invalid char on scss source. Removed node_modules and let npm install latest clean-css. Tested under 1.6.8, 1.7.0, 1.7.1, 1.7.2:

So the fix works. Thanks @jakubpawlowicz

jakubpawlowicz · 2018-03-06T06:10:40Z

Boom, cheers! 🍺

enavarro222 · 2018-03-06T09:17:41Z

thanks a lot @jakubpawlowicz !

blackholegalaxy changed the title ~~Having a non-breaking space in scss leads to error~~ Having a non-breaking space in css leads to error Feb 20, 2018

Feb 22, 2018

1.7.0 wont prod build: cannot read property line of undefined angular/angular-cli#9313

Closed

blackholegalaxy mentioned this issue Mar 3, 2018

font: normal; causes error which quite hard to find #1008

Closed

jakubpawlowicz added the bug label Mar 5, 2018

jakubpawlowicz added this to the 4.1.10 milestone Mar 5, 2018

jakubpawlowicz added the more details needed label Mar 5, 2018

jakubpawlowicz added a commit that referenced this issue Mar 5, 2018

Fixes #1006 - handling invalid input source maps.

9e0a38e

jakubpawlowicz closed this as completed in db1d2a8 Mar 5, 2018

This was referenced Mar 18, 2021

Bump clean-css from 4.1.7 to 4.2.3 niccord/nuxt-stripe-shop#3

Closed

Bump clean-css from 4.1.9 to 4.1.11 froziq/friends-book#4

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Having a non-breaking space in css leads to error #1006

Having a non-breaking space in css leads to error #1006

blackholegalaxy commented Feb 20, 2018 •

edited

Loading

joaopslins commented Feb 20, 2018

tx8821 commented Feb 27, 2018

FirassKoubaa commented Feb 28, 2018

renatomrcosta commented Mar 1, 2018

barocsi commented Mar 1, 2018

Mar 2, 2018

markgoho-EDT commented Mar 2, 2018

vithubati commented Mar 3, 2018

barocsi commented Mar 3, 2018 •

edited

Loading

blackholegalaxy commented Mar 3, 2018 •

edited

Loading

Mar 3, 2018 •

edited

Loading

jakubpawlowicz commented Mar 5, 2018

jakubpawlowicz commented Mar 5, 2018

enavarro222 commented Mar 5, 2018

jakubpawlowicz commented Mar 5, 2018

enavarro222 commented Mar 5, 2018

Mar 5, 2018 •

edited

Loading

blackholegalaxy commented Mar 5, 2018 •

edited

Loading

jakubpawlowicz commented Mar 5, 2018

blackholegalaxy commented Mar 5, 2018

jakubpawlowicz commented Mar 5, 2018

Mar 5, 2018

renatomrcosta commented Mar 5, 2018

blackholegalaxy commented Mar 5, 2018 •

edited

Loading

blackholegalaxy commented Mar 5, 2018 •

edited

Loading

jakubpawlowicz commented Mar 6, 2018

enavarro222 commented Mar 6, 2018

Having a non-breaking space in css leads to error #1006

Having a non-breaking space in css leads to error #1006

Comments

blackholegalaxy commented Feb 20, 2018 • edited Loading

Environment

Configuration options

Input SCSS

Error

Expected behavior

Potential fix

joaopslins commented Feb 20, 2018

tx8821 commented Feb 27, 2018

FirassKoubaa commented Feb 28, 2018

renatomrcosta commented Mar 1, 2018

barocsi commented Mar 1, 2018

Mar 2, 2018

markgoho-EDT commented Mar 2, 2018

vithubati commented Mar 3, 2018

barocsi commented Mar 3, 2018 • edited Loading

blackholegalaxy commented Mar 3, 2018 • edited Loading

Mar 3, 2018 • edited Loading

jakubpawlowicz commented Mar 5, 2018

jakubpawlowicz commented Mar 5, 2018

enavarro222 commented Mar 5, 2018

jakubpawlowicz commented Mar 5, 2018

enavarro222 commented Mar 5, 2018

Mar 5, 2018 • edited Loading

blackholegalaxy commented Mar 5, 2018 • edited Loading

jakubpawlowicz commented Mar 5, 2018

blackholegalaxy commented Mar 5, 2018

jakubpawlowicz commented Mar 5, 2018

Mar 5, 2018

renatomrcosta commented Mar 5, 2018

blackholegalaxy commented Mar 5, 2018 • edited Loading

blackholegalaxy commented Mar 5, 2018 • edited Loading

jakubpawlowicz commented Mar 6, 2018

enavarro222 commented Mar 6, 2018

blackholegalaxy commented Feb 20, 2018 •

edited

Loading

barocsi commented Mar 3, 2018 •

edited

Loading

blackholegalaxy commented Mar 3, 2018 •

edited

Loading

Mar 3, 2018 •

edited

Loading

Mar 5, 2018 •

edited

Loading

blackholegalaxy commented Mar 5, 2018 •

edited

Loading

blackholegalaxy commented Mar 5, 2018 •

edited

Loading

blackholegalaxy commented Mar 5, 2018 •

edited

Loading