@webiny/website-builder-nextjs 0.0.0-unstable.e0bfc55d5a → 0.0.0-unstable.e2758ee1cf

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,4 @@
1
+ import React from "react";
2
+ import { DocumentRenderer as BaseDocumentRenderer } from "@webiny/website-builder-react";
3
+ export type DocumentRendererProps = React.ComponentProps<typeof BaseDocumentRenderer>;
4
+ export declare const DocumentRenderer: ({ document, components, children }: DocumentRendererProps) => React.JSX.Element;
@@ -0,0 +1,16 @@
1
+ import React from "react";
2
+ import { DocumentRenderer as BaseDocumentRenderer } from "@webiny/website-builder-react";
3
+ import { Image } from "./editorComponents/Image.manifest.js";
4
+ export const DocumentRenderer = ({
5
+ document,
6
+ components,
7
+ children
8
+ }) => {
9
+ const allComponents = [Image, ...components];
10
+ return /*#__PURE__*/React.createElement(BaseDocumentRenderer, {
11
+ document: document,
12
+ components: allComponents
13
+ }, children);
14
+ };
15
+
16
+ //# sourceMappingURL=DocumentRenderer.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["React","DocumentRenderer","BaseDocumentRenderer","Image","document","components","children","allComponents","createElement"],"sources":["DocumentRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { DocumentRenderer as BaseDocumentRenderer } from \"@webiny/website-builder-react\";\nimport { Image } from \"~/editorComponents/Image.manifest.js\";\n\nexport type DocumentRendererProps = React.ComponentProps<typeof BaseDocumentRenderer>;\n\nexport const DocumentRenderer = ({ document, components, children }: DocumentRendererProps) => {\n const allComponents = [Image, ...components];\n return (\n <BaseDocumentRenderer document={document} components={allComponents}>\n {children}\n </BaseDocumentRenderer>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,gBAAgB,IAAIC,oBAAoB,QAAQ,+BAA+B;AACxF,SAASC,KAAK;AAId,OAAO,MAAMF,gBAAgB,GAAGA,CAAC;EAAEG,QAAQ;EAAEC,UAAU;EAAEC;AAAgC,CAAC,KAAK;EAC3F,MAAMC,aAAa,GAAG,CAACJ,KAAK,EAAE,GAAGE,UAAU,CAAC;EAC5C,oBACIL,KAAA,CAAAQ,aAAA,CAACN,oBAAoB;IAACE,QAAQ,EAAEA,QAAS;IAACC,UAAU,EAAEE;EAAc,GAC/DD,QACiB,CAAC;AAE/B,CAAC","ignoreList":[]}
package/README.md CHANGED
@@ -1,3 +1,11 @@
1
- # Webiny Website Builder Next.js SDK
1
+ # @webiny/website-builder-nextjs
2
2
 
