diff --git a/README.md b/README.md index b123822..9e9f50d 100644 --- a/README.md +++ b/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 diff --git a/composer.json b/composer.json index 1e5e718..d4288b0 100644 --- a/composer.json +++ b/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", diff --git a/package.json b/package.json index f6e5721..e591118 100644 --- a/package.json +++ b/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", diff --git a/whisk/config/emulsify-core/storybook/main.js b/whisk/config/emulsify-core/storybook/main.js index f608f7e..23eb302 100644 --- a/whisk/config/emulsify-core/storybook/main.js +++ b/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: { diff --git a/whisk/config/emulsify-core/webpack/example.babel.config.cjs b/whisk/config/emulsify-core/vite/example.babel.config.cjs similarity index 100% rename from whisk/config/emulsify-core/webpack/example.babel.config.cjs rename to whisk/config/emulsify-core/vite/example.babel.config.cjs diff --git a/whisk/config/emulsify-core/vite/example.plugins.js b/whisk/config/emulsify-core/vite/example.plugins.js new file mode 100644 index 0000000..1ab05ab --- /dev/null +++ b/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', + }, + }; +} diff --git a/whisk/config/emulsify-core/webpack/example.postcss.config.cjs b/whisk/config/emulsify-core/vite/example.postcss.config.cjs similarity index 100% rename from whisk/config/emulsify-core/webpack/example.postcss.config.cjs rename to whisk/config/emulsify-core/vite/example.postcss.config.cjs diff --git a/whisk/package.json b/whisk/package.json index 2eae18a..6ed1290 100644 --- a/whisk/package.json +++ b/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" } }