feat: introduce pure bundle (JS and CSS separated) (#206)

Co-authored-by: Haibo <[email protected]>

README.md

@@ -130,6 +130,14 @@ Assuming you add the `data-zoomable` attribute to your images:
 mediumZoom('[data-zoomable]')
 ```
 
+> [!TIP]
+> If you want to control when to inject the Medium Zoom CSS styles, you can use the pure JavaScript bundle:
+>
+> ```js
+> import mediumZoom from 'medium-zoom/dist/pure'
+> import 'medium-zoom/dist/style.css'
+> ```
+
 ## API
 
 ```ts

bundlesize.config.json

@@ -1,12 +1,24 @@
 {
   "files": [
+    {
+      "path": "dist/style.css",
+      "maxSize": "250 B"
+    },
     {
       "path": "dist/medium-zoom.esm.js",
       "maxSize": "5 kB"
     },
     {
       "path": "dist/medium-zoom.min.js",
       "maxSize": "3.25 kB"
+    },
+    {
+      "path": "dist/pure/index.js",
+      "maxSize": "4.75 kB"
+    },
+    {
+      "path": "dist/pure/medium-zoom.min.umd.js",
+      "maxSize": "2.75 kB"
     }
   ]
 }

package.json

@@ -18,7 +18,7 @@
     "dev": "rollup --config --watch",
     "prebuild": "yarn run clean",
     "build": "rollup --config",
-    "postbuild": "cp ./src/medium-zoom.d.ts ./dist",
+    "postbuild": "cp ./src/medium-zoom.d.ts ./dist && cp ./src/medium-zoom.d.ts ./dist/pure/index.d.ts",
     "prepublishOnly": "npm run build",
     "lint": "eslint .",
     "format": "prettier --write *.{js,json,css,md} && yarn run lint --fix",

rollup.config.js

@@ -28,6 +28,15 @@ const sharedPlugins = [
     showGzippedSize: true,
   }),
 ]
+const prettifyPlugin = uglify({
+  compress: false,
+  mangle: false,
+  output: {
+    beautify: true,
+    indent_level: 2,
+    preamble: banner,
+  },
+})
 
 export default [
   {
@@ -45,18 +54,7 @@ export default [
       file: pkg.main.replace('.min', ''),
       format: 'umd',
     },
-    plugins: [
-      ...sharedPlugins,
-      uglify({
-        compress: false,
-        mangle: false,
-        output: {
-          beautify: true,
-          indent_level: 2,
-          preamble: banner,
-        },
-      }),
-    ],
+    plugins: [...sharedPlugins, prettifyPlugin],
   },
   {
     input: 'src/index.js',
@@ -67,4 +65,46 @@ export default [
     },
     plugins: [...sharedPlugins, terser(), license({ banner })],
   },
+  // pure
+  {
+    input: 'src/medium-zoom.js',
+    output: {
+      file: 'dist/pure/index.js',
+      format: 'es',
+    },
+    plugins: [...sharedPlugins, license({ banner })],
+  },
+  {
+    input: 'src/medium-zoom.js',
+    output: {
+      name: 'mediumZoom',
+      file: 'dist/pure/medium-zoom.umd.js',
+      format: 'umd',
+    },
+    plugins: [...sharedPlugins, prettifyPlugin],
+  },
+  {
+    input: 'src/medium-zoom.js',
+    output: {
+      name: 'mediumZoom',
+      file: 'dist/pure/medium-zoom.min.umd.js',
+      format: 'umd',
+    },
+    plugins: [...sharedPlugins, terser(), license({ banner })],
+  },
+  // style
+  {
+    input: 'src/medium-zoom.css',
+    output: {
+      file: 'dist/style.css',
+      format: 'es',
+    },
+    plugins: [
+      postcss({
+        extract: true,
+        minimize: true,
+      }),
+      license({ banner }),
+    ],
+  },
 ]