Angular-cli: Build ignores component styles properties

[kinguy1]

Versions

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.7.3
Node: 8.10.0
OS: win32 x64
Angular: 5.2.2
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

@angular/cli: 1.7.3
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.4.2
webpack: 3.11.0

Repro steps

given the following component:

@Component({
selector: 'app-some',
templateUrl: './some.component.html',
styleUrls: ['./some.component.css']
})

-- logic doesn't matter here - it happand if any other app component
export class someComponent implements OnInit {
constructor(
) { }
ngOnInit() {
}
}

with the following some.component.html:

<div class="bgrGrey" id="greyBgr">
 ...
</div>

and the some.component.css file:

.bgrGrey {
background-color: #efefef69;
border: 1px solid #80808038;
border-radius: 3px;
}

• Step 1 - run ng serve and watch output
• Step 2 - run ng serve --prod and watch output
• Step 3 - compare between the outputs: dev vs prod.

Observed behavior

ng serve output - OK - the border is grey and the style is complete:

ng serve --prod - Not OK - the border is black and the class is not fully loaded as shown bellow:

Desired behavior

div's border should be grey (#80808038) and the class properties should be fully loaded both dev and prod.

Mention any other details that might be useful (optional)

tried as well:
1) ng build --prod - with the same behavior - missing css properties Not OK
2) ng build --no-aot - the component output style was OK (complete)
3) changing style to border: 1px solid red; result was OK (complete)
mention that its not something about logic or specific component or event the selected color- i checked with other component, without logic, and another color - all with the same results - difference between dev and prod.

[splincode]

@kinguy1 please provide a test repository for playback (or stackblitz) your examples
show me: some.component.css

[kinguy1]

hi,

the some.component.css contains only this class: (as shown in the issue's
body)

.bgrGrey {
background-color: #efefef69;
border: 1px solid #80808038;
border-radius: 3px;
}

thanks,

Guy

2018-03-29 16:49 GMT+03:00 Max Ivanov [e-mail]:

@kinguy1 https://github.com/kinguy1 please provide a test repository
for playback (or stackblitz) your examples
show me: some.component.css

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/10111#issuecomment-377241018,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AX1B7zrvzIx2R3zXjUL2Zi1NpvuInmTcks5tjOZ8gaJpZM4TATPB
.

[splincode]

80808038 - Sorry, this does not exist

RGB - #RRGGBB - 6 symbol for hex, but #80808038 - 8 symbol, why?

[kinguy1]

That was it! thanks! it is always must be something stupid in the end... i didn't know/notice about the symbol limitation. but that's weird... dev result was ok (took the long hex number and accept it) and prod didn't. can you tell me why? is there a different parser between environments?

[splincode]

@kinguy1 The compiler in prod mode does all kinds of checks so that incorrect actions do not get into the final version of your project. In development mode, some tests are not performed for a fast build speed.

[splincode]

Do not close the issue. Perhaps the Angular team should then output additional alerts in the form of warnings, if this happens.

[soGit]

Have the same with rx & ry properties for svg.
.scroll { rx: 0.3rem; ry: 0.3rem; }

But production build ignores that.

[splincode]

I think Angular has nothing to do with it, it takes place in the loader (css-loader or sass-loader, etc)...
Since the production mode uses aggressive compression..
Pin https://github.com/angular/angular-cli/pull/10101

[worthy7]

@kinguy1 close please

[splincode]

@Worthy7 I think until the issue is sufficiently resolved. I want to hear something from the Angular team

[worthy7]

@kinguy1 Fair enough, there are way too many issues in this repo :(

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