Replace scss to css compiler while rollup (#1857)

cibernox · Nov 11, 2024 · 2e9af6b · 2e9af6b
1 parent 913c85e
commit 2e9af6b
Show file tree

Hide file tree

Showing 3 changed files with 2,514 additions and 3,480 deletions.
diff --git a/ember-power-select/package.json b/ember-power-select/package.json
@@ -130,12 +130,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.43",
     "prettier": "^3.3.3",
     "prettier-plugin-ember-template-tag": "^2.0.2",
     "rollup": "^4.21.2",
-    "rollup-plugin-styles": "^4.0.0",
+    "rollup-plugin-sass": "^1.13.2",
     "rsvp": "^4.8.5",
     "sass": "^1.77.8",
     "typescript": "^5.5.4",

diff --git a/ember-power-select/rollup.config.mjs b/ember-power-select/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';
 import path from 'path';
 
 const addon = new Addon({
@@ -17,44 +18,101 @@ export default [
       assetFileNames: '[name][extname]',
     },
     plugins: [
-      styles({
-        mode: ['extract', 'ember-power-select.css'],
-        sass: {
+      sass({
+        options: {
           includePaths: [path.resolve('node_modules')],
         },
-      }),
+        output: './vendor/ember-power-select.css',
+      })
     ],
   },
+  {
+    input: './_index.scss',
+    output: {
+      file: './vendor/ember-power-select.js',
+      assetFileNames: '[name][extname]',
+    },
+    plugins: [
+      sass({
+        options: {
+          includePaths: [path.resolve('node_modules')],
+        },
+        processor: css => postcss()
+          .process(css, {
+            from: undefined,
+          })
+          .then(result => result.css)
+      })
+    ]
+  },
   {
     input: './scss/bootstrap-complete.scss',
     output: {
       file: './vendor/ember-power-select-bootstrap.js',
       assetFileNames: '[name][extname]',
     },
     plugins: [
-      styles({
-        mode: ['extract', 'ember-power-select-bootstrap.css'],
-        sass: {
+      sass({
+        options: {
           includePaths: [path.resolve('node_modules')],
         },
+        output: './vendor/ember-power-select-bootstrap.css',
       }),
     ],
   },
+  {
+    input: './scss/bootstrap-complete.scss',
+    output: {
+      file: './vendor/ember-power-select-bootstrap.js',
+      assetFileNames: '[name][extname]',
+    },
+    plugins: [
+      sass({
+        options: {
+          includePaths: [path.resolve('node_modules')],
+        },
+        processor: css => postcss()
+          .process(css, {
+            from: undefined,
+          })
+          .then(result => result.css)
+      })
+    ]
+  },
   {
     input: './scss/material-complete.scss',
     output: {
       file: './vendor/ember-power-select-material.js',
       assetFileNames: '[name][extname]',
     },
     plugins: [
-      styles({
-        mode: ['extract', 'ember-power-select-material.css'],
-        sass: {
+      sass({
+        options: {
           includePaths: [path.resolve('node_modules')],
         },
+        output: './vendor/ember-power-select-material.css',
       }),
     ],
   },
+  {
+    input: './scss/material-complete.scss',
+    output: {
+      file: './vendor/ember-power-select-material.js',
+      assetFileNames: '[name][extname]',
+    },
+    plugins: [
+      sass({
+        options: {
+          includePaths: [path.resolve('node_modules')],
+        },
+        processor: css => postcss()
+          .process(css, {
+            from: undefined,
+          })
+          .then(result => result.css)
+      })
+    ]
+  },
   {
     // This provides defaults that work well alongside `publicEntrypoints` below.
     // You can augment this if you need to.