@server/next 0.40.0 → 0.40.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@server/next",
-  "version": "0.40.0",
+  "version": "0.40.1",
   "description": "A fully-fledged web server with routing, file uploads, sessions, static files, schema validation, websockets, testing, etc.",
   "homepage": "https://server-js.com/",
   "repository": "github:franciscop/server-next",
@@ -65,7 +65,7 @@
   },
   "dependencies": {
     "bucket": "^0.7.1",
-    "polystore": "^0.23.3"
+    "polystore": "^0.24.0"
   },
   "devDependencies": {
     "@types/bun": "^1.3.0",

package/src/jsx/jsx-runtime.js

@@ -38,14 +38,30 @@ const encode = (str = "") => {
 const isValidChild = (child) =>
   child != null && child !== false && child !== true;
 
-const minifyCss = (str) =>
-  str
+// A `</style>` inside the CSS would close the element early and let whatever
+// follows run as HTML. The content is never encoded, so this runs on every
+// <style>, minified or not.
+const escapeCss = (str) => str.replace(/<\/style>/gi, "<\\/style>");
+
+const minifyCss = (str) => {
+  // Quoted values are content, not formatting: the spaces and delimiters in
+  // `content: ", "` have to survive. They're set aside while the rest is
+  // squeezed, then put back. Comments go first and unconditionally, so one
+  // written inside a string is stripped along with the rest.
+  const quoted = [];
+  return str
     .replace(/\/\*[\s\S]*?\*\//g, "")
+    .replace(
+      /"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/g,
+      (match) => `\0${quoted.push(match) - 1}\0`,
+    )
     .replace(/\s+/g, " ")
-    .replace(/\s*([{}:;,>~+])\s*/g, "$1")
+    // `+` is left out on purpose for `calc(100% + 10px)`
+    .replace(/\s*([{}:;,>~])\s*/g, "$1")
     .replace(/;}/g, "}")
-    .replace(/<\/style>/gi, "<\\/style>")
+    .replace(/\0(\d+)\0/g, (_, i) => quoted[i])
     .trim();
+};
 
 // React element detection (safe for custom objects too)
 const isReactElement = (val) =>
@@ -115,9 +131,9 @@ const jsx = (tag, { children, ...props } = {}) => {
     children = raw(content);
   }
 
-  // style: minified raw content
+  // style: raw content, minified only when asked for with <style minify>
   if (tag === "style" && typeof children === "string") {
-    children = raw(minifyCss(children));
+    children = raw(escapeCss(props?.minify ? minifyCss(children) : children));
   }
 
   // dangerouslySetInnerHTML
@@ -139,6 +155,8 @@ const jsx = (tag, { children, ...props } = {}) => {
   // attributes
   let attrStr = Object.entries(props || {})
     .filter(([k]) => k !== "dangerouslySetInnerHTML")
+    // `minify` drives <style>, it isn't an HTML attribute
+    .filter(([k]) => !(tag === "style" && k === "minify"))
     .filter(([k, v]) => !/on[A-Z]/.test(k) && typeof v !== "function")
     .filter(([, v]) => v !== false)
     .map(([k, v]) => {

package/src/jsx/jsx-runtime.test.jsx

@@ -299,52 +299,115 @@ describe("script tag", () => {
 });
 
 describe("style tag", () => {
-  it("renders style content", () => {
+  it("renders the CSS as written", () => {
     expect(<style>{"body { color: red; }"}</style>).toRender(
-      "<style>body{color:red}</style>",
+      "<style>body { color: red; }</style>",
     );
   });
 
-  it("minifies whitespace in style content", () => {
-    expect(
-      <style>{"body {\n  color:   red;\n  margin: 0;\n}"}</style>,
-    ).toRender("<style>body{color:red;margin:0}</style>");
-  });
-
-  it("strips CSS comments", () => {
-    expect(
-      <style>{"/* reset */ body { margin: 0; } /* end */"}</style>,
-    ).toRender("<style>body{margin:0}</style>");
-  });
-
-  it("preserves child combinator in selectors", () => {
-    expect(<style>{":not(pre) > code { background: none; }"}</style>).toRender(
-      "<style>:not(pre)>code{background:none}</style>",
+  it("keeps comments and whitespace without `minify`", () => {
+    expect(<style>{"/* reset */ body {\n  margin: 0;\n}"}</style>).toRender(
+      "<style>/* reset */ body {\n  margin: 0;\n}</style>",
     );
   });
 
-  it("preserves sibling combinators in selectors", () => {
-    expect(
-      <style>{"h2 + p { margin: 0; } h2 ~ p { color: red; }"}</style>,
-    ).toRender("<style>h2+p{margin:0}h2~p{color:red}</style>");
+  it("sends the content raw, like <script>", () => {
+    // Encoding it would break the CSS, so user input must never reach here
+    expect(<style>{"a::after { content: '>'; }"}</style>).toRender(
+      "<style>a::after { content: '>'; }</style>",
+    );
   });
 
-  it("removes spaces around braces, colons, and semicolons", () => {
-    expect(<style>{"a { color : red ; font-size : 1em ; }"}</style>).toRender(
-      "<style>a{color:red;font-size:1em}</style>",
+  it("escapes </style> either way, so it can't close the tag early", () => {
+    expect(<style>{"a { content: '</style>'; }"}</style>).toRender(
+      "<style>a { content: '<\\/style>'; }</style>",
+    );
+    expect(<style minify>{"a { content: '</style>'; }"}</style>).toRender(
+      "<style>a{content:'<\\/style>'}</style>",
     );
   });
 
-  it("removes trailing semicolon before closing brace", () => {
-    expect(<style>{"p { margin: 0; padding: 0; }"}</style>).toRender(
-      "<style>p{margin:0;padding:0}</style>",
+  it("never renders `minify` as an attribute", () => {
+    expect(<style minify>{"a { color: red; }"}</style>).toRender(
+      "<style>a{color:red}</style>",
     );
   });
 
-  it("does not break </style> injection", () => {
-    expect(<style>{"a { content: '</style>'; }"}</style>).toRender(
-      "<style>a{content:'<\\/style>'}</style>",
-    );
+  describe("with `minify`", () => {
+    it("minifies whitespace in style content", () => {
+      expect(
+        <style minify>{"body {\n  color:   red;\n  margin: 0;\n}"}</style>,
+      ).toRender("<style>body{color:red;margin:0}</style>");
+    });
+
+    it("strips CSS comments", () => {
+      expect(
+        <style minify>{"/* reset */ body { margin: 0; } /* end */"}</style>,
+      ).toRender("<style>body{margin:0}</style>");
+    });
+
+    it("preserves child combinator in selectors", () => {
+      expect(
+        <style minify>{":not(pre) > code { background: none; }"}</style>,
+      ).toRender("<style>:not(pre)>code{background:none}</style>");
+    });
+
+    it("preserves sibling combinators in selectors", () => {
+      // `+` keeps a single space, since removing it breaks calc() below
+      expect(
+        <style minify>
+          {"h2  +  p { margin: 0; } h2 ~ p { color: red; }"}
+        </style>,
+      ).toRender("<style>h2 + p{margin:0}h2~p{color:red}</style>");
+    });
+
+    it("keeps the spaces calc() needs around + and -", () => {
+      // `calc(100%+10px)` is invalid CSS: the operators need their whitespace
+      expect(<style minify>{"a { top: calc(100% + 10px); }"}</style>).toRender(
+        "<style>a{top:calc(100% + 10px)}</style>",
+      );
+      expect(<style minify>{"a { top: calc(100% - 10px); }"}</style>).toRender(
+        "<style>a{top:calc(100% - 10px)}</style>",
+      );
+    });
+
+    it("removes spaces around braces, colons, and semicolons", () => {
+      expect(
+        <style minify>{"a { color : red ; font-size : 1em ; }"}</style>,
+      ).toRender("<style>a{color:red;font-size:1em}</style>");
+    });
+
+    it("removes trailing semicolon before closing brace", () => {
+      expect(<style minify>{"p { margin: 0; padding: 0; }"}</style>).toRender(
+        "<style>p{margin:0;padding:0}</style>",
+      );
+    });
+
+    it("leaves quoted values alone", () => {
+      // The spaces and delimiters in here are content, not formatting
+      expect(<style minify>{'a::after { content: ", "; }'}</style>).toRender(
+        '<style>a::after{content:", "}</style>',
+      );
+      expect(
+        <style minify>{'a::after { content: "a; b: c"; }'}</style>,
+      ).toRender('<style>a::after{content:"a; b: c"}</style>');
+      expect(
+        <style minify>{"a::after { content: 'x  y'; }"}</style>,
+      ).toRender("<style>a::after{content:'x  y'}</style>");
+    });
+
+    it("handles an escaped quote inside a value", () => {
+      expect(
+        <style minify>{'a::after { content: "say \\" hi"; }'}</style>,
+      ).toRender('<style>a::after{content:"say \\" hi"}</style>');
+    });
+
+    it("still strips a comment written inside a value", () => {
+      // Comments are stripped first, unconditionally
+      expect(
+        <style minify>{'a::after { content: "/* hi */"; }'}</style>,
+      ).toRender('<style>a::after{content:""}</style>');
+    });
   });
 });