docs: use named export for postcss plugin

Author: Ffloriel

docs/.vuepress/config.ts

@@ -1,8 +1,14 @@
 import { defineUserConfig } from "vuepress";
 import localTheme from "./theme/index";
 import { searchPlugin } from "@vuepress/plugin-search";
+import { viteBundler } from "@vuepress/bundler-vite";
+import { markdownTabPlugin } from "@vuepress/plugin-markdown-tab";
 
 export default defineUserConfig({
+  bundler: viteBundler({
+    viteOptions: {},
+    vuePluginOptions: {},
+  }),
   lang: "en-US",
   title: "PurgeCSS",
   description: "PurgeCSS is a tool to remove unused CSS from your project",
@@ -203,5 +209,13 @@ export default defineUserConfig({
       ],
     },
   }),
-  plugins: [searchPlugin()],
+  plugins: [
+    searchPlugin(),
+    markdownTabPlugin({
+      // Enable code tabs
+      codeTabs: true,
+      // Enable tabs
+      tabs: true,
+    }),
+  ],
 });

docs/.vuepress/public/litslink.png

@@ -1,12 +1,12 @@
 import { getDirname, path } from "@vuepress/utils";
-import { defaultTheme, DefaultThemeOptions } from "vuepress";
+import { defaultTheme, DefaultThemeOptions } from "@vuepress/theme-default";
 
 const __dirname = getDirname(import.meta.url);
 
-const localTheme = (themeOptions: DefaultThemeOptions) => {
+const localTheme = (options: DefaultThemeOptions) => {
   return {
     name: "vuepress-theme-local",
-    extends: defaultTheme(themeOptions),
+    extends: defaultTheme(options),
     // path to the client config of your theme
     clientConfigFile: path.resolve(__dirname, "client.ts"),
   };

docs/.vuepress/theme/index.ts

@@ -37,6 +37,7 @@ footer: MIT Licensed | Copyright © 2018-present Full Human LTD
 
 [<img src="https://avatars0.githubusercontent.com/u/67109815?v=4" height="85" style="margin-right: 10px">](https://tailwindcss.com)
 [<img src="https://avatars.githubusercontent.com/u/133211198?v=4" height="85" style="margin-right: 10px">](https://www.bairesdev.com/sponsoring-open-source-projects/)
+[<img src="/litslink.png" height="85" style="margin-right: 10px">](https://litslink.com/)
 
 ## Table of Contents
 

docs/README.md

@@ -28,23 +28,21 @@ Most bundlers and frameworks to build websites are using PostCSS. The easiest wa
 
 Install the PostCSS plugin:
 
-:::: code-group
-::: code-group-item NPM
+:::: code-tabs
+@tab npm
 ```sh
 npm i -D @fullhuman/postcss-purgecss
 ```
-:::
-::: code-group-item YARN
+@tab yarn
 ```sh
 yarn add @fullhuman/postcss-purgecss --dev
 ```
-:::
 ::::
 
 and add the PurgeCSS plugin to the PostCSS configuration:
 
 ```js{1,5-7}
-const purgecss = require('@fullhuman/postcss-purgecss')
+import { purgeCSSPlugin } from '@fullhuman/postcss-purgecss';
 
 module.exports = {
   plugins: [

docs/getting-started.md

@@ -93,7 +93,9 @@ If it's not already there, add `node_modules/` to your `.gitignore` file.
 Create a `postcss.config.js` file at the project root with these contents:
 
 ```js
-const purgecss = require("@fullhuman/postcss-purgecss")({
+import { purgeCSSPlugin } from '@fullhuman/postcss-purgecss';
+
+const purgecss = purgeCSSPlugin({
   content: ["./hugo_stats.json"],
   defaultExtractor: (content) => {
     const els = JSON.parse(content).htmlElements;
@@ -102,7 +104,7 @@ const purgecss = require("@fullhuman/postcss-purgecss")({
   safelist: [],
 });
 
-module.exports = {
+export default {
   plugins: [
     ...(process.env.HUGO_ENVIRONMENT === "production" ? [purgecss] : []),
   ],

docs/guides/hugo.md

@@ -40,11 +40,11 @@ npm i -D @fullhuman/postcss-purgecss postcss
 In `postcss.config.js`:
 
 ```js
-const purgecss = require('@fullhuman/postcss-purgecss')
+import { purgeCSSPlugin } from '@fullhuman/postcss-purgecss';
 
 module.exports = {
   plugins: [
-    purgecss({
+    purgeCSSPlugin({
       content: ['./**/*.html']
     })
   ]
@@ -54,9 +54,10 @@ module.exports = {
 Using PostCSS API:
 
 ```js
-const purgecss = require('@fullhuman/postcss-purgecss')
+import { purgeCSSPlugin } from '@fullhuman/postcss-purgecss';
+
 postcss([
-  purgecss({
+  purgeCSSPlugin({
     content: ['./src/**/*.html']
   })
 ])