@master/css-server 2.0.0-rc.7 → 2.0.0-rc.71
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.
- package/README.md +49 -7
- package/dist/create-server-css.d.ts +2 -0
- package/dist/create-server-css.mjs +2 -0
- package/dist/decode-html.mjs +27 -1
- package/dist/default-manifest.d.ts +2 -0
- package/dist/default-manifest.mjs +8 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.mjs +4 -1
- package/dist/parse-html.mjs +46 -1
- package/dist/render-css.d.ts +4 -3
- package/dist/render-css.mjs +19 -1
- package/dist/render.d.ts +21 -8
- package/dist/render.mjs +206 -1
- package/package.json +1 -1
- package/dist/decode-html.js +0 -1
- package/dist/index.js +0 -1
- package/dist/parse-html.js +0 -1
- package/dist/render-css.js +0 -1
- package/dist/render.js +0 -1
package/README.md
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
</picture>
|
|
11
11
|
</a>
|
|
12
12
|
</p>
|
|
13
|
-
<p align="center">
|
|
13
|
+
<p align="center">Render Master CSS on the server side</p>
|
|
14
14
|
|
|
15
15
|
<p align="center">
|
|
16
16
|
<a aria-label="GitHub release (latest by date including pre-releases)" href="https://github.com/master-co/css/releases">
|
|
@@ -41,16 +41,58 @@
|
|
|
41
41
|
<img alt="Follow @mastercorg" src="https://img.shields.io/static/v1?label=%20&message=twitter&color=f6f7f8&logo=twitter&style=for-the-badge">
|
|
42
42
|
</picture>
|
|
43
43
|
</a>
|
|
44
|
-
<a aria-label="Github Actions" href="https://github.com/
|
|
44
|
+
<a aria-label="Github Actions" href="https://github.com/master-co/css/actions/workflows/ci-release.yml">
|
|
45
45
|
<picture>
|
|
46
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/actions/workflow/status/master-co/css/release.yml?branch=rc&label=%20&message=twitter&color=212022&logo=githubactions&style=for-the-badge">
|
|
47
|
-
<source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/actions/workflow/status/master-co/css/release.yml?branch=rc&label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000">
|
|
48
|
-
<img alt="Github release actions" src="https://img.shields.io/github/actions/workflow/status/master-co/css/release.yml?branch=rc&label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000">
|
|
46
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/actions/workflow/status/master-co/css/ci-release.yml?branch=rc&label=%20&message=twitter&color=212022&logo=githubactions&style=for-the-badge">
|
|
47
|
+
<source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/actions/workflow/status/master-co/css/ci-release.yml?branch=rc&label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000">
|
|
48
|
+
<img alt="Github release actions" src="https://img.shields.io/github/actions/workflow/status/master-co/css/ci-release.yml?branch=rc&label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000">
|
|
49
49
|
</picture>
|
|
50
50
|
</a>
|
|
51
51
|
</p>
|
|
52
52
|
|
|
53
53
|
</div>
|
|
54
54
|
|
|
55
|
-
##
|
|
56
|
-
|
|
55
|
+
## Installation
|
|
56
|
+
|
|
57
|
+
```bash
|
|
58
|
+
npm install @master/css-server
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
`@master/css-server` renders required Master CSS from HTML. It parses HTML, extracts class names, creates a `MasterCSS` instance, and injects or updates `<style id="master-css">`.
|
|
62
|
+
|
|
63
|
+
## API
|
|
64
|
+
|
|
65
|
+
### `render()`
|
|
66
|
+
|
|
67
|
+
Render HTML and inject generated CSS.
|
|
68
|
+
|
|
69
|
+
```ts
|
|
70
|
+
import { render } from '@master/css-server'
|
|
71
|
+
|
|
72
|
+
const result = render('<div class="text:center"></div>', manifest)
|
|
73
|
+
|
|
74
|
+
console.log(result.html)
|
|
75
|
+
console.log(result.css.text)
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### `renderCSS()`
|
|
79
|
+
|
|
80
|
+
Render only the CSS needed by an HTML string.
|
|
81
|
+
|
|
82
|
+
```ts
|
|
83
|
+
import { renderCSS } from '@master/css-server'
|
|
84
|
+
|
|
85
|
+
const css = renderCSS('<div class="text:center"></div>', manifest)
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### `parseHTML()`
|
|
89
|
+
|
|
90
|
+
Parse HTML into the lightweight DOM representation used by the server renderer.
|
|
91
|
+
|
|
92
|
+
```ts
|
|
93
|
+
import { parseHTML } from '@master/css-server'
|
|
94
|
+
|
|
95
|
+
const document = parseHTML('<html><head></head><body></body></html>')
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
Use official framework integrations when possible; they compose this package with manifest loading, source scanning, and runtime hydration.
|
package/dist/decode-html.mjs
CHANGED
|
@@ -1 +1,27 @@
|
|
|
1
|
-
|
|
1
|
+
/*
|
|
2
|
+
* The framework will encode attribute values when rendering HTML to prevent XSS,
|
|
3
|
+
* so we must decode it for correct CSS selectors.
|
|
4
|
+
* https://github.com/facebook/react/issues/27836
|
|
5
|
+
*/ function decodeHTML(html) {
|
|
6
|
+
return html.replace(/&(amp|apos|#39|#x27|quot|lt|gt);/g, (match, entity)=>{
|
|
7
|
+
switch(entity){
|
|
8
|
+
case 'amp':
|
|
9
|
+
return '&';
|
|
10
|
+
case 'apos':
|
|
11
|
+
case '#39':
|
|
12
|
+
case '#x27':
|
|
13
|
+
return '\'';
|
|
14
|
+
case 'quot':
|
|
15
|
+
return '"';
|
|
16
|
+
case 'lt':
|
|
17
|
+
return '<';
|
|
18
|
+
case 'gt':
|
|
19
|
+
return '>';
|
|
20
|
+
default:
|
|
21
|
+
return match // 如果不是已知的實體,保留原樣
|
|
22
|
+
;
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export { decodeHTML as default };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
export { default as render } from './render';
|
|
2
|
+
export type { RenderOptions, RenderResult, RenderHydrationManifestOption } from './render';
|
|
2
3
|
export { default as renderCSS } from './render-css';
|
|
3
4
|
export { default as parseHTML } from './parse-html';
|
|
5
|
+
export { default as createServerCSS } from './create-server-css';
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
export { default as render } from './render.mjs';
|
|
2
|
+
export { default as renderCSS } from './render-css.mjs';
|
|
3
|
+
export { default as parseHTML } from './parse-html.mjs';
|
|
4
|
+
export { createCSSWithNativeDeclarations as createServerCSS } from '@master/css-validator';
|
package/dist/parse-html.mjs
CHANGED
|
@@ -1 +1,46 @@
|
|
|
1
|
-
import{DomHandler
|
|
1
|
+
import { DomHandler, Parser } from 'htmlparser2';
|
|
2
|
+
import { MASTER_CSS_RUNTIME_STYLE_ID } from '@master/css-schema/runtime-style';
|
|
3
|
+
import decodeHTML from './decode-html.mjs';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @param html
|
|
7
|
+
* @returns {classes from html, root element}
|
|
8
|
+
*/ function parseHTML(html) {
|
|
9
|
+
const classes = [];
|
|
10
|
+
let htmlElement = null;
|
|
11
|
+
let headElement = null;
|
|
12
|
+
let styleElement = null;
|
|
13
|
+
const handler = new DomHandler(undefined, {}, (element)=>{
|
|
14
|
+
if (element.type === 'tag') {
|
|
15
|
+
switch(element.name){
|
|
16
|
+
case 'html':
|
|
17
|
+
htmlElement = element;
|
|
18
|
+
break;
|
|
19
|
+
case 'head':
|
|
20
|
+
headElement = element;
|
|
21
|
+
break;
|
|
22
|
+
}
|
|
23
|
+
} else if (element.type === 'style') {
|
|
24
|
+
if (element.attribs.id === MASTER_CSS_RUNTIME_STYLE_ID) styleElement = element;
|
|
25
|
+
}
|
|
26
|
+
if (element.attribs.class) {
|
|
27
|
+
element.attribs.class.trim().split(/\s+/).forEach((className)=>{
|
|
28
|
+
if (!className) return;
|
|
29
|
+
className = decodeHTML(className);
|
|
30
|
+
if (!classes.includes(className)) classes.push(className);
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
new Parser(handler, {
|
|
35
|
+
decodeEntities: false
|
|
36
|
+
}).end(html);
|
|
37
|
+
return {
|
|
38
|
+
classes,
|
|
39
|
+
nodes: handler.root.childNodes,
|
|
40
|
+
htmlElement,
|
|
41
|
+
headElement,
|
|
42
|
+
styleElement
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
export { parseHTML as default };
|
package/dist/render-css.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { MasterCSS } from '@master/css';
|
|
2
|
+
import type { MasterCSSManifest } from '@master/css-schema/manifest';
|
|
2
3
|
/**
|
|
3
4
|
* Renders the Master CSS string from HTML
|
|
4
5
|
* @param html
|
|
5
|
-
* @param
|
|
6
|
+
* @param manifest
|
|
6
7
|
* @returns MasterCSS
|
|
7
8
|
*/
|
|
8
|
-
export default function renderCSS(html: string,
|
|
9
|
+
export default function renderCSS(html: string, manifest?: MasterCSSManifest): MasterCSS | undefined;
|
package/dist/render-css.mjs
CHANGED
|
@@ -1 +1,19 @@
|
|
|
1
|
-
import
|
|
1
|
+
import parseHTML from './parse-html.mjs';
|
|
2
|
+
import getDefaultManifest from './default-manifest.mjs';
|
|
3
|
+
import { createCSSWithNativeDeclarations } from '@master/css-validator';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Renders the Master CSS string from HTML
|
|
7
|
+
* @param html
|
|
8
|
+
* @param manifest
|
|
9
|
+
* @returns MasterCSS
|
|
10
|
+
*/ function renderCSS(html, manifest) {
|
|
11
|
+
if (!html) return;
|
|
12
|
+
const { classes } = parseHTML(html);
|
|
13
|
+
if (!classes.length) return;
|
|
14
|
+
const css = createCSSWithNativeDeclarations(manifest || getDefaultManifest());
|
|
15
|
+
classes.forEach((eachClass)=>css.add(eachClass));
|
|
16
|
+
return css;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export { renderCSS as default };
|
package/dist/render.d.ts
CHANGED
|
@@ -1,11 +1,17 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { MasterCSS } from '@master/css';
|
|
2
|
+
import type { MasterCSSManifest } from '@master/css-schema/manifest';
|
|
3
|
+
import { type MasterCSSHydrationManifest } from '@master/css-schema/hydration-manifest';
|
|
2
4
|
import { Element, ChildNode } from 'domhandler';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
export
|
|
5
|
+
export type RenderExternalHydrationManifestSource = string | ((json: string, hydrationManifest: MasterCSSHydrationManifest) => string);
|
|
6
|
+
export interface RenderExternalHydrationManifestOption {
|
|
7
|
+
type: 'external';
|
|
8
|
+
src: RenderExternalHydrationManifestSource;
|
|
9
|
+
}
|
|
10
|
+
export type RenderHydrationManifestOption = 'return' | 'inject' | false | RenderExternalHydrationManifestOption;
|
|
11
|
+
export interface RenderOptions {
|
|
12
|
+
hydrationManifest?: RenderHydrationManifestOption;
|
|
13
|
+
}
|
|
14
|
+
export interface RenderResult {
|
|
9
15
|
html: string;
|
|
10
16
|
css?: MasterCSS;
|
|
11
17
|
classes: string[];
|
|
@@ -13,4 +19,11 @@ export default function render(html: string, config?: Config): {
|
|
|
13
19
|
htmlElement: Element | null;
|
|
14
20
|
headElement: Element | null;
|
|
15
21
|
styleElement: Element | null;
|
|
16
|
-
|
|
22
|
+
hydrationManifest?: MasterCSSHydrationManifest;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Renders the page-required and sorted CSS text from HTML and injected it back into HTML
|
|
26
|
+
* @param html
|
|
27
|
+
* @param manifest
|
|
28
|
+
*/
|
|
29
|
+
export default function render(html: string, manifest?: MasterCSSManifest, options?: RenderOptions): RenderResult;
|
package/dist/render.mjs
CHANGED
|
@@ -1 +1,206 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { createHydrationManifest } from '@master/css';
|
|
2
|
+
import { MASTER_CSS_HYDRATION_MANIFEST_ATTR, serializeMasterCSSHydrationManifest, MASTER_CSS_HYDRATION_MANIFEST_SCRIPT_ID } from '@master/css-schema/hydration-manifest';
|
|
3
|
+
import { MASTER_CSS_RUNTIME_STYLE_ID } from '@master/css-schema/runtime-style';
|
|
4
|
+
import parseHTML from './parse-html.mjs';
|
|
5
|
+
import getDefaultManifest from './default-manifest.mjs';
|
|
6
|
+
import { createCSSWithNativeDeclarations } from '@master/css-validator';
|
|
7
|
+
import { Text, Element } from 'domhandler';
|
|
8
|
+
import serialize from 'dom-serializer';
|
|
9
|
+
|
|
10
|
+
function createHydrationManifestScript(hydrationManifest) {
|
|
11
|
+
return new Element('script', {
|
|
12
|
+
type: 'application/json',
|
|
13
|
+
id: MASTER_CSS_HYDRATION_MANIFEST_SCRIPT_ID
|
|
14
|
+
}, [
|
|
15
|
+
new Text(serializeMasterCSSHydrationManifest(hydrationManifest))
|
|
16
|
+
]);
|
|
17
|
+
}
|
|
18
|
+
function isHydrationManifestScript(node) {
|
|
19
|
+
return node.type === 'script' && node.name === 'script' && node.attribs.id === MASTER_CSS_HYDRATION_MANIFEST_SCRIPT_ID;
|
|
20
|
+
}
|
|
21
|
+
function setHydrationManifestScript(element, hydrationManifest) {
|
|
22
|
+
element.attribs.type = 'application/json';
|
|
23
|
+
element.attribs.id = MASTER_CSS_HYDRATION_MANIFEST_SCRIPT_ID;
|
|
24
|
+
element.childNodes = [
|
|
25
|
+
new Text(serializeMasterCSSHydrationManifest(hydrationManifest))
|
|
26
|
+
];
|
|
27
|
+
}
|
|
28
|
+
function isExternalHydrationManifestOption(hydrationManifest) {
|
|
29
|
+
return typeof hydrationManifest === 'object' && hydrationManifest?.type === 'external';
|
|
30
|
+
}
|
|
31
|
+
function getExternalHydrationManifestSource(option, hydrationManifest) {
|
|
32
|
+
const json = serializeMasterCSSHydrationManifest(hydrationManifest);
|
|
33
|
+
return typeof option.src === 'function' ? option.src(json, hydrationManifest) : option.src;
|
|
34
|
+
}
|
|
35
|
+
function findHydrationManifestScripts(childNodes, matches = []) {
|
|
36
|
+
for(let index = 0; index < childNodes.length; index++){
|
|
37
|
+
const node = childNodes[index];
|
|
38
|
+
if (isHydrationManifestScript(node)) {
|
|
39
|
+
matches.push({
|
|
40
|
+
element: node,
|
|
41
|
+
childNodes,
|
|
42
|
+
index
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
if ('childNodes' in node) {
|
|
46
|
+
findHydrationManifestScripts(node.childNodes, matches);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
return matches;
|
|
50
|
+
}
|
|
51
|
+
function removeNode(nodes, target) {
|
|
52
|
+
const index = nodes.indexOf(target);
|
|
53
|
+
if (index !== -1) {
|
|
54
|
+
nodes.splice(index, 1);
|
|
55
|
+
return true;
|
|
56
|
+
}
|
|
57
|
+
for (const node of nodes){
|
|
58
|
+
if ('childNodes' in node && removeNode(node.childNodes, target)) {
|
|
59
|
+
return true;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
return false;
|
|
63
|
+
}
|
|
64
|
+
function removeHydrationManifestScripts(nodes) {
|
|
65
|
+
const existingScripts = findHydrationManifestScripts(nodes);
|
|
66
|
+
for(let index = existingScripts.length - 1; index >= 0; index--){
|
|
67
|
+
const script = existingScripts[index];
|
|
68
|
+
script.childNodes.splice(script.index, 1);
|
|
69
|
+
}
|
|
70
|
+
return existingScripts.length > 0;
|
|
71
|
+
}
|
|
72
|
+
function removeExternalHydrationManifest(styleElement) {
|
|
73
|
+
if (styleElement) {
|
|
74
|
+
delete styleElement.attribs[MASTER_CSS_HYDRATION_MANIFEST_ATTR];
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
function injectExternalHydrationManifest(nodes, styleElement, src) {
|
|
78
|
+
removeHydrationManifestScripts(nodes);
|
|
79
|
+
if (styleElement) {
|
|
80
|
+
styleElement.attribs[MASTER_CSS_HYDRATION_MANIFEST_ATTR] = src;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
function injectHydrationManifest(nodes, htmlElement, headElement, styleElement, hydrationManifest) {
|
|
84
|
+
removeExternalHydrationManifest(styleElement);
|
|
85
|
+
const existingScripts = findHydrationManifestScripts(nodes);
|
|
86
|
+
if (existingScripts.length) {
|
|
87
|
+
const [firstScript, ...duplicateScripts] = existingScripts;
|
|
88
|
+
setHydrationManifestScript(firstScript.element, hydrationManifest);
|
|
89
|
+
for(let index = duplicateScripts.length - 1; index >= 0; index--){
|
|
90
|
+
const script = duplicateScripts[index];
|
|
91
|
+
script.childNodes.splice(script.index, 1);
|
|
92
|
+
}
|
|
93
|
+
return;
|
|
94
|
+
}
|
|
95
|
+
const scriptElement = createHydrationManifestScript(hydrationManifest);
|
|
96
|
+
if (headElement) {
|
|
97
|
+
headElement.childNodes.push(scriptElement);
|
|
98
|
+
} else if (htmlElement) {
|
|
99
|
+
headElement = new Element('head', {}, [
|
|
100
|
+
scriptElement
|
|
101
|
+
]);
|
|
102
|
+
htmlElement.childNodes.unshift(headElement);
|
|
103
|
+
} else {
|
|
104
|
+
const styleElementIndex = styleElement ? nodes.indexOf(styleElement) : -1;
|
|
105
|
+
if (styleElementIndex === -1) {
|
|
106
|
+
nodes.unshift(scriptElement);
|
|
107
|
+
} else {
|
|
108
|
+
nodes.splice(styleElementIndex + 1, 0, scriptElement);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
/**
|
|
113
|
+
* Renders the page-required and sorted CSS text from HTML and injected it back into HTML
|
|
114
|
+
* @param html
|
|
115
|
+
* @param manifest
|
|
116
|
+
*/ function render(html, manifest, options = {}) {
|
|
117
|
+
const context = parseHTML(html);
|
|
118
|
+
const { classes, nodes, htmlElement } = context;
|
|
119
|
+
let { headElement, styleElement } = context;
|
|
120
|
+
const externalHydrationManifestOption = isExternalHydrationManifestOption(options.hydrationManifest) ? options.hydrationManifest : undefined;
|
|
121
|
+
if (!classes.length && externalHydrationManifestOption) {
|
|
122
|
+
removeHydrationManifestScripts(nodes);
|
|
123
|
+
removeExternalHydrationManifest(styleElement);
|
|
124
|
+
}
|
|
125
|
+
if (!classes.length) return {
|
|
126
|
+
html: externalHydrationManifestOption ? serialize(nodes, {
|
|
127
|
+
decodeEntities: false,
|
|
128
|
+
encodeEntities: false
|
|
129
|
+
}) : html,
|
|
130
|
+
classes,
|
|
131
|
+
nodes,
|
|
132
|
+
htmlElement,
|
|
133
|
+
headElement,
|
|
134
|
+
styleElement
|
|
135
|
+
};
|
|
136
|
+
const css = createCSSWithNativeDeclarations(manifest || getDefaultManifest());
|
|
137
|
+
classes.forEach((eachClass)=>css.add(eachClass));
|
|
138
|
+
const hydrationManifest = options.hydrationManifest === false ? undefined : createHydrationManifest(css);
|
|
139
|
+
if (!css.text) {
|
|
140
|
+
if ((options.hydrationManifest === 'inject' || externalHydrationManifestOption) && styleElement) {
|
|
141
|
+
removeNode(nodes, styleElement);
|
|
142
|
+
styleElement = null;
|
|
143
|
+
}
|
|
144
|
+
if (externalHydrationManifestOption) {
|
|
145
|
+
removeHydrationManifestScripts(nodes);
|
|
146
|
+
}
|
|
147
|
+
return {
|
|
148
|
+
html: serialize(nodes, {
|
|
149
|
+
decodeEntities: false,
|
|
150
|
+
encodeEntities: false
|
|
151
|
+
}),
|
|
152
|
+
css,
|
|
153
|
+
classes,
|
|
154
|
+
hydrationManifest,
|
|
155
|
+
nodes,
|
|
156
|
+
htmlElement,
|
|
157
|
+
headElement,
|
|
158
|
+
styleElement
|
|
159
|
+
};
|
|
160
|
+
}
|
|
161
|
+
if (styleElement) {
|
|
162
|
+
styleElement.childNodes = [
|
|
163
|
+
new Text(css.text)
|
|
164
|
+
];
|
|
165
|
+
} else {
|
|
166
|
+
styleElement = new Element('style', {
|
|
167
|
+
id: MASTER_CSS_RUNTIME_STYLE_ID
|
|
168
|
+
}, [
|
|
169
|
+
new Text(css.text)
|
|
170
|
+
]);
|
|
171
|
+
if (headElement) {
|
|
172
|
+
headElement.childNodes.push(styleElement);
|
|
173
|
+
} else {
|
|
174
|
+
if (htmlElement) {
|
|
175
|
+
headElement = new Element('head', {}, [
|
|
176
|
+
styleElement
|
|
177
|
+
]);
|
|
178
|
+
htmlElement.childNodes.unshift(headElement);
|
|
179
|
+
} else {
|
|
180
|
+
nodes.unshift(styleElement);
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
if (options.hydrationManifest === 'inject' && hydrationManifest?.rules.length) {
|
|
185
|
+
injectHydrationManifest(nodes, htmlElement, headElement, styleElement, hydrationManifest);
|
|
186
|
+
} else if (externalHydrationManifestOption && hydrationManifest?.rules.length) {
|
|
187
|
+
injectExternalHydrationManifest(nodes, styleElement, getExternalHydrationManifestSource(externalHydrationManifestOption, hydrationManifest));
|
|
188
|
+
} else {
|
|
189
|
+
removeExternalHydrationManifest(styleElement);
|
|
190
|
+
}
|
|
191
|
+
return {
|
|
192
|
+
html: serialize(nodes, {
|
|
193
|
+
decodeEntities: false,
|
|
194
|
+
encodeEntities: false
|
|
195
|
+
}),
|
|
196
|
+
css,
|
|
197
|
+
classes,
|
|
198
|
+
hydrationManifest,
|
|
199
|
+
nodes,
|
|
200
|
+
htmlElement,
|
|
201
|
+
headElement,
|
|
202
|
+
styleElement
|
|
203
|
+
};
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
export { render as default };
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name":"@master/css-server","scripts":{"build":"techor
|
|
1
|
+
{"name":"@master/css-server","type":"module","scripts":{"build":"techor build \"src/**/*.ts\" --formats esm && node scripts/restore-json-import-attributes.mjs","dev":"pnpm build --watch","lint":"eslint","type-check":"tsc --noEmit","test":"vitest"},"license":"MIT","description":"Render Master CSS on the server side","author":"Aoyue Design LLC.","funding":"https://rc.css.master.co/sponsor","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/css/issues"},"repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/server"},"keywords":["server","static","html","markup","dom","css","mastercss"],"sideEffects":false,"main":"./dist/index.mjs","module":"./dist/index.mjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","default":"./dist/index.mjs"}},"files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/css":"^2.0.0-rc.71","@master/css-preset":"^2.0.0-rc.71","@master/css-validator":"^2.0.0-rc.71","dom-serializer":"^3.1.1","domhandler":"^6.0.1","htmlparser2":"^12.0.0","@master/css-schema":"^2.0.0-rc.71"},"devDependencies":{"@master/css-compiler":"^2.0.0-rc.71"},"version":"2.0.0-rc.71"}
|
package/dist/decode-html.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";var u=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var l=(t,e)=>{for(var r in e)u(t,r,{get:e[r],enumerable:!0})},d=(t,e,r,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of o(e))!p.call(t,a)&&a!==r&&u(t,a,{get:()=>e[a],enumerable:!(c=n(e,a))||c.enumerable});return t};var g=t=>d(u({},"__esModule",{value:!0}),t);var f={};l(f,{default:()=>s});module.exports=g(f);function s(t){return t.replace(/&(amp|apos|#39|#x27|quot|lt|gt);/g,(e,r)=>{switch(r){case"amp":return"&";case"apos":case"#39":case"#x27":return"'";case"quot":return'"';case"lt":return"<";case"gt":return">";default:return e}})}
|
package/dist/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";var u=Object.create;var o=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var H=(e,r)=>{for(var a in r)o(e,a,{get:r[a],enumerable:!0})},p=(e,r,a,d)=>{if(r&&typeof r=="object"||typeof r=="function")for(let f of n(r))!C.call(e,f)&&f!==a&&o(e,f,{get:()=>r[f],enumerable:!(d=x(r,f))||d.enumerable});return e};var t=(e,r,a)=>(a=e!=null?u(S(e)):{},p(r||!e||!e.__esModule?o(a,"default",{value:e,enumerable:!0}):a,e)),L=e=>p(o({},"__esModule",{value:!0}),e);var M={};H(M,{parseHTML:()=>m.default,render:()=>s.default,renderCSS:()=>l.default});module.exports=L(M);var s=t(require("./render")),l=t(require("./render-css")),m=t(require("./parse-html"));0&&(module.exports={parseHTML,render,renderCSS});
|
package/dist/parse-html.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";var f=Object.create;var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var y=(e,l)=>{for(var t in l)i(e,t,{get:l[t],enumerable:!0})},u=(e,l,t,r)=>{if(l&&typeof l=="object"||typeof l=="function")for(let s of c(l))!b.call(e,s)&&s!==t&&i(e,s,{get:()=>l[s],enumerable:!(r=h(l,s))||r.enumerable});return e};var g=(e,l,t)=>(t=e!=null?f(p(e)):{},u(l||!e||!e.__esModule?i(t,"default",{value:e,enumerable:!0}):t,e)),k=e=>u(i({},"__esModule",{value:!0}),e);var w={};y(w,{default:()=>E});module.exports=k(w);var o=require("htmlparser2"),m=g(require("./decode-html"));function E(e){const l=[];let t=null,r=null,s=null;const a=new o.DomHandler(void 0,{},n=>{if(n.type==="tag")switch(n.name){case"html":t=n;break;case"head":r=n;break;default:break}else n.type==="style"&&n.attribs.id==="master"&&(s=n);n.attribs.class&&n.attribs.class.split(" ").forEach(d=>{d=(0,m.default)(d),l.includes(d)||l.push(d)})});return new o.Parser(a,{decodeEntities:!1}).end(e),{classes:l,nodes:a.root.childNodes,htmlElement:t,headElement:r,styleElement:s}}
|
package/dist/render-css.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";var u=Object.create;var s=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var m=(r,e)=>{for(var n in e)s(r,n,{get:e[n],enumerable:!0})},f=(r,e,n,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of C(e))!p.call(r,t)&&t!==n&&s(r,t,{get:()=>e[t],enumerable:!(o=S(e,t))||o.enumerable});return r};var i=(r,e,n)=>(n=r!=null?u(g(r)):{},f(e||!r||!r.__esModule?s(n,"default",{value:r,enumerable:!0}):n,r)),M=r=>f(s({},"__esModule",{value:!0}),r);var l={};m(l,{default:()=>d});module.exports=M(l);var a=i(require("./parse-html")),c=i(require("@master/css"));function d(r,e){if(!r)return;const{classes:n}=(0,a.default)(r);if(!n.length)return;const o=new c.default(e);return n.forEach(t=>o.add(t)),o}
|
package/dist/render.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";var C=Object.create;var f=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var y=(e,t)=>{for(var n in t)f(e,n,{get:t[n],enumerable:!0})},a=(e,t,n,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of x(t))!S.call(e,s)&&s!==n&&f(e,s,{get:()=>t[s],enumerable:!(i=w(t,s))||i.enumerable});return e};var h=(e,t,n)=>(n=e!=null?C(N(e)):{},a(t||!e||!e.__esModule?f(n,"default",{value:e,enumerable:!0}):n,e)),M=e=>a(f({},"__esModule",{value:!0}),e);var T={};y(T,{default:()=>p});module.exports=M(T);var c=h(require("@master/css")),E=h(require("./parse-html")),r=require("domhandler"),u=h(require("dom-serializer"));function p(e,t){const n=(0,E.default)(e),{classes:i,nodes:s,htmlElement:d}=n;let{headElement:o,styleElement:l}=n;if(!i.length)return{html:e,classes:i,nodes:s,htmlElement:d,headElement:o,styleElement:l};const m=new c.default(t);return i.forEach(g=>m.add(g)),l?l.childNodes=[new r.Text(m.text)]:(l=new r.Element("style",{id:"master"},[new r.Text(m.text)]),o?o.childNodes.push(l):d?(o=new r.Element("head",{},[l]),d.childNodes.unshift(o)):s.unshift(l)),{html:(0,u.default)(s,{decodeEntities:!1,encodeEntities:!1}),css:m,classes:i,nodes:s,htmlElement:d,headElement:o,styleElement:l}}
|