Remove sass 3 #1336
Remove sass 3 #1336
Conversation
| @@ -2,8 +2,7 @@ | |||
| . "$(dirname "$0")/_/husky.sh" | |||
|
|
|||
| cd client | |||
| yarn run test | |||
| @@ -0,0 +1,14 @@ | |||
| import Component from '@ember/component'; | |||
|
|
|||
| export default Component.extend({ | |||
There was a problem hiding this comment.
Is the new new site-header, site-title component because you removed labs-ui?
There was a problem hiding this comment.
@godfreyyeung yup it's the copied over version. see updated description for why
|
|
||
| @import 'foundation'; |
There was a problem hiding this comment.
What is this for ? I thought we're moving away from foundation?
There was a problem hiding this comment.
@godfreyyeung no not yet, I'm still preserving everything foundation-related because I'm not ready to overhaul the entire thing yet. This is a seemingly "newer" way to import foundation dependencies.
client/yalc.lock
Outdated
| "replaced": "^0.0.26" | ||
| } | ||
| } | ||
| } |
| @@ -0,0 +1 @@ | |||
| {{yield}} | |||
| @@ -0,0 +1 @@ | |||
| {{yield}} | |||
| @@ -0,0 +1,14 @@ | |||
| import Component from '@ember/component'; | |||
|
|
|||
| export default Component.extend({ | |||
There was a problem hiding this comment.
@godfreyyeung yup it's the copied over version. see updated description for why
|
|
||
| @import 'foundation'; |
There was a problem hiding this comment.
@godfreyyeung no not yet, I'm still preserving everything foundation-related because I'm not ready to overhaul the entire thing yet. This is a seemingly "newer" way to import foundation dependencies.
It has, yes. Yes, PostCSS is node-based, so is node-sass... what I meant was that I wanted to eliminate the dependency on libsass, which is deprecated anyway:
The source of the intermittent compile errors is the node-sass bindings which are necessary for node environments to interact with libsass, the C library. |
Related: NYCPlanning/labs-ui#77
Currently, the app's Sass dependencies require a large C library. This causes issues on some machines, requiring intermittent rebuilds of the node bindings (node-sass). This setup-time/build-time overhead is not worth the cost in exchange for some easier-to-use application-specific styles.
This PR switches the app away from using ember-cli-sass & node-sass to compile sass from dependencies and project-specific sass files, and instead moves it to using Postcss to compile the styles without the need for the node-sass bindings/C library. This reduces the overhead of initial setup and likelihood of seeing issues due to low-level dependencies.
Additionally, switching to PostCSS positions the app, and future apps, to pivot towards a more modern styling library, such as Tailwind. The benefit here is that it still compiles all Sass dependencies with minimal difference from the previous compiler.
That said, I had to migrate some of the styles and components from labs-ui, and remove labs-ui altogether. The reason for this is frustrating: labs-zap-search is dependent on 0.0.26 of labs-ui (see issue). It's unclear why the upgraded styles for the "1.0" version of labs-ui don't work for this app. Additionally, labs-ui implicitly requires node-sass, thwarting the point of switching away from node-sass-based approach. To get around that, I removed labs-ui, copied the
site-headercomponent (it was the only one being used) and copied a few styles from the 0.0.26 version of labs-ui. So, there is some bulk in the diff, but it almost entirely comes from labs-ui.Extras: