Release: Emulsify 7.x

README.md

@@ -4,9 +4,9 @@
 
 ## Emulsify is an open-source toolset for creating and implementing design systems on your website
 
-### Storybook development, Webpack build, and Drupal 11 theme
+### Storybook development, Vite build, and Drupal 11 theme
 
-**Emulsify Drupal** provides a [Storybook](https://storybook.js.org/) component library, a [Webpack](https://webpack.js.org/) development environment, and a Drupal 11 starter kit theme.
+**Emulsify Drupal** provides a [Storybook](https://storybook.js.org/) component library, a [Vite](https://vite.dev/) development environment, and a Drupal 11 starter kit theme.
 
 ## Documentation
 

composer.json

@@ -1,6 +1,6 @@
 {
     "name": "emulsify-ds/emulsify-drupal",
-    "description": "The official Drupal base theme for Emulsify that generates custom themes with Storybook development + Webpack Build",
+    "description": "The official Drupal base theme for Emulsify that generates custom themes with Storybook development + Vite Build",
     "type": "drupal-theme",
     "homepage": "http://emulsify.info",
     "license": "GPL-2.0-only",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "emulsify-drupal",
-  "version": "6.0.0",
-  "description": "Storybook development + Webpack Build + Drupal 10 theme",
+  "version": "7.0.0",
+  "description": "Storybook development + Vite Build + Drupal 11 theme",
   "keywords": [
     "component library",
     "design system",

whisk/config/emulsify-core/storybook/main.js

@@ -12,14 +12,13 @@ const configOverrides = {};
 //     '../../../@storybook/addon-a11y',
 //     '../../../@storybook/addon-links',
 //     '../../../@storybook/addon-essentials',
-//     '../../../@storybook/addon-themes',
-//     '../../../@storybook/addon-styling-webpack'
+//     '../../../@storybook/addon-themes'
 //   ],
 //   core: {
-//     builder: 'webpack5',
+//     builder: 'vite',
 //   },
 //   framework: {
-//     name: '@storybook/html-webpack5',
+//     name: '@storybook/react-vite',
 //     options: {},
 //   },
 //   docs: {

whisk/config/emulsify-core/vite/example.plugins.js

@@ -0,0 +1,32 @@
+// Change the name of this file to plugins.js
+// for Emulsify Core to recognize and fully override
+// its provided configuration.
+
+/**
+ * Export a function that returns extra Vite plugins.
+ * You can import any Vite plugin here (e.g., vite-plugin-inspect).
+ */
+// import Inspect from 'vite-plugin-inspect';
+
+export default function projectPlugins(ctx) {
+  // const { env } = ctx; // env is what resolveEnvironment() returned
+  return [
+    // Inspect(), // uncomment if you want Vite Inspector
+  ];
+}
+
+/**
+ * Option B: Patch the final Vite config.
+ * Great for enabling Tailwind by setting a PostCSS config path.
+ *
+ * You can also inject other config tweaks here (aliases, define, etc.)
+ */
+export function extendConfig(base, { env }) {
+  return {
+    css: {
+      // Point PostCSS to the project's Tailwind config if present:
+      // (You can also keep a root-level postcss.config.*; this overrides it.)
+      postcss: './.config/emulsify-core/vite/postcss.config.cjs',
+    },
+  };
+}

whisk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "whisk",
   "version": "1.0.0",
-  "description": "Storybook development + Webpack Build",
+  "description": "Storybook development + Vite Build",
   "keywords": [
     "component library",
     "design system",
@@ -18,10 +18,9 @@
   "type": "module",
   "scripts": {
     "a11y": "npm run storybook-build && node_modules/@emulsify/core/scripts/a11y.js -r",
-    "build": "npm run ensure-dist && webpack --config node_modules/@emulsify/core/config/webpack/webpack.prod.js",
-    "build-dev": "npm run ensure-dist && webpack --config node_modules/@emulsify/core/config/webpack/webpack.dev.js",
+    "build": "npm run ensure-dist && vite --config node_modules/@emulsify/core/config/vite/vite.config.js",
     "coverage": "npm run test && open-cli .coverage/lcov-report/index.html",
-    "develop": "npm run ensure-dist && concurrently --raw --no-shell npm:webpack npm:storybook",
+    "develop": "npm run ensure-dist && concurrently --raw --no-shell npm:vite npm:storybook",
     "ensure-dist": "mkdir -p dist",
     "format": "npm run lint-fix; npm run prettier-fix",
     "lint": "npm run lint-js; npm run lint-styles",
@@ -38,9 +37,9 @@
     "tokens:build": "npm run tokens:transform && npm run style-dictionary:build",
     "tokens:transform": "token-transformer ./src/tokens/figma.tokens.json ./src/tokens/transformed.tokens.json",
     "twatch": "jest --no-coverage --watch --verbose",
-    "webpack": "webpack --watch --config node_modules/@emulsify/core/config/webpack/webpack.dev.js"
+    "vite": "vite build --watch --config node_modules/@emulsify/core/config/vite/vite.config.js",
   },
   "dependencies": {
-    "@emulsify/core": "^3.3.1"
+    "@emulsify/core": "^4.0.0"
   }
 }