Merge pull request #257 from soxhub/additional-gts-test

Fix issue with gts detection when using embroider-webpack's rewritten-app.

ember-scoped-css/src/build/app-css-loader.js

@@ -21,10 +21,9 @@ export default async function (code) {
 
   const hbsPath = cssPath.replace('.css', '.hbs');
   const gjsPath = cssPath.replace('.css', '.js');
-  const hbsExists = existsSync(hbsPath);
-  const gjsExists = existsSync(gjsPath);
+  const gtsPath = cssPath.replace('.css', '.ts');
 
-  if (hbsExists || gjsExists) {
+  if (existsSync(gjsPath) || existsSync(gtsPath) || existsSync(hbsPath)) {
     const postfix = hashFrom(cssPath);
     const rewrittenCss = rewriteCss(
       code,

test-apps/embroider-app/app/components/in-app/at-class-ts/calls-has-at-class.css

@@ -0,0 +1,3 @@
+.text-color {
+  color: #337 !important;
+}

test-apps/embroider-app/app/components/in-app/at-class-ts/calls-has-at-class.gts

@@ -0,0 +1,7 @@
+import { scopedClass } from 'ember-scoped-css';
+
+import HasAtClass from './has-at-class';
+
+<template>
+  <HasAtClass @class={{scopedClass "text-color"}} />
+</template>

test-apps/embroider-app/app/components/in-app/at-class-ts/has-at-class.gts

@@ -0,0 +1,3 @@
+<template>
+  <p class={{@class}} ...attributes>some text</p>
+</template>

test-apps/embroider-app/app/components/in-app/basic.css

@@ -0,0 +1,7 @@
+.has-a-style {
+  color: rgb(0, 100, 50);
+}
+
+div {
+  font-weight: bold;
+}

test-apps/embroider-app/app/components/in-app/basic.gts

@@ -0,0 +1,3 @@
+<template>
+  <div class="has-a-style">text here</div>
+</template>

test-apps/embroider-app/app/components/in-app/misuse/no-css.hbs

@@ -0,0 +1 @@
+<p class={{scoped-class "foo"}}>No CSS here!</p>

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

@@ -20,6 +20,7 @@ module.exports = async function (defaults) {
     packagerOptions: {
       // css loaders for live reloading css
       webpackConfig: {
+        devtool: 'source-map',
         module: {
           rules: [
             // css loaders for production

test-apps/embroider-app/package.json

@@ -36,6 +36,8 @@
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
     "@nullvoxpopuli/eslint-configs": "^4.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.10.0",
+    "@typescript-eslint/parser": "^7.10.0",
     "broccoli-asset-rev": "^3.0.0",
     "concurrently": "^8.2.2",
     "copy-webpack-plugin": "^11.0.0",
@@ -72,6 +74,7 @@
     "qunit": "^2.20.0",
     "qunit-dom": "^3.0.0",
     "tracked-built-ins": "^3.1.0",
+    "typescript": "^5.5.3",
     "v2-addon": "workspace:*",
     "webpack": "^5.91.0"
   },

test-apps/embroider-app/tests/integration/in-app/at-class-test.gts

@@ -0,0 +1,22 @@
+import { render } from '@ember/test-helpers';
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+
+import CallsAtHasClass from 'embroider-app/components/in-app/at-class-ts/calls-has-at-class';
+
+import { scopedClass } from 'ember-scoped-css/test-support';
+
+module('[In App] at-class-ts', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('calls component with @class', async function(assert) {
+    await render(
+      <template>
+        <CallsAtHasClass />
+      </template>
+    );
+
+    assert.dom('p').hasClass(scopedClass('text-color', 'embroider-app/components/in-app/at-class-ts/calls-has-at-class'));
+    assert.dom('p').hasStyle({ color: 'rgb(51, 51, 119)' });
+  });
+});

test-apps/embroider-app/tests/integration/in-app/basic-test.gts

@@ -0,0 +1,22 @@
+import { render } from '@ember/test-helpers';
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+
+import Basic from 'embroider-app/components/in-app/basic';
+
+import { scopedClass } from 'ember-scoped-css/test-support';
+
+module('[In App] basic', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('has a style on an element', async function(assert) {
+    await render(
+      <template>
+        <Basic />
+      </template>
+    );
+
+    assert.dom('div').hasClass(scopedClass('has-a-style', 'embroider-app/components/in-app/basic'));
+    assert.dom('div').hasStyle({ color: 'rgb(0, 100, 50)', fontWeight: '700' });
+  });
+});