@s-ui/bundler 9.78.0 → 9.79.0-beta.1

package/docs/tailwind-v4-integration.md

@@ -0,0 +1,71 @@
+# Tailwind v4 integration in `@s-ui/bundler` — investigation & alternatives
+
+## Context
+
+- `@adv-mt/ui` (Milanuncios DS) ships Tailwind **v4** CSS via `@tailwindcss/postcss`.
+- `@adv-re/ui` (Fotocasa DS) uses Tailwind **v3**.
+- `@s-ui/bundler` (`9.78.0`) hard-pins `tailwindcss@3.4.14` and enables the plugin only when a `tailwind.config.js` file exists at the project root.
+- Tailwind v4 has an incompatible API: CSS-first config (`@import "tailwindcss"`, `@source`, `@theme`), no JS config by default, plugin renamed to `@tailwindcss/postcss`, built-in vendor prefixing.
+
+Relevant code: `packages/sui-bundler/shared/module-rules-sass.js`, `shared/index.js` (`isTailwindEnabled`), `webpack.config.dev.js`, `webpack.config.client.dev.js`.
+
+Relevant external work:
+- MA integration PR — `frontend-ma--web-app#7667`
+- Strategy doc — `frontend-ma--web-app/docs/design-system-css-strategy.md`
+- Bundler PR — [SUI-Components/sui#1988](https://github.com/SUI-Components/sui/pull/1988) (`plainCssPackages` config to bypass sass-loader for plain CSS packages)
+
+## Alternatives
+
+### A. Land #1988 (`plainCssPackages`) — patch release
+
+Bypass sass + postcss for pre-built DS CSS. No Tailwind upgrade.
+
+- Pros: zero risk for Fotocasa; unblocks MA today; small surface.
+- Cons: doesn't enable app-build Tailwind (Option 2 in MA's strategy doc); MA keeps shipping the full pre-built `@adv-mt/ui/styles.css`.
+
+### B. Peer-dep Tailwind — major (v10) — **recommended**
+
+Remove `tailwindcss` from bundler deps. Consumer installs `tailwindcss@3` OR `tailwindcss@4` + `@tailwindcss/postcss`. Bundler detects which is installed and wires the correct postcss plugin.
+
+- Pros: no forced migration; each team upgrades on its own schedule; future-proof; bundler owns no Tailwind bugs.
+- Cons: more setup for consumers (one extra install); detection logic in bundler.
+
+### C. Hard upgrade v3 → v4 — major (v10)
+
+Replace `tailwindcss@3` with `@tailwindcss/postcss@4`. Drop `tailwind.config.js` detection. Fotocasa migrates via `npx @tailwindcss/upgrade`.
+
+- Pros: clean, single path forward.
+- Cons: forces Fotocasa work; release coordination.
+
+### D. Dual-mode flag — major (v10)
+
+Ship both `tailwindcss@3` and `@tailwindcss/postcss@4`. Detect entry (`tailwind.config.js` → v3, `tailwind.css`/CSS-first → v4) and pick plugin per project. Remove v3 in v11.
+
+- Pros: smooth ramp; opt-in v4.
+- Cons (maintenance is moderate, not trivial):
+  - Two Tailwind deps shipped — bigger install for every consumer, even single-version ones.
+  - Branching pipeline lives in `module-rules-sass.js` + 3 webpack configs.
+  - Two doc paths in README.
+  - Test matrix doubles — every bundler release verified against v3 and v4.
+  - Bug surface: plugin order, autoprefixer overlap with v4's built-in prefixing, sourcemaps differ.
+  - Sunset still requires Fotocasa migration in v11 — work is deferred, not avoided.
+- Verdict: real cost is owning v3 bugs in sui-bundler for ~a year. Worse than B unless Fotocasa explicitly wants zero-effort upgrade.
+
+### E. Skip bundler change; push DS to per-component CSS exports
+
+Pair with #1988. DS publishes `@adv-mt/ui/button/styles.css` etc. Sidesteps v4-in-bundler entirely until both teams want app-build Tailwind.
+
+- Pros: no bundler v10 needed.
+- Cons: requires DS build changes; consumer tracks per-page imports; no automatic tree-shaking.
+
+## Recommendation
+
+1. **Now** — merge #1988, patch release. Unblocks MA today, zero risk to Fotocasa.
+2. **Next major (v10)** — option **B** (peer-dep). Best ergonomics across teams; lets each move independently; gives MA the path to app-build Tailwind v4 without forcing Fotocasa.
+3. **Fallback** if peer-dep complexity is too high → option **D**, drop v3 in v11.
+
+## Open questions
+
+- Does Fotocasa have appetite to migrate to v4 (with codemod) within v10's window? If yes, **C** becomes viable and simpler than B.
+- Are there other sui-bundler consumers using Tailwind v3? Audit before committing to B/C/D.
+- Does autoprefixer need to be removed/conditional under v4? v4 has built-in vendor prefixing.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@s-ui/bundler",
-  "version": "9.78.0",
+  "version": "9.79.0-beta.1",
   "description": "Config-free bundler for ES6 React apps.",
   "bin": {
     "sui-bundler": "./bin/sui-bundler.js"

package/shared/module-rules-sass.js

@@ -2,8 +2,17 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 const {cleanList, config, when, isTailwindEnabled} = require('./index')
 
-module.exports = {
+const plainCssPackages = config.plainCssPackages || []
+
+const plainCssExclude = plainCssPackages.length
+  ? new RegExp(
+      `node_modules[\\\\/](${plainCssPackages.map(p => p.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|')})[\\\\/]`
+    )
+  : null
+
+const sassRule = {
   test: /(\.css|\.scss)$/,
+  ...(plainCssExclude ? {exclude: plainCssExclude} : {}),
   use: cleanList([
     MiniCssExtractPlugin.loader,
     require.resolve('css-loader'),
@@ -29,3 +38,13 @@ module.exports = {
     require.resolve('@s-ui/sass-loader')
   ])
 }
+
+const plainCssRule = plainCssExclude
+  ? {
+      test: /\.css$/,
+      include: plainCssExclude,
+      use: [MiniCssExtractPlugin.loader, require.resolve('css-loader')]
+    }
+  : null
+
+module.exports = plainCssRule ? [sassRule, plainCssRule] : sassRule

package/shared/plain-css-split-chunks.js

@@ -0,0 +1,25 @@
+const {config} = require('./index')
+
+const plainCssPackages = config.plainCssPackages || []
+
+exports.plainCssSplitChunks = () => {
+  if (!plainCssPackages.length) return {}
+
+  const testRegex = new RegExp(
+    `[\\\\/]node_modules[\\\\/](${plainCssPackages.map(p => p.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|')})[\\\\/]`
+  )
+
+  return {
+    splitChunks: {
+      cacheGroups: {
+        plainCssInEntry: {
+          type: 'css/mini-extract',
+          test: testRegex,
+          name: 'AppStyles',
+          chunks: 'all',
+          enforce: true
+        }
+      }
+    }
+  }
+}

package/webpack.config.client.dev.js

@@ -9,9 +9,10 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const HtmlWebpackInjectAttributesPlugin = require('html-webpack-inject-attributes-plugin')
 const {withHydrationOverlayWebpack} = require('@builder.io/react-hydration-overlay/webpack')
 
-const {envVars, MAIN_ENTRY_POINT, config, cleanList, when, isTailwindEnabled} = require('./shared/index.js')
+const {envVars, MAIN_ENTRY_POINT, config, cleanList, when} = require('./shared/index.js')
 const definePlugin = require('./shared/define.js')
 const manifestLoaderRules = require('./shared/module-rules-manifest-loader.js')
+const sassRules = require('./shared/module-rules-sass.js')
 const createSVGSpritemapPlugin = require('./shared/svg-spritemap')
 const {aliasFromConfig, defaultAlias} = require('./shared/resolve-alias.js')
 const {supportLegacyBrowsers, cacheDirectory} = require('./shared/config.js')
@@ -96,33 +97,7 @@ const webpackConfig = {
   module: {
     rules: cleanList([
       createCompilerRules({supportLegacyBrowsers, isDevelopment: true}),
-      {
-        test: /(\.css|\.scss)$/,
-        use: cleanList([
-          MiniCssExtractPlugin.loader,
-          require.resolve('css-loader'),
-          when(config['externals-manifest'], () => ({
-            loader: 'externals-manifest-loader',
-            options: {
-              manifestURL: config['externals-manifest']
-            }
-          })),
-          {
-            loader: require.resolve('postcss-loader'),
-            options: {
-              postcssOptions: {
-                plugins: [
-                  ...(isTailwindEnabled() ? [require('tailwindcss')()] : []),
-                  require('autoprefixer')({
-                    overrideBrowserslist: config.targets
-                  })
-                ]
-              }
-            }
-          },
-          require.resolve('@s-ui/sass-loader')
-        ])
-      },
+      ...(Array.isArray(sassRules) ? sassRules : [sassRules]),
       when(config['externals-manifest'], () => manifestLoaderRules(config['externals-manifest']))
     ])
   },

package/webpack.config.dev.js

@@ -14,6 +14,13 @@ const {supportLegacyBrowsers, cacheDirectory} = require('./shared/config.js')
 const {resolveLoader} = require('./shared/resolve-loader.js')
 const createCompilerRules = require('./shared/module-rules-compiler.js')
 
+const plainCssPackages = config.plainCssPackages || []
+const plainCssExclude = plainCssPackages.length
+  ? new RegExp(
+      `node_modules[\\\\/](${plainCssPackages.map(p => p.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|')})[\\\\/]`
+    )
+  : null
+
 const outputPath = path.join(process.cwd(), 'dist')
 
 const {CI = false} = process.env
@@ -90,6 +97,7 @@ const webpackConfig = {
       createCompilerRules({supportLegacyBrowsers, isDevelopment: true}),
       {
         test: /(\.css|\.scss)$/,
+        ...(plainCssExclude ? {exclude: plainCssExclude} : {}),
         use: cleanList([
           require.resolve('style-loader'),
           when(config['externals-manifest'], () => ({
@@ -115,6 +123,15 @@ const webpackConfig = {
           require.resolve('@s-ui/sass-loader')
         ])
       },
+      ...(plainCssExclude
+        ? [
+            {
+              test: /\.css$/,
+              include: plainCssExclude,
+              use: [require.resolve('style-loader'), require.resolve('css-loader')]
+            }
+          ]
+        : []),
       when(config['externals-manifest'], () => manifestLoaderRules(config['externals-manifest']))
     ])
   },

package/webpack.config.lib.js

@@ -60,7 +60,7 @@ module.exports = ({chunkCss} = {}) => {
       definePlugin()
     ]),
     module: {
-      rules: [createCompilerRules({supportLegacyBrowsers}), sassRules]
+      rules: [createCompilerRules({supportLegacyBrowsers}), ...(Array.isArray(sassRules) ? sassRules : [sassRules])]
     }
   }
 }

package/webpack.config.prod.js

@@ -10,6 +10,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const InlineChunkHtmlPlugin = require('./shared/inline-chunk-html-plugin.js')
 
 const {when, cleanList, envVars, MAIN_ENTRY_POINT, config} = require('./shared/index.js')
+const {plainCssSplitChunks} = require('./shared/plain-css-split-chunks.js')
 const {aliasFromConfig} = require('./shared/resolve-alias.js')
 const {extractComments, sourceMap, supportLegacyBrowsers, cacheDirectory} = require('./shared/config.js')
 const {resolveLoader} = require('./shared/resolve-loader.js')
@@ -65,7 +66,8 @@ const webpackConfig = {
     checkWasmTypes: false,
     minimize: true,
     minimizer: [minifyJs({extractComments, sourceMap}), minifyCss()].filter(Boolean),
-    runtimeChunk: true
+    runtimeChunk: true,
+    ...plainCssSplitChunks()
   },
   cache: {
     type: 'filesystem',
@@ -106,7 +108,7 @@ const webpackConfig = {
   module: {
     rules: cleanList([
       createCompilerRules({supportLegacyBrowsers}),
-      sassRules,
+      ...(Array.isArray(sassRules) ? sassRules : [sassRules]),
       when(config['externals-manifest'], () => manifestLoaderRules(config['externals-manifest']))
     ])
   },