Merge pull request #187 from studiometa/feature/tailwindcss-v4

[Feature] Tailwind CSS v4 & updates

Author: titouanmathis

CHANGELOG.md

@@ -6,6 +6,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+- **@studiometa/webpack-config:** upgrade dependencies ([#187](https://github.com/studiometa/webpack-config/pull/187), [5dc51d4](https://github.com/studiometa/webpack-config/commit/5dc51d4))
+- **@studiometa/webpack-config-preset-prototyping:** upgrade dependencies ([#187](https://github.com/studiometa/webpack-config/pull/187), [37bbf3d](https://github.com/studiometa/webpack-config/commit/37bbf3d))
+- **@studiometa/webpack-config-preset-tailwindcss-4:** upgrade tailwindcss to ^4.0.0 ([#187](https://github.com/studiometa/webpack-config/pull/187), [72c600c](https://github.com/studiometa/webpack-config/commit/72c600c))
+
+### Removed
+
+- **@studiometa/webpack-config:** delete obsolete tailwind-config-viewer ([#187](https://github.com/studiometa/webpack-config/pull/187), [abff137](https://github.com/studiometa/webpack-config/commit/abff137))
+
 ## [v6.3.2](https://github.com/studiometa/webpack-config/compare/6.3.1..6.3.2) (2024-12-10)
 
 ### Changed

package-lock.json

@@ -15,9 +15,9 @@
     "postversion": "node scripts/update-composer-version.mjs"
   },
   "devDependencies": {
-    "@studiometa/eslint-config": "4.1.0",
+    "@studiometa/eslint-config": "4.2.0",
     "@studiometa/prettier-config": "4.1.0",
-    "eslint": "9.16.0",
+    "eslint": "9.18.0",
     "prettier": "3.4.2"
   }
 }

package.json

@@ -15,9 +15,9 @@
     "remark": "15.0.1"
   },
   "dependencies": {
-    "@studiometa/js-toolkit": "^2.12.1",
+    "@studiometa/js-toolkit": "^3.0.0",
     "@studiometa/ui": "^0.2.54",
-    "tailwindcss": "^4.0.0-beta.6",
+    "tailwindcss": "^4.0.0",
     "vue": "^3.5.13"
   },
   "imports": {

packages/demo/package.json

@@ -36,7 +36,7 @@
     "change-case": "5.4.4",
     "collect.js": "^4.36.1",
     "filemanager-webpack-plugin": "^8.0.0",
-    "glob": "^11.0.0",
+    "glob": "^11.0.1",
     "html-escaper": "^3.0.3",
     "html-webpack-harddisk-plugin": "^2.0.0",
     "html-webpack-plugin": "^5.6.3",

packages/preset-prototyping/package.json

@@ -27,9 +27,9 @@
   },
   "homepage": "https://github.com/studiometa/webpack-config#readme",
   "peerDependencies": {
-    "tailwindcss": "^4.0.0-beta.6"
+    "tailwindcss": "^4.0.0"
   },
   "dependencies": {
-    "@tailwindcss/postcss": "^4.0.0-beta.6"
+    "@tailwindcss/postcss": "^4.0.0"
   }
 }

packages/preset-tailwindcss-4/package.json

@@ -49,27 +49,26 @@
     "autoprefixer": "^10.4.20",
     "browser-sync": "^3.0.3",
     "cac": "^6.7.14",
-    "chalk": "^5.3.0",
+    "chalk": "^5.4.1",
     "common-dir": "^3.0.1",
     "css-minimizer-webpack-plugin": "^7.0.0",
     "dotenv": "^16.4.7",
     "dotenv-expand": "^12.0.1",
-    "esbuild": "^0.24.0",
+    "esbuild": "^0.24.2",
     "esbuild-loader": "^4.2.2",
     "find-up": "^7.0.0",
     "get-port": "^7.1.0",
-    "glob": "^11.0.0",
+    "glob": "^11.0.1",
     "hot-accept-webpack-plugin": "^4.0.2",
     "js-yaml-loader": "^1.2.2",
     "lodash.merge": "^4.6.2",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.1",
     "postcss-loader": "^8.1.1",
-    "postcss-preset-env": "^10.1.1",
+    "postcss-preset-env": "^10.1.3",
     "resolve-url-loader": "^5.0.0",
-    "sass-embedded": "^1.82.0",
+    "sass-embedded": "^1.83.4",
     "sass-loader": "^16.0.4",
-    "tailwind-config-viewer": "^2.0.4",
-    "terser-webpack-plugin": "^5.3.10",
+    "terser-webpack-plugin": "^5.3.11",
     "webpack": "^5.97.1",
     "webpack-assets-manifest": "^5.2.1",
     "webpack-bundle-analyzer": "^4.10.2",

packages/webpack-config/package.json

@@ -1,8 +1,5 @@
 import merge from 'lodash.merge';
-import { findUpSync } from 'find-up';
-import chalk from 'chalk';
 import { createRequire } from 'module';
-import { withTrailingSlash, withoutTrailingSlash, withLeadingSlash } from '../utils/index.js';
 
 const require = createRequire(import.meta.url);
 
@@ -14,7 +11,7 @@ const require = createRequire(import.meta.url);
 export default function tailwindcss(options = {}) {
   return {
     name: 'tailwindcss',
-    async handler(config, { extendWebpack, extendBrowsersync, isDev }) {
+    async handler(config, { extendWebpack, isDev }) {
       const configPath = config.PATH;
 
       const opts = merge(
@@ -25,30 +22,6 @@ export default function tailwindcss(options = {}) {
         options,
       );
 
-      if (isDev) {
-        const { default: createServer } = await import('tailwind-config-viewer/server/index.js');
-        await extendBrowsersync(config, async (bsConfig) => {
-          const tailwindConfigViewerServer = createServer({
-            tailwindConfigProvider: () =>
-              require(findUpSync(['tailwind.config.js', 'tailwind.config.cjs'])),
-          }).asMiddleware();
-
-          bsConfig.middleware = bsConfig.middleware || [];
-          bsConfig.middleware.push({
-            route: withLeadingSlash(withoutTrailingSlash(opts.configViewerPath)),
-            handle: tailwindConfigViewerServer,
-          });
-
-          bsConfig.infos = bsConfig.infos || [];
-          bsConfig.infos.push(
-            (url) =>
-              `Tailwind Viewer runnning at ${chalk.blue(
-                withTrailingSlash(url + opts.configViewerPath),
-              )}`,
-          );
-        });
-      }
-
       await extendWebpack(config, async (webpackConfig) => {
         const tailwind = opts.path
           ? opts.path