Support Vite

Author: NullVoxPopuli

.github/workflows/ci.yml

@@ -33,6 +33,7 @@ jobs:
           - "test-apps/embroider-app"
           - "test-apps/pods-embroider-app"
           - "test-apps/pods-classic-app"
+          - "test-apps/vite-app"
 
     steps:
       - uses: wyvox/action@v1
@@ -53,6 +54,7 @@ jobs:
           - "test-apps/embroider-app"
           - "test-apps/pods-embroider-app"
           - "test-apps/pods-classic-app"
+          - "test-apps/vite-app"
 
     steps:
       - uses: wyvox/action@v1

.npmrc

@@ -11,3 +11,10 @@ prefer-workspaces-packages=true
 # default is true, we do this to try to have more isolation
 # since we test with incompatible sets of TS types.
 shared-workspace-lockfile=false
+
+## We use so many similarly grouped peers, we want to make the
+## peer-groups easier to distinguish.
+## This forces a shorter sha for all groups (vs the default of 1000)
+##
+peers-suffix-max-length=40
+virtual-store-dir-max-length=40

README.md

@@ -15,6 +15,7 @@ This build tool emits CSS in a `@layer`.
 
 ## Compatibility
 
+- Vite
 - V2 addons
 - non-embroider apps 
 - embroider apps
@@ -26,6 +27,48 @@ This build tool emits CSS in a `@layer`.
 | classic components | <= 0.18.0 | <= 8.0.0 |
 | ember < 4 | <= 0.18.0 | <= 8.0.0 |
 
+## Installation for a Vite app
+
+```bash
+npm install --save-dev ember-scoped-css
+```
+
+### Configuration
+
+In your `vite.config.js`, import and add the `scopedCSS` plugin:
+```js
+import { defineConfig } from 'vite';
+import { scopedCSS } from 'ember-scoped-css/vite';
+
+export default defineConfig({
+  // ...
+  plugins: [
+    scopedCSS(),
+    // ...
+  ],
+});
+```
+
+and then in your `babel.config.cjs`, add a template-transform:
+```js
+const scopedCSS = require("ember-scoped-css/build");
+
+module.exports = {
+  plugins: [
+    // ...
+    [
+      'babel-plugin-ember-template-compilation',
+      {
+        // ...
+        transforms: [scopedCSS.templatePlugin({})],
+      },
+    ],
+    // ...
+  ],
+  // ...
+};
+
+```
 
 ## Installation for a non-embroider ember app