Prove that ember-scoped-css doesn't change class names as you move classic -> embroider -> etc

ember-scoped-css/src/build/babel-plugin.js

@@ -97,11 +97,27 @@ export default (env, options, workingDirectory) => {
 
           let cssPath = cssPathFor(fileName);
 
-          if (existsSync(cssPath)) {
-            let baseCSS = nodePath.basename(cssPath);
-
-            state.importUtil.importForSideEffect(`./${baseCSS}`);
+          if (!existsSync(cssPath)) {
+            // check if we have an extraneous folder path
+            // this can happen because plugins have tried using
+            // the module path instead of the real path on disk.
+            // it's tricky to support both when there are no standards
+            // around managing these paths.
+            // But also, in normal projects, they are not different paths.
+            let [, ...parts] = cssPath.split('/');
+
+            cssPath = ['app', ...parts].join('/');
+
+            if (!existsSync(cssPath)) {
+              // there is no css path
+              // we don't want to add an import of the CSS file doesn't exist
+              return;
+            }
           }
+
+          let baseCSS = nodePath.basename(cssPath);
+
+          state.importUtil.importForSideEffect(`./${baseCSS}`);
         }
       },
     },

ember-scoped-css/src/lib/path/hash-from-absolute-path.test.ts

@@ -12,9 +12,9 @@
     let expected = 'ea418816b';
 
     it('matches the module path', () => {
-      let postfix = hashFromModulePath(`embroider-app/${file}`);
+      let postfix = hashFromModulePath(`test-app/${file}`);
 
       expect(postfix).to.equal(expected);
     });
 
     it('works with rewritten app', () => {
@@ -26,14 +26,14 @@
 
       let postfix = hashFromAbsolutePath(filePath);
 
       expect(postfix).to.equal(expected);
     });
 
     it('works with direct path', () => {
       let filePath = path.join(paths.embroiderApp, 'app', file);
       let postfix = hashFromAbsolutePath(filePath);
 
       expect(postfix).to.equal(expected);
     });
   });
 });

ember-scoped-css/src/lib/path/utils.appPath.test.ts

@@ -14,20 +14,20 @@ describe('appPath()', () => {
     );
     let result = appPath(file);
 
-    expect(result).to.equal('embroider-app/templates/application');
+    expect(result).to.equal('test-app/templates/application');
   });
 
   it('handles extraneous /app/', () => {
     let file = path.join(paths.embroiderApp, 'app', 'templates/application');
     let result = appPath(file);
 
-    expect(result).to.equal('embroider-app/templates/application');
+    expect(result).to.equal('test-app/templates/application');
   });
 
   it('handles psuedo module', () => {
     let file = path.join(paths.embroiderApp, 'templates/application');
     let result = appPath(file);
 
-    expect(result).to.equal('embroider-app/templates/application');
+    expect(result).to.equal('test-app/templates/application');
   });
 });

sync-test-apps.mjs

@@ -0,0 +1,30 @@
+import path from 'node:path';
+import fs from 'node:fs/promises';
+
+const cwd = process.cwd();
+const source = 'test-apps/classic-app';
+const sourceComponents = path.join(source, 'app/components');
+const sourceTests = path.join(source, 'tests/shared-scenarios');
+
+const otherApps = ['embroider-app', 'pods-classic-app', 'pods-embroider-app'];
+
+async function sync(source, destination) {
+  let target = path.join('../../', source).replace('/test-apps/', '/');
+
+  console.log(target);
+
+  await fs.rm(destination, { force: true, recursive: true });
+  await fs.symlink(target, destination);
+}
+
+for (let app of otherApps) {
+  await sync(
+    sourceComponents,
+    path.join(cwd, 'test-apps', app, 'app/components'),
+  );
+
+  await sync(
+    sourceTests,
+    path.join(cwd, 'test-apps', app, 'tests/shared-scenarios'),
+  );
+}

test-apps/classic-app/app/app.js

@@ -1,8 +1,8 @@
 import Application from '@ember/application';
 
-import config from 'classic-app/config/environment';
 import loadInitializers from 'ember-load-initializers';
 import Resolver from 'ember-resolver';
