@webiny/website-builder-nextjs 0.0.0-unstable.9bd236cf5e → 0.0.0-unstable.a4637c5ce6

package/index.d.ts

@@ -1,2 +1 @@
 export * from "@webiny/website-builder-react";
-export * from "./useCss";

package/index.js

@@ -1,5 +1,4 @@
 export * from "@webiny/website-builder-react";
-export * from "./useCss";
 import { setHeadersProvider } from "@webiny/website-builder-react";
 setHeadersProvider(async () => {
   // Settings @ts-expect-error breaks the build if the dependency is installed in the repo.

package/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["setHeadersProvider","headers"],"sources":["index.ts"],"sourcesContent":["export * from \"@webiny/website-builder-react\";\nexport * from \"./useCss\";\n\nimport { setHeadersProvider } from \"@webiny/website-builder-react\";\n\nsetHeadersProvider(async () => {\n    // Settings @ts-expect-error breaks the build if the dependency is installed in the repo.\n    // @ts-ignore This is a peer dependency.\n    const { headers } = await import(\"next/headers\");\n    return await headers();\n});\n"],"mappings":"AAAA,cAAc,+BAA+B;AAC7C;AAEA,SAASA,kBAAkB,QAAQ,+BAA+B;AAElEA,kBAAkB,CAAC,YAAY;EAC3B;EACA;EACA,MAAM;IAAEC;EAAQ,CAAC,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC;EAChD,OAAO,MAAMA,OAAO,CAAC,CAAC;AAC1B,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["setHeadersProvider","headers"],"sources":["index.ts"],"sourcesContent":["export * from \"@webiny/website-builder-react\";\n\nimport { setHeadersProvider } from \"@webiny/website-builder-react\";\n\nsetHeadersProvider(async () => {\n    // Settings @ts-expect-error breaks the build if the dependency is installed in the repo.\n    // @ts-ignore This is a peer dependency.\n    const { headers } = await import(\"next/headers\");\n    return await headers();\n});\n"],"mappings":"AAAA,cAAc,+BAA+B;AAE7C,SAASA,kBAAkB,QAAQ,+BAA+B;AAElEA,kBAAkB,CAAC,YAAY;EAC3B;EACA;EACA,MAAM;IAAEC;EAAQ,CAAC,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC;EAChD,OAAO,MAAMA,OAAO,CAAC,CAAC;AAC1B,CAAC,CAAC","ignoreList":[]}

package/package.json

@@ -1,13 +1,14 @@
 {
 	"name": "@webiny/website-builder-nextjs",
-	"version": "0.0.0-unstable.9bd236cf5e",
+	"version": "0.0.0-unstable.a4637c5ce6",
 	"main": "index.js",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/webiny/webiny-js.git"
 	},
 	"exports": {
-		".": "./index.js"
+		".": "./index.js",
+		"./webpack": "./webpack.js"
 	},
 	"description": "A Next.js integration SDK for Webiny Website Builder.",
 	"contributors": [
@@ -17,14 +18,17 @@
 	],
 	"license": "MIT",
 	"dependencies": {
-		"@webiny/website-builder-react": "0.0.0-unstable.9bd236cf5e",
-		"postcss": "8.5.6"
+		"@webiny/website-builder-react": "0.0.0-unstable.a4637c5ce6",
+		"postcss": "8.5.6",
+		"postcss-import": "16.1.1"
 	},
 	"peerDependencies": {
-		"next": "^15"
+		"next": "^15",
+		"webpack": "^5"
 	},
 	"devDependencies": {
-		"@webiny/project-utils": "0.0.0-unstable.9bd236cf5e",
+		"@types/postcss-import": "14.0.3",
+		"@webiny/project-utils": "0.0.0-unstable.a4637c5ce6",
 		"typescript": "5.3.3"
 	},
 	"publishConfig": {
@@ -38,11 +42,12 @@
 	"adio": {
 		"ignore": {
 			"dependencies": [
-				"postcss",
 				"next",
+				"postcss",
+				"postcss-import",
 				"@webiny/website-builder-react"
 			]
 		}
 	},
-	"gitHead": "9bd236cf5e689f209a11bec089207dcc2d41a53c"
+	"gitHead": "a4637c5ce60a72a1cb15dfa96576cb931e4cc911"
 }

package/webpack.d.ts

@@ -0,0 +1,4 @@
+import webpack from "webpack";
+export declare const injectThemeCss: (entry: string, variableName?: string) => Promise<{
+    getPlugins: (dev: boolean) => webpack.WebpackPluginInstance[];
+}>;

package/webpack.js

