From d22d9f3d1a1bceadb5aaa4c67fd669ed5144a70a Mon Sep 17 00:00:00 2001 From: Chris Manson Date: Wed, 15 May 2024 16:43:31 +0100 Subject: [PATCH 1/2] allow @embroider/core/vendor.css from all engines --- packages/core/src/virtual-vendor-styles.ts | 55 +++++++++++++++------- 1 file changed, 37 insertions(+), 18 deletions(-) diff --git a/packages/core/src/virtual-vendor-styles.ts b/packages/core/src/virtual-vendor-styles.ts index 27f512eaf..fbd07d59b 100644 --- a/packages/core/src/virtual-vendor-styles.ts +++ b/packages/core/src/virtual-vendor-styles.ts @@ -29,7 +29,7 @@ function getVendorStyles(owner: Package, resolver: Resolver): string { addon.canResolveFromFile, ]) ), - isApp: true, + isApp: engineConfig.root === resolver.options.engines[0].root, modulePrefix: resolver.options.modulePrefix, appRelativePath: 'NOT_USED_DELETE_ME', }; @@ -38,10 +38,21 @@ function getVendorStyles(owner: Package, resolver: Resolver): string { } function generateVendorStyles(engine: Engine): string { - let result: string[] = impliedAddonVendorStyles(engine).map((sourcePath: string): string => { - let source = readFileSync(sourcePath); - return `${source}`; - }); + let result: string[] = impliedAddonVendorStyles(engine).map(sourcePath => readFileSync(sourcePath, 'utf-8')); + + // add the engines own styles but only if it is not the top-level app, that is provided by @embroider/synthesized-styles + if (!engine.isApp) { + let engineStyles = []; + + engineStyles = getAddonImplicitStyles(engine.package as V2AddonPackage).map(sourcePath => + readFileSync(sourcePath, 'utf-8') + ); + + // add engine's own implicit styles after all vendor styles + if (engineStyles.length) { + result = [...result, ...engineStyles]; + } + } return result.join('') as string; } @@ -58,20 +69,28 @@ 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]; - } + // exclude lazy engines because they will handle their own css importation + if (addon.isLazyEngine()) { + continue; + } + + 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) { + styles.push(resolve.sync(mod, options)); + } + } + return styles; +} From 0892a3a4ee8fd87c1ad79c6e68ce491e412dc290 Mon Sep 17 00:00:00 2001 From: Chris Manson Date: Wed, 15 May 2024 17:25:58 +0100 Subject: [PATCH 2/2] use @embroider/core/vendor.css for engine's styles --- packages/compat/src/compat-app-builder.ts | 65 ++--------------------- packages/core/src/asset.ts | 7 --- packages/core/src/index.ts | 2 +- packages/core/src/module-resolver.ts | 4 +- 4 files changed, 7 insertions(+), 71 deletions(-) diff --git a/packages/compat/src/compat-app-builder.ts b/packages/compat/src/compat-app-builder.ts index 6dda6638b..cabc48d33 100644 --- a/packages/compat/src/compat-app-builder.ts +++ b/packages/compat/src/compat-app-builder.ts @@ -27,7 +27,6 @@ import type { CompatResolverOptions } from './resolver-transform'; import type { PackageRules } from './dependency-rules'; import { activePackageRules } from './dependency-rules'; import flatMap from 'lodash/flatMap'; -import sortBy from 'lodash/sortBy'; import flatten from 'lodash/flatten'; import partition from 'lodash/partition'; import mergeWith from 'lodash/mergeWith'; @@ -39,7 +38,7 @@ import type { Options as EtcOptions } from 'babel-plugin-ember-template-compilat import type { Options as ResolverTransformOptions } from './resolver-transform'; import type { Options as AdjustImportsOptions } from './babel-plugin-adjust-imports'; import { PreparedEmberHTML } from '@embroider/core/src/ember-html'; -import type { InMemoryAsset, OnDiskAsset, ImplicitAssetPaths } from '@embroider/core/src/asset'; +import type { InMemoryAsset, OnDiskAsset } from '@embroider/core/src/asset'; import { makePortable } from '@embroider/core/src/portable-babel-config'; import type { RouteFiles } from '@embroider/core/src/app-files'; import { AppFiles } from '@embroider/core/src/app-files'; @@ -291,64 +290,11 @@ export class CompatAppBuilder { return config; } - private scriptPriority(pkg: Package) { - switch (pkg.name) { - case 'loader.js': - return 0; - case 'ember-source': - return 10; - default: - return 1000; - } - } - @Memoize() private get resolvableExtensionsPattern(): RegExp { return extensionsPattern(this.resolvableExtensions()); } - private impliedAssets(type: keyof ImplicitAssetPaths, engine: AppFiles): (OnDiskAsset | InMemoryAsset)[] { - let result: (OnDiskAsset | InMemoryAsset)[] = this.impliedAddonAssets(type, engine).map( - (sourcePath: string): OnDiskAsset => { - let stats = statSync(sourcePath); - return { - kind: 'on-disk', - relativePath: explicitRelative(this.root, sourcePath), - sourcePath, - mtime: stats.mtimeMs, - size: stats.size, - }; - } - ); - - return result; - } - - private impliedAddonAssets(type: keyof ImplicitAssetPaths, { engine }: AppFiles): string[] { - let result: Array = []; - for (let addon of sortBy(Array.from(engine.addons.keys()), this.scriptPriority.bind(this))) { - let implicitScripts = addon.meta[type]; - if (implicitScripts) { - let styles = []; - let options = { basedir: addon.root }; - for (let mod of implicitScripts) { - if (type === 'implicit-styles') { - // exclude engines because they will handle their own css importation - if (!addon.isLazyEngine()) { - styles.push(resolve.sync(mod, options)); - } - } else { - result.push(resolve.sync(mod, options)); - } - } - if (styles.length) { - result = [...styles, ...result]; - } - } - } - return result; - } - @Memoize() private async babelConfig(resolverConfig: CompatResolverOptions) { let babel = cloneDeep(this.compatApp.babelConfig()); @@ -1076,12 +1022,9 @@ export class CompatAppBuilder { // only import styles from engines with a parent (this excludeds the parent application) as their styles // will be inserted via a direct tag. if (!appFiles.engine.isApp && appFiles.engine.package.isLazyEngine()) { - let implicitStyles = this.impliedAssets('implicit-styles', appFiles); - for (let style of implicitStyles) { - styles.push({ - path: explicitRelative('assets/_engine_', style.relativePath), - }); - } + styles.push({ + path: '@embroider/core/vendor.css', + }); let engineMeta = appFiles.engine.package.meta as AddonMeta; if (engineMeta && engineMeta['implicit-styles']) { diff --git a/packages/core/src/asset.ts b/packages/core/src/asset.ts index da4ca018e..8b0829fc9 100644 --- a/packages/core/src/asset.ts +++ b/packages/core/src/asset.ts @@ -1,13 +1,6 @@ import type { JSDOM } from 'jsdom'; import type { EmberHTML } from './ember-html'; -export interface ImplicitAssetPaths { - 'implicit-scripts': string[]; - 'implicit-test-scripts': string[]; - 'implicit-styles': string[]; - 'implicit-test-styles': string[]; -} - interface BaseAsset { // where this asset should be placed, relative to the app's root relativePath: string; diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index cc8ec25c1..9e1d42dbe 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -8,7 +8,7 @@ export { } from './packager'; export { HTMLEntrypoint, BundleSummary } from './html-entrypoint'; export { default as Stage } from './stage'; -export { Asset, EmberAsset, ImplicitAssetPaths } from './asset'; +export { Asset, EmberAsset } from './asset'; export { default as Options, optionsWithDefaults } from './options'; export { default as toBroccoliPlugin } from './to-broccoli-plugin'; export { default as WaitForTrees, OutputPaths } from './wait-for-trees'; diff --git a/packages/core/src/module-resolver.ts b/packages/core/src/module-resolver.ts index 28bfd08fd..86302b22b 100644 --- a/packages/core/src/module-resolver.ts +++ b/packages/core/src/module-resolver.ts @@ -511,9 +511,9 @@ export class Resolver { } let pkg = this.packageCache.ownerOfFile(request.fromFile); - if (pkg?.root !== this.options.engines[0].root) { + if (!pkg || !this.options.engines.some(e => e.root === pkg?.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 or Engine. 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.` ); }