Use pure css rather than scss

lib/generators/rolemodel/mailers/USAGE

@@ -5,7 +5,7 @@ Example:
     rails generate rolemodel:mailers
 
     This will create:
-        app/javascript/packs/mailer_stylesheets.scss
+        app/assets/stylesheets/mailer.css
         app/mailers/user_mailer.rb
         app/views/layouts/mailer.html.slim
         app/views/user_mailer/welcome_email.html.slim

lib/generators/rolemodel/mailers/mailers_generator.rb

@@ -12,11 +12,6 @@ def add_premailer_rails_config
       copy_file 'config/initializers/premailer_rails.rb'
     end
 
-    def include_postcss_calc
-      inject_into_file 'postcss.config.cjs', ",\n    require('postcss-calc')",
-                       after: /^\s*require\('postcss-preset-env'\)\({(.|\n)*?}\)/
-    end
-
     def add_action_mailer_asset_host
       unless File.exist?(Rails.root.join('config/initializers/devise.rb'))
         inject_into_file 'config/environments/development.rb',
@@ -74,7 +69,19 @@ def add_production_mailer_defaults
     end
 
     def add_mailer_css
-      copy_file 'app/assets/stylesheets/mailer.scss'
+      copy_file 'app/assets/stylesheets/mailer.css'
+    end
+
+    def add_mailer_webpack_entry
+      say 'Adding mailer stylesheet to Webpack entry points', :green
+
+      inject_into_file 'webpack.config.js', after: /entry: \{\n/ do
+        <<-JS
+    mailer: [
+      './app/assets/stylesheets/mailer.css'
+    ],
+        JS
+      end
     end
 
     def add_mailer_layout

lib/generators/rolemodel/mailers/templates/app/assets/stylesheets/mailer.css

@@ -0,0 +1,63 @@
+/*
+ * NOTE: Custom fonts and the Material Icons do not currently work in emails.
+ * Since those resources are normally pulled from a CDN, emails may struggle with those
+ * Since premailer rails tries to inline the styles.
+ * In some cases, the email shows as blank since content security policy blocks
+ * any remote content in HTML emails.
+ *
+ * Note: Using Optics Selective imports since we don't need all of the styles for emails
+ */
+
+/* Third party Vendors */
+@import 'modern-css-reset/dist/reset.css';
+
+/* Tokens */
+@import '@rolemodel/optics/dist/css/core/tokens.css';
+
+/* Base styles and utilities */
+@import '@rolemodel/optics/dist/css/core/base.css';
+@import '@rolemodel/optics/dist/css/core/layout.css';
+@import '@rolemodel/optics/dist/css/core/utilities.css';
+
+/* Components */
+@import '@rolemodel/optics/dist/css/components/alert.css'; /* For using the banner style */
+@import '@rolemodel/optics/dist/css/components/avatar.css';
+@import '@rolemodel/optics/dist/css/components/badge.css';
+@import '@rolemodel/optics/dist/css/components/breadcrumbs.css';
+@import '@rolemodel/optics/dist/css/components/button.css';
+@import '@rolemodel/optics/dist/css/components/card.css';
+@import '@rolemodel/optics/dist/css/components/divider.css';
+@import '@rolemodel/optics/dist/css/components/spinner.css';
+@import '@rolemodel/optics/dist/css/components/table.css';
+@import '@rolemodel/optics/dist/css/components/tag.css';
+@import '@rolemodel/optics/dist/css/components/text_pair.css';
+
+:root {
+  --op-font-scale-unit: 1.15;
+}
+
+.email-container {
+  max-width: 600px;
+  margin: auto;
+  padding-left: var(--op-space-x-small);
+  padding-right: var(--op-space-x-small);
+}
+
+.card {
+  border: none;
+}
+
+.email-header {
+  margin-top: var(--op-space-large);
+  margin-bottom: var(--op-space-large);
+  text-align: center;
+}
+
+.email-header__logo {
+  max-width: 100px;
+}
+
+.email-footer {
+  text-align: center;
+  color: var(--op-color-on-background-alt);
+}

lib/generators/rolemodel/mailers/templates/config/initializers/premailer_rails.rb

@@ -1,7 +1,8 @@
 module CustomPropertyCSSHelper
   def load_css(url)
-    # strip out any CSS Custom Properties, PostCSS includes the fallbacks,
-    # but Premailer can't ignore them so we remove them
+    # strip out any CSS Custom Property declarations, since Premailer can't
+    # inline them. Any var() references should specify a literal fallback
+    # value (e.g. var(--op-color-primary, #005) ) so styles survive inlining.
     super.gsub(/((\b[a-z_-]*?:)?[^\n;{}]*var\(.*?)?\B--.*?(,(?=\n)|;(?!\S)|(?=\}))/, '')
   end
 end

lib/generators/rolemodel/optics/base/base_generator.rb

@@ -12,9 +12,9 @@ def add_optics_package
       def copy_templates
         say 'importing stylesheet', :green
 
-        prepend_to_file Dir.glob('app/assets/stylesheets/application.*').first, <<~SCSS
-          @import '@rolemodel/optics/dist/css/optics';
-        SCSS
+        prepend_to_file Dir.glob('app/assets/stylesheets/application.*').first, <<~CSS
+          @import '@rolemodel/optics/dist/css/optics.css';
+        CSS
       end
     end
   end

lib/generators/rolemodel/saas/devise/devise_generator.rb

@@ -161,11 +161,11 @@ def add_login_styles
         say 'importing login stylesheet', :green
         copy_file 'app/assets/stylesheets/login.css'
 
-        return unless File.exist?(File.join(destination_root, 'app/assets/stylesheets/application.scss'))
+        return unless File.exist?(File.join(destination_root, 'app/assets/stylesheets/application.css'))
 
-        append_to_file 'app/assets/stylesheets/application.scss', <<~SCSS
-          @import 'login';
-        SCSS
+        append_to_file 'app/assets/stylesheets/application.css', <<~CSS
+          @import 'login.css';
+        CSS
       end
     end
   end

lib/generators/rolemodel/ui_components/modals/modals_generator.rb

@@ -53,11 +53,11 @@ def to_panel_or_not_to_panel
             SLIM
           end
 
-          inject_into_file 'app/assets/stylesheets/application.scss',
-                          after: "@import '@rolemodel/optics/dist/css/optics';\n" do
-            <<~SCSS
-              @import '@rolemodel/optics/dist/css/addons/panel';
-            SCSS
+          inject_into_file 'app/assets/stylesheets/application.css',
+                          after: "@import '@rolemodel/optics/dist/css/optics.css';\n" do
+            <<~CSS
+              @import '@rolemodel/optics/dist/css/addons/panel.css';
+            CSS
           end
         else
           remove_file 'app/views/layouts/panel.html.slim'

lib/generators/rolemodel/ui_components/navbar/navbar_generator.rb

@@ -42,11 +42,11 @@ def add_shoelace_javascript_imports
       def copy_shoelace_css_imports
         say 'Copying Shoelace CSS imports', :green
 
-        copy_file 'app/assets/stylesheets/components/shoelace/index.scss'
-        append_to_file 'app/assets/stylesheets/application.scss' do
-          <<~SCSS
-            @import 'components/shoelace/index.scss';
-          SCSS
+        copy_file 'app/assets/stylesheets/components/shoelace/index.css'
+        append_to_file 'app/assets/stylesheets/application.css' do
+          <<~CSS
+            @import 'components/shoelace/index.css';
+          CSS
         end
       end
     end

lib/generators/rolemodel/webpack/README.md

@@ -4,5 +4,6 @@
 
 * Webpack v5
 * Uses `esbuild-loader` instead of Babel to transpile JS
-* Uses PostCSS to compile CSS and SCSS
-* Honeybadger error monitoring for JS. Run `bundle exec honeybadger install [YOUR API KEY HERE]` to setup Honeybadger for Ruby.
+* Uses `css-loader` to bundle plain CSS
+
+For error monitoring, run the `rolemodel:sentry` generator.

lib/generators/rolemodel/webpack/templates/app/assets/stylesheets/application.css

@@ -0,0 +1,8 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include
+ * all the files listed below.
+ *
+ * CSS @import statements must appear before any other rules, so keep additional
+ * imports grouped at the top of this file. For example:
+ * @import 'components/modal';
+ */

lib/generators/rolemodel/webpack/templates/webpack.config.js

@@ -17,7 +17,7 @@ export default {
   entry: {
     application: [
       './app/javascript/application.js',
-      './app/assets/stylesheets/application.scss'
+      './app/assets/stylesheets/application.css'
     ]
   },
   output: {
@@ -56,16 +56,15 @@ export default {
         }
       },
       {
-        test: /\.(sa|sc|c)ss$/i,
+        test: /\.css$/i,
         use: [
           MiniCssExtractPlugin.loader,
           {
             loader: 'css-loader',
             options: {
               url: false
             }
-          },
-          'postcss-loader'
+          }
         ]
       }
     ]

