feat: migrate from bulma-pull to @bulvar/bulma

Author: skaptox

__tests__/__snapshots__/index.test.ts.snap

@@ -1,6 +1,6 @@
 import { createApp } from "vue";
 import Test from "./Test.vue";
-import "@pathscale/bulma-pull-2981-css-var-only";
+import "@bulvar/bulma/css/bulma.css";
 import "@pathscale/bulma-extensions-css-var";
 
 createApp(Test).mount(document.body);

__tests__/fixtures/simple/index.js

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/rollup-plugin-vue3-ui-css-purge",
-  "version": "0.0.40",
+  "version": "0.0.41",
   "description": "Automatically remove unused CSS when using vue3-ui",
   "keywords": [
     "rollup",
@@ -59,7 +59,7 @@
     "@commitlint/config-angular": "^11.0.0",
     "@commitlint/prompt-cli": "^11.0.0",
     "@pathscale/bulma-extensions-css-var": "0.0.49-3",
-    "@pathscale/bulma-pull-2981-css-var-only": "^0.9.6-1",
+    "@bulvar/bulma": "^0.11.24",
     "@pathscale/vue3-ui": "^0.8.146",
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-commonjs": "^17.0.0",

bun.lock

@@ -7,7 +7,8 @@ import fs from "fs-extra";
 import path from "path";
 import traverse from "@babel/traverse";
 
-type Package = { main: string; module?: string };
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Package = { [key: string]: any };
 type Data<K extends string, T> = { [P in K]?: T };
 
 const parserOpts: jsparser.ParserOptions = {
@@ -43,6 +44,7 @@ const parserOpts: jsparser.ParserOptions = {
 const vue3ui = resolveSync("@pathscale/vue3-ui", {
   basedir: __dirname,
   packageFilter(pkg: Package) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     if (pkg.module) pkg.main = pkg.module;
     return pkg;
   },
@@ -74,11 +76,8 @@ export function analyze(
   const whitelist = new Set<string>(["*", "html", "head", "body", "div", "app"]);
   let currentTag = "";
 
-  const idList = (Array.isArray(input)
-    ? input
-    : typeof input === "object"
-    ? Object.values(input)
-    : [input]
+  const idList = (
+    Array.isArray(input) ? input : typeof input === "object" ? Object.values(input) : [input]
   ).map(id => normalizePath(path.resolve(id)));
 
   const parser = new htmlparser.Parser(
@@ -98,8 +97,7 @@ export function analyze(
       onattribute(p, data) {
         for (const cl of data.split(" ")) whitelist.add(cl);
 
-        const prop = p.replace(":", "") // remove : from props like :loading -> loading
-
+        const prop = p.replace(":", ""); // remove : from props like :loading -> loading
 
         if (kebabCase(currentTag).startsWith("v-")) {
           // optional
@@ -149,7 +147,9 @@ export function analyze(
         basedir: path.dirname(id),
         extensions,
         packageFilter(pkg: Package) {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment
           if (pkg.module) pkg.main = pkg.module;
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-return
           return pkg;
         },
       }),

package.json

@@ -16,7 +16,7 @@ const generator = (options: Options = {}): Plugin => {
     "**/node_modules/@pathscale/vue3-ui/**/*.css",
     "**/node_modules/@pathscale/bulma-css-var-only/**/*.css",
     "**/node_modules/@pathscale/bulma-extensions-css-var/**/*.css",
-    "**/node_modules/@pathscale/bulma-pull-2981-css-var-only/**/*.css",
+    "**/node_modules/@bulvar/bulma/css/bulma.css",
   ]);
 
   let foundMain = false;

src/analyzer.ts

@@ -39,7 +39,7 @@ export const resolveId = async (id: string, options: AsyncOpts = {}): Promise<st
 
 /** Every project is expected to have a main file which imports both vue3-ui css packages */
 export const isMain = (code: string): boolean =>
-  new RegExp("import.*@pathscale/bulma-pull").test(code) &&
+  new RegExp("import.*@bulvar/bulma/css/bulma.css").test(code) &&
   new RegExp("import.*@pathscale/bulma-extensions").test(code);
 
 export const getDeclaredVariables = (code: string): string[] =>
@@ -51,12 +51,12 @@ export const isVariableUsed = (v: string, code: string): boolean => code.include
 export const injectFakeBundle = (code: string): string =>
   `import './vue3-ui-bundle.css';
   ${code
-    .replace(/import.*@pathscale\/bulma-pull.*/gi, "")
+    .replace(/import.*@bulvar\/bulma\/css\/bulma\.css.*/gi, "")
     .replace(/import.*@pathscale\/bulma-extensions.*/gi, "")
     .replace(/import.*user\.css.*/gi, "")}`;
 
 export const makeVue3UiBundle = async (id: string): Promise<string> => {
-  const bulmaCSSFile = await resolveId("@pathscale/bulma-pull-2981-css-var-only");
+  const bulmaCSSFile = await resolveId("@bulvar/bulma/css/bulma.css");
   if (!bulmaCSSFile) throw new Error("TRANSFORM - BULMA CSS NOT FOUND");
 
   const extensionsCSSFile = await resolveId("@pathscale/bulma-extensions-css-var");
@@ -88,7 +88,7 @@ export const makeVue3UiBundle = async (id: string): Promise<string> => {
         --${name}-a: 1;`,
   );
 
-  console.log(`TRANSFORM - USER CSS RESULT:\n`, userCSS);
+  // console.log(`TRANSFORM - USER CSS RESULT:\n`, userCSS);
 
   // replaces on bulmaCSS the definition of the variables swaping line for line
   const vars = getDeclaredVariables(userCSS);

src/index.ts

@@ -0,0 +1,16 @@
+#!/bin/bash
+
+TARGET="vue3.dev"                        
+COMMAND="build"                          
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+PARENT_DIR="$(dirname "$SCRIPT_DIR")"
+
+# Build del plugin
+cd "$SCRIPT_DIR"
+npm run prepublishOnly
+
+rm -rf "$PARENT_DIR/$TARGET/node_modules/@pathscale/rollup-plugin-vue3-ui-css-purge/dist"
+cp -r dist "$PARENT_DIR/$TARGET/node_modules/@pathscale/rollup-plugin-vue3-ui-css-purge/"
+
+cd "$PARENT_DIR/$TARGET"
+npm run $COMMAND