minista 2.4.6 → 2.5.0

package/README.md

@@ -138,7 +138,7 @@ export default defineConfig({
       outDir: "assets/images", // string
     },
   },
-  vite: {}, // https://vitejs.dev/config/
+  vite: {}, // https://ja.vitejs.dev/config/
   markdown: {
     syntaxHighlighter: "highlight", // "highlight" | "none"
     highlightOptions: {}, // https://github.com/rehypejs/rehype-highlight#options
@@ -160,6 +160,21 @@ export default defineConfig({
     cssOptions: {}, // https://github.com/beautify-web/js-beautify#css--html
     jsOptions: {}, // https://github.com/beautify-web/js-beautify#options
   },
+  css: {
+    modules: {
+      generateScopedName: undefined,
+      globalModulePaths: [],
+      hashPrefix: "",
+      localsConvention: "camelCaseOnly",
+      scopeBehaviour: "local",
+      cache: true,
+    }, // https://ja.vitejs.dev/config/#css-modules
+    preprocessorOptions: {
+      scss: {},
+      less: {},
+      stylus: {},
+    }, // https://ja.vitejs.dev/config/#css-preprocessoroptions
+  },
 })
 ```
 
@@ -170,6 +185,7 @@ export default defineConfig({
 
 ## Media
 
+- [SSG + Partial Hydration (部分的な React App) - minista v2.4](https://zenn.dev/qrac/articles/b9c65c1c0be901)
 - [Vite と esbuild を組み込み React 製 SSG を再構築 - minista v2](https://zenn.dev/qrac/articles/fbbbe7ccc3bdb1)
 - [React で書ける SSG 改善点と今後について - minista v1](https://zenn.dev/qrac/articles/a24de970148c7e)
 - [React(JSX)で書けるコーディング用 SSG - minista v0](https://zenn.dev/qrac/articles/7537521afcd1bf)

package/client.d.ts

@@ -1,3 +1,65 @@
+// CSS modules
+type CSSModuleClasses = { readonly [key: string]: string }
+
+declare module "*.module.css" {
+  const classes: CSSModuleClasses
+  export default classes
+}
+declare module "*.module.scss" {
+  const classes: CSSModuleClasses
+  export default classes
+}
+declare module "*.module.sass" {
+  const classes: CSSModuleClasses
+  export default classes
+}
+declare module "*.module.less" {
+  const classes: CSSModuleClasses
+  export default classes
+}
+declare module "*.module.styl" {
+  const classes: CSSModuleClasses
+  export default classes
+}
+declare module "*.module.stylus" {
+  const classes: CSSModuleClasses
+  export default classes
+}
+declare module "*.module.pcss" {
+  const classes: CSSModuleClasses
+  export default classes
+}
+
+// CSS
+declare module "*.css" {
+  const css: string
+  export default css
+}
+declare module "*.scss" {
+  const css: string
+  export default css
+}
+declare module "*.sass" {
+  const css: string
+  export default css
+}
+declare module "*.less" {
+  const css: string
+  export default css
+}
+declare module "*.styl" {
+  const css: string
+  export default css
+}
+declare module "*.stylus" {
+  const css: string
+  export default css
+}
+declare module "*.pcss" {
+  const css: string
+  export default css
+}
+
 declare module "*.mdx" {
   import { MDXProps } from "mdx/types"
   export default function MDXContent(props: MDXProps): JSX.Element

package/dist/build.d.ts

@@ -1,12 +1,13 @@
 import type { Options as MdxOptions } from "@mdx-js/esbuild";
 import type { Config as SvgrOptions } from "@svgr/core";
 import type { InlineConfig } from "vite";
-import type { MinistaResolveConfig, RootStaticContent, RootJsxContent, GlobalStaticData, GetGlobalStaticData, PageJsxContent, StaticData, StaticDataItem, GetStaticData, PartialModules } from "./types.js";
+import type { MinistaResolveConfig, RootStaticContent, RootJsxContent, GlobalStaticData, GetGlobalStaticData, PageJsxContent, StaticData, StaticDataItem, GetStaticData, PartialModules, CssOptions } from "./types.js";
 export declare function buildTempPages(entryPoints: string[], buildOptions: {
     outBase: string;
     outDir: string;
     mdxConfig: MdxOptions;
     svgrOptions: SvgrOptions;
+    cssOptions: CssOptions;
 }): Promise<void>;
 export declare function buildStaticPages(entryPoints: string[], tempRootFilePath: string, buildOptions: {
     outBase: string;
@@ -44,6 +45,7 @@ export declare function buildPartialStringBundle(entryPoint: string, buildOption
     outFile: string;
     mdxConfig: MdxOptions;
     svgrOptions: SvgrOptions;
+    cssOptions: CssOptions;
 }): Promise<void>;
 export declare function buildPartialStringInitial(entryPoint: string, partialModules: PartialModules, buildOptions: {
     outFile: string;

package/dist/build.js

@@ -40,6 +40,7 @@ import {
 } from "./esbuild.js";
 import { renderHtml } from "./render.js";
 import { slashEnd, reactStylesToString } from "./utils.js";
+import { CssModulePlugin } from "./css.js";
 const __filename = url.fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const ministaPkgUrl = path.resolve(__dirname + "/../package.json");
@@ -90,6 +91,7 @@ async function buildTempPages(entryPoints, buildOptions) {
     external: esbuildExternals,
     loader: esbuildLoaders,
     plugins: [
+      CssModulePlugin(buildOptions.cssOptions),
       mdx(buildOptions.mdxConfig),
       resolvePlugin({
         "react/jsx-runtime": "react/jsx-runtime.js"
@@ -430,6 +432,7 @@ async function buildPartialStringBundle(entryPoint, buildOptions) {
     external: esbuildExternals,
     loader: esbuildLoaders,
     plugins: [
+      CssModulePlugin(buildOptions.cssOptions),
       mdx(buildOptions.mdxConfig),
       resolvePlugin({
         "react/jsx-runtime": "react/jsx-runtime.js"

package/dist/config.js

@@ -103,6 +103,21 @@ const defaultConfig = {
     },
     cssOptions: {},
     jsOptions: {}
+  },
+  css: {
+    modules: {
+      generateScopedName: void 0,
+      globalModulePaths: [],
+      hashPrefix: "",
+      localsConvention: "camelCaseOnly",
+      scopeBehaviour: "local",
+      cache: true
+    },
+    preprocessorOptions: {
+      scss: {},
+      less: {},
+      stylus: {}
+    }
   }
 };
 async function mergeConfig(userConfig) {

package/dist/css.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from "esbuild";
+import type { CssOptions } from "./types.js";
+export declare function CssModulePlugin(options: CssOptions): Plugin;

package/dist/css.js

@@ -0,0 +1,150 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import React from "react";
+import path from "path";
+import fs from "fs-extra";
+import postcss from "postcss";
+import postcssModules from "postcss-modules";
+var PreprocessLang = /* @__PURE__ */ ((PreprocessLang2) => {
+  PreprocessLang2["less"] = "less";
+  PreprocessLang2["sass"] = "sass";
+  PreprocessLang2["scss"] = "scss";
+  PreprocessLang2["styl"] = "styl";
+  PreprocessLang2["stylus"] = "stylus";
+  return PreprocessLang2;
+})(PreprocessLang || {});
+const PLUGIN = "esbuild-cssmodule-plugin";
+const cssLangs = `\\.(css|less|sass|scss|styl|stylus)($|\\?)`;
+const cssLangRE = new RegExp(cssLangs);
+async function loadPreprocessor(lang) {
+  try {
+    const preprocessor = await import(lang);
+    return preprocessor.default;
+  } catch (e) {
+    if (e.code === "ERR_MODULE_NOT_FOUND") {
+      throw new Error(`Preprocessor dependency "${lang}" not found. Did you install it?`);
+    } else {
+      const error = new Error(`Preprocessor dependency "${lang}" failed to load:
+${e.message}`);
+      error.stack = `${e.stack}
+${error.stack}`;
+      throw error;
+    }
+  }
+}
+const less = async (filepath, options) => {
+  const less2 = await loadPreprocessor("less" /* less */);
+  const content = await fs.readFile(filepath, "utf8");
+  less2.render("", {});
+  const result = await less2.render(content, __spreadValues({}, options.preprocessorOptions.less));
+  return result.css;
+};
+const scss = async (scssFullPath, options) => {
+  const sass = await loadPreprocessor("sass" /* sass */);
+  const result = await sass.compileAsync(scssFullPath, __spreadValues({}, options.preprocessorOptions.scss));
+  return result.css;
+};
+const stylus = async (filepath, options) => {
+  const stylus2 = await loadPreprocessor("stylus" /* stylus */);
+  const content = await fs.readFile(filepath, "utf8");
+  const result = stylus2(content, __spreadValues({}, options.preprocessorOptions.stylus)).set("filename", filepath).render();
+  return result;
+};
+const preProcessors = {
+  ["less" /* less */]: less,
+  ["sass" /* sass */]: scss,
+  ["scss" /* scss */]: scss,
+  ["styl" /* styl */]: stylus,
+  ["stylus" /* stylus */]: stylus
+};
+async function buildCss(filepath, options) {
+  var _a;
+  const lang = (_a = filepath.match(cssLangRE)) == null ? void 0 : _a[1];
+  let css = void 0;
+  if (lang !== "css") {
+    const preProcessor = preProcessors[lang];
+    if (preProcessor) {
+      css = await preProcessor(filepath, options);
+    } else {
+      console.warn(`${PLUGIN}: Unsupported CSS language: ${lang}`);
+      return;
+    }
+  } else {
+    css = await fs.readFile(filepath, "utf8");
+  }
+  return css;
+}
+async function buildJs(filepath, options) {
+  const css = await buildCss(filepath, options);
+  if (!css)
+    return;
+  let cssModulesJSON = {};
+  await postcss([
+    postcssModules(__spreadProps(__spreadValues({}, options.modules), {
+      getJSON(_, json) {
+        cssModulesJSON = json;
+        return cssModulesJSON;
+      }
+    }))
+  ]).process(css, {
+    from: filepath,
+    map: false
+  });
+  const classNames = JSON.stringify(cssModulesJSON);
+  return `export default ${classNames};`;
+}
+function CssModulePlugin(options) {
+  const filter = new RegExp(`\\.module${cssLangs}`);
+  return {
+    name: PLUGIN,
+    setup(build) {
+      const results = /* @__PURE__ */ new Map();
+      build.onResolve({ filter, namespace: "file" }, async (args) => {
+        if (!options.modules)
+          return args;
+        const sourceFullPath = path.resolve(args.resolveDir, args.path);
+        if (results.has(sourceFullPath))
+          return results.get(sourceFullPath);
+        const content = await buildJs(sourceFullPath, options);
+        const result = {
+          path: args.path,
+          namespace: PLUGIN,
+          pluginData: {
+            content
+          }
+        };
+        if (options.modules.cache)
+          results.set(sourceFullPath, result);
+        return result;
+      });
+      build.onLoad({ filter, namespace: PLUGIN }, (args) => {
+        if (!args.pluginData.content)
+          return args;
+        return {
+          contents: args.pluginData.content,
+          loader: "js"
+        };
+      });
+    }
+  };
+}
+export {
+  CssModulePlugin
+};

package/dist/generate.js

@@ -47,7 +47,8 @@ async function generateTempRoot(config, mdxConfig) {
       outBase: config.rootSrcDir,
       outDir: systemConfig.temp.root.outDir,
       mdxConfig,
-      svgrOptions: config.assets.svgr.svgrOptions
+      svgrOptions: config.assets.svgr.svgrOptions,
+      cssOptions: config.css
     });
   }
 }
@@ -57,7 +58,8 @@ async function generateTempPages(config, mdxConfig) {
     outBase: config.pagesSrcDir,
     outDir: systemConfig.temp.pages.outDir,
     mdxConfig,
-    svgrOptions: config.assets.svgr.svgrOptions
+    svgrOptions: config.assets.svgr.svgrOptions,
+    cssOptions: config.css
   });
 }
 async function generateTempAssets(config, viteConfig) {
@@ -90,7 +92,8 @@ async function generatePartialHydration(config, mdxConfig, viteConfig) {
   await buildPartialStringBundle(stringIndex, {
     outFile: stringBundle,
     mdxConfig,
-    svgrOptions: config.assets.svgr.svgrOptions
+    svgrOptions: config.assets.svgr.svgrOptions,
+    cssOptions: config.css
   });
   await optimizeCommentOutStyleImport([stringBundle]);
   await buildPartialStringInitial(stringBundle, partialModules, {

package/dist/types.d.ts

@@ -4,6 +4,8 @@ import type { Config as SvgrOptions } from "@svgr/core";
 import type { Options as HighlightOptions } from "rehype-highlight";
 import type { Options as MdxOptions } from "@mdx-js/esbuild";
 import type { HTMLBeautifyOptions, CSSBeautifyOptions, JSBeautifyOptions } from "js-beautify";
+import type Sass from "sass";
+import type Stylus from "stylus";
 export declare type MinistaConfig = {
     base: string;
     public: string;
@@ -78,6 +80,7 @@ export declare type MinistaConfig = {
         cssOptions: CSSBeautifyOptions;
         jsOptions: JSBeautifyOptions;
     };
+    css: CssOptions;
 };
 export declare type MinistaUserConfig = {
     base?: string;
@@ -153,6 +156,7 @@ export declare type MinistaUserConfig = {
         cssOptions?: CSSBeautifyOptions;
         jsOptions?: JSBeautifyOptions;
     };
+    css?: CssUserOptions;
 };
 export declare type MinistaSvgstoreOptions = {
     cleanDefs?: Boolean | string[];
@@ -271,3 +275,27 @@ export declare type PartialModules = {
 export declare type PartialString = {
     [key: string]: string;
 };
+export declare type CSSModulesOptions = {
+    cache: boolean;
+    scopeBehaviour: "global" | "local";
+    globalModulePaths: RegExp[];
+    generateScopedName: undefined | string | ((name: string, filename: string, css: string) => string);
+    hashPrefix: string;
+    localsConvention: "camelCase" | "camelCaseOnly" | "dashes" | "dashesOnly";
+};
+export declare type CssOptions = {
+    modules: CSSModulesOptions | false;
+    preprocessorOptions: {
+        scss: Sass.Options<"async">;
+        less: Less.Options;
+        stylus: Stylus.RenderOptions;
+    };
+};
+export declare type CssUserOptions = {
+    modules?: Partial<CSSModulesOptions> | false;
+    preprocessorOptions?: {
+        scss?: Sass.Options<"async">;
+        less?: Less.Options;
+        stylus?: Stylus.RenderOptions;
+    };
+};

package/dist/vite.js

@@ -88,7 +88,8 @@ async function getViteConfig(config, mdxConfig, cliOptions) {
         "react-helmet"
       ]
     },
-    customLogger: createLogger("info", { prefix: "[minista]" })
+    customLogger: createLogger("info", { prefix: "[minista]" }),
+    css: config.css
   });
   const mergedViteConfig = mergeViteConfig(defaultViteConfig, config.vite);
   const svgrPlugin = vitePluginMinistaSvgr(config.assets.svgr.svgrOptions);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "minista",
   "description": "Next.js Like Development with 100% Static Generate",
-  "version": "2.4.6",
+  "version": "2.5.0",
   "bin": {
     "minista": "./bin/minista.js"
   },
@@ -67,8 +67,22 @@
     "semi": false
   },
   "peerDependencies": {
+    "less": "*",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "sass": "*",
+    "stylus": "*"
+  },
+  "peerDependenciesMeta": {
+    "less": {
+      "optional": true
+    },
+    "sass": {
+      "optional": true
+    },
+    "stylus": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@mdx-js/esbuild": "^2.1.1",
@@ -77,13 +91,15 @@
     "@vitejs/plugin-react": "^1.3.2",
     "cac": "^6.7.12",
     "deepmerge-ts": "^4.0.3",
-    "esbuild": "^0.14.38",
+    "esbuild": "^0.14.39",
     "fs-extra": "^10.1.0",
     "js-beautify": "^1.14.3",
     "mime-types": "^2.1.35",
     "node-fetch": "^3.2.4",
     "node-html-parser": "^5.3.3",
     "picocolors": "^1.0.0",
+    "postcss": "^8.4.13",
+    "postcss-modules": "^4.3.1",
     "react-helmet": "^6.1.0",
     "react-router-dom": "^6.3.0",
     "rehype-highlight": "^5.0.2",
@@ -94,21 +110,26 @@
     "svgstore": "^3.0.1",
     "tiny-glob": "^0.2.9",
     "uuid": "^8.3.2",
-    "vite": "^2.9.8"
+    "vite": "^2.9.9"
   },
   "devDependencies": {
     "@types/fs-extra": "^9.0.13",
     "@types/js-beautify": "^1.13.3",
+    "@types/less": "^3.0.3",
     "@types/mime-types": "^2.1.1",
-    "@types/node": "^17.0.31",
+    "@types/node": "^17.0.34",
     "@types/react": "^17.0.45",
     "@types/react-dom": "^17.0.16",
     "@types/react-helmet": "^6.1.5",
+    "@types/stylus": "^0.48.38",
     "@types/uuid": "^8.3.4",
+    "less": "^4.1.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "tsup": "^5.12.7",
+    "sass": "^1.51.0",
+    "stylus": "^0.57.0",
+    "tsup": "^5.12.8",
     "typescript": "^4.6.4",
-    "vitest": "^0.12.0"
+    "vitest": "^0.12.6"
   }
 }