virtualise engine files with their vendor styles

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

@@ -454,8 +454,6 @@ export class CompatAppBuilder {
       }
     }
 
-    html.insertStyleLink(html.styles, `assets/${this.origAppPackage.name}.css`);
-
     // virtual-vendor entrypoint
     html.insertScriptTag(html.implicitScripts, '@embroider/core/vendor.js');
 
@@ -468,8 +466,8 @@ export class CompatAppBuilder {
       }
     }
 
-    // virtual vendor.css entrypoint
-    html.insertStyleLink(html.implicitStyles, '@embroider/core/vendor.css');
+    // virtual compat-styles.css entrypoint
+    html.insertStyleLink(html.implicitStyles, '@embroider/core/compat-styles.css');
 
     if (!asset.fileAsset.includeTests) {
       return;

packages/core/src/module-resolver.ts

@@ -194,7 +194,7 @@ export class Resolver {
     request = await this.handleGlobalsCompat(request);
     request = this.handleImplicitModules(request);
     request = this.handleImplicitTestScripts(request);
-    request = this.handleVendorStyles(request);
+    request = this.handleCompatStyles(request);
     request = this.handleTestSupportStyles(request);
     request = this.handleRenaming(request);
     request = this.handleVendor(request);
@@ -502,9 +502,13 @@ export class Resolver {
     }
   }
 
-  private handleVendorStyles<R extends ModuleRequest>(request: R): R {
+  private handleCompatStyles<R extends ModuleRequest>(request: R): R {
     //TODO move the extra forwardslash handling out into the vite plugin
-    const candidates = ['@embroider/core/vendor.css', '/@embroider/core/vendor.css', './@embroider/core/vendor.css'];
+    const candidates = [
+      '@embroider/core/compat-styles.css',
+      '/@embroider/core/compat-styles.css',
+      './@embroider/core/compat-styles.css',
+    ];
 
     if (!candidates.includes(request.specifier)) {
       return request;
@@ -513,14 +517,14 @@ export class Resolver {
     let pkg = this.packageCache.ownerOfFile(request.fromFile);
     if (pkg?.root !== this.options.engines[0].root) {
       throw new Error(
-        `bug: found an import of ${request.specifier} in ${request.fromFile}, but this is not the top-level Ember app. The top-level Ember app is the only one that has support for @embroider/core/vendor.css. If you think something should be fixed in Embroider, please open an issue on https://github.com/embroider-build/embroider/issues.`
+        `bug: found an import of ${request.specifier} in ${request.fromFile}, but this is not the top-level Ember app. The top-level Ember app is the only one that has support for @embroider/core/compat-styles.css. If you think something should be fixed in Embroider, please open an issue on https://github.com/embroider-build/embroider/issues.`
       );
     }
 
     return logTransition(
-      'vendor-styles',
+      'compat-styles',
       request,
-      request.virtualize(resolve(pkg.root, '-embroider-vendor-styles.css'))
+      request.virtualize(resolve(pkg.root, '-embroider-compat-styles.css'))
     );
   }
 

packages/core/src/virtual-vendor-styles.ts → packages/core/src/virtual-compat-styles.ts

@@ -7,19 +7,19 @@ import type { Resolver } from './module-resolver';
 import type { VirtualContentResult } from './virtual-content';
 import type { Engine } from './app-files';
 
-export function decodeVirtualVendorStyles(filename: string): boolean {
-  return filename.endsWith('-embroider-vendor-styles.css');
+export function decodeVirtualCompatStyles(filename: string): boolean {
+  return filename.endsWith('-embroider-compat-styles.css');
 }
 
-export function renderVendorStyles(filename: string, resolver: Resolver): VirtualContentResult {
+export function renderCompatStyles(filename: string, resolver: Resolver): VirtualContentResult {
   const owner = resolver.packageCache.ownerOfFile(filename);
   if (!owner) {
     throw new Error(`Failed to find a valid owner for ${filename}`);
   }
-  return { src: getVendorStyles(owner, resolver), watches: [] };
+  return { src: getCompatStyles(owner, resolver), watches: [] };
 }
 
-function getVendorStyles(owner: Package, resolver: Resolver): string {
+function getCompatStyles(owner: Package, resolver: Resolver): string {
   let engineConfig = resolver.owningEngine(owner);
   let engine: Engine = {
     package: owner,
@@ -34,15 +34,22 @@ function getVendorStyles(owner: Package, resolver: Resolver): string {
     appRelativePath: 'NOT_USED_DELETE_ME',
   };
 
-  return generateVendorStyles(engine);
+  return generateCompatStyles(engine);
 }
 
-function generateVendorStyles(engine: Engine): string {
+function generateCompatStyles(engine: Engine): string {
   let result: string[] = impliedAddonVendorStyles(engine).map((sourcePath: string): string => {
     let source = readFileSync(sourcePath);
     return `${source}`;
   });
 
+  // add engine's own implicit styles after all vendor styles
+  let styles = getAddonImplicitStyles(engine.package as V2AddonPackage);
+
+  if (styles.length) {
+    result = [...styles, ...result];
+  }
+
   return result.join('') as string;
 }
 
@@ -58,20 +65,26 @@ function impliedAddonVendorStyles(engine: Engine): string[] {
         return 1000;
     }
   })) {
-    let implicitStyles = addon.meta['implicit-styles'];
-    if (implicitStyles) {
-      let styles = [];
-      let options = { basedir: addon.root };
-      for (let mod of implicitStyles) {
-        // exclude engines because they will handle their own css importation
-        if (!addon.isLazyEngine()) {
-          styles.push(resolve.sync(mod, options));
-        }
-      }
-      if (styles.length) {
-        result = [...styles, ...result];
-      }
+    let styles = getAddonImplicitStyles(addon);
+
+    if (styles.length) {
+      result = [...styles, ...result];
     }
   }
   return result;
 }
+
+function getAddonImplicitStyles(pkg: V2AddonPackage): string[] {
+  let implicitStyles = pkg.meta['implicit-styles'];
+  let styles = [];
+  if (implicitStyles) {
+    let options = { basedir: pkg.root };
+    for (let mod of implicitStyles) {
+      // exclude engines because they will handle their own css importation
+      if (!pkg.isLazyEngine()) {
+        styles.push(resolve.sync(mod, options));
+      }
+    }
+  }
+  return styles;
+}

packages/core/src/virtual-content.ts

@@ -5,7 +5,7 @@ import { compile } from './js-handlebars';
 import { decodeImplicitTestScripts, renderImplicitTestScripts } from './virtual-test-support';
 import { decodeTestSupportStyles, renderTestSupportStyles } from './virtual-test-support-styles';
 import { decodeVirtualVendor, renderVendor } from './virtual-vendor';
-import { decodeVirtualVendorStyles, renderVendorStyles } from './virtual-vendor-styles';
+import { decodeVirtualCompatStyles, renderCompatStyles } from './virtual-compat-styles';
 
 const externalESPrefix = '/@embroider/ext-es/';
 const externalCJSPrefix = '/@embroider/ext-cjs/';
@@ -54,9 +54,9 @@ export function virtualContent(filename: string, resolver: Resolver): VirtualCon
     return renderImplicitTestScripts(filename, resolver);
   }
 
-  let isVendorStyles = decodeVirtualVendorStyles(filename);
+  let isVendorStyles = decodeVirtualCompatStyles(filename);
   if (isVendorStyles) {
-    return renderVendorStyles(filename, resolver);
+    return renderCompatStyles(filename, resolver);
   }
 
   let isTestSupportStyles = decodeTestSupportStyles(filename);

tests/scenarios/compat-addon-classic-features-test.ts

@@ -42,14 +42,14 @@ appScenarios
 
         const EmberApp = require('ember-cli/lib/broccoli/ember-app');
         const { maybeEmbroider } = require('@embroider/test-setup');
-        
+
         module.exports = function (defaults) {
           let app = new EmberApp(defaults, {
             ...(process.env.FORCE_BUILD_TESTS ? {
               tests: true,
             } : undefined),
           });
-        
+
           return maybeEmbroider(app, {
             availableContentForTypes: ['custom'],
             skipBabel: [
@@ -69,21 +69,21 @@ appScenarios
               <title>AppTemplate</title>
               <meta name="description" content="">
               <meta name="viewport" content="width=device-width, initial-scale=1">
-          
+
               {{content-for "head"}}
-          
+
               <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
               <link integrity="" rel="stylesheet" href="{{rootURL}}assets/app-template.css">
-          
+
               {{content-for "head-footer"}}
             </head>
             <body>
               {{content-for "body"}}
               {{content-for "custom"}}
-          
+
               <script src="{{rootURL}}assets/vendor.js"></script>
               <script src="{{rootURL}}assets/app-template.js"></script>
-          
+
               {{content-for "body-footer"}}
             </body>
           </html>
@@ -237,7 +237,7 @@ appScenarios
         try {
           const [, url] = await server.waitFor(/Local:\s+(https?:\/\/.*)\//g);
 
-          let response = await fetch(`${url}/@embroider/core/vendor.css?direct`);
+          let response = await fetch(`${url}/@embroider/core/compat-styles.css?direct`);
           let text = await response.text();
           assert.true(text.includes('.my-addon-p { color: blue; }'));