diff --git a/bridgetown-core/lib/bridgetown-core/commands/esbuild/esbuild.defaults.js.erb b/bridgetown-core/lib/bridgetown-core/commands/esbuild/esbuild.defaults.js.erb index c44bbd4f2..bb3341740 100644 --- a/bridgetown-core/lib/bridgetown-core/commands/esbuild/esbuild.defaults.js.erb +++ b/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", diff --git a/bridgetown-core/lib/bridgetown-core/commands/new.rb b/bridgetown-core/lib/bridgetown-core/commands/new.rb index 67f1de7db..216e4c880 100644 --- a/bridgetown-core/lib/bridgetown-core/commands/new.rb +++ b/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") diff --git a/bridgetown-core/lib/bridgetown-core/utils.rb b/bridgetown-core/lib/bridgetown-core/utils.rb index 6d678e1f3..7658f1264 100644 --- a/bridgetown-core/lib/bridgetown-core/utils.rb +++ b/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"] diff --git a/bridgetown-core/lib/site_template/frontend/javascript/index.js.erb b/bridgetown-core/lib/site_template/frontend/javascript/index.js.erb index d3a2b1bcf..d7ac16296 100644 --- a/bridgetown-core/lib/site_template/frontend/javascript/index.js.erb +++ b/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 -%> diff --git a/bridgetown-core/lib/site_template/package.json.erb b/bridgetown-core/lib/site_template/package.json.erb index d81730ffc..e9be56f69 100644 --- a/bridgetown-core/lib/site_template/package.json.erb +++ b/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 -%> } } diff --git a/bridgetown-website/src/_docs/command-line-usage.md b/bridgetown-website/src/_docs/command-line-usage.md index 09eee6da6..609c4b49b 100644 --- a/bridgetown-website/src/_docs/command-line-usage.md +++ b/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. diff --git a/bridgetown-website/src/_docs/frontend-assets.md b/bridgetown-website/src/_docs/frontend-assets.md index af61f5008..0ca4a4fda 100644 --- a/bridgetown-website/src/_docs/frontend-assets.md +++ b/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