-
Notifications
You must be signed in to change notification settings - Fork 398
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Tidy/simplify SCSS imports #6073
Conversation
Codecov Report
@@ Coverage Diff @@
## master mozilla/addons-frontend#6073 +/- ##
==========================================
+ Coverage 97.78% 97.93% +0.15%
==========================================
Files 231 231
Lines 6044 6635 +591
Branches 1152 1304 +152
==========================================
+ Hits 5910 6498 +588
- Misses 119 123 +4
+ Partials 15 14 -1
Continue to review full report at Codecov.
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
r+wc
Great idea. I love this.
// No "small" breakpoint is defined here because we are mobile-first. | ||
// Instead of adding a rule for only mobile, add a mobile rule and override | ||
// it with `@include respond-to(medium) { [...] }`. | ||
$breakpoints: ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ugh, yeah, this is the right place
@@ -1,5 +1,4 @@ | |||
@import '~photon-colors/photon-colors'; | |||
@import '~core/css/inc/vars'; | |||
@import '~core/css/inc/mixins'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think it would be worth making ~core/css/styles
just like the amo
one.
src/amo/components/App/styles.scss
Outdated
@@ -1,10 +1,6 @@ | |||
@import '~normalize.css'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
At some point we need to fix this.
[0] DEPRECATION WARNING on line 1, column 8 of stdin:
[0] Including .css files with @import is non-standard behaviour which will be removed in future versions of LibSass.
Use a custom importer to maintain this behaviour. Check your implementations documentation on how to create a custom importer.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ah, interesting.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
more info at: sass/node-sass#2362 (comment)
(builds were green on travis) |
Fix mozilla/addons#12274
This PR cleans the different SCSS imports to avoid "amo" SCSS to leak in
src/ui
orsrc/core
so that "disco" can also use the components inthose directories. Also remove a few unused variables.
In addition, I created one file to import for each app, instead of having
different imports, not always sorted correctly. (I did not create a unique
file for the "core" components yet, though).
Why? It is super difficult to find the right imports all the time, so we
end copy/pasting imports from another file and tweak them if that does not
work. This leads to weird import statements in some files. By having only
one file to import, it makes things easier.
Why (2)? I reviewed a PR and saw some code in disco that was coming from
amo, so I decided to clean up our SCSS a bit.
I built the amo app with
master
and this PR and did not notice any sizedifference. I did not see any visual regression either.