Angular-cli: Background image in SCSS not translated correctly for production builds

[Mufasa]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.0.0
node: 7.9.0
os: darwin x64
@angular/animations: 4.0.2
@angular/common: 4.0.2
@angular/compiler: 4.0.2
@angular/core: 4.0.2
@angular/forms: 4.0.2
@angular/http: 4.0.2
@angular/material: 2.0.0-beta.2
@angular/platform-browser: 4.0.2
@angular/platform-browser-dynamic: 4.0.2
@angular/platform-server: 4.0.2
@angular/router: 4.0.2
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.2

macOS (Sierra v10.12.4)

Repro steps.

I have a working site that was running on angular 2.4.10 and angular-cli 1.0.0-beta.26. I read all the change logs and upgrade guides today and managed to upgrade the site to angular 4.0.2 and angular-cli 1.0.0. However, I am experiencing a couple of issues, one of which is reported here.

My landing page has a background image that is specified within a components SCSS file as:

#banner {
  background: url("/assets/img/background.jpg") no-repeat center;
  background-size: cover;
  height: 700px;
  padding: 0;
  color: white;
}

When I run ng build --prod --aot and transfer the dist files to my production server then my site loads but this background image seems to be missing. On inspecting the page I noticed that the CLI has translated the background element to:

background: url(/assets/img/background.jpg) no-repeat 50%;

Notice that the double quotes around the url function parameter are missing and that center has been translated to 50%.

If I run ng serve instead to test my site locally then I see this element getting translated correctly. However, in this case, none of my assets get loaded as the local build seems to have an issue with how it creates the assets in memory (I think). I added some comments to a related issue to describe this other failure here: https://github.com/angular/angular-cli/issues/5268

The log given by the failure.

None

Desired functionality.

SCSS background element should be translated to:

  background: url("/assets/img/background.jpg") no-repeat center;

as it did with angular-cli v1.0.0-beta.26.

Mention any other details that might be useful.

[clydin]

The two background values are equivalents with the output version being shorter in length. Quotes are optional and center is a keyword for 50%.

The root relative URL being used means that the CLI will not process the image and that it needs to be available on the server at that location.

[Mufasa]

The version without quotes and with 50% doesn't seem to work on Chrome browser (Version 57.0.2987.133 (64-bit)). The developer tools page inspector marks this CSS as invalid. If I edit it in the browser and add quotes and leave 50% as-is then it shows the image correctly.
MDN spec also documents this as having quotes around it.

[clydin]

MDN documentation (see here) says the following:

The URL may be unquoted, or quoted by single or double quotes.

[Mufasa]

Hmmm... OK I didn't look into the MDN docs deep enough - apologies.

But the fact is that without quotes it is no longer working in Chrome. What do I need to do in order to put quotes back in?

I tried editing the main.....bundle.js file that get produced and adding the quotes in myself but that results in an error on the browser - something about a missing token. I use the Atom editor on a Mac.

Just checked this on all the browsers I have (none of which display the background image unless I add the quotes in):

• Chrome (Version 57.0.2987.133 (64-bit))
• FireFox (52.0.2 (64-bit))
• Safari (Version 10.1 (12603.1.30.0.34))

[clydin]

No need to apologize.
Just tried all three browsers with an unquoted root relative URL without issue. So not sure what's going on. All css is minified in a production build, so you can't really put them back in unless you do it manually.

However, I would recommend allowing the CLI to process the asset by using a relative URL (build time relative). The asset will be hashed/copied or inlined if small enough. In the future, assets may also be further processed (e.g., image file size optimization passes).

[Mufasa]

Aha! Found the issue. My actual background image name has a space in it and it seems if an image name has a space in it then it must be quoted. If I use another mage that has no spaces in it then all works as expected.
Would this be considered a bug in the CLI? (i.e. should it leave the quotes in if the image name has spaces in it).

[clydin]

URL's that require escaping should either be escaped or have quotes added (or kept); whichever is shorter in character length. So yes, this appears to be an issue with the CSS minification.

I would, however, try to avoid spaces in paths. In general, they seem to cause hard to debug issues.

[clydin]

Would you mind running 'npm ls cssnano' and 'npm ls postcss-normalize-url' within your project?

[Mufasa]

npm ls cssnano gives:

[email protected] /Users/anjum/Documents/workspace/go2travel-ng-cli
├─┬ @angular/[email protected]
│ └── [email protected] 
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
└── UNMET PEER DEPENDENCY [email protected]

npm ERR! peer dep missing: @angular/common@^2.3.0, required by [email protected]
npm ERR! peer dep missing: @angular/core@^2.3.0, required by [email protected]
npm ERR! peer dep missing: @angular/http@^2.3.0, required by [email protected]
npm ERR! peer dep missing: tslint@^4.0.0, required by [email protected]

npm ls postcss-normalize-url gives:

[email protected] /Users/anjum/Documents/workspace/go2travel-ng-cli
├─┬ @angular/[email protected]
│ └─┬ [email protected]
│   └── [email protected] 
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
└── UNMET PEER DEPENDENCY [email protected]

npm ERR! peer dep missing: @angular/common@^2.3.0, required by [email protected]
npm ERR! peer dep missing: @angular/core@^2.3.0, required by [email protected]
npm ERR! peer dep missing: @angular/http@^2.3.0, required by [email protected]
npm ERR! peer dep missing: tslint@^4.0.0, required by [email protected]

Contents of my package.json file:

{
  "name": "go2travel-ng-cli",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "1.0.0-beta.0",
    "@angular/animations": "4.0.2",
    "@angular/common": "4.0.2",
    "@angular/compiler": "4.0.2",
    "@angular/core": "4.0.2",
    "@angular/forms": "4.0.2",
    "@angular/http": "4.0.2",
    "@angular/material": "2.0.0-beta.3",
    "@angular/platform-browser": "4.0.2",
    "@angular/platform-browser-dynamic": "4.0.2",
    "@angular/platform-server": "4.0.2",
    "@angular/router": "4.0.2",
    "angular2-jwt": "0.2.2",
    "angular2-recaptcha": "0.4.1",
    "classlist.js": "^1.1.20150312",
    "core-js": "2.4.1",
    "file-saver": "1.3.3",
    "hammerjs": "2.0.8",
    "lodash": "4.17.4",
    "md2": "0.0.17-2",
    "moment": "2.18.1",
    "rxjs": "5.3.0",
    "web-animations-js": "2.2.3",
    "zone.js": "0.8.5"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0",
    "@angular/compiler-cli": "4.0.2",
    "@types/chai": "3.5.0",
    "@types/file-saver": "0.0.0",
    "@types/hammerjs": "2.0.34",
    "@types/jasmine": "2.5.47",
    "@types/lodash": "4.14.62",
    "@types/node": "7.0.12",
    "codelyzer": "2.1.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "3.2.0",
    "karma": "1.6.0",
    "karma-chrome-launcher": "2.0.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.1.0",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "protractor": "5.1.1",
    "ts-node": "3.0.2",
    "tslint": "5.1.0",
    "typescript": "2.2.2",
    "webdriver-manager": "12.0.4"
  }
}

[clydin]

Thanks. Just wanted to check if the latest versions were being used and it looks like it.

I submitted a PR to use a safer set of stylesheet minification settings. But it also looks like there is an issue in one of the underlying dependencies that may actually be the cause. A fix should hopefully be in the next release of the dependency (css-loader).

[filipesilva]

@clydin's fix (thanks a bunch!) in https://github.com/angular/angular-cli/pull/5974 is now in, but I'll leave this open while css-loader doesn't update.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}