Contextualize CSS
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 25/100
- Issue type
- Feature
- Clarity
- Needs clarification
- Activity status
- Stale
- Tech stack
- angular, scss, typescript
- Domain
- frontend
Research direction
Start by tracing how css-star-rating/dist/scss/star-rating.scss is imported and how the Angular component currently loads styles. Review Angular component style scoping and the listed global classes. Done means the component’s styles are no longer appended globally while the star-rating appearance remains usable.
Written by the indexing model from the issue text.
Description
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
- Dominant language
- TypeScript
- Stars
- 219
- Forks
- 82
- PR merge metrics
- No merged PRs in 30d
Getting set up
- No Dockerfile or Docker Compose file
- No pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from BioPhoton/angular-star-rating
-
Difficulty 3/5 1-2 days Newbie friendliness 45/100
BioPhoton/angular-star-rating#128 · 3 reactions ·
-
type: feature
Difficulty 2/5 1-3 hours Newbie friendliness 42/100
BioPhoton/angular-star-rating#126 · 2 comments · 2 reactions ·
-
type: question
Difficulty 2/5 1-3 hours Newbie friendliness 25/100
BioPhoton/angular-star-rating#113 · 2 comments ·
-
type: feature
Difficulty 3/5 1-2 days Newbie friendliness 35/100
BioPhoton/angular-star-rating#111 · 5 reactions ·
-
type: bug
Difficulty 3/5 1-2 days Newbie friendliness 35/100
BioPhoton/angular-star-rating#108 · 1 comment ·
All issues in BioPhoton/angular-star-rating
Similar issues
-
category::task code priority::normal
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
e0ipso/strikethroo#145 ·
Maintainers usually reply within 1 day
-
Difficulty 1/5 1-3 hours Newbie friendliness 85/100
cocos/cocos-docs#3333 ·
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
RevenueCat/react-native-purchases#2079 ·
Maintainers usually reply within 1 day
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
RevenueCat/purchases-hybrid-common#2039 ·
Maintainers usually reply within 1 day
-
agent-reported area/react bug
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
Maintainers usually reply within 1 day