lib/generators/rolemodel/webpack/webpack_generator.rb

@@ -11,14 +11,6 @@ class WebpackGenerator < GeneratorBase
       webpack-cli
     ]
 
-    POSTCSS_PKGS = %w[
-      @csstools/postcss-sass
-      postcss
-      postcss-loader
-      postcss-preset-env
-      postcss-scss
-    ]
-
     WEBPACK_CSS_PKGS = %w[
       css-loader
       css-minimizer-webpack-plugin
@@ -46,7 +38,7 @@ def remove_obsolete_javascript_dependencies
     def add_npm_packages
       say 'Adding new dev dependencies to package.json', :green
 
-      dependencies = DEV_DEPS + POSTCSS_PKGS + WEBPACK_CSS_PKGS
+      dependencies = DEV_DEPS + WEBPACK_CSS_PKGS
       run "yarn add --dev #{dependencies.join(' ')}"
     end
 
@@ -59,17 +51,15 @@ def honeybadger_setup
       JS
     end
 
-    def replace_css_entrypoint_with_scss
-      say 'Replacing CSS entrypoint file with SCSS version', :green
+    def add_css_entrypoint
+      say 'Adding CSS entrypoint file', :green
 
-      remove_file 'app/assets/stylesheets/application.css'
-      copy_file 'app/assets/stylesheets/application.scss'
+      copy_file 'app/assets/stylesheets/application.css', force: true
     end
 
     def add_webpack_config
-      say 'Copying PostCSS & Webpack config files', :green
+      say 'Copying Webpack config file', :green
 
-      copy_file 'postcss.config.cjs', force: true
       copy_file 'webpack.config.js', force: true
     end
   end