+import config from 'test-app/config/environment';
 
 export default class App extends Application {
   modulePrefix = config.modulePrefix;

test-apps/classic-app/app/index.html

@@ -9,19 +9,15 @@
     {{content-for "head"}}
 
     <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css" />
-    <link
-      integrity=""
-      rel="stylesheet"
-      href="{{rootURL}}assets/classic-app.css"
-    />
+    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/test-app.css" />
 
     {{content-for "head-footer"}}
   </head>
   <body>
     {{content-for "body"}}
 
     <script src="{{rootURL}}assets/vendor.js"></script>
-    <script src="{{rootURL}}assets/classic-app.js"></script>
+    <script src="{{rootURL}}assets/test-app.js"></script>
 
     {{content-for "body-footer"}}
   </body>

test-apps/classic-app/app/router.js

@@ -1,6 +1,6 @@
 import EmberRouter from '@ember/routing/router';
 
-import config from 'classic-app/config/environment';
+import config from 'test-app/config/environment';
 
 export default class Router extends EmberRouter {
   location = config.locationType;

test-apps/classic-app/config/environment.js

@@ -2,7 +2,7 @@
 
 module.exports = function (environment) {
   const ENV = {
-    modulePrefix: 'classic-app',
+    modulePrefix: 'test-app',
     environment,
     rootURL: '/',
     locationType: 'history',

test-apps/classic-app/ember-cli-build.js

@@ -4,15 +4,22 @@ const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
 module.exports = function (defaults) {
   const app = new EmberApp(defaults, {
+    // All our test-apps must have the same name
+    // so that we can ensure that moving between configurations
+    // causes no string-comparison headaches.
+    name: 'test-app',
     // Add options here
     cssModules: {
       extension: 'module.css',
     },
+    autoImport: {
+      allowAppImports: ['*.css'],
+    },
     'ember-cli-babel': {
       enableTypeScriptTransform: true,
     },
     'ember-scoped-css': {
-      layerName: 'classic-app-layer',
+      layerName: 'test-app',
     },
   });
 

test-apps/classic-app/tests/index.html

@@ -9,11 +9,11 @@
     {{content-for "head"}} {{content-for "test-head"}}
 
     <link rel="stylesheet" href="{{rootURL}}assets/vendor.css" />
-    <link rel="stylesheet" href="{{rootURL}}assets/classic-app.css" />
-    <link rel="stylesheet" href="{{rootURL}}assets/test-support.css" />
+    <link rel="stylesheet" href="{{rootURL}}assets/test-app.css" />
 
     {{content-for "head-footer"}} {{content-for "test-head-footer"}}
   </head>
+
   <body>
     {{content-for "body"}} {{content-for "test-body"}}
 
@@ -27,7 +27,7 @@
     <script src="/testem.js" integrity="" data-embroider-ignore></script>
     <script src="{{rootURL}}assets/vendor.js"></script>
     <script src="{{rootURL}}assets/test-support.js"></script>
-    <script src="{{rootURL}}assets/classic-app.js"></script>
+    <script src="{{rootURL}}assets/test-app.js"></script>
     <script src="{{rootURL}}assets/tests.js"></script>
 
     {{content-for "body-footer"}} {{content-for "test-body-footer"}}

test-apps/classic-app/tests/shared-scenarios/in-app/at-class-test.gts

@@ -2,7 +2,7 @@ import { render } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 
-import CallsAtHasClass from 'classic-app/components/in-app/at-class-ts/calls-has-at-class';
+import CallsAtHasClass from 'test-app/components/in-app/at-class-ts/calls-has-at-class';
 
 import { scopedClass } from 'ember-scoped-css/test-support';
 
@@ -16,8 +16,8 @@ module('[In App] at-class-ts', function(hooks) {
       </template>
     );
 
-    assert.dom('p').hasClass('text-color_ed46c3a30');
-    assert.dom('p').hasClass(scopedClass('text-color', 'classic-app/components/in-app/at-class-ts/calls-has-at-class'));
+    assert.dom('p').hasClass('text-color_e859f8885');
+    assert.dom('p').hasClass(scopedClass('text-color', 'test-app/components/in-app/at-class-ts/calls-has-at-class'));
     assert.dom('p').hasStyle({ color: 'rgb(51, 51, 119)' });
   });
 });

test-apps/classic-app/tests/shared-scenarios/in-app/basic-test.gts

@@ -2,7 +2,7 @@ import { render } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 
-import Basic from 'classic-app/components/in-app/basic';
+import Basic from 'test-app/components/in-app/basic';
 
 import { scopedClass } from 'ember-scoped-css/test-support';
 
@@ -17,7 +17,7 @@ module('[In App] basic', function(hooks) {
     );
 
     assert.dom('div').hasClass('has-a-style_e8d85123f');
-    assert.dom('div').hasClass(scopedClass('has-a-style', 'classic-app/components/in-app/basic'));
+    assert.dom('div').hasClass(scopedClass('has-a-style', 'test-app/components/in-app/basic'));
     assert.dom('div').hasStyle({ color: 'rgb(0, 100, 50)', fontWeight: '700' });
   });
 });

