search

buildit / gravity-ui-web

Library of styles, components and associated assets to build UIs for the web. Part of buildit's Gravity design system.
http://style.buildit.digital/
MIT License
20 stars 6 forks source link

Avoid need for Eyeglass when compiling SASS #363

Closed james-nash closed 4 years ago

james-nash commented 4 years ago

Is your feature request related to a problem? Please describe. Eyeglass doesn't seem to play too nice with Webpack's SASS loader when watching files (and is als a bit fiddly to setup in the first place). This is a source of frustration for consumers like the Cycle 7 website and Meet-o-matic.

It would be nice if we could avoid the need for consuming projects that want to compile Gravity's SASS to use Eyeglass.

Describe the solution you'd like It needs testing, but I think if we replace our shorthand @import statements, which rely on Eyeglass to be resolved, with relative file paths, it should work.

I think we can keep the Eyeglass metadata in our own package.json, so that downstream consumers can still use Gravity as an Eyeglass module. The key thing will be that they no longer have to use Eyeglass.

Consequently, it should also open the door to (better) compatibility with other tools that aim to make resolving external SASS imports, for example sass-module-importer or WebPack's sass loader.

Additional context Historically, Gravity's SASS @imported an external SASS library called Gravy, which itself also @imported other SASS libs (modular scale and typi, if I recall correctly). Eyeglass is a nice solution that let both Gravity and Gravy have simple @import statements like @import "gravy"; and took care of resolving those to whatever node_modules/.... path was needed. Otherwise, you need to manually add all kinds of includePaths to your SASS setup, which is clunky and error prone.

However, as of the forthcoming v3 release, we no longer use Gravy. We still depend on modularscale-sass and our own @buildit/gravity-particles, but neither of them has any further external dependencies.

Considering this, the need for Eyeglass is greatly diminished. As long as we can find a portable way for us to @import our own dependencies we can eliminate the need for consumers to use Eyeglass (although, they can of course continue to use it if they wish).

james-nash commented 4 years ago

Arse.

It looks like the layout of packages within node_modules is different for consumers of Gravity than it is for Gravity itself. In other words, a hard-coded @import "../../node_modules/foo/bar"; path will only work for one scenario, not both.

Needs more investigation. There must be a way...

james-nash commented 4 years ago

Closed by PR #365.

@danbull confirmed, using the Cycle 7 website, that Eyeglass is indeed no longer needed to compile the SASS.

buildit-dev commented 4 years ago

:tada: This issue has been resolved in version 3.0.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket: