Skip to content

Convert In Repo Addons to Eyeglass Modules

Travis Hoover edited this page Jun 15, 2021 · 1 revision

A common pattern for the in-repo addons with styles was to include all of the styles in the app folder with a single entry-point named after the addon (e.g. account.scss). Then the parent engine (or root app) would call @import 'account' to bring those styles into scope. This causes issues with the Embroider build, and also is a problem for non-lazy engines, so it's not a recommended approach in general. Instead, the addon can be converted to an Eyeglass Module by following a few steps:

  1. Move the styles from app/styles into addon/styles
  2. Locate the entry point file and rename it to index.scss
  3. Edit the package.json for the addon to include eyeglass-module in the keywords (alongside ember-addon)
  4. Ensure that the addon depends on ember-cli-eyeglass in package.json
  5. Add an eyeglass entry to package.json with the following contents (where needs represents the major version of eyeglass that is in use): "eyeglass": { "sassDir": "addon/styles", "needs": "^2.0.0" }

Assuming the entry point was named after the addon, then the imports should continue to work as expected. If the entry point was named differently, then the import will need to be updated to use the addon name (e.g. @import 'account-foo' becomes @import 'account').

Finally, if there are any addons that provide multiple files that are intended to be imported—instead of a single entry point file—then they will need to be refactored to use a single entry point.

Clone this wiki locally