@master/css-server 2.0.0-rc.5 → 2.0.0-rc.50

package/README.md

@@ -10,7 +10,7 @@
         </picture>
     </a>
 </p>
-<p align="center">Generate Master CSS text from markup on the server</p>
+<p align="center">Render Master CSS on the server side</p>
 
 <p align="center">
     <a aria-label="GitHub release (latest by date including pre-releases)" href="https://github.com/master-co/css/releases">
@@ -41,7 +41,7 @@
             <img alt="Follow @mastercorg" src="https://img.shields.io/static/v1?label=%20&message=twitter&color=f6f7f8&logo=twitter&style=for-the-badge">
         </picture>
     </a>
-    <a aria-label="Github Actions" href="https://github.com/1aron/repo/actions/workflows/release.yml">
+    <a aria-label="Github Actions" href="https://github.com/master-co/css/actions/workflows/release.yml">
         <picture>
             <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">
             <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">
@@ -53,4 +53,4 @@
 </div>
 
 ## Documentation
-Check out the official [documentation](https://rc.css.master.co/docs/server).
+Check out the official [documentation](https://rc.css.master.co/reference/server).

package/dist/decode-html.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+/*
+ * The framework will encode attribute values ​​when rendering HTML to prevent XSS,
+ * so we must decode it for correct CSS selectors.
+ * https://github.com/facebook/react/issues/27836
+ */ function decodeHTML(html) {
+    return html.replace(/&(amp|apos|#39|#x27|quot|lt|gt);/g, (match, entity)=>{
+        switch(entity){
+            case 'amp':
+                return '&';
+            case 'apos':
+            case '#39':
+            case '#x27':
+                return '\'';
+            case 'quot':
+                return '"';
+            case 'lt':
+                return '<';
+            case 'gt':
+                return '>';
+            default:
+                return match // 如果不是已知的實體，保留原樣
+                ;
+        }
+    });
+}
+
+module.exports = decodeHTML;

package/dist/decode-html.mjs

@@ -1 +1,27 @@
-function a(e){return e.replace(/&(amp|apos|#39|#x27|quot|lt|gt);/g,(t,r)=>{switch(r){case"amp":return"&";case"apos":case"#39":case"#x27":return"'";case"quot":return'"';case"lt":return"<";case"gt":return">";default:return t}})}export{a as default};
+/*
+ * The framework will encode attribute values ​​when rendering HTML to prevent XSS,
+ * so we must decode it for correct CSS selectors.
+ * https://github.com/facebook/react/issues/27836
+ */ function decodeHTML(html) {
+    return html.replace(/&(amp|apos|#39|#x27|quot|lt|gt);/g, (match, entity)=>{
+        switch(entity){
+            case 'amp':
+                return '&';
+            case 'apos':
+            case '#39':
+            case '#x27':
+                return '\'';
+            case 'quot':
+                return '"';
+            case 'lt':
+                return '<';
+            case 'gt':
+                return '>';
+            default:
+                return match // 如果不是已知的實體，保留原樣
+                ;
+        }
+    });
+}
+
+export { decodeHTML as default };

package/dist/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var render = require('./render.cjs');
+var renderCss = require('./render-css.cjs');
+var parseHtml = require('./parse-html.cjs');
+
+
+
+exports.render = render;
+exports.renderCSS = renderCss;
+exports.parseHTML = parseHtml;

package/dist/index.mjs

@@ -1 +1,3 @@
-import{default as a}from"./render.mjs";import{default as o}from"./render-css.mjs";import{default as d}from"./parse-html.mjs";export{d as parseHTML,a as render,o as renderCSS};
+export { default as render } from './render.mjs';
+export { default as renderCSS } from './render-css.mjs';
+export { default as parseHTML } from './parse-html.mjs';

package/dist/parse-html.cjs

@@ -0,0 +1,46 @@
+'use strict';
+
+var htmlparser2 = require('htmlparser2');
+var decodeHtml = require('./decode-html.cjs');
+
+/**
+ * @param html
+ * @returns {classes from html, root element}
+ */ function parseHTML(html) {
+    const classes = [];
+    let htmlElement = null;
+    let headElement = null;
+    let styleElement = null;
+    const handler = new htmlparser2.DomHandler(undefined, {}, (element)=>{
+        if (element.type === 'tag') {
+            switch(element.name){
+                case 'html':
+                    htmlElement = element;
+                    break;
+                case 'head':
+                    headElement = element;
+                    break;
+            }
+        } else if (element.type === 'style') {
+            if (element.attribs.id === 'master') styleElement = element;
+        }
+        if (element.attribs.class) {
+            element.attribs.class.split(' ').forEach((className)=>{
+                className = decodeHtml(className);
+                if (!classes.includes(className)) classes.push(className);
+            });
+        }
+    });
+    new htmlparser2.Parser(handler, {
+        decodeEntities: false
+    }).end(html);
+    return {
+        classes,
+        nodes: handler.root.childNodes,
+        htmlElement,
+        headElement,
+        styleElement
+    };
+}
+
+module.exports = parseHTML;

package/dist/parse-html.mjs

@@ -1 +1,44 @@
-import{DomHandler as o,Parser as a}from"htmlparser2";import u from"./decode-html.mjs";function m(i){const t=[];let n=null,s=null,r=null;const d=new o(void 0,{},e=>{if(e.type==="tag")switch(e.name){case"html":n=e;break;case"head":s=e;break;default:break}else e.type==="style"&&e.attribs.id==="master"&&(r=e);e.attribs.class&&e.attribs.class.split(" ").forEach(l=>{l=u(l),t.includes(l)||t.push(l)})});return new a(d,{decodeEntities:!1}).end(i),{classes:t,nodes:d.root.childNodes,htmlElement:n,headElement:s,styleElement:r}}export{m as default};
+import { DomHandler, Parser } from 'htmlparser2';
+import decodeHTML from './decode-html.mjs';
+
+/**
+ * @param html
+ * @returns {classes from html, root element}
+ */ function parseHTML(html) {
+    const classes = [];
+    let htmlElement = null;
+    let headElement = null;
+    let styleElement = null;
+    const handler = new DomHandler(undefined, {}, (element)=>{
+        if (element.type === 'tag') {
+            switch(element.name){
+                case 'html':
+                    htmlElement = element;
+                    break;
+                case 'head':
+                    headElement = element;
+                    break;
+            }
+        } else if (element.type === 'style') {
+            if (element.attribs.id === 'master') styleElement = element;
+        }
+        if (element.attribs.class) {
+            element.attribs.class.split(' ').forEach((className)=>{
+                className = decodeHTML(className);
+                if (!classes.includes(className)) classes.push(className);
+            });
+        }
+    });
+    new Parser(handler, {
+        decodeEntities: false
+    }).end(html);
+    return {
+        classes,
+        nodes: handler.root.childNodes,
+        htmlElement,
+        headElement,
+        styleElement
+    };
+}
+
+export { parseHTML as default };

package/dist/render-css.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+var parseHtml = require('./parse-html.cjs');
+var css = require('@master/css');
+
+/**
+ * Renders the Master CSS string from HTML
+ * @param html
+ * @param config
+ * @returns MasterCSS
+ */ function renderCSS(html, config) {
+    if (!html) return;
+    const { classes } = parseHtml(html);
+    if (!classes.length) return;
+    const css$1 = new css.MasterCSS(config);
+    classes.forEach((eachClass)=>css$1.add(eachClass));
+    return css$1;
+}
+
+module.exports = renderCSS;

package/dist/render-css.d.ts

@@ -1,4 +1,4 @@
-import MasterCSS, { Config } from '@master/css';
+import { MasterCSS, Config } from '@master/css';
 /**
  * Renders the Master CSS string from HTML
  * @param html

package/dist/render-css.mjs

@@ -1 +1,18 @@
-import s from"./parse-html.mjs";import f from"@master/css";function i(r,t){if(!r)return;const{classes:e}=s(r);if(!e.length)return;const n=new f(t);return e.forEach(o=>n.add(o)),n}export{i as default};
+import parseHTML from './parse-html.mjs';
+import { MasterCSS } from '@master/css';
+
+/**
+ * Renders the Master CSS string from HTML
+ * @param html
+ * @param config
+ * @returns MasterCSS
+ */ function renderCSS(html, config) {
+    if (!html) return;
+    const { classes } = parseHTML(html);
+    if (!classes.length) return;
+    const css = new MasterCSS(config);
+    classes.forEach((eachClass)=>css.add(eachClass));
+    return css;
+}
+
+export { renderCSS as default };

package/dist/render.cjs

@@ -0,0 +1,63 @@
+'use strict';
+
+var css = require('@master/css');
+var parseHtml = require('./parse-html.cjs');
+var domhandler = require('domhandler');
+var serialize = require('dom-serializer');
+
+/**
+ * Renders the page-required and sorted CSS text from HTML and injected it back into HTML
+ * @param html
+ * @param config
+ */ function render(html, config) {
+    const context = parseHtml(html);
+    const { classes, nodes, htmlElement } = context;
+    let { headElement, styleElement } = context;
+    if (!classes.length) return {
+        html,
+        classes,
+        nodes,
+        htmlElement,
+        headElement,
+        styleElement
+    };
+    const css$1 = new css.MasterCSS(config);
+    classes.forEach((eachClass)=>css$1.add(eachClass));
+    if (styleElement) {
+        styleElement.childNodes = [
+            new domhandler.Text(css$1.text)
+        ];
+    } else {
+        styleElement = new domhandler.Element('style', {
+            id: 'master'
+        }, [
+            new domhandler.Text(css$1.text)
+        ]);
+        if (headElement) {
+            headElement.childNodes.push(styleElement);
+        } else {
+            if (htmlElement) {
+                headElement = new domhandler.Element('head', {}, [
+                    styleElement
+                ]);
+                htmlElement.childNodes.unshift(headElement);
+            } else {
+                nodes.unshift(styleElement);
+            }
+        }
+    }
+    return {
+        html: serialize(nodes, {
+            decodeEntities: false,
+            encodeEntities: false
+        }),
+        css: css$1,
+        classes,
+        nodes,
+        htmlElement,
+        headElement,
+        styleElement
+    };
+}
+
+module.exports = render;

package/dist/render.d.ts

@@ -1,4 +1,4 @@
-import MasterCSS, { Config } from '@master/css';
+import { MasterCSS, Config } from '@master/css';
 import { Element, ChildNode } from 'domhandler';
 /**
  * Renders the page-required and sorted CSS text from HTML and injected it back into HTML

package/dist/render.mjs

@@ -1 +1,61 @@
-import a from"@master/css";import c from"./parse-html.mjs";import{Element as d,Text as m}from"domhandler";import E from"dom-serializer";function u(o,f){const r=c(o),{classes:n,nodes:s,htmlElement:l}=r;let{headElement:t,styleElement:e}=r;if(!n.length)return{html:o,classes:n,nodes:s,htmlElement:l,headElement:t,styleElement:e};const i=new a(f);return n.forEach(h=>i.add(h)),e?e.childNodes=[new m(i.text)]:(e=new d("style",{id:"master"},[new m(i.text)]),t?t.childNodes.push(e):l?(t=new d("head",{},[e]),l.childNodes.unshift(t)):s.unshift(e)),{html:E(s,{decodeEntities:!1,encodeEntities:!1}),css:i,classes:n,nodes:s,htmlElement:l,headElement:t,styleElement:e}}export{u as default};
+import { MasterCSS } from '@master/css';
+import parseHTML from './parse-html.mjs';
+import { Text, Element } from 'domhandler';
+import serialize from 'dom-serializer';
+
+/**
+ * Renders the page-required and sorted CSS text from HTML and injected it back into HTML
+ * @param html
+ * @param config
+ */ function render(html, config) {
+    const context = parseHTML(html);
+    const { classes, nodes, htmlElement } = context;
+    let { headElement, styleElement } = context;
+    if (!classes.length) return {
+        html,
+        classes,
+        nodes,
+        htmlElement,
+        headElement,
+        styleElement
+    };
+    const css = new MasterCSS(config);
+    classes.forEach((eachClass)=>css.add(eachClass));
+    if (styleElement) {
+        styleElement.childNodes = [
+            new Text(css.text)
+        ];
+    } else {
+        styleElement = new Element('style', {
+            id: 'master'
+        }, [
+            new Text(css.text)
+        ]);
+        if (headElement) {
+            headElement.childNodes.push(styleElement);
+        } else {
+            if (htmlElement) {
+                headElement = new Element('head', {}, [
+                    styleElement
+                ]);
+                htmlElement.childNodes.unshift(headElement);
+            } else {
+                nodes.unshift(styleElement);
+            }
+        }
+    }
+    return {
+        html: serialize(nodes, {
+            decodeEntities: false,
+            encodeEntities: false
+        }),
+        css,
+        classes,
+        nodes,
+        htmlElement,
+        headElement,
+        styleElement
+    };
+}
+
+export { render as default };

package/package.json

@@ -1 +1 @@
-{"name":"@master/css-server","scripts":{"build":"techor pack \"./src/**/*.ts\" --platform node --declare","dev":"pnpm run build --watch","lint":"eslint ./src","type-check":"tsc --noEmit","test":"jest"},"license":"MIT","description":"Generate Master CSS text from markup on the server","author":"Aoyue Design LLC.","funding":"https://css.master.co/docs/donate","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.js","module":"./dist/index.mjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.js","types":"./dist/index.d.ts"}},"files":["dist"],"publishConfig":{"access":"public"},"dependencies":{"@master/css":"^2.0.0-rc.5","htmlparser2":"^9.0.0"},"version":"2.0.0-rc.5"}
+{"name":"@master/css-server","type":"module","scripts":{"build":"techor build \"src/**/*.ts\"","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.cjs","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","require":"./dist/index.cjs"}},"files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/css":"^2.0.0-rc.50","dom-serializer":"^2.0.0","domhandler":"^5.0.3","htmlparser2":"^9.1.0"},"devDependencies":{"shared":"^2.0.0-rc.50"},"version":"2.0.0-rc.50"}

package/dist/decode-html.js

@@ -1 +0,0 @@
-"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

@@ -1 +0,0 @@
-"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

@@ -1 +0,0 @@
-"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

@@ -1 +0,0 @@
-"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

@@ -1 +0,0 @@
-"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}}