configured rollup to export styles to sprockets recognized folder

Author: jonasjabari

assets/stylesheets/_matestack-ui-bootstrap.css

@@ -0,0 +1,98 @@
+.matestack-page-container .matestack-page-wrapper {
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out;
+}
+.matestack-page-container .matestack-page-wrapper.loading {
+  opacity: 0;
+}
+.matestack-page-container .loading-state-element-wrapper {
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+}
+.matestack-page-container .loading-state-element-wrapper.loading {
+  opacity: 1;
+}
+
+.matestack-async-component-container {
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out;
+}
+.matestack-async-component-container.loading {
+  opacity: 0;
+}
+
+.matestack-isolated-component-container {
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out;
+}
+.matestack-isolated-component-container.loading {
+  opacity: 0;
+}
+
+.matestack-app-wrapper {
+  overflow-x: hidden;
+}
+
+.content-wrapper {
+  position: relative;
+  z-index: 1;
+  min-height: 101vh;
+  transition: 0.5s;
+}
+@media (max-width: 992px) {
+  .content-wrapper.sidebar-open {
+    margin-left: -300px;
+  }
+}
+
+.sidebar-wrapper {
+  position: relative;
+  z-index: 10;
+  transition: 0.5s;
+  flex-grow: 0; /* do not grow   - initial value: 0 */
+  flex-shrink: 0; /* do not shrink - initial value: 1 */
+  flex-basis: 300px; /* width/height  - initial value: auto */
+}
+.sidebar-wrapper .sidebar-toggler {
+  transition: 0.5s;
+  position: relative;
+  left: 290px;
+}
+.sidebar-wrapper.closed {
+  margin-left: -300px;
+}
+.sidebar-wrapper.open {
+  margin-left: 0px;
+}
+@media (max-width: 992px) {
+  .sidebar-wrapper {
+    margin-left: -300px;
+  }
+  .sidebar-wrapper.open {
+    margin-left: 0px;
+  }
+}
+.sidebar-wrapper .sidebar {
+  min-height: 100vh;
+  height: 100%;
+}
+.sidebar-wrapper .sidebar .sidebar-top {
+  margin-top: -35px;
+}
+.sidebar-wrapper .sidebar .sidebar-top a {
+  text-decoration: none;
+}
+.sidebar-wrapper .sidebar .list-group-item.active {
+  margin-top: 0px !important;
+}
+.sidebar-wrapper .sidebar .list-group-item.active-child {
+  color: var(--bs-white);
+  background-color: var(--bs-primary);
+}
+
+.smart-collection .pagination .page-item {
+  cursor: pointer;
+}
+.smart-collection .pagination .page-item.disabled {
+  cursor: initial;
+}

rollup.config.js

@@ -3,6 +3,7 @@ import commonjs from "@rollup/plugin-commonjs"
 import json from '@rollup/plugin-json';
 import { terser } from "rollup-plugin-terser"
 import scss from 'rollup-plugin-scss'
+import { writeFileSync } from 'fs'
 
 const terserOptions = {
   mangle: true,
@@ -24,7 +25,10 @@ export default [
       resolve({ browser: true }),
       json(),
       commonjs(),
-      scss({ output: './dist/matestack-ui-bootstrap.css' }),
+      scss({ output: function (styles, styleNodes) {
+        writeFileSync('./dist/matestack-ui-bootstrap.css', styles)
+        writeFileSync('./assets/stylesheets/_matestack-ui-bootstrap.css', styles)
+      }}),
       terser(terserOptions)
     ]
   }