Contextualize CSS

[ghost]

I'm submitting a...

[ ] Bug report
[x] Feature request

Current behavior

This module is wrapping style to global scope, exactly as css-star-rating does.

Globally appended classes: .rating, .star, .star-container, .center-all, .label-value.

Expected behavior

However, angular introduced a very good practice that scope style to a component.

It would be great (to import) to attach SCSS styles to the component but not as global.

A very quick fix is to surround by the angular component name:

star-rating-comp {
  @import "~css-star-rating/dist/scss/star-rating.scss";
}

Probably the better way should be attaching the css-star-rating's style sheet to the ngComponent.

Minimal reproduction of the problem with instructions

For instance, use <div class="label-value">...</div> anywhere in your application.

Environment

Library version: 3.0.8
Angular version: 5.2.7


Browser:

- [x] all

[VivekIshir]

HI i m seeing only one file inside the assets\images, document saying to import the "star-rating.scss"
Its looking star-rating.scss is missing ? Anybody please help,
i m using npm install angular-star-rating --save

[felipefialho]

I agree with @avBerenger, leak of styles is a big problem of CSS and we can to benefit of Angular scope.

I can help if you want to move on.

[BioPhoton]

Hi @lfeh,

I would really appreciate your help!!

Regarding prefixes for css classes I already opened an issues:
BioPhoton/css-star-rating#33

Let's continue there.

Best,
Michael

[felipefialho]

My propose is add the BioPhoton/css-star-rating as a dependencie of angular-star-rating and isolate it inside Angular.

So, we can also provide a option using Input() to enable or disable the default CSS.

Do you agree?