fix: less complicated system for building styles

bin/buildStyles.js

@@ -1,8 +0,0 @@
-import * as sass from 'sass'
-import { minify } from 'csso'
-
-export function buildStyles () {
-  const file = './src/picker/styles/picker.scss'
-  const css = sass.compile(file, { style: 'compressed' }).css
-  return minify(css).css
-}

bin/buildStylesForTest.js

@@ -1,27 +0,0 @@
-import { buildStyles } from './buildStyles.js'
-import { writeFile, mkdirp } from './fs.js'
-import path from 'node:path'
-
-const __dirname = path.dirname(new URL(import.meta.url).pathname)
-
-// Build a file containing the CSS just for Jest/Vitest, because I can't figure out any better way to do this
-async function main () {
-  const styles = buildStyles()
-  const targetDir = path.join(__dirname, '../node_modules/.cache/emoji-picker-element')
-  await mkdirp(targetDir)
-  await writeFile(
-    path.join(targetDir, 'package.json'),
-    '{ "type": "module" }',
-    'utf8'
-  )
-  await writeFile(
-    path.join(targetDir, 'styles.js'),
-    `export default ${JSON.stringify(styles)};`,
-    'utf8'
-  )
-}
-
-main().catch(err => {
-  console.error(err)
-  process.exit(1)
-})

config/buildStylesRollupPlugin.js

@@ -0,0 +1,14 @@
+import * as sass from 'sass'
+import { minify } from 'csso'
+
+export function buildStylesRollupPlugin () {
+  return {
+    name: 'build-styles-from-scss',
+    transform (content, id) {
+      if (id.includes('picker.scss')) {
+        const css = sass.compile(id, { style: 'compressed' }).css
+        return `export default ${JSON.stringify(minify(css).css)}`
+      }
+    }
+  }
+}

config/vitest.setup.js

@@ -3,12 +3,9 @@ import '@testing-library/jest-dom/vitest'
 import { IDBFactory, IDBKeyRange } from 'fake-indexeddb'
 import { ResizeObserver } from 'd2l-resize-aware/resize-observer-module.js'
 import { deleteDatabase } from '../src/database/databaseLifecycle'
-import styles from '../node_modules/.cache/emoji-picker-element/styles.js'
 import fetchMock from 'fetch-mock'
 
 beforeAll(() => {
-  process.env.STYLES = styles
-
   globalThis.ResizeObserver = ResizeObserver
   globalThis.IDBKeyRange = IDBKeyRange
   globalThis.indexedDB = new IDBFactory()

package.json

@@ -44,9 +44,9 @@
     "dev:server": "node ./test/adhoc/server.js",
     "lint": "standard && stylelint '**/*.scss'",
     "lint:fix": "standard --fix && stylelint --fix '**/*.scss'",
-    "test": "node ./bin/buildStylesForTest.js && vitest",
+    "test": "vitest",
     "test:adhoc": "node ./test/adhoc/server.js",
-    "cover": "node ./bin/buildStylesForTest.js && vitest --coverage",
+    "cover": "vitest --coverage",
     "docs": "node bin/processCustomEmoji.js",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "version": "run-s changelog docs && git add CHANGELOG.md docs"

rollup.config.js

@@ -3,8 +3,8 @@ import resolve from '@rollup/plugin-node-resolve'
 import replace from '@rollup/plugin-replace'
 import strip from '@rollup/plugin-strip'
 import analyze from 'rollup-plugin-analyzer'
-import { buildStyles } from './bin/buildStyles.js'
 import { minifyHtmlLiteralsRollupPlugin } from './config/minifyHtmlLiteralsRollupPlugin.js'
+import { buildStylesRollupPlugin } from './config/buildStylesRollupPlugin.js'
 
 const { NODE_ENV, DEBUG } = process.env
 const dev = NODE_ENV !== 'production'
@@ -18,7 +18,6 @@ const baseConfig = {
     replace({
       'process.env.NODE_ENV': dev ? '"development"' : '"production"',
       'process.env.PERF': !!process.env.PERF,
-      'process.env.STYLES': JSON.stringify(buildStyles()),
       preventAssignment: true
     }),
     replace({
@@ -27,6 +26,7 @@ const baseConfig = {
       preventAssignment: true
     }),
     minifyHtmlLiteralsRollupPlugin(),
+    buildStylesRollupPlugin(),
     strip({
       include: ['**/*.js'],
       functions: [

src/picker/PickerElement.js

@@ -4,6 +4,7 @@ import { DEFAULT_CATEGORY_SORTING, DEFAULT_SKIN_TONE_EMOJI, FONT_FAMILY } from '
 import enI18n from './i18n/en.js'
 import Database from './ImportedDatabase'
 import { queueMicrotask } from './utils/queueMicrotask.js'
+import baseStyles from './styles/picker.scss'
 
 const PROPS = [
   'customEmoji',
@@ -25,7 +26,7 @@ export default class PickerElement extends HTMLElement {
     super()
     this.attachShadow({ mode: 'open' })
     const style = document.createElement('style')
-    style.textContent = process.env.STYLES + EXTRA_STYLES
+    style.textContent = baseStyles + EXTRA_STYLES
     this.shadowRoot.appendChild(style)
     this._ctx = {
       // Set defaults

vitest.config.js

@@ -1,9 +1,11 @@
 import { defineConfig } from 'vitest/config'
 import { minifyHtmlLiteralsRollupPlugin } from './config/minifyHtmlLiteralsRollupPlugin.js'
+import { buildStylesRollupPlugin } from './config/buildStylesRollupPlugin.js'
 
 export default defineConfig({
   plugins: [
-    minifyHtmlLiteralsRollupPlugin()
+    minifyHtmlLiteralsRollupPlugin(),
+    buildStylesRollupPlugin()
   ],
   test: {
     globals: true,