chore: use css instead of scss where possible (#3040)

packages/elements/package.json

@@ -63,8 +63,8 @@
     "express": "4.18.2",
     "lit": "3.1.2",
     "mutation-testing-metrics": "3.0.2",
-    "mutation-testing-report-schema": "3.0.2",
     "mutation-testing-real-time": "3.0.2",
+    "mutation-testing-report-schema": "3.0.2",
     "postcss": "8.4.35",
     "prism-svelte": "0.5.0",
     "prismjs": "1.29.0",

packages/elements/postcss.config.js

@@ -1,5 +1,6 @@
 export default {
   plugins: {
+    'tailwindcss/nesting': {},
     tailwindcss: {},
     ...(process.env.NODE_ENV === 'production' ? { cssnano: {}, autoprefixer: {} } : {}),
   },

packages/elements/src/components/drawer/drawer.component.scss → packages/elements/src/components/drawer/drawer.component.css

@@ -1,10 +1,10 @@
-@import '../../style/globals.scss';
+@import '../../style/globals.css';
 
 :host([mode='closed']) {
   @apply h-0;
 }
 :host([mode='half']) {
-  height: $mte-drawer-height-half-open;
+  height: var(--mte-drawer-height-half-open);
 }
 :host([mode='open']) {
   @apply h-1/2;

packages/elements/src/components/drawer/drawer.component.ts

@@ -3,7 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { renderIf } from '../../lib/html-helpers.js';
 import { tailwind } from '../../style/index.js';
 import { renderEmoji } from '../drawer-mutant/util.js';
-import style from './drawer.component.scss?inline';
+import style from './drawer.component.css?inline';
 
 export type DrawerMode = 'open' | 'half' | 'closed';
 export const DRAWER_HALF_OPEN_SIZE = 120;

packages/elements/src/components/file-icon/file-icon.component.ts

@@ -1,7 +1,7 @@
 import { LitElement, svg, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { determineLanguage, ProgrammingLanguage } from '../../lib/code-helpers.js';
-import style from './file-icon.scss?inline';
+import style from './file-icon.css?inline';
 import { classMap } from 'lit/directives/class-map.js';
 @customElement('mte-file-icon')
 export class MutationTestReportFileIconComponent extends LitElement {

packages/elements/src/components/file/file.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
 
-@import '../../style/code.scss';
+@import '../../style/code.css';
 
 $mutant-themes: (
   'Pending': theme('colors.neutral.400'),

packages/elements/src/components/mutant-view/mutant-view.css

@@ -0,0 +1,4 @@
+main {
+  /* Allow room for a half-open drawer */
+  padding-bottom: var(--mte-drawer-height-half-open);
+}

packages/elements/src/components/mutant-view/mutant-view.ts

@@ -7,7 +7,7 @@ import type { MteCustomEvent } from '../../lib/custom-events.js';
 import { tailwind } from '../../style/index.js';
 import type { DrawerMode } from '../drawer/drawer.component.js';
 import type { Column } from '../metrics-table/metrics-table.component.js';
-import style from './mutant-view.scss?inline';
+import style from './mutant-view.css?inline';
 import { RealTimeElement } from '../real-time-element.js';
 
 @customElement('mte-mutant-view')

packages/elements/src/components/state-filter/state-filter.component.ts

@@ -5,7 +5,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import { createCustomEvent } from '../../lib/custom-events.js';
 import { renderIf } from '../../lib/html-helpers.js';
 import { tailwind } from '../../style/index.js';
-import style from './state-filter.scss?inline';
+import style from './state-filter.css?inline';
 import { RealTimeElement } from '../real-time-element.js';
 
 export interface StateFilter<TStatus> {

packages/elements/src/components/test-file/test-file.scss

@@ -1,4 +1,4 @@
-@import '../../style/code.scss';
+@import '../../style/code.css';
 
 $test-themes: (
   'Killing': 'fill-green-700',

packages/elements/src/components/test-view/test-view.css

@@ -0,0 +1,4 @@
+main {
+  /* Allow room for a half-open drawer */
+  padding-bottom: var(--mte-drawer-height-half-open);
+}

packages/elements/src/components/test-view/test-view.ts

@@ -7,7 +7,7 @@ import { tailwind } from '../../style/index.js';
 import type { DrawerMode } from '../drawer/drawer.component.js';
 import type { Column } from '../metrics-table/metrics-table.component.js';
 import { RealTimeElement } from '../real-time-element.js';
-import style from './test-view.scss?inline';
+import style from './test-view.css?inline';
 
 @customElement('mte-test-view')
 export class MutationTestReportTestViewComponent extends RealTimeElement {

packages/elements/src/style/code.scss → packages/elements/src/style/code.css

@@ -1,6 +1,6 @@
 #report-code-block {
-  // Don't show scrollbar in code block, the page already scrolls
-  // Also let the popup appear outside the code block boundaries
+  /* Don't show scrollbar in code block, the page already scrolls */
+  /* Also let the popup appear outside the code block boundaries */
   overflow-y: visible;
   overflow-x: auto;
   background: var(--prism-background);

packages/elements/src/style/globals.css

@@ -0,0 +1,5 @@
+/* Global variables loaded in mutation-test-report-app */
+
+:host {
+  --mte-drawer-height-half-open: 120px; /* Leave room for 2 lines of text */
+}

packages/elements/src/style/index.ts

@@ -1,7 +1,7 @@
 import { unsafeCSS } from 'lit';
 import tailwindCss from './tailwind.css?inline';
-import prismjsCss from './prismjs.scss?inline';
-import globalsCss from './globals.scss?inline';
+import prismjsCss from './prismjs.css?inline';
+import globalsCss from './globals.css?inline';
 import './prism-plugins';
 
 export const tailwind = unsafeCSS(tailwindCss);

packages/elements/src/style/prism-plugins.ts

@@ -1,5 +1,4 @@
 import 'prismjs/components/prism-core';
-import 'prismjs/plugins/line-numbers/prism-line-numbers';
 
 // Order is important here! Scala depends on java, which depends on clike
 import 'prismjs/components/prism-clike';

workspace.code-workspace

@@ -66,6 +66,9 @@
       "editor.defaultFormatter": "scalameta.metals",
     },
     "liveServer.settings.multiRootWorkspaceName": "real-time",
+    "files.associations": {
+      "*.css": "tailwindcss",
+    },
   },
   "launch": {
     "version": "0.2.0",