@@ -0,0 +1,47 @@
+import fs from "fs";
+import webpack from "webpack";
+import postcss from "postcss";
+import postcssImport from "postcss-import";
+const buildThemeCss = async entry => {
+  // Read CSS entry file.
+  const raw = fs.readFileSync(entry, "utf8");
+
+  // Inline local imports.
+  const result = await postcss([postcssImport()]).process(raw, {
+    from: entry
+  });
+  return result.css;
+};
+export const injectThemeCss = async (entry, variableName) => {
+  const defineKey = variableName ?? "__THEME_CSS__";
+  const initialCss = await buildThemeCss(entry);
+
+  // Inject as a global constant available in your app.
+  const definePlugin = new webpack.DefinePlugin({
+    [defineKey]: JSON.stringify(initialCss)
+  });
+  const plugins = [definePlugin];
+  const getPlugins = dev => {
+    if (dev) {
+      // Watch for changes and update plugin definitions
+      plugins.push({
+        apply(compiler) {
+          compiler.hooks.afterCompile.tapPromise("WatchThemeCss", async compilation => {
+            compilation.fileDependencies.add(entry);
+          });
+          compiler.hooks.beforeCompile.tapPromise("UpdateThemeCss", async () => {
+            const cssValue = await buildThemeCss(entry);
+            // Update the definitions on our specific plugin
+            definePlugin.definitions[defineKey] = JSON.stringify(cssValue);
+          });
+        }
+      });
+    }
+    return plugins;
+  };
+  return {
+    getPlugins
+  };
+};
+
+//# sourceMappingURL=webpack.js.map

package/webpack.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["fs","webpack","postcss","postcssImport","buildThemeCss","entry","raw","readFileSync","result","process","from","css","injectThemeCss","variableName","defineKey","initialCss","definePlugin","DefinePlugin","JSON","stringify","plugins","getPlugins","dev","push","apply","compiler","hooks","afterCompile","tapPromise","compilation","fileDependencies","add","beforeCompile","cssValue","definitions"],"sources":["webpack.ts"],"sourcesContent":["import fs from \"fs\";\nimport webpack from \"webpack\";\nimport postcss from \"postcss\";\nimport postcssImport from \"postcss-import\";\n\nconst buildThemeCss = async (entry: string) => {\n    // Read CSS entry file.\n    const raw = fs.readFileSync(entry, \"utf8\");\n\n    // Inline local imports.\n    const result = await postcss([postcssImport()]).process(raw, { from: entry });\n\n    return result.css;\n}\n\nexport const injectThemeCss = async (entry: string, variableName?: string) => {\n    const defineKey = variableName ?? \"__THEME_CSS__\";\n\n    const initialCss = await buildThemeCss(entry);\n\n    // Inject as a global constant available in your app.\n    const definePlugin = new webpack.DefinePlugin({ [defineKey]: JSON.stringify(initialCss) });\n\n    const plugins: webpack.WebpackPluginInstance[] = [definePlugin];\n\n    const getPlugins = (dev: boolean) => {\n\n        if (dev) {\n            // Watch for changes and update plugin definitions\n            plugins.push({\n                apply(compiler) {\n                    compiler.hooks.afterCompile.tapPromise(\"WatchThemeCss\", async (compilation) => {\n                        compilation.fileDependencies.add(entry);\n                    });\n\n                    compiler.hooks.beforeCompile.tapPromise(\"UpdateThemeCss\", async () => {\n                        const cssValue = await buildThemeCss(entry);\n                        // Update the definitions on our specific plugin\n                        definePlugin.definitions[defineKey] = JSON.stringify(cssValue);\n                    });\n                },\n            })\n        }\n\n        return plugins;\n    }\n\n    return { getPlugins };\n\n\n}\n"],"mappings":"AAAA,OAAOA,EAAE,MAAM,IAAI;AACnB,OAAOC,OAAO,MAAM,SAAS;AAC7B,OAAOC,OAAO,MAAM,SAAS;AAC7B,OAAOC,aAAa,MAAM,gBAAgB;AAE1C,MAAMC,aAAa,GAAG,MAAOC,KAAa,IAAK;EAC3C;EACA,MAAMC,GAAG,GAAGN,EAAE,CAACO,YAAY,CAACF,KAAK,EAAE,MAAM,CAAC;;EAE1C;EACA,MAAMG,MAAM,GAAG,MAAMN,OAAO,CAAC,CAACC,aAAa,CAAC,CAAC,CAAC,CAAC,CAACM,OAAO,CAACH,GAAG,EAAE;IAAEI,IAAI,EAAEL;EAAM,CAAC,CAAC;EAE7E,OAAOG,MAAM,CAACG,GAAG;AACrB,CAAC;AAED,OAAO,MAAMC,cAAc,GAAG,MAAAA,CAAOP,KAAa,EAAEQ,YAAqB,KAAK;EAC1E,MAAMC,SAAS,GAAGD,YAAY,IAAI,eAAe;EAEjD,MAAME,UAAU,GAAG,MAAMX,aAAa,CAACC,KAAK,CAAC;;EAE7C;EACA,MAAMW,YAAY,GAAG,IAAIf,OAAO,CAACgB,YAAY,CAAC;IAAE,CAACH,SAAS,GAAGI,IAAI,CAACC,SAAS,CAACJ,UAAU;EAAE,CAAC,CAAC;EAE1F,MAAMK,OAAwC,GAAG,CAACJ,YAAY,CAAC;EAE/D,MAAMK,UAAU,GAAIC,GAAY,IAAK;IAEjC,IAAIA,GAAG,EAAE;MACL;MACAF,OAAO,CAACG,IAAI,CAAC;QACTC,KAAKA,CAACC,QAAQ,EAAE;UACZA,QAAQ,CAACC,KAAK,CAACC,YAAY,CAACC,UAAU,CAAC,eAAe,EAAE,MAAOC,WAAW,IAAK;YAC3EA,WAAW,CAACC,gBAAgB,CAACC,GAAG,CAAC1B,KAAK,CAAC;UAC3C,CAAC,CAAC;UAEFoB,QAAQ,CAACC,KAAK,CAACM,aAAa,CAACJ,UAAU,CAAC,gBAAgB,EAAE,YAAY;YAClE,MAAMK,QAAQ,GAAG,MAAM7B,aAAa,CAACC,KAAK,CAAC;YAC3C;YACAW,YAAY,CAACkB,WAAW,CAACpB,SAAS,CAAC,GAAGI,IAAI,CAACC,SAAS,CAACc,QAAQ,CAAC;UAClE,CAAC,CAAC;QACN;MACJ,CAAC,CAAC;IACN;IAEA,OAAOb,OAAO;EAClB,CAAC;EAED,OAAO;IAAEC;EAAW,CAAC;AAGzB,CAAC","ignoreList":[]}