3
- A Next.js integration SDK for Webiny Website Builder.
3
+ > [!NOTE]
4
+ > This package is part of the [Webiny](https://www.webiny.com) monorepo.
5
+ > It’s **included in every Webiny project by default** and is not meant to be used as a standalone package.
6
+
7
+ 📘 **Documentation:** [https://www.webiny.com/docs](https://www.webiny.com/docs)
8
+
9
+ ---
10
+
11
+ _This README file is automatically generated during the publish process._
@@ -0,0 +1,18 @@
1
+ import React from "react";
2
+ import type { ComponentProps } from "@webiny/website-builder-react";
3
+ type ImageProps = ComponentProps<{
4
+ title: string;
5
+ altText: string;
6
+ highPriority: boolean;
7
+ image: {
8
+ id: string;
9
+ name: string;
10
+ size: number;
11
+ mimeType: string;
12
+ src: string;
13
+ width: number;
14
+ height: number;
15
+ };
16
+ }>;
17
+ export declare const ImageComponent: (props: ImageProps) => React.JSX.Element;
18
+ export {};
@@ -0,0 +1,89 @@
1
+ import React from "react";
2
+ import Image from "next/image";
3
+ export const ImageComponent = props => {
4
+ const image = useImage(props);
5
+ if (!image.src) {
6
+ return /*#__PURE__*/React.createElement(ImagePlaceholder, {
7
+ style: props.styles
8
+ });
9
+ }
10
+ if (image.tag === "object") {
11
+ return /*#__PURE__*/React.createElement("object", {
12
+ style: image.styles,
13
+ title: image.title,
14
+ data: image.src
15
+ });
16
+ }
17
+ return /*#__PURE__*/React.createElement("div", {
18
+ style: {
19
+ position: "relative",
20
+ ...props.styles
21
+ }
22
+ }, /*#__PURE__*/React.createElement(Image, {
23
+ alt: image.altText,
24
+ title: image.title,
25
+ src: image.src,
26
+ width: props.inputs.image.width,
27
+ height: props.inputs.image.height,
28
+ style: image.styles,
29
+ priority: props.inputs.highPriority,
30
+ loading: props.inputs.highPriority ? "eager" : "lazy",
31
+ sizes: "100vw",
32
+ loader: ({
33
+ src,
34
+ width
35
+ }) => `${src}?width=${width}`
36
+ }));
37
+ };
38
+ const ImagePlaceholder = ({
39
+ style
40
+ }) => {
41
+ return /*#__PURE__*/React.createElement("div", {
42
+ style: {
43
+ display: "flex",
44
+ height: "200px",
45
+ backgroundColor: "#f4f4f4",
46
+ justifyContent: "center",
47
+ alignItems: "center",
48
+ fill: "#ffffff",
49
+ ...style
50
+ }
51
+ }, /*#__PURE__*/React.createElement("svg", {
52
+ style: {
53
+ width: "70px",
54
+ height: "70px",
55
+ filter: "drop-shadow(rgba(0, 0, 0, 0.16) 0px 1px 0px)"
56
+ },
57
+ xmlns: "http://www.w3.org/2000/svg",
58
+ height: "24px",
59
+ viewBox: "0 -960 960 960",
60
+ width: "24px"
61
+ }, /*#__PURE__*/React.createElement("path", {
62
+ d: "M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"
63
+ })));
64
+ };
65
+ const useImage = ({
66
+ inputs,
67
+ styles
68
+ }) => {
69
+ const {
70
+ title = "",
71
+ altText,
72
+ image
73
+ } = inputs;
74
+ const src = image?.src;
75
+ const tag = src && src.endsWith(".svg") ? "object" : "img";
76
+ const imageStyles = {
77
+ maxWidth: "100%",
78
+ ...styles
79
+ };
80
+ return {
81
+ altText,
82
+ src: inputs.image?.src,
83
+ styles: imageStyles,
84
+ tag,
85
+ title
86
+ };
87
+ };
88
+
89
+ //# sourceMappingURL=Image.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["React","Image","ImageComponent","props","image","useImage","src","createElement","ImagePlaceholder","style","styles","tag","title","data","position","alt","altText","width","inputs","height","priority","highPriority","loading","sizes","loader","display","backgroundColor","justifyContent","alignItems","fill","filter","xmlns","viewBox","d","endsWith","imageStyles","maxWidth"],"sources":["Image.tsx"],"sourcesContent":["import React from \"react\";\nimport Image from \"next/image\";\nimport type { CssProperties } from \"@webiny/website-builder-react\";\nimport type { ComponentProps } from \"@webiny/website-builder-react\";\n\ntype ImageProps = ComponentProps<{\n title: string;\n altText: string;\n highPriority: boolean;\n image: {\n id: string;\n name: string;\n size: number;\n mimeType: string;\n src: string;\n width: number;\n height: number;\n };\n}>;\n\nexport const ImageComponent = (props: ImageProps) => {\n const image = useImage(props);\n\n if (!image.src) {\n return <ImagePlaceholder style={props.styles} />;\n }\n\n if (image.tag === \"object\") {\n return <object style={image.styles} title={image.title} data={image.src} />;\n }\n\n return (\n <div\n style={{\n position: \"relative\",\n ...props.styles\n }}\n >\n {/* <ImagePlaceholder style={image.styles} /> */}\n <Image\n alt={image.altText}\n title={image.title}\n src={image.src}\n width={props.inputs.image.width}\n height={props.inputs.image.height}\n style={image.styles}\n priority={props.inputs.highPriority}\n loading={props.inputs.highPriority ? \"eager\" : \"lazy\"}\n sizes={\"100vw\"}\n loader={({ src, width }) => `${src}?width=${width}`}\n />\n </div>\n );\n};\n\nconst ImagePlaceholder = ({ style }: { style: CssProperties }) => {\n return (\n <div\n style={{\n display: \"flex\",\n height: \"200px\",\n backgroundColor: \"#f4f4f4\",\n justifyContent: \"center\",\n alignItems: \"center\",\n fill: \"#ffffff\",\n ...style\n }}\n >\n <svg\n style={{\n width: \"70px\",\n height: \"70px\",\n filter: \"drop-shadow(rgba(0, 0, 0, 0.16) 0px 1px 0px)\"\n }}\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 -960 960 960\"\n width=\"24px\"\n >\n <path d=\"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z\" />\n </svg>\n </div>\n );\n};\n\nconst useImage = ({ inputs, styles }: ImageProps) => {\n const { title = \"\", altText, image } = inputs;\n const src = image?.src;\n\n const tag = src && src.endsWith(\".svg\") ? \"object\" : \"img\";\n\n const imageStyles = {\n maxWidth: \"100%\",\n ...styles\n };\n\n return {\n altText,\n src: inputs.image?.src,\n styles: imageStyles,\n tag,\n title\n };\n};\n"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1 @@
1
+ export declare const Image: import("../../../website-builder-sdk/src/types.js").Component;
@@ -0,0 +1,45 @@
1
+ "use client";
2
+
3
+ import { createFileInput, createTextInput, createBooleanInput, createComponent } from "@webiny/website-builder-react";
4
+ import { ImageComponent } from "./Image.js";
5
+ export const Image = createComponent(ImageComponent, {
6
+ name: "Webiny/Image",
7
+ label: "Image",
8
+ group: "basic",
9
+ image: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"/></svg>`,
10
+ autoApplyStyles: false,
11
+ inputs: {
12
+ image: createFileInput({
13
+ label: "Image",
14
+ allowedFileTypes: ["image/*"],
15
+ onChange: ({
16
+ inputs
17
+ }) => {
18
+ if (inputs.image) {
19
+ inputs.title = inputs.image.name;
20
+ inputs.altText = inputs.image.name;
21
+ }
22
+ }
23
+ }),
24
+ title: createTextInput({
25
+ label: "Title",
26
+ description: "Title of the image"
27
+ }),
28
+ altText: createTextInput({
29
+ label: "Alternate Text",
30
+ description: "Shown when the user has disabled images"
31
+ }),
32
+ highPriority: createBooleanInput({
33
+ label: "High Priority",
34
+ description: "Prioritize this image loading over other images on the page",
35
+ defaultValue: false
36
+ })
37
+ },
38
+ defaults: {
39
+ styles: {
40
+ width: "100%"
41
+ }
42
+ }
43
+ });
44
+
45
+ //# sourceMappingURL=Image.manifest.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["createFileInput","createTextInput","createBooleanInput","createComponent","ImageComponent","Image","name","label","group","image","autoApplyStyles","inputs","allowedFileTypes","onChange","title","altText","description","highPriority","defaultValue","defaults","styles","width"],"sources":["Image.manifest.ts"],"sourcesContent":["\"use client\";\nimport {\n createFileInput,\n createTextInput,\n createBooleanInput,\n createComponent\n} from \"@webiny/website-builder-react\";\nimport { ImageComponent } from \"./Image.js\";\n\nexport const Image = createComponent(ImageComponent, {\n name: \"Webiny/Image\",\n label: \"Image\",\n group: \"basic\",\n image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"><path d=\"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z\"/></svg>`,\n autoApplyStyles: false,\n inputs: {\n image: createFileInput({\n label: \"Image\",\n allowedFileTypes: [\"image/*\"],\n onChange: ({ inputs }) => {\n if (inputs.image) {\n inputs.title = inputs.image.name;\n inputs.altText = inputs.image.name;\n }\n }\n }),\n title: createTextInput({\n label: \"Title\",\n description: \"Title of the image\"\n }),\n altText: createTextInput({\n label: \"Alternate Text\",\n description: \"Shown when the user has disabled images\"\n }),\n highPriority: createBooleanInput({\n label: \"High Priority\",\n description: \"Prioritize this image loading over other images on the page\",\n defaultValue: false\n })\n },\n defaults: {\n styles: {\n width: \"100%\"\n }\n }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SACIA,eAAe,EACfC,eAAe,EACfC,kBAAkB,EAClBC,eAAe,QACZ,+BAA+B;AACtC,SAASC,cAAc;AAEvB,OAAO,MAAMC,KAAK,GAAGF,eAAe,CAACC,cAAc,EAAE;EACjDE,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,OAAO;EACdC,KAAK,EAAE,OAAO;EACdC,KAAK,EAAE,0TAA0T;EACjUC,eAAe,EAAE,KAAK;EACtBC,MAAM,EAAE;IACJF,KAAK,EAAET,eAAe,CAAC;MACnBO,KAAK,EAAE,OAAO;MACdK,gBAAgB,EAAE,CAAC,SAAS,CAAC;MAC7BC,QAAQ,EAAEA,CAAC;QAAEF;MAAO,CAAC,KAAK;QACtB,IAAIA,MAAM,CAACF,KAAK,EAAE;UACdE,MAAM,CAACG,KAAK,GAAGH,MAAM,CAACF,KAAK,CAACH,IAAI;UAChCK,MAAM,CAACI,OAAO,GAAGJ,MAAM,CAACF,KAAK,CAACH,IAAI;QACtC;MACJ;IACJ,CAAC,CAAC;IACFQ,KAAK,EAAEb,eAAe,CAAC;MACnBM,KAAK,EAAE,OAAO;MACdS,WAAW,EAAE;IACjB,CAAC,CAAC;IACFD,OAAO,EAAEd,eAAe,CAAC;MACrBM,KAAK,EAAE,gBAAgB;MACvBS,WAAW,EAAE;IACjB,CAAC,CAAC;IACFC,YAAY,EAAEf,kBAAkB,CAAC;MAC7BK,KAAK,EAAE,eAAe;MACtBS,WAAW,EAAE,6DAA6D;MAC1EE,YAAY,EAAE;IAClB,CAAC;EACL,CAAC;EACDC,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,KAAK,EAAE;IACX;EACJ;AACJ,CAAC,CAAC","ignoreList":[]}
package/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  export * from "@webiny/website-builder-react";
2
- export * from "./useCss";
2
+ export { DocumentRenderer } from "./DocumentRenderer.js";
package/index.js CHANGED
@@ -1,12 +1,12 @@
1
1
  export * from "@webiny/website-builder-react";
2
- export * from "./useCss";
2
+ export { DocumentRenderer } from "./DocumentRenderer.js";
3
3
  import { setHeadersProvider } from "@webiny/website-builder-react";
4
4
  setHeadersProvider(async () => {
5
5
  // Settings @ts-expect-error breaks the build if the dependency is installed in the repo.
6
6
  // @ts-ignore This is a peer dependency.
7
7
  const {
8
8
  headers
9
- } = await import("next/headers");
9
+ } = await import("next/headers.js");
10
10
  return await headers();
11
11
  });
12
12
 
package/index.js.map CHANGED
@@ -1 +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":[]}
1
+ {"version":3,"names":["DocumentRenderer","setHeadersProvider","headers"],"sources":["index.ts"],"sourcesContent":["export * from \"@webiny/website-builder-react\";\nexport { DocumentRenderer } from \"./DocumentRenderer.js\";\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.js\");\n return await headers();\n});\n"],"mappings":"AAAA,cAAc,+BAA+B;AAC7C,SAASA,gBAAgB;AAEzB,SAASC,kBAAkB,QAAQ,+BAA+B;AAElEA,kBAAkB,CAAC,YAAY;EAC3B;EACA;EACA,MAAM;IAAEC;EAAQ,CAAC,GAAG,MAAM,MAAM,CAAC,iBAAiB,CAAC;EACnD,OAAO,MAAMA,OAAO,CAAC,CAAC;AAC1B,CAAC,CAAC","ignoreList":[]}
package/lexical.css ADDED
@@ -0,0 +1,379 @@
1
+ .wb-lx-ltr {
2
+ text-align: inherit;
3
+ }
4
+ .wb-lx-rtl {
5
+ text-align: inherit;
6
+ }
7
+ .wb-lx-paragraph {
8
+ }
9
+
10
+ .wb-lx-quote {
11
+ }
12
+
13
+ .wb-lx-h1,
14
+ .wb-lx-h2,
15
+ .wb-lx-h3,
16
+ .wb-lx-h4,
17
+ .wb-lx-h5,
18
+ .wb-lx-h6 {
19
+ }
20
+
21
+ .wb-lx-textBold {
22
+ font-weight: bold;
23
+ }
24
+
25
+ .wb-lx-textItalic {
26
+ font-style: italic;
27
+ }
28
+ .wb-lx-textUnderline {
29
+ text-decoration: underline;
30
+ }
31
+ .wb-lx-textStrikethrough {
32
+ text-decoration: line-through;
33
+ }
34
+ .wb-lx-textUnderlineStrikethrough {
35
+ text-decoration: underline line-through;
36
+ }
37
+
38
+ .wb-lx-textSubscript {
39
+ font-size: 0.8em;
40
+ vertical-align: sub !important;
41
+ }
42
+
43
+ .wb-lx-textSuperscript {
44
+ font-size: 0.8em;
45
+ vertical-align: super;
46
+ }
47
+
48
+ .wb-lx-textCode {
49
+ background-color: rgb(240, 242, 245);
50
+ padding: 1px 0.25rem;
51
+ font-family: Menlo, Consolas, Monaco, monospace;
52
+ font-size: 94%;
53
+ }
54
+ .wb-lx-hashtag {
55
+ background-color: rgba(88, 144, 255, 0.15);
56
+ border-bottom: 1px solid rgba(88, 144, 255, 0.3);
57
+ }
58
+ .wb-lx-link {
59
+ color: var(--wb-theme-color1);
60
+ text-decoration: none;
61
+ > * {
62
+ color: inherit !important;
63
+ }
64
+ }
65
+ .wb-lx-link:hover {
66
+ text-decoration: underline;
67
+ }
68
+ .wb-lx-code {
69
+ background-color: rgb(240, 242, 245);
70
+ font-family: Menlo, Consolas, Monaco, monospace;
71
+ display: block;
72
+ padding: 8px 8px 8px 52px;
73
+ line-height: 1.53;
74
+ font-size: 13px;
75
+ margin: 8px 0;
76
+ tab-size: 2;
77
+ /* white-space: pre; */
78
+ overflow-x: auto;
79
+ position: relative;
80
+ }
81
+ .wb-lx-code:before {
82
+ content: attr(data-gutter);
83
+ position: absolute;
84
+ background-color: #eee;
85
+ left: 0;
86
+ top: 0;
87
+ border-right: 1px solid #ccc;
88
+ padding: 8px;
89
+ color: #777;
90
+ white-space: pre-wrap;
91
+ text-align: right;
92
+ min-width: 25px;
93
+ }
94
+ .wb-lx-table {
95
+ border-collapse: collapse;
96
+ border-spacing: 0;
97
+ max-width: 100%;
98
+ overflow-y: scroll;
99
+ table-layout: fixed;
100
+ width: calc(100% - 25px);
101
+ margin: 30px 0;
102
+ }
103
+ .wb-lx-tableSelected {
104
+ outline: 2px solid rgb(60, 132, 244);
105
+ }
106
+ .wb-lx-tableCell {
107
+ border: 1px solid #bbb;
108
+ min-width: 75px;
109
+ vertical-align: top;
110
+ text-align: start;
111
+ padding: 6px 8px;
112
+ position: relative;
113
+ cursor: default;
114
+ outline: none;
115
+ }
116
+ .wb-lx-tableCellSortedIndicator {
117
+ display: block;
118
+ opacity: 0.5;
119
+ position: absolute;
120
+ bottom: 0;
121
+ left: 0;
122
+ width: 100%;
123
+ height: 4px;
124
+ background-color: #999;
125
+ }
126
+ .wb-lx-tableCellResizer {
127
+ position: absolute;
128
+ right: -4px;
129
+ height: 100%;
130
+ width: 8px;
131
+ cursor: ew-resize;
132
+ z-index: 10;
133
+ top: 0;
134
+ }
135
+ .wb-lx-tableCellHeader {
136
+ background-color: #f2f3f5;
137
+ text-align: start;
138
+ }
139
+ .wb-lx-tableCellSelected {
140
+ background-color: #c9dbf0;
141
+ }
142
+ .wb-lx-tableCellPrimarySelected {
143
+ border: 2px solid rgb(60, 132, 244);
144
+ display: block;
145
+ height: calc(100% - 2px);
146
+ position: absolute;
147
+ width: calc(100% - 2px);
148
+ left: -1px;
149
+ top: -1px;
150
+ z-index: 2;
151
+ }
152
+ .wb-lx-tableCellEditing {
153
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
154
+ border-radius: 3px;
155
+ }
156
+ .wb-lx-tableAddColumns {
157
+ position: absolute;
158
+ top: 0;
159
+ width: 20px;
160
+ background-color: #eee;
161
+ height: 100%;
162
+ right: 0;
163
+ animation: table-controls 0.2s ease;
164
+ border: 0;
165
+ cursor: pointer;
166
+ }
167
+
168
+ .wb-lx-tableAddColumns:hover {
169
+ background-color: #c9dbf0;
170
+ }
171
+ .wb-lx-tableAddRows {
172
+ position: absolute;
173
+ bottom: -25px;
174
+ width: calc(100% - 25px);
175
+ background-color: #eee;
176
+ height: 20px;
177
+ left: 0;
178
+ animation: table-controls 0.2s ease;
179
+ border: 0;
180
+ cursor: pointer;
181
+ }
182
+ .wb-lx-tableAddRows:hover {
183
+ background-color: #c9dbf0;
184
+ }
185
+ @keyframes table-controls {
186
+ 0% {
187
+ opacity: 0;
188
+ }
189
+ 100% {
190
+ opacity: 1;
191
+ }
192
+ }
193
+ .wb-lx-tableCellResizeRuler {
194
+ display: block;
195
+ position: absolute;
196
+ width: 1px;
197
+ background-color: rgb(60, 132, 244);
198
+ height: 100%;
199
+ top: 0;
200
+ }
201
+ .wb-lx-tableCellActionButtonContainer {
202
+ display: block;
203
+ right: 5px;
204
+ top: 6px;
205
+ position: absolute;
206
+ z-index: 4;
207
+ width: 20px;
208
+ height: 20px;
209
+ }
210
+ .wb-lx-tableCellActionButton {
211
+ background-color: #eee;
212
+ display: block;
213
+ border: 0;
214
+ border-radius: 20px;
215
+ width: 20px;
216
+ height: 20px;
217
+ color: #222;
218
+ cursor: pointer;
219
+ }
220
+ .wb-lx-tableCellActionButton:hover {
221
+ background-color: #ddd;
222
+ }
223
+ .wb-lx-characterLimit {
224
+ display: inline;
225
+ background-color: #ffbbbb !important;
226
+ }
227
+ .wb-lx-ol1 {
228
+ padding: 0;
229
+ margin: 0 0 0 16px;
230
+ list-style: inside;
231
+ }
232
+ .wb-lx-ol2 {
233
+ padding: 0;
234
+ margin: 0 0 0 16px;
235
+ list-style: upper-alpha inside;
236
+ }
237
+ .wb-lx-ol3 {
238
+ list-style: initial;
239
+ list-style: auto;
240
+ padding: 0;
241
+ margin: 0 0 0 16px;
242
+ list-style-type: lower-alpha;
243
+ list-style-position: inside;
244
+ }
245
+ .wb-lx-ol4 {
246
+ padding: 0;
247
+ margin: 0 0 0 16px;
248
+ list-style: upper-roman inside;
249
+ }
250
+ .wb-lx-ol5 {
251
+ padding: 0;
252
+ margin: 0 0 0 16px;
253
+ list-style: lower-roman inside;
254
+ }
255
+ .wb-lx-ul {
256
+ padding: 0;
257
+ margin: 0 0 0 16px;
258
+ list-style: inside;
259
+ }
260
+ .wb-lx-listItem {
261
+ margin: 0 32px;
262
+ }
263
+ .wb-lx-listItemChecked,
264
+ .wb-lx-listItemUnchecked {
265
+ position: relative;
266
+ margin-left: 8px;
267
+ margin-right: 8px;
268
+ padding-left: 24px;
269
+ padding-right: 24px;
270
+ list-style-type: none;
271
+ outline: none;
272
+ }
273
+ .wb-lx-listItemChecked {
274
+ text-decoration: line-through;
275
+ }
276
+ .wb-lx-listItemUnchecked:before,
277
+ .wb-lx-listItemChecked:before {
278
+ content: "";
279
+ width: 16px;
280
+ height: 16px;
281
+ top: 2px;
282
+ left: 0;
283
+ cursor: pointer;
284
+ display: block;
285
+ background-size: cover;
286
+ position: absolute;
287
+ }
288
+ .wb-lx-listItemUnchecked[dir="rtl"]:before,
289
+ .wb-lx-listItemChecked[dir="rtl"]:before {
290
+ left: auto;
291
+ right: 0;
292
+ }
293
+ .wb-lx-listItemUnchecked:focus:before,
294
+ .wb-lx-listItemChecked:focus:before {
295
+ box-shadow: 0 0 0 2px #a6cdfe;
296
+ border-radius: 2px;
297
+ }
298
+ .wb-lx-listItemUnchecked:before {
299
+ border: 1px solid #999;
300
+ border-radius: 2px;
301
+ }
302
+ .wb-lx-listItemChecked:before {
303
+ border: 1px solid rgb(61, 135, 245);
304
+ border-radius: 2px;
305
+ background-color: #3d87f5;
306
+ background-repeat: no-repeat;
307
+ }
308
+ .wb-lx-listItemChecked:after {
309
+ content: "";
310
+ cursor: pointer;
311
+ border-color: #fff;
312
+ border-style: solid;
313
+ position: absolute;
314
+ display: block;
315
+ top: 6px;
316
+ width: 3px;
317
+ left: 7px;
318
+ height: 6px;
319
+ transform: rotate(45deg);
320
+ border-width: 0 2px 2px 0;
321
+ }
322
+ .wb-lx-nestedListItem {
323
+ list-style-type: none;
324
+ }
325
+ .wb-lx-nestedListItem:before,
326
+ .wb-lx-nestedListItem:after {
327
+ display: none;
328
+ }
329
+ .wb-lx-tokenComment {
330
+ color: slategray;
331
+ }
332
+ .wb-lx-tokenPunctuation {
333
+ color: #999;
334
+ }
335
+ .wb-lx-tokenProperty {
336
+ color: #905;
337
+ }
338
+ .wb-lx-tokenSelector {
339
+ color: #690;
340
+ }
341
+ .wb-lx-tokenOperator {
342
+ color: #9a6e3a;
343
+ }
344
+ .wb-lx-tokenAttr {
345
+ color: #07a;
346
+ }
347
+ .wb-lx-tokenVariable {
348
+ color: #e90;
349
+ }
350
+ .wb-lx-tokenFunction {
351
+ color: #dd4a68;
352
+ }
353
+ .wb-lx-mark {
354
+ background: rgba(255, 212, 0, 0.14);
355
+ border-bottom: 2px solid rgba(255, 212, 0, 0.3);
356
+ padding-bottom: 2px;
357
+ }
358
+ .wb-lx-markOverlap {
359
+ background: rgba(255, 212, 0, 0.3);
360
+ border-bottom: 2px solid rgba(255, 212, 0, 0.7);
361
+ }
362
+ .wb-lx-mark.selected {
363
+ background: rgba(255, 212, 0, 0.5);
364
+ border-bottom: 2px solid rgba(255, 212, 0, 1);
365
+ }
366
+ .wb-lx-markOverlap.selected {
367
+ background: rgba(255, 212, 0, 0.7);
368
+ border-bottom: 2px solid rgba(255, 212, 0, 0.7);
369
+ }
370
+ .wb-lx-embedBlock {
371
+ user-select: none;
372
+ }
373
+ .wb-lx-embedBlockFocus {
374
+ outline: 2px solid rgb(60, 132, 244);
375
+ }
376
+
377
+ .wb-lx-placeholder {
378
+ text-align: left;
379
+ }
package/package.json CHANGED
@@ -1,13 +1,15 @@
1
1
  {
2
2
  "name": "@webiny/website-builder-nextjs",
3
- "version": "0.0.0-unstable.e0bfc55d5a",
3
+ "version": "0.0.0-unstable.e2758ee1cf",
4
+ "type": "module",
4
5
  "main": "index.js",
5
6
  "repository": {
6
7
  "type": "git",
7
8
  "url": "https://github.com/webiny/webiny-js.git"
8
9
  },
9
10
  "exports": {
10
- ".": "./index.js"
11
+ ".": "./index.js",
12
+ "./webpack": "./webpack.js"
11
13
  },
12
14
  "description": "A Next.js integration SDK for Webiny Website Builder.",
13
15
  "contributors": [
@@ -17,32 +19,30 @@
17
19
  ],
18
20
  "license": "MIT",
19
21
  "dependencies": {
20
- "@webiny/website-builder-react": "0.0.0-unstable.e0bfc55d5a",
21
- "postcss": "8.5.6"
22
- },
23
- "peerDependencies": {
24
- "next": "^15"
22
+ "@webiny/website-builder-react": "0.0.0-unstable.e2758ee1cf",
23
+ "postcss": "8.5.6",
24
+ "postcss-import": "16.1.1"
25
25
  },
26
26
  "devDependencies": {
27
- "@webiny/project-utils": "0.0.0-unstable.e0bfc55d5a",
28
- "typescript": "5.3.3"
27
+ "@types/postcss-import": "14.0.3",
28
+ "@webiny/build-tools": "0.0.0-unstable.e2758ee1cf",
29
+ "next": "15.5.12",
30
+ "typescript": "5.9.3",
31
+ "vitest": "4.0.18",
32
+ "webpack": "5.105.2"
29
33
  },
30
34
  "publishConfig": {
31
35
  "access": "public",
32
36
  "directory": "dist"
33
37
  },
34
- "scripts": {
35
- "build": "node ../cli/bin.js run build",
36
- "watch": "node ../cli/bin.js run watch"
37
- },
38
38
  "adio": {
39
39
  "ignore": {
40
40
  "dependencies": [
41
41
  "postcss",
42
- "next",
42
+ "postcss-import",
43
43
  "@webiny/website-builder-react"
44
44
  ]
45
45
  }
46
46
  },
47
- "gitHead": "e0bfc55d5a4d6a42b32e6558d9fb2eb6753e331b"
47
+ "gitHead": "e2758ee1cfa3b9a7152e9bb995a90ccabd33266f"
48
48
  }
package/webpack.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import type { WebpackPluginInstance } from "webpack";
2
+ import type { NextConfig } from "next";
3
+ type WebpackConfigContext = Parameters<NonNullable<NextConfig["webpack"]>>[1];
4
+ export declare const injectThemeCss: (entry: string, variableName?: string) => Promise<{
5
+ getPlugins: (context: WebpackConfigContext) => WebpackPluginInstance[];
6
+ }>;
7
+ export {};
package/webpack.js ADDED
@@ -0,0 +1,56 @@
1
+ import fs from "fs";
2
+ import postcss from "postcss";
3
+ import postcssImport from "postcss-import";
4
+
5
+ // We're inferring the type from Next's config type.
6
+
7
+ const buildThemeCss = async entry => {
8
+ // Read CSS entry file.
9
+ const raw = fs.readFileSync(entry, "utf8");
10
+
11
+ // Inline local imports.
12
+ const result = await postcss([postcssImport()]).process(raw, {
13
+ from: entry
14
+ });
15
+ return result.css;
16
+ };
17
+ export const injectThemeCss = async (entry, variableName) => {
18
+ const defineKey = variableName ?? "__THEME_CSS__";
19
+ const initialCss = await buildThemeCss(entry);
20
+
21
+ // Inject as a global constant available in your app.
22
+ let definePlugin;
23
+ const getPlugins = context => {
24
+ const {
25
+ dev,
26
+ webpack
27
+ } = context;
28
+ if (!definePlugin) {
29
+ definePlugin = new webpack.DefinePlugin({
30
+ [defineKey]: JSON.stringify(initialCss)
31
+ });
32
+ }
33
+ const plugins = [definePlugin];
34
+ if (dev) {
35
+ // Watch for changes and update plugin definitions
36
+ plugins.push({
37
+ apply(compiler) {
38
+ compiler.hooks.afterCompile.tapPromise("WatchThemeCss", async compilation => {
39
+ compilation.fileDependencies.add(entry);
40
+ });
41
+ compiler.hooks.beforeCompile.tapPromise("UpdateThemeCss", async () => {
42
+ const cssValue = await buildThemeCss(entry);
43
+ // Update the definitions on our specific plugin
44
+ definePlugin.definitions[defineKey] = JSON.stringify(cssValue);
45
+ });
46
+ }
47
+ });
48
+ }
49
+ return plugins;
50
+ };
51
+ return {
52
+ getPlugins
53
+ };
54
+ };
55
+
56
+ //# sourceMappingURL=webpack.js.map
package/webpack.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"names":["fs","postcss","postcssImport","buildThemeCss","entry","raw","readFileSync","result","process","from","css","injectThemeCss","variableName","defineKey","initialCss","definePlugin","getPlugins","context","dev","webpack","DefinePlugin","JSON","stringify","plugins","push","apply","compiler","hooks","afterCompile","tapPromise","compilation","fileDependencies","add","beforeCompile","cssValue","definitions"],"sources":["webpack.ts"],"sourcesContent":["import fs from \"fs\";\nimport type { WebpackPluginInstance } from \"webpack\";\nimport postcss from \"postcss\";\nimport postcssImport from \"postcss-import\";\nimport type { NextConfig } from \"next\";\n\n// We're inferring the type from Next's config type.\ntype WebpackConfigContext = Parameters<NonNullable<NextConfig[\"webpack\"]>>[1];\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 let definePlugin: WebpackPluginInstance;\n\n const getPlugins = (context: WebpackConfigContext) => {\n const { dev, webpack } = context;\n\n if (!definePlugin) {\n definePlugin = new webpack.DefinePlugin({ [defineKey]: JSON.stringify(initialCss) });\n }\n\n const plugins: WebpackPluginInstance[] = [definePlugin];\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"],"mappings":"AAAA,OAAOA,EAAE,MAAM,IAAI;AAEnB,OAAOC,OAAO,MAAM,SAAS;AAC7B,OAAOC,aAAa,MAAM,gBAAgB;;AAG1C;;AAGA,MAAMC,aAAa,GAAG,MAAOC,KAAa,IAAK;EAC3C;EACA,MAAMC,GAAG,GAAGL,EAAE,CAACM,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,IAAIW,YAAmC;EAEvC,MAAMC,UAAU,GAAIC,OAA6B,IAAK;IAClD,MAAM;MAAEC,GAAG;MAAEC;IAAQ,CAAC,GAAGF,OAAO;IAEhC,IAAI,CAACF,YAAY,EAAE;MACfA,YAAY,GAAG,IAAII,OAAO,CAACC,YAAY,CAAC;QAAE,CAACP,SAAS,GAAGQ,IAAI,CAACC,SAAS,CAACR,UAAU;MAAE,CAAC,CAAC;IACxF;IAEA,MAAMS,OAAgC,GAAG,CAACR,YAAY,CAAC;IAEvD,IAAIG,GAAG,EAAE;MACL;MACAK,OAAO,CAACC,IAAI,CAAC;QACTC,KAAKA,CAACC,QAAQ,EAAE;UACZA,QAAQ,CAACC,KAAK,CAACC,YAAY,CAACC,UAAU,CAAC,eAAe,EAAE,MAAMC,WAAW,IAAI;YACzEA,WAAW,CAACC,gBAAgB,CAACC,GAAG,CAAC5B,KAAK,CAAC;UAC3C,CAAC,CAAC;UAEFsB,QAAQ,CAACC,KAAK,CAACM,aAAa,CAACJ,UAAU,CAAC,gBAAgB,EAAE,YAAY;YAClE,MAAMK,QAAQ,GAAG,MAAM/B,aAAa,CAACC,KAAK,CAAC;YAC3C;YACAW,YAAY,CAACoB,WAAW,CAACtB,SAAS,CAAC,GAAGQ,IAAI,CAACC,SAAS,CAACY,QAAQ,CAAC;UAClE,CAAC,CAAC;QACN;MACJ,CAAC,CAAC;IACN;IAEA,OAAOX,OAAO;EAClB,CAAC;EAED,OAAO;IAAEP;EAAW,CAAC;AACzB,CAAC","ignoreList":[]}
package/CssInliner.d.ts DELETED
@@ -1,6 +0,0 @@
1
- export declare class CSSInliner {
2
- private seen;
3
- load(entryPath: string): Promise<string>;
4
- private inlineFile;
5
- private createImportInlinerPlugin;
6
- }
package/CssInliner.js DELETED
@@ -1,70 +0,0 @@
1
- import postcss from "postcss";
2
- import path from "path";
3
- import { readFile } from "fs";
4
- import { promisify } from "util";
5
- const readFileAsync = promisify(readFile);
6
- export class CSSInliner {
7
- seen = new Set();
8
- async load(entryPath) {
9
- const result = await this.inlineFile(entryPath);
10
- return result.css;
11
- }
12
- async inlineFile(filePath) {
13
- const absolutePath = path.resolve(filePath);
14
- if (this.seen.has(absolutePath)) {
15
- return postcss().process("", {
16
- from: undefined
17
- });
18
- }
19
- this.seen.add(absolutePath);
20
- const css = await readFileAsync(absolutePath, "utf8");
21
- return postcss([this.createImportInlinerPlugin(path.dirname(absolutePath))]).process(css, {
22
- from: absolutePath
23
- });
24
- }
25
- createImportInlinerPlugin(currentDir) {
26
- return {
27
- postcssPlugin: "css-inliner",
28
- AtRule: async atRule => {
29
- if (atRule.name !== "import") {
30
- return;
31
- }
32
- const importPath = atRule.params.replace(/^url\(|\)$|['"]/g, "").trim();
33
- let importedCSS;
34
- let from;
35
- try {
36
- if (importPath.startsWith("http://") || importPath.startsWith("https://")) {
37
- // Leave remote @import untouched
38
- return;
39
- } else {
40
- const resolvedPath = path.resolve(currentDir, importPath);
41
- if (this.seen.has(resolvedPath)) {
42
- atRule.remove();
43
- return;
44
- }
45
- this.seen.add(resolvedPath);
46
- importedCSS = await readFileAsync(resolvedPath, "utf8");
47
- from = resolvedPath;
48
- }
49
- } catch (err) {
50
- console.warn(`⚠️ Failed to inline import: ${importPath}`, err);
51
- return;
52
- }
53
- const result = await postcss([this.createImportInlinerPlugin(from ? path.dirname(from) : currentDir)]).process(importedCSS, {
54
- from
55
- });
56
- const root = postcss.parse(result.css);
57
- if (atRule.parent?.type === "atrule" && atRule.parent.name === "media") {
58
- atRule.replaceWith(root);
59
- } else {
60
- atRule.replaceWith(root.nodes);
61
- }
62
- }
63
- };
64
- }
65
- }
66
-
67
- // @ts-expect-error `postcss` requires this to treat the function as a valid plugin.
68
- CSSInliner.prototype.createImportInlinerPlugin.postcss = true;
69
-
70
- //# sourceMappingURL=CssInliner.js.map
package/CssInliner.js.map DELETED
@@ -1 +0,0 @@
1
- {"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 DELETED
@@ -1 +0,0 @@
1
- export declare function useCss(cssFile?: string): Promise<string>;
package/useCss.js DELETED
@@ -1,13 +0,0 @@
1
- "use server";
2
-
3
- import path from "path";
4
- export async function useCss(cssFile) {
5
- const {
6
- CSSInliner
7
- } = await import("./CssInliner");
8
- const entryCss = cssFile ?? path.resolve(process.cwd(), "src/theme/theme.css");
9
- const inliner = new CSSInliner();
10
- return await inliner.load(entryCss);
11
- }
12
-
13
- //# sourceMappingURL=useCss.js.map
package/useCss.js.map DELETED
@@ -1 +0,0 @@
1
- {"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":[]}