test-apps/classic-app/tests/shared-scenarios/in-app/component-at-class-test.gjs

@@ -3,7 +3,7 @@ import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 
-import ComponentAtClass from 'classic-app/components/component-at-class';
+import ComponentAtClass from 'test-app/components/component-at-class';
 
 import { scopedClass } from 'ember-scoped-css/test-support';
 
@@ -20,7 +20,7 @@ module('[In App] @class', function (hooks) {
     assert
       .dom('p')
       .hasClass(
-        scopedClass('text-color', 'classic-app/components/component-at-class')
+        scopedClass('text-color', 'test-app/components/component-at-class')
       );
     assert.dom('p').hasStyle({ color: 'rgb(0, 0, 255)' });
   });
@@ -33,7 +33,7 @@ module('[In App] @class', function (hooks) {
     assert
       .dom('p')
       .hasClass(
-        scopedClass('text-color', 'classic-app/components/component-at-class')
+        scopedClass('text-color', 'test-app/components/component-at-class')
       );
     assert.dom('p').hasStyle({ color: 'rgb(0, 0, 255)' });
   });

test-apps/classic-app/tests/shared-scenarios/in-app/header-test.js

@@ -5,7 +5,7 @@ import { setupRenderingTest } from 'ember-qunit';
 
 import { scopedClass } from 'ember-scoped-css/test-support';
 
-module('[In App]  header', function (hooks) {
+module('[In App] header', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it has scoped class', async function (assert) {
@@ -15,6 +15,6 @@ module('[In App]  header', function (hooks) {
     assert.dom('h1').hasStyle({ color: 'rgb(255, 0, 0)' });
     assert
       .dom('h1')
-      .hasClass(scopedClass('test-header', 'classic-app/components/header'));
+      .hasClass(scopedClass('test-header', 'test-app/components/header'));
   });
 });

test-apps/classic-app/tests/shared-scenarios/in-app/subexpression-test.gjs

@@ -2,8 +2,8 @@ import { render, settled } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 
-import SubExpression from 'classic-app/components/subexpression';
 import { cell } from 'ember-resources';
+import SubExpression from 'test-app/components/subexpression';
 
 import { scopedClass } from 'ember-scoped-css/test-support';
 
@@ -27,7 +27,7 @@ module('[In App] subexpression', function (hooks) {
     assert
       .dom('div')
       .hasClass(
-        scopedClass('a-local-class', 'classic-app/components/subexpression')
+        scopedClass('a-local-class', 'test-app/components/subexpression')
       );
     assert.dom('div').hasStyle({ color: 'rgb(0, 0, 255)' });
   });

test-apps/classic-app/tests/shared-scenarios/in-app/template-only-test.js

@@ -13,9 +13,7 @@ module('[In App] template-only', function (hooks) {
 
     assert
       .dom('div')
-      .hasClass(
-        scopedClass('some-class', 'classic-app/components/template-only'),
-      );
+      .hasClass(scopedClass('some-class', 'test-app/components/template-only'));
     assert.dom('div').hasStyle({ color: 'rgb(0, 0, 255)' });
   });
 });

test-apps/classic-app/tests/test-helper.js

@@ -3,8 +3,8 @@ import * as QUnit from 'qunit';
 import { setup } from 'qunit-dom';
 import { start } from 'ember-qunit';
 
-import Application from 'classic-app/app';
-import config from 'classic-app/config/environment';
+import Application from 'test-app/app';
+import config from 'test-app/config/environment';
 
 setApplication(Application.create(config.APP));
 

test-apps/embroider-app/app/app.js

@@ -2,7 +2,7 @@ import Application from '@ember/application';
 
 import loadInitializers from 'ember-load-initializers';
 import Resolver from 'ember-resolver';
-import config from 'embroider-app/config/environment';
+import config from 'test-app/config/environment';
 
 export default class App extends Application {
   modulePrefix = config.modulePrefix;

test-apps/embroider-app/app/components

@@ -0,0 +1 @@
+../../classic-app/app/components