package/CssInliner.d.ts

@@ -1,6 +0,0 @@
-export declare class CSSInliner {
-    private seen;
-    load(entryPath: string): Promise<string>;
-    private inlineFile;
-    private createImportInlinerPlugin;
-}

package/CssInliner.js

@@ -1,70 +0,0 @@
-import postcss from "postcss";
-import path from "path";
-import { readFile } from "fs";
-import { promisify } from "util";
-const readFileAsync = promisify(readFile);
-export class CSSInliner {
-  seen = new Set();
-  async load(entryPath) {
-    const result = await this.inlineFile(entryPath);
-    return result.css;
-  }
-  async inlineFile(filePath) {
-    const absolutePath = path.resolve(filePath);
-    if (this.seen.has(absolutePath)) {
-      return postcss().process("", {
-        from: undefined
-      });
-    }
-    this.seen.add(absolutePath);
-    const css = await readFileAsync(absolutePath, "utf8");
-    return postcss([this.createImportInlinerPlugin(path.dirname(absolutePath))]).process(css, {
-      from: absolutePath
-    });
-  }
-  createImportInlinerPlugin(currentDir) {
-    return {
-      postcssPlugin: "css-inliner",
-      AtRule: async atRule => {
-        if (atRule.name !== "import") {
-          return;
-        }
-        const importPath = atRule.params.replace(/^url\(|\)$|['"]/g, "").trim();
-        let importedCSS;
-        let from;
-        try {
-          if (importPath.startsWith("http://") || importPath.startsWith("https://")) {
-            // Leave remote @import untouched
-            return;
-          } else {
-            const resolvedPath = path.resolve(currentDir, importPath);
-            if (this.seen.has(resolvedPath)) {
-              atRule.remove();
-              return;
-            }
-            this.seen.add(resolvedPath);
-            importedCSS = await readFileAsync(resolvedPath, "utf8");
-            from = resolvedPath;
-          }
-        } catch (err) {
-          console.warn(`⚠️ Failed to inline import: ${importPath}`, err);
-          return;
-        }
-        const result = await postcss([this.createImportInlinerPlugin(from ? path.dirname(from) : currentDir)]).process(importedCSS, {
-          from
-        });
-        const root = postcss.parse(result.css);
-        if (atRule.parent?.type === "atrule" && atRule.parent.name === "media") {
-          atRule.replaceWith(root);
-        } else {
-          atRule.replaceWith(root.nodes);
-        }
-      }
-    };
-  }
-}
-
-// @ts-expect-error `postcss` requires this to treat the function as a valid plugin.
-CSSInliner.prototype.createImportInlinerPlugin.postcss = true;
-
-//# sourceMappingURL=CssInliner.js.map

package/CssInliner.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["postcss","path","readFile","promisify","readFileAsync","CSSInliner","seen","Set","load","entryPath","result","inlineFile","css","filePath","absolutePath","resolve","has","process","from","undefined","add","createImportInlinerPlugin","dirname","currentDir","postcssPlugin","AtRule","atRule","name","importPath","params","replace","trim","importedCSS","startsWith","resolvedPath","remove","err","console","warn","root","parse","parent","type","replaceWith","nodes","prototype"],"sources":["CssInliner.ts"],"sourcesContent":["import postcss, { type AtRule } from \"postcss\";\nimport path from \"path\";\nimport { readFile } from \"fs\";\nimport { promisify } from \"util\";\n\nconst readFileAsync = promisify(readFile);\n\nexport class CSSInliner {\n    private seen = new Set<string>();\n\n    async load(entryPath: string): Promise<string> {\n        const result = await this.inlineFile(entryPath);\n        return result.css;\n    }\n\n    private async inlineFile(filePath: string): Promise<postcss.Result> {\n        const absolutePath = path.resolve(filePath);\n\n        if (this.seen.has(absolutePath)) {\n            return postcss().process(\"\", { from: undefined });\n        }\n\n        this.seen.add(absolutePath);\n        const css = await readFileAsync(absolutePath, \"utf8\");\n\n        return postcss([this.createImportInlinerPlugin(path.dirname(absolutePath))]).process(css, {\n            from: absolutePath\n        });\n    }\n\n    private createImportInlinerPlugin(currentDir: string) {\n        return {\n            postcssPlugin: \"css-inliner\",\n            AtRule: async (atRule: AtRule) => {\n                if (atRule.name !== \"import\") {\n                    return;\n                }\n\n                const importPath = atRule.params.replace(/^url\\(|\\)$|['\"]/g, \"\").trim();\n\n                let importedCSS: string;\n                let from: string | undefined;\n\n                try {\n                    if (importPath.startsWith(\"http://\") || importPath.startsWith(\"https://\")) {\n                        // Leave remote @import untouched\n                        return;\n                    } else {\n                        const resolvedPath = path.resolve(currentDir, importPath);\n\n                        if (this.seen.has(resolvedPath)) {\n                            atRule.remove();\n                            return;\n                        }\n\n                        this.seen.add(resolvedPath);\n                        importedCSS = await readFileAsync(resolvedPath, \"utf8\");\n                        from = resolvedPath;\n                    }\n                } catch (err) {\n                    console.warn(`⚠️ Failed to inline import: ${importPath}`, err);\n                    return;\n                }\n\n                const result = await postcss([\n                    this.createImportInlinerPlugin(from ? path.dirname(from) : currentDir)\n                ]).process(importedCSS, { from });\n\n                const root = postcss.parse(result.css);\n\n                if (atRule.parent?.type === \"atrule\" && atRule.parent.name === \"media\") {\n                    atRule.replaceWith(root);\n                } else {\n                    atRule.replaceWith(root.nodes);\n                }\n            }\n        };\n    }\n}\n\n// @ts-expect-error `postcss` requires this to treat the function as a valid plugin.\nCSSInliner.prototype.createImportInlinerPlugin.postcss = true;\n"],"mappings":"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","ignoreList":[]}

package/useCss.d.ts

@@ -1 +0,0 @@
-export declare function useCss(cssFile?: string): Promise<string>;

package/useCss.js

@@ -1,13 +0,0 @@
-"use server";
-
-import path from "path";
-export async function useCss(cssFile) {
-  const {
-    CSSInliner
-  } = await import("./CssInliner");
-  const entryCss = cssFile ?? path.resolve(process.cwd(), "src/theme/theme.css");
-  const inliner = new CSSInliner();
-  return await inliner.load(entryCss);
-}
-
-//# sourceMappingURL=useCss.js.map

package/useCss.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["path","useCss","cssFile","CSSInliner","entryCss","resolve","process","cwd","inliner","load"],"sources":["useCss.ts"],"sourcesContent":["\"use server\";\nimport path from \"path\";\n\nexport async function useCss(cssFile?: string) {\n    const { CSSInliner } = await import(\"~/CssInliner\");\n    const entryCss = cssFile ?? path.resolve(process.cwd(), \"src/theme/theme.css\");\n\n    const inliner = new CSSInliner();\n    return await inliner.load(entryCss);\n}\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,IAAI,MAAM,MAAM;AAEvB,OAAO,eAAeC,MAAMA,CAACC,OAAgB,EAAE;EAC3C,MAAM;IAAEC;EAAW,CAAC,GAAG,MAAM,MAAM,eAAe,CAAC;EACnD,MAAMC,QAAQ,GAAGF,OAAO,IAAIF,IAAI,CAACK,OAAO,CAACC,OAAO,CAACC,GAAG,CAAC,CAAC,EAAE,qBAAqB,CAAC;EAE9E,MAAMC,OAAO,GAAG,IAAIL,UAAU,CAAC,CAAC;EAChC,OAAO,MAAMK,OAAO,CAACC,IAAI,CAACL,QAAQ,CAAC;AACvC","ignoreList":[]}