Angular-cli: css compiler parsing too simplistic; confuses xxbackground-image with background-image

[polyglotinc]

I have no idea where to put this bug report, so feel free to redirect it to the appropriate category.
Whatever AngularCLI uses to compile the app, the part that preprocesses css files seems to parse too simplistically, and doesnt recognize that someLegalCssProperty is not the same as xxsomeLegalCssProperty. I.E. I often "comment out" things in css by prepending xx and they happily get ignored. But, I have noticed that the angular compiler process doesnt always catch the difference.

For example, described below is where I just noticed that the "background-image" property _(referring to Wallpaper.jpg)_ that I last year changed to "xxbackground-image", is still resulting in Wallpaper.e9546829eb43e9d5577f.jpg being generated and put in the home directory of my production build dist folder.

Versions

Angular 4 and 5 (at least)

Repro steps

Put the following into a css file used by your Angular app,
and put an example image into your assets folder (so your app will compile via cli)

body {
    xxbackground-image: url("../../assets/example.jpg");
}

Observed behavior

The example image file (renamed with hash info) appears in the top level directory of your compiled dist folder.

Desired behavior

There should be no image file placed into dist folder because thats not a background-image directive that css would pay attention to.

Extra Info

BTW, when I actually deleted the xxbackground-image line from my css file, the image file stopped being generated into my home folder, so, I know that it was that line that was being processed.

[clydin]

If something is not meant to be included in the output it should either be removed or commented out. That value could theoretically be valid and consumed by some web browser.

[polyglotinc]

Im sorry but how do you figure that? How does it decide what might be processed by some web browser and what is giberish...the css std, thats how! xxbackground-image is not legal css and therefore there is no reason to treat it as something that could "theoretically be valid and consumed by some web browser". This bug report should not be closed since it is still a bug.
And btw, the act of changing a recognized css property into an unrecognized one is a method of making it "commented out".

[wartab]

How is that a bug? Do you think Angular will maintain a list of all known CSS properties and discard everything else? What if some browser brings out a nifty experimental property or if some other container like Electron has special features?

Your request, as well as commenting out unwanted CSS properties by non existent properties, makes no sense. If you want to comment something... use comments.

[polyglotinc]

It is a bug because Angular is actively doing something special in the build process based on CSS content. It _thinks_ it knows when there is a background-image CSS declaration that is referencing an image file in the local set of assets; It then processes, and renames, and relocates that image file; (READ my original writeup).

This is completely Angular processing and not standard css processing. Angular can only do this because it parses all the css files to find anything for which it does special processing.

The BUG is that it is parsing the CSS incorrectly! It should NOT be manipulating, renaming, relocating my image files, because there is no background-image CSS declaration in my CSS files. Any new, weird, experimental properties somebody implements still has to follow the CSS grammar for defining new/experimental stuff, SO, if Angular is going to parse CSS files, it needs to actually do it rather than apparently having quick and dirty regular expressions that forgot to specify that the background-image token must start on a word boundary (otherwise it is not really background-image is it...it is just one of those "nifty experimental properties" that it should quietly ignore).

[wartab]

You seem to have a hard time understanding that it is not the fact that it looks like a background image, but rather cause you are using a url() instruction. As I said, keep your code clean, don't add complete garbage and you'll be fine.

[polyglotinc]

First of all, the url() ISN'T the issue because neither of the following, used on the home page, result in a renamed copy of the image being left in the dist top level directory (so it is clearly something Angular does only for background-images)...

ul {
  list-style: square url("../../assets/smiley_icon.gif");
}

ul {
  xxlist-style: square url("../../assets/smiley_icon.gif");
}

And, second, what is the difference between grammatically correct "complete garbage", and " a nifty experimental property" which to Angular should look exactly the same...that is why it must correctly parse css if it is going to properly ignore those " nifty experimental properties".

SO, @clydin , your original rationale that "That value could theoretically be valid and consumed by some web browser." demands that Angular properly not confuse it with something IT is looking for, namely the STANDARD background-image declaration, and not this experimental xxbackground-image declaration which is clearly not meant for it.
THAT is why this is a bug and should not be heedlessly closed.

[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._}