Merge pull request #47 from OnedocLabs/add-support-for-specific-descriptors

Adds support for CSS > and :where selectors

Author: Titou325

docs/components/compile/compile.mdx

@@ -19,7 +19,7 @@ A simple function to compile a React component to an HTML string with the Onedoc
           const html = await compile(<Component />);
           ```
 
-<Frame background="subtle"><img src="../../images/previews/compile-c4caf51a/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/compile-5570a5ba/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">

docs/components/signature/field.mdx

@@ -46,7 +46,7 @@ Supported fields:
 | signerAttachment | Signer attachment field |
 | signerAttachmentOptional | Optional signer attachment field |
 
-<Frame background="subtle"><img src="../../images/previews/field-da48fb0c/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/field-0dfd9c56/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">

docs/components/tailwind/tailwind.mdx

@@ -16,7 +16,7 @@ Support
 
 Use a simple Tailwind tag to support Tailwind in your document.
 
-<Frame background="subtle"><img src="../../images/previews/tailwind-45926711/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/tailwind-319e2653/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
@@ -57,7 +57,7 @@ body {
 
 You can also pass a custom Tailwind config to the Tailwind component.
 
-<Frame background="subtle"><img src="../../images/previews/tailwind-15d3ba0e/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/tailwind-bc09d01e/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">

docs/images/previews/compile-c4caf51a/document.1.jpg renamed to docs/images/previews/compile-5570a5ba/document.1.jpg

@@ -8,12 +8,12 @@ icon: list
 <CardGroup>
  <Card title="Scientific" href="../../../ui/templates/scientific-report">
       <div style={{ marginTop: "1rem", borderRadius: "0.25rem", overflow: "hidden" }}>
-        <img src="../images/previews/ui-templates-scientific-report-de8367bc/document.1.jpg"/>
+        <img src="../images/previews/ui-templates-scientific-report-131b6f8b/document.1.jpg"/>
       </div>
     </Card>
  <Card title="With charts" href="../../../ui/templates/report-charts">
       <div style={{ marginTop: "1rem", borderRadius: "0.25rem", overflow: "hidden" }}>
-        <img src="../images/previews/ui-templates-report-charts-1339f0ec/document.1.jpg"/>
+        <img src="../images/previews/ui-templates-report-charts-93a76b2a/document.1.jpg"/>
       </div>
     </Card>
 </CardGroup>
@@ -23,7 +23,7 @@ icon: list
 <CardGroup>
  <Card title="Receipt" href="../../../ui/templates/receipt">
       <div style={{ marginTop: "1rem", borderRadius: "0.25rem", overflow: "hidden" }}>
-        <img src="../images/previews/ui-templates-receipt-0d823fc6/document.1.jpg"/>
+        <img src="../images/previews/ui-templates-receipt-976ba276/document.1.jpg"/>
       </div>
     </Card>
 </CardGroup>
@@ -33,7 +33,7 @@ icon: list
 <CardGroup>
  <Card title="NDA Markdown" href="../../../ui/templates/nda-markdown">
       <div style={{ marginTop: "1rem", borderRadius: "0.25rem", overflow: "hidden" }}>
-        <img src="../images/previews/ui-templates-nda-markdown-daf9ece1/document.1.jpg"/>
+        <img src="../images/previews/ui-templates-nda-markdown-3a264b41/document.1.jpg"/>
       </div>
     </Card>
 </CardGroup>
@@ -43,12 +43,12 @@ icon: list
 <CardGroup>
  <Card title="Basic" href="../../../ui/templates/invoice">
       <div style={{ marginTop: "1rem", borderRadius: "0.25rem", overflow: "hidden" }}>
-        <img src="../images/previews/ui-templates-invoice-8da74a96/document.1.jpg"/>
+        <img src="../images/previews/ui-templates-invoice-068b91ff/document.1.jpg"/>
       </div>
     </Card>
  <Card title="Advanced with QR" href="../../../ui/templates/invoice-advanced">
       <div style={{ marginTop: "1rem", borderRadius: "0.25rem", overflow: "hidden" }}>
-        <img src="../images/previews/ui-templates-invoice-advanced-c81d4542/document.1.jpg"/>
+        <img src="../images/previews/ui-templates-invoice-advanced-dfd5a7fc/document.1.jpg"/>
       </div>
     </Card>
 </CardGroup>

docs/images/previews/compile-c4caf51a/document.pdf renamed to docs/images/previews/compile-5570a5ba/document.pdf

@@ -4,7 +4,7 @@ icon: file-invoice
 category: Invoices
 ---
 
-<Frame background="subtle"><img src="../../images/previews/ui-templates-invoice-advanced-c81d4542/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/ui-templates-invoice-advanced-dfd5a7fc/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 ```jsx
 import { Footnote, PageBottom, Tailwind, CSS } from "@fileforge/react-print";

docs/images/previews/field-da48fb0c/document.1.jpg renamed to docs/images/previews/field-0dfd9c56/document.1.jpg

@@ -4,7 +4,7 @@ icon: file-invoice
 category: Invoices
 ---
 
-<Frame background="subtle"><img src="../../images/previews/ui-templates-invoice-8da74a96/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/ui-templates-invoice-068b91ff/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 ```jsx
 import { Footnote, PageBottom, Tailwind } from "@fileforge/react-print";

docs/images/previews/field-da48fb0c/document.pdf renamed to docs/images/previews/field-0dfd9c56/document.pdf

@@ -4,7 +4,7 @@ icon: file-contract
 category: NDA
 ---
 
-<Frame background="subtle"><img src="../../images/previews/ui-templates-nda-markdown-daf9ece1/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/ui-templates-nda-markdown-3a264b41/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 ```jsx
 import React from "react";

docs/images/previews/tailwind-45926711/document.1.jpg renamed to docs/images/previews/tailwind-319e2653/document.1.jpg

@@ -4,7 +4,7 @@ icon: receipt
 category: Receipts
 ---
 
-<Frame background="subtle"><img src="../../images/previews/ui-templates-receipt-0d823fc6/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/ui-templates-receipt-976ba276/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 ```jsx
 import { Footnote, Tailwind } from "@fileforge/react-print";

docs/images/previews/tailwind-45926711/document.pdf renamed to docs/images/previews/tailwind-319e2653/document.pdf

@@ -4,7 +4,7 @@ icon: chart-pie
 category: Reports
 ---
 
-<Frame background="subtle"><img src="../../images/previews/ui-templates-report-charts-1339f0ec/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/ui-templates-report-charts-93a76b2a/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 ```jsx
 import { Footnote, PageBottom, Tailwind, CSS } from "@fileforge/react-print";

docs/images/previews/tailwind-15d3ba0e/document.1.jpg renamed to docs/images/previews/tailwind-bc09d01e/document.1.jpg

@@ -4,7 +4,7 @@ icon: flask
 category: Reports
 ---
 
-<Frame background="subtle"><img src="../../images/previews/ui-templates-scientific-report-de8367bc/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/ui-templates-scientific-report-131b6f8b/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 ```jsx
 import React, { createContext, useEffect, useState } from "react";

docs/images/previews/tailwind-15d3ba0e/document.pdf renamed to docs/images/previews/tailwind-bc09d01e/document.pdf

@@ -4,6 +4,8 @@ import { encode } from "html-entities";
 const allowedEntities = {
   "'": "'",
   """: '"',
+  ">": ">",
+  ":where": ":is", // This may introduce specificity issues, but there is no workaround supported by the engine.
 };
 
 export const CSS = ({ children }: { children: string }) => {