Installation and usage issues

[eric-g-97477]

I am using Ember 6.3.1

$ npm --version                                                                                                                                                                                                                                                                                                                                    
10.9.2

$ ember --version                                                                                                                                                                                                                                                                                                                                     
ember-cli: 6.3.1
node: 22.14.0
os: darwin arm64

I tried installing it:

ember install glimmer-scoped-css                                                                                                                                                                                                                                                                                                                    

🚧  Installing packages... This might take a couple of minutes.
npm: Installed glimmer-scoped-css
Install failed. Could not find addon with name: glimmer-scoped-css

However, it did update my package.json with:

    "glimmer-scoped-css": "^0.8.0",

and found a similar change in the package-lock.json file as well.

The app I started with was created with

ember new frontend --typescript --lang en

and provided me with a ember-cli-build.js file:

'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function (defaults) {
  const app = new EmberApp(defaults, {
    emberData: {
      deprecations: {
        // New projects can safely leave this deprecation disabled.
        // If upgrading, to opt-into the deprecated behavior, set this to true and then follow:
        // https://deprecations.emberjs.com/id/ember-data-deprecate-store-extends-ember-object
        // before upgrading to Ember Data 6.0
        DEPRECATE_STORE_EXTENDS_EMBER_OBJECT: false,
      },
    },
    'ember-cli-babel': { enableTypeScriptTransform: true },

    // Add options here
  });

  return app.toTree();
};

However, this does not match what the Installation section of the readme says it should be. I am guessing my Ember version is to new for this.

What version of Ember can I use so I can follow the instructions to use this addon? Or what are the instructions for getting this addon working with Ember 6.3?

[backspace]

Hey, thanks for the report. I think what’s missing is Webpack, which came along with the Embroider build system at one time, but Embroider has now moved to Vite.

You can find instructions here about how to use Embroider with Webpack. Then your ember-cli-build.js file would more closely resemble the one in the documentation.

We definitely want to add Vite support for this addon but the project that’s driving this is stuck on Webpack because it needs Fastboot… the plan is to come up with an alternative for that and then we can migrate to Vite, but it’ll be a while.

I’ll see what’s possible about getting this to work with Vite sooner than that 🤞🏻

[eric-g-97477]

Ok. I am curious...what is the last ember version that used Embroider by default when Embroider was still using webpack?

[eric-g-97477]

oh, have an update ...

@NullVoxPopuli mentioned the --embroider flag. For some reason I was thinking that Ember 6 would use Embroider by default. I tossed that flag in when creating a new app and got an ember-cli-build.js file that matched the documention for glimmer-scoped-css. I can now put style tags inside of my template tag and it is glorious. The only remaining minor annoyance is that eslint is complaining about that tag --- Use of <style> detected. Do not use forbidden elements. ... but I can likely disable it unless there is a better way of handling that warning.

[backspace]

I think disabling that rule for the whole application probably makes sense if you’re looking to used scoped styles, that’s what we do in the application I use glimmer-scoped-css in. You may also find the require-scoped-style rule mentioned there of interest if you have a team and want to ensure people are using scoped in the style elements.

[eric-g-97477]

Thank you for mentioning require-scoped-style. I will make sure that rule is enabled.

[backspace]

You’re welcome, just to clarify, it’s a custom rule within that repository, we haven’t taken the time to extract it into something shareable although the source is viewable, but maybe that would make sense to include in the addon 🤔