{"id":28555886,"url":"https://github.com/roots/vite-plugin","last_synced_at":"2025-08-29T09:15:17.728Z","repository":{"id":278950006,"uuid":"936436778","full_name":"roots/vite-plugin","owner":"roots","description":"A Vite plugin for working with WordPress","archived":false,"fork":false,"pushed_at":"2025-06-16T11:58:12.000Z","size":55,"stargazers_count":36,"open_issues_count":2,"forks_count":4,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-06-29T20:41:51.341Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/roots.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"roots"}},"created_at":"2025-02-21T04:46:51.000Z","updated_at":"2025-06-23T14:11:57.000Z","dependencies_parsed_at":"2025-02-22T19:10:02.500Z","dependency_job_id":"f5fd9623-e7d1-411d-a216-911743c5b71d","html_url":"https://github.com/roots/vite-plugin","commit_stats":null,"previous_names":["roots/vite-plugin"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/roots/vite-plugin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roots%2Fvite-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roots%2Fvite-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roots%2Fvite-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roots%2Fvite-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/roots","download_url":"https://codeload.github.com/roots/vite-plugin/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roots%2Fvite-plugin/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263696079,"owners_count":23497488,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-10T06:08:08.416Z","updated_at":"2025-07-05T06:30:54.937Z","avatar_url":"https://github.com/roots.png","language":"TypeScript","funding_links":["https://github.com/sponsors/roots"],"categories":[],"sub_categories":[],"readme":"# Vite Plugin for WordPress\n\n\u003ca href=\"https://github.com/roots/vite-plugin/blob/main/LICENSE.md\"\u003e\u003cimg alt=\"MIT License\" src=\"https://img.shields.io/github/license/roots/vite-plugin?color=%23525ddc\u0026style=flat-square\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/@roots/vite-plugin\"\u003e\u003cimg alt=\"npm version\" src=\"https://img.shields.io/npm/v/@roots/vite-plugin.svg?color=%23525ddc\u0026style=flat-square\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/roots/vite-plugin/actions/workflows/tests.yml\"\u003e\u003cimg alt=\"Build Status\" src=\"https://img.shields.io/github/actions/workflow/status/roots/vite-plugin/tests.yml?color=%23525ddc\u0026style=flat-square\"\u003e\u003c/a\u003e\n\u003ca href=\"https://bsky.app/profile/roots.dev\"\u003e\u003cimg alt=\"Follow roots.dev on Bluesky\" src=\"https://img.shields.io/badge/follow-@roots.dev-0085ff?logo=bluesky\u0026style=flat-square\"\u003e\u003c/a\u003e\n\nHere lives a Vite plugin for WordPress development.\n\n## Features\n\n- 🔄 Transforms `@wordpress/*` imports into global `wp.*` references\n- 📦 Generates dependency manifest for WordPress enqueuing\n- 🎨 Generates theme.json from Tailwind CSS configuration\n- 🔥 Hot Module Replacement (HMR) support for the WordPress editor\n\n## Installation\n\n```bash\nnpm install @roots/vite-plugin --save-dev\n```\n\n## Usage\n\nStart by adding the base plugin to your Vite config:\n\n```js\n// vite.config.js\nimport { defineConfig } from 'vite';\nimport { wordpressPlugin } from '@roots/vite-plugin';\n\nexport default defineConfig({\n  plugins: [wordpressPlugin()],\n});\n```\n\nOnce you've added the plugin, WordPress dependencies referenced in your code will be transformed into global `wp.*` references.\n\nWhen WordPress dependencies are transformed, a manifest containing the required dependencies will be generated called `editor.deps.json`.\n\n### Editor HMR Support\n\nThe plugin automatically enables CSS Hot Module Replacement (HMR) for the WordPress editor.\n\n\u003e [!NOTE]\n\u003e JavaScript HMR is not supported at this time. JS changes will trigger a full page reload.\n\nYou can customize the HMR behavior in your Vite config:\n\n```js\n// vite.config.js\nimport { defineConfig } from 'vite';\nimport { wordpressPlugin } from '@roots/vite-plugin';\n\nexport default defineConfig({\n  plugins: [\n    wordpressPlugin({\n      hmr: {\n        // Enable/disable HMR (default: true)\n        enabled: true,\n\n        // Pattern to match editor entry points (default: /editor/)\n        editorPattern: /editor/,\n\n        // Name of the editor iframe element (default: 'editor-canvas')\n        iframeName: 'editor-canvas',\n      },\n    }),\n  ],\n});\n```\n\n### Theme.json Generation\n\nWhen using this plugin for theme development, you have the option of generating a `theme.json` file from your Tailwind CSS configuration.\n\nTo enable this feature, add the `wordpressThemeJson` plugin to your Vite config:\n\n```js\n// vite.config.js\nimport { defineConfig } from 'vite';\nimport { wordpressThemeJson } from '@roots/vite-plugin';\n\nexport default defineConfig({\n  plugins: [\n    wordpressThemeJson({\n      // Optional: Configure shade labels\n      shadeLabels: {\n        100: 'Lightest',\n        900: 'Darkest',\n      },\n\n      // Optional: Configure font family labels\n      fontLabels: {\n        sans: 'Sans Serif',\n        mono: 'Monospace',\n        inter: 'Inter Font',\n      },\n\n      // Optional: Configure font size labels\n      fontSizeLabels: {\n        sm: 'Small',\n        base: 'Default',\n        lg: 'Large',\n      },\n\n      // Optional: Disable specific transformations\n      disableTailwindColors: false,\n      disableTailwindFonts: false,\n      disableTailwindFontSizes: false,\n\n      // Optional: Configure paths\n      baseThemeJsonPath: './theme.json',\n      outputPath: 'assets/theme.json',\n      cssFile: 'app.css',\n\n      // Optional: Legacy Tailwind v3 config path\n      tailwindConfig: './tailwind.config.js',\n    }),\n  ],\n});\n```\n\nBy default, Tailwind v4 will only [generate CSS variables](https://tailwindcss.com/docs/theme#generating-all-css-variables) that are discovered in your source files.\n\nTo generate the full default Tailwind color palette into your `theme.json`, you can use the `static` theme option when importing Tailwind:\n\n```css\n@import 'tailwindcss' theme(static);\n```\n\nThe same applies for customized colors in the `@theme` directive. To ensure your colors get generated, you can use another form of the `static` theme option:\n\n```css\n@theme static {\n  --color-white: #fff;\n  --color-purple: #3f3cbb;\n  --color-midnight: #121063;\n  --color-tahiti: #3ab7bf;\n  --color-bermuda: #78dcca;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froots%2Fvite-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Froots%2Fvite-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froots%2Fvite-plugin/lists"}