Sort addon css by package name

packages/compat/src/compat-app-builder.ts

@@ -396,7 +396,15 @@ export class CompatAppBuilder {
 
   private impliedAddonAssets(type: keyof ImplicitAssetPaths, { engine }: AppFiles): string[] {
     let result: Array<string> = [];
-    for (let addon of sortBy(Array.from(engine.addons), this.scriptPriority.bind(this))) {
+    let addons: Array<AddonPackage> = sortBy(Array.from(engine.addons), this.scriptPriority.bind(this));
+    if (type === 'implicit-styles') {
+      const synthesizedVendor = addons.find(pkg => pkg.name === '@embroider/synthesized-vendor');
+      if (synthesizedVendor) {
+        addons = sortBy(addons, pkg => pkg.name).filter(pkg => pkg !== synthesizedVendor);
+        addons.unshift(synthesizedVendor);
+      }
+    }
+    for (let addon of addons) {
       let implicitScripts = addon.meta[type];
       if (implicitScripts) {
         let styles = [];

tests/scenarios/compat-addon-styles-test.ts

@@ -1,6 +1,6 @@
 import type { ExpectFile } from '@embroider/test-support/file-assertions/qunit';
 import { expectFilesAt, expectRewrittenFilesAt } from '@embroider/test-support/file-assertions/qunit';
-import type { PreparedApp } from 'scenario-tester';
+import type { PreparedApp, Project } from 'scenario-tester';
 import { throwOnWarnings } from '@embroider/core';
 import { appScenarios, baseAddon } from './scenarios';
 import QUnit from 'qunit';
@@ -132,3 +132,83 @@ appScenarios
       });
     });
   });
+
+function setAddonNameAndCSS(addon: Project, letter: string) {
+  addon.pkg.name = `addon-${letter}`;
+  merge(addon.files, {
+    addon: {
+      styles: {
+        'addon.css': `.addon-${letter} {}`,
+      },
+    },
+  });
+}
+
+appScenarios
+  .map('compat-addon-styles', project => {
+    const addonA: Project = baseAddon();
+    setAddonNameAndCSS(addonA, 'a');
+
+    const addonB = baseAddon();
+    setAddonNameAndCSS(addonB, 'b');
+
+    const addonC = baseAddon();
+    setAddonNameAndCSS(addonC, 'c');
+
+    const addonD = baseAddon();
+    setAddonNameAndCSS(addonD, 'd');
+
+    project.addDependency(addonA);
+    project.addDependency(addonB);
+    addonA.addDependency(addonC);
+    project.addDependency(addonD);
+
+    project.addDependency('third-party', '1.2.3').files = {
+      'third-party.css': '.third-party {}',
+    };
+
+    merge(project.files, {
+      'ember-cli-build.js': `
+        'use strict';
+
+        const EmberApp = require('ember-cli/lib/broccoli/ember-app');
+        const { maybeEmbroider } = require('@embroider/test-setup');
+
+        module.exports = function (defaults) {
+          let app = new EmberApp(defaults, {});
+          app.import('node_modules/third-party/third-party.css');
+
+          return maybeEmbroider(app, {
+            skipBabel: [
+              {
+                package: 'qunit',
+              },
+            ],
+          });
+        };`,
+    });
+  })
+  .forEachScenario(scenario => {
+    Qmodule(scenario.name, function (hooks) {
+      throwOnWarnings(hooks);
+
+      let app: PreparedApp;
+
+      let expectFile: ExpectFile;
+
+      hooks.before(async assert => {
+        app = await scenario.prepare();
+        let result = await app.execute('ember build', { env: { STAGE2_ONLY: 'true' } });
+        assert.equal(result.exitCode, 0, result.output);
+      });
+
+      hooks.beforeEach(assert => {
+        expectFile = expectFilesAt(app.dir, { qunit: assert });
+      });
+
+      test('addon styles are in order', function () {
+        const vendorCssPath = './node_modules/.embroider/rewritten-app/assets/vendor.css';
+        expectFile(vendorCssPath).matches(/third-party.*addon-a.*addon-b.*addon-c.*addon-d/);
+      });
+    });
+  });