index.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420
  1. "use strict";
  2. var __create = Object.create;
  3. var __defProp = Object.defineProperty;
  4. var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
  5. var __getOwnPropNames = Object.getOwnPropertyNames;
  6. var __getProtoOf = Object.getPrototypeOf;
  7. var __hasOwnProp = Object.prototype.hasOwnProperty;
  8. var __export = (target, all) => {
  9. for (var name in all)
  10. __defProp(target, name, { get: all[name], enumerable: true });
  11. };
  12. var __copyProps = (to, from, except, desc) => {
  13. if (from && typeof from === "object" || typeof from === "function") {
  14. for (let key of __getOwnPropNames(from))
  15. if (!__hasOwnProp.call(to, key) && key !== except)
  16. __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  17. }
  18. return to;
  19. };
  20. var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
  21. var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  22. isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  23. mod
  24. ));
  25. var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
  26. // src/index.ts
  27. var src_exports = {};
  28. __export(src_exports, {
  29. default: () => src_default
  30. });
  31. module.exports = __toCommonJS(src_exports);
  32. var import_path2 = require("path");
  33. var import_debug2 = __toESM(require("debug"));
  34. var import_plugin_utils = require("@windicss/plugin-utils");
  35. // ../shared/virtual-module.ts
  36. var import_fs = require("fs");
  37. var MODULE_IDS = [/^virtual:windi(.*?)\.css/, /^windi(.*?)\.css/];
  38. var MODULE_ID_VIRTUAL_PREFIX = "/@windicss/windi";
  39. var MODULE_ID_VIRTUAL = /\/\@windicss\/windi-?(.*?)\.css/;
  40. var MODULE_ID_VIRTUAL_MODULES = [
  41. `${MODULE_ID_VIRTUAL_PREFIX}.css`,
  42. `${MODULE_ID_VIRTUAL_PREFIX}-base.css`,
  43. `${MODULE_ID_VIRTUAL_PREFIX}-utilities.css`,
  44. `${MODULE_ID_VIRTUAL_PREFIX}-components.css`
  45. ];
  46. function createVirtualModuleLoader(ctx) {
  47. return {
  48. resolveId(id) {
  49. if (id.startsWith(MODULE_ID_VIRTUAL_PREFIX))
  50. return id;
  51. for (const idRegex of MODULE_IDS) {
  52. const match = id.match(idRegex);
  53. if (match)
  54. return `${MODULE_ID_VIRTUAL_PREFIX}${match[1]}.css`;
  55. }
  56. return null;
  57. },
  58. async load(id) {
  59. const match = id.match(MODULE_ID_VIRTUAL);
  60. if (match) {
  61. await ctx.utils.scan();
  62. await ctx.utils.waitLocks();
  63. ctx.utils.files.map((id2) => this.addWatchFile(id2));
  64. const layer = match[1] || void 0;
  65. const css = await ctx.utils.generateCSS(layer);
  66. return css;
  67. }
  68. },
  69. async watchChange(id, change) {
  70. if (change.event === "delete" || !(0, import_fs.existsSync)(id))
  71. return;
  72. if (!ctx.utils.isDetectTarget(id))
  73. return;
  74. ctx.utils.lock(async () => {
  75. const content = await import_fs.promises.readFile(id, "utf-8");
  76. await ctx.utils.extractFile(content, id, true);
  77. });
  78. }
  79. };
  80. }
  81. // src/devtools.ts
  82. var import_fs2 = __toESM(require("fs"));
  83. var import_path = require("path");
  84. var import_url = require("url");
  85. var import_debug = __toESM(require("debug"));
  86. // src/constants.ts
  87. var NAME = "vite-plugin-windicss";
  88. // src/modules.ts
  89. function getChangedModuleNames(utils) {
  90. if (utils.hasPending)
  91. utils.buildPendingStyles();
  92. const moduleNames = [
  93. `${MODULE_ID_VIRTUAL_PREFIX}.css`
  94. ];
  95. Object.entries(utils.layersMeta).forEach(([name, meta]) => {
  96. if (meta.cssCache == null)
  97. moduleNames.push(`${MODULE_ID_VIRTUAL_PREFIX}-${name}.css`);
  98. });
  99. return moduleNames;
  100. }
  101. function getCssModules(server, names = MODULE_ID_VIRTUAL_MODULES) {
  102. return names.map((name) => server.moduleGraph.getModuleById(name)).filter(Boolean);
  103. }
  104. function invalidateCssModules(server, modules = getCssModules(server)) {
  105. return modules.forEach((m) => server.moduleGraph.invalidateModule(m));
  106. }
  107. function sendHmrReload(server, modules = getCssModules(server)) {
  108. const timestamp = +Date.now();
  109. server.ws.send({
  110. type: "update",
  111. updates: modules.map((m) => ({
  112. acceptedPath: m.id || m.file,
  113. path: m.id || m.file,
  114. timestamp,
  115. type: "js-update"
  116. }))
  117. });
  118. }
  119. function reloadChangedCssModules(server, utils) {
  120. const cssModules = getCssModules(server, getChangedModuleNames(utils));
  121. invalidateCssModules(server, cssModules);
  122. sendHmrReload(server, cssModules);
  123. return cssModules;
  124. }
  125. // src/devtools.ts
  126. var import_meta = {};
  127. var _dirname = typeof __dirname !== "undefined" ? __dirname : (0, import_path.dirname)((0, import_url.fileURLToPath)(import_meta.url));
  128. var debug = {
  129. devtools: (0, import_debug.default)(`${NAME}:devtools`)
  130. };
  131. var DEVTOOLS_MODULE_ID = "virtual:windi-devtools";
  132. var MOCK_CLASSES_MODULE_ID = "virtual:windi-mock-classes";
  133. var MOCK_CLASSES_PATH = "/@windicss/mock-classes";
  134. var DEVTOOLS_PATH = "/@windicss/devtools";
  135. var MODULES_MAP = {
  136. [DEVTOOLS_MODULE_ID]: DEVTOOLS_PATH,
  137. [MOCK_CLASSES_MODULE_ID]: MOCK_CLASSES_PATH
  138. };
  139. var POST_PATH = "/@windicss-devtools-update";
  140. function getBodyJson(req) {
  141. return new Promise((resolve3, reject) => {
  142. let body = "";
  143. req.on("data", (chunk) => body += chunk);
  144. req.on("error", reject);
  145. req.on("end", () => {
  146. try {
  147. resolve3(JSON.parse(body) || {});
  148. } catch (e) {
  149. reject(e);
  150. }
  151. });
  152. });
  153. }
  154. function createDevtoolsPlugin(ctx) {
  155. let config;
  156. let server;
  157. let clientCode = "";
  158. function updateCSS() {
  159. if (!server)
  160. return;
  161. const names = getChangedModuleNames(ctx.utils);
  162. const modules = getCssModules(server, names);
  163. invalidateCssModules(server, modules);
  164. sendHmrReload(server, modules);
  165. }
  166. function toClass(name) {
  167. return `.${ctx.utils.processor.e(name)}{}`;
  168. }
  169. function getMockClassesInjector() {
  170. const completions = ctx.utils.getCompletions();
  171. const comment = "/* Windi CSS mock class names for devtools auto-completion */\n";
  172. const css = [
  173. ...completions.color,
  174. ...completions.static
  175. ].map(toClass).join("");
  176. return `
  177. const style = document.createElement('style')
  178. style.setAttribute('type', 'text/css')
  179. style.innerHTML = ${JSON.stringify(comment + css)}
  180. document.head.prepend(style)
  181. `;
  182. }
  183. return [
  184. {
  185. name: `${NAME}:devtools`,
  186. configResolved(_config) {
  187. config = _config;
  188. },
  189. configureServer(_server) {
  190. server = _server;
  191. server.middlewares.use(async (req, res, next) => {
  192. if (req.url !== POST_PATH)
  193. return next();
  194. try {
  195. const data = await getBodyJson(req);
  196. const type = data?.type;
  197. debug.devtools(data);
  198. let changed = false;
  199. switch (type) {
  200. case "add-classes":
  201. changed = ctx.utils.addClasses(data.data || []);
  202. }
  203. if (changed)
  204. updateCSS();
  205. res.statusCode = 200;
  206. } catch (e) {
  207. console.error(e);
  208. res.statusCode = 500;
  209. }
  210. res.end();
  211. });
  212. },
  213. resolveId(id) {
  214. return MODULES_MAP[id];
  215. },
  216. async load(id, options) {
  217. if (options?.ssr && [DEVTOOLS_PATH, MOCK_CLASSES_PATH].includes(id))
  218. return "";
  219. if (id === DEVTOOLS_PATH) {
  220. if (!clientCode) {
  221. clientCode = [
  222. await import_fs2.default.promises.readFile((0, import_path.resolve)(_dirname, "client.mjs"), "utf-8"),
  223. `import('${MOCK_CLASSES_MODULE_ID}')`
  224. ].join("\n").replace("__POST_PATH__", (config.server?.origin ?? "") + POST_PATH);
  225. }
  226. return config.command === "build" ? "" : clientCode;
  227. } else if (id === MOCK_CLASSES_PATH) {
  228. return getMockClassesInjector();
  229. }
  230. }
  231. }
  232. ];
  233. }
  234. // src/index.ts
  235. __reExport(src_exports, require("@windicss/plugin-utils"), module.exports);
  236. var debug2 = {
  237. hmr: (0, import_debug2.default)(`${NAME}:hmr`),
  238. css: (0, import_debug2.default)(`${NAME}:transform:css`),
  239. group: (0, import_debug2.default)(`${NAME}:transform:group`),
  240. alias: (0, import_debug2.default)(`${NAME}:transform:alias`),
  241. memory: (0, import_debug2.default)(`${NAME}:memory`)
  242. };
  243. function VitePluginWindicss(userOptions = {}, utilsOptions = {}) {
  244. let utils;
  245. let server;
  246. let viteConfig;
  247. const plugins = [];
  248. plugins.push({
  249. name: `${NAME}:alias`,
  250. enforce: "pre",
  251. configResolved(_config) {
  252. viteConfig = _config;
  253. },
  254. async transform(code, id) {
  255. await utils.ensureInit();
  256. if (!utils.isDetectTarget(id))
  257. return;
  258. debug2.alias(id);
  259. return utils.transformAlias(code, !!viteConfig.build.sourcemap);
  260. }
  261. });
  262. if (userOptions.transformGroups !== false) {
  263. plugins.push({
  264. name: `${NAME}:groups`,
  265. enforce: "pre",
  266. async transform(code, id) {
  267. await utils.ensureInit();
  268. if (!utils.isDetectTarget(id))
  269. return;
  270. debug2.group(id);
  271. return utils.transformGroups(code, !!viteConfig.build.sourcemap);
  272. }
  273. });
  274. }
  275. plugins.push({
  276. name: NAME,
  277. get api() {
  278. return utils;
  279. }
  280. });
  281. plugins.push({
  282. name: `${NAME}:entry`,
  283. enforce: "post",
  284. configureServer(_server) {
  285. server = _server;
  286. },
  287. async configResolved(_config) {
  288. utils = utilsOptions.utils ?? (0, import_plugin_utils.createUtils)(userOptions, {
  289. name: NAME,
  290. root: _config.root,
  291. onConfigurationError(e) {
  292. if (_config.command === "build") {
  293. throw e;
  294. } else {
  295. console.error(`[${NAME}] Error on loading configurations`);
  296. console.error(e);
  297. }
  298. },
  299. ...utilsOptions
  300. });
  301. await utils.ensureInit();
  302. },
  303. ...createVirtualModuleLoader({ get utils() {
  304. return utils;
  305. } })
  306. });
  307. let _cssReloadTask;
  308. function reloadCssModules(server2) {
  309. clearTimeout(_cssReloadTask);
  310. _cssReloadTask = setTimeout(() => {
  311. reloadChangedCssModules(server2, utils);
  312. }, 1);
  313. }
  314. plugins.push({
  315. name: `${NAME}:hmr`,
  316. apply: "serve",
  317. enforce: "pre",
  318. async configureServer(_server) {
  319. server = _server;
  320. await utils.ensureInit();
  321. if (utils.configFilePath)
  322. server.watcher.add(utils.configFilePath);
  323. const supportsGlobs = server.config.server.watch?.disableGlobbing === false;
  324. server.watcher.add(supportsGlobs ? utils.globs : await utils.getFiles());
  325. },
  326. async handleHotUpdate({ server: server2, file, read }) {
  327. if ((0, import_path2.resolve)(file) === utils.configFilePath) {
  328. debug2.hmr(`config file changed: ${file}`);
  329. await utils.init();
  330. setTimeout(() => {
  331. (0, import_debug2.log)("configure file changed, reloading");
  332. server2.ws.send({ type: "full-reload" });
  333. }, 0);
  334. return getCssModules(server2);
  335. }
  336. if (!utils.isDetectTarget(file))
  337. return;
  338. utils.extractFile(await read(), file, true).then((changed) => {
  339. if (changed) {
  340. debug2.hmr(`refreshed by ${file}`);
  341. reloadCssModules(server2);
  342. }
  343. });
  344. }
  345. });
  346. const { transformCSS: transformCSSOptions = true } = userOptions;
  347. const transformCSS = (code, id) => utils.transformCSS(code, id, {
  348. onLayerUpdated() {
  349. if (server)
  350. reloadCssModules(server);
  351. }
  352. });
  353. if (transformCSSOptions === true) {
  354. plugins.push({
  355. name: `${NAME}:css`,
  356. async transform(code, id) {
  357. await utils.ensureInit();
  358. if (!utils.isCssTransformTarget(id) || id.startsWith(MODULE_ID_VIRTUAL_PREFIX))
  359. return;
  360. debug2.css(id);
  361. code = transformCSS(code, id);
  362. if (viteConfig.build.sourcemap) {
  363. return {
  364. code: transformCSS(code, id),
  365. map: { mappings: "" }
  366. };
  367. } else {
  368. return code;
  369. }
  370. }
  371. });
  372. } else if (typeof transformCSSOptions === "string") {
  373. plugins.push({
  374. name: `${NAME}:css`,
  375. enforce: transformCSSOptions,
  376. transform(code, id) {
  377. if (!utils.isCssTransformTarget(id) || id.startsWith(MODULE_ID_VIRTUAL_PREFIX))
  378. return;
  379. debug2.css(id, transformCSSOptions);
  380. code = transformCSS(code, id);
  381. if (viteConfig.build.sourcemap) {
  382. return {
  383. code: transformCSS(code, id),
  384. map: { mappings: "" }
  385. };
  386. } else {
  387. return code;
  388. }
  389. }
  390. });
  391. }
  392. plugins.push({
  393. name: `${NAME}:css:svelte`,
  394. api: {
  395. sveltePreprocess: {
  396. style({ content, id }) {
  397. return {
  398. code: transformCSS(content, id)
  399. };
  400. }
  401. }
  402. }
  403. });
  404. plugins.push(...createDevtoolsPlugin({
  405. get utils() {
  406. return utils;
  407. }
  408. }));
  409. return plugins;
  410. }
  411. var src_default = VitePluginWindicss;
  412. // Annotate the CommonJS export names for ESM import in node:
  413. 0 && (module.exports = {});