Drop support for Sass

bridgetown-core/lib/bridgetown-core/commands/esbuild/esbuild.defaults.js.erb

@@ -34,18 +34,6 @@ const moduleAvailable = name => {
   return false
 }
 
-// Generate a Source Map URL (used by the Sass plugin)
-const generateSourceMappingURL = sourceMap => {
-  const data = Buffer.from(JSON.stringify(sourceMap), "utf-8").toString("base64")
-  return `/*# sourceMappingURL=data:application/json;charset=utf-8;base64,${data} */`
-}
-
-// Import Sass if available
-let sass
-if (moduleAvailable("sass")) {
-  sass = await import("sass")
-}
-
 // Glob plugin derived from:
 // https://github.com/thomaschaaf/esbuild-plugin-import-glob
 // https://github.com/xiaohui-zhangxh/jsbundling-rails/commit/b15025dcc20f664b2b0eb238915991afdbc7cb58
@@ -148,65 +136,6 @@ const importPostCssPlugin = (options, configuration) => ({
   },
 })
 
-// Plugin for Sass
-const sassPlugin = (options) => ({
-  name: "sass",
-  async setup(build) {
-    // Process .scss and .sass files with Sass
-    build.onLoad({ filter: /\.(sass|scss)$/ }, async (args) => {
-      if (!sass) {
-        console.error("error: Sass is not installed. Try running `npm i sass -D` and then building again.")
-        return
-      }
-
-      const modulesFolder = pathToFileURL("node_modules/")
-
-      const localOptions = {
-        importers: [{
-          // An importer that redirects relative URLs starting with "~" to
-          // `node_modules`.
-          findFileUrl(url) {
-            if (!url.startsWith('~')) return null
-            return new URL(url.substring(1), modulesFolder)
-          }
-        }],
-        sourceMap: true,
-        ...options
-      }
-      const result = sass.compile(args.path, localOptions)
-
-      const watchPaths = result.loadedUrls
-        .filter((x) => x.protocol === "file:" && !x.pathname.startsWith(modulesFolder.pathname))
-        .map((x) => x.pathname)
-
-      let cssOutput = result.css.toString()
-
-      if (result.sourceMap) {
-        const basedir = process.cwd()
-        const sourceMap = result.sourceMap
-
-        const promises = sourceMap.sources.map(async source => {
-          const sourceFile = await fs.readFile(fileURLToPath(source), "utf8")
-          return sourceFile
-        })
-        sourceMap.sourcesContent = await Promise.all(promises)
-
-        sourceMap.sources = sourceMap.sources.map(source => {
-          return path.relative(basedir, fileURLToPath(source))
-        })
-
-        cssOutput += '\n' + generateSourceMappingURL(sourceMap)
-      }
-
-      return {
-        contents: cssOutput,
-        loader: "css",
-        watchFiles: [args.path, ...watchPaths],
-      }
-    })
-  },
-})
-
 // Set up defaults and generate frontend bundling manifest file
 const bridgetownPreset = (bridgetownConfig) => ({
   name: "bridgetownPreset",
@@ -255,9 +184,9 @@ const bridgetownPreset = (bridgetownConfig) => ({
           // We have an entrypoint!
           manifest[stripPrefix(value.entryPoint)] = outputPath
           entrypoints.push([outputPath, fileSize(key)])
-        } else if (key.match(/index(\.js)?\.[^-.]*\.css/) && inputs.find(item => item.match(/frontend.*\.(s?css|sass)$/))) {
+        } else if (key.match(/index(\.js)?\.[^-.]*\.css/)) {
           // Special treatment for index.css
-          const input = inputs.find(item => item.match(/frontend.*\.(s?css|sass)$/))
+          const input = inputs.find(item => item.match(/frontend.*\.(css)$/))
           manifest[stripPrefix(input)] = outputPath
           entrypoints.push([outputPath, fileSize(key)])
         } else if (inputs.length > 0) {
@@ -306,9 +235,6 @@ export default async (esbuildOptions, ...args) => {
   // Add the Glob plugin
   esbuildOptions.plugins.unshift(importGlobPlugin(esbuildOptions.globOptions || {}, bridgetownConfig))
   if (esbuildOptions.globOptions) delete esbuildOptions.globOptions
-  // Add the Sass plugin
-  esbuildOptions.plugins.push(sassPlugin(esbuildOptions.sassOptions || {}))
-  if (esbuildOptions.sassOptions) delete esbuildOptions.sassOptions
   // Add the Bridgetown preset
   esbuildOptions.plugins.push(bridgetownPreset(bridgetownConfig))
   if (esbuildOptions.bridgetownConfig) delete esbuildOptions.bridgetownConfig
@@ -336,7 +262,7 @@ export default async (esbuildOptions, ...args) => {
       ".ttf": "file",
       ".eot": "file",
     },
-    resolveExtensions: [".tsx", ".ts", ".jsx", ".js", ".css", ".scss", ".sass", ".json", ".js.rb"],
+    resolveExtensions: [".tsx", ".ts", ".jsx", ".js", ".css", ".json", ".js.rb"],
     minify: process.argv.includes("--minify"),
     sourcemap: true,
     target: "es2020",

bridgetown-core/lib/bridgetown-core/commands/new.rb

@@ -21,7 +21,6 @@ class New < Bridgetown::Command
         option "--force", "Force creation even if PATH already exists"
         option "--skip-bundle", "Skip 'bundle install'"
         option "--skip-npm", "Skip 'npm install'"
-        option "--use-sass", "Set up a Sass configuration for your stylesheet"
       end
 
       DOCSURL = "https://bridgetownrb.com/docs"
@@ -79,10 +78,6 @@ def frontend_bundling_option
         "esbuild"
       end
 
-      def postcss_option # rubocop:disable Naming/PredicateMethod
-        !options[:use_sass]
-      end
-
       def disable_postcss?
         # TODO: add option not to use postcss/sass at all
         false
@@ -114,7 +109,7 @@ def create_site(new_site_dir) # rubocop:disable Metrics
           setup_erb_templates
         end
 
-        postcss_option ? configure_postcss : configure_sass
+        configure_postcss
 
         return unless frontend_bundling_option == "esbuild"
 
@@ -144,11 +139,6 @@ def setup_liquid_templates
         RUBY
       end
 
-      def configure_sass
-        template("postcss.config.js.erb", "postcss.config.js") unless disable_postcss?
-        copy_file("frontend/styles/index.css", "frontend/styles/index.scss")
-      end
-
       def configure_postcss
         template("postcss.config.js.erb", "postcss.config.js") unless disable_postcss?
         copy_file("frontend/styles/index.css")

bridgetown-core/lib/bridgetown-core/utils.rb

@@ -322,14 +322,12 @@ def parse_frontend_manifest_file(site, asset_type)
     #   file isnt found
     # @return [nil] Returns nil if the asset isnt found
     # @return [String] Returns the path to the asset if no issues parsing
-    def parse_esbuild_manifest_file(site, asset_type) # rubocop:disable Metrics/PerceivedComplexity
+    def parse_esbuild_manifest_file(site, asset_type)
       return log_frontend_asset_error(site, "esbuild manifest") if site.frontend_manifest.nil?
 
       asset_path = case asset_type
                    when "css"
-                     site.frontend_manifest["styles/index.css"] ||
-                       site.frontend_manifest["styles/index.scss"] ||
-                       site.frontend_manifest["styles/index.sass"]
+                     site.frontend_manifest["styles/index.css"]
                    when "js"
                      site.frontend_manifest["javascript/index.js"] ||
                        site.frontend_manifest["javascript/index.js.rb"]

bridgetown-core/lib/site_template/frontend/javascript/index.js.erb

@@ -1,16 +1,7 @@
 <%- if frontend_bundling_option == "esbuild" -%>
-<%- if postcss_option -%>
 import "$styles/index.css"
-<%- else -%>
-import "$styles/index.scss"
-<%- end -%>
 import "$styles/syntax-highlighting.css"
-<%- else -%>
-<%- if postcss_option -%>
 import "index.css"
-<%- else -%>
-import "index.scss"
-<%- end -%>
 import "syntax-highlighting.css"
 <%- end -%>
 

bridgetown-core/lib/site_template/package.json.erb

@@ -9,17 +9,14 @@
   },
   "devDependencies": {
     "esbuild": "^0.25.11",
-    "glob": "^11.0.3",
+    "glob": "^11.0.3"<%= "," unless disable_postcss?  %>
     <%- unless disable_postcss? -%>
     "postcss": "^8.5.6",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-import": "^16.1.0",
     "postcss-load-config": "^6.0.1",
     "postcss-preset-env": "^10.4.0",
-    "read-cache": "^1.0.0"<%= "," unless postcss_option  %>
-    <%- end -%>
-    <%- unless postcss_option -%>
-    "sass": "^1.93.2"
+    "read-cache": "^1.0.0"
     <%- end -%>
   }
 }

bridgetown-website/src/_docs/command-line-usage.md

@@ -18,7 +18,6 @@ Available commands are:
   * Use the `--apply=` or `-a` option to [apply an automation](/docs/automations) to the new site.
   * Use the `--configure=` or `-c` option to [apply one or more bundled configurations](/docs/bundled-configurations) to the new site.
   * Use the `-t` option to choose Serbea or Liquid templates instead of ERB (aka `-t serbea`).
-  * Use the `--use-sass` option to configure your project to support Sass.
 * `bin/bridgetown start` or `s` - Boots the Rack-based server (using Puma) at `localhost:4000`. In development, you'll get live reload functionality as long as `{% live_reload_dev_js %}` or `<%= live_reload_dev_js %>` is in your HTML head.
 * `bin/bridgetown deploy` - Ensures that all frontend assets get built alongside the published Bridgetown output. This is the command you'll want to use for [deployment](/docs/deployment).
 * `bin/bridgetown build` or `b` - Performs a single build of your site to the `output` folder. Add the `-w` flag to also regenerate the site whenever a source file changes.

bridgetown-website/src/_docs/frontend-assets.md

@@ -41,8 +41,6 @@ Because Bridgetown utilizes standard ES bundler functionality, you can trick out
 
 By default Bridgetown comes with support for [PostCSS](https://postcss.org) to allow for cutting-edge/upcoming CSS features which aren't yet supported in all browsers (such as variable-based media queries and selector nesting).
 
-You can also choose to use [Sass](https://sass-lang.com), a pre-processor for CSS. Pass `--use-sass` to `bridgetown new` to set up your project to support Sass.
-
 The starting place for CSS code lives at `frontend/styles/index.css`. You can add additional stylesheets and `@import` them into `index.css`. CSS files placed anywhere inside `src/_components` are automatically imported.
 
 ### PostCSS