Replace rollup-plugin-styles with ´rollup-plugin-sass` (#938)

ember-basic-dropdown/package.json

@@ -124,11 +124,11 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-n": "^17.10.2",
     "eslint-plugin-prettier": "^5.2.1",
-    "node-sass": "^9.0.0",
+    "postcss": "^8.4.47",
     "prettier": "^3.3.3",
     "prettier-plugin-ember-template-tag": "^2.0.2",
     "rollup": "^4.21.1",
-    "rollup-plugin-styles": "^4.0.0",
+    "rollup-plugin-sass": "^1.13.2",
     "rsvp": "^4.8.5",
     "typescript": "^5.5.4",
     "webpack": "^5.94.0"

ember-basic-dropdown/rollup.config.mjs

@@ -1,6 +1,7 @@
 import { babel } from '@rollup/plugin-babel';
 import { Addon } from '@embroider/addon-dev/rollup';
-import styles from 'rollup-plugin-styles';
+import sass from 'rollup-plugin-sass'
+import postcss from 'postcss';
 
 const addon = new Addon({
   srcDir: 'src',
@@ -16,10 +17,26 @@ export default [
       assetFileNames: '[name][extname]',
     },
     plugins: [
-      styles({
-        mode: ['extract', 'ember-basic-dropdown.css'],
-      }),
-    ],
+      sass({
+        output: './vendor/ember-basic-dropdown.css',
+      })
+    ]
+  },
+  {
+    input: './_index.scss',
+    output: {
+      file: './vendor/ember-basic-dropdown.js',
+      assetFileNames: '[name][extname]',
+    },
+    plugins: [
+      sass({
+        processor: css => postcss()
+          .process(css, {
+            from: undefined,
+          })
+          .then(result => result.css)
+      })
+    ]
   },
   {
     // This provides defaults that work well alongside `publicEntrypoints` below.