Merge pull request #42 from OnedocLabs/ffo-173-improve-support-for-dark-selectors-in-react-print

Improves handling of pseudo selectors with Tailwind

Author: AugusteLef

package-lock.json

@@ -84,6 +84,7 @@
     "webdriverio": "^8.34.1"
   },
   "dependencies": {
+    "@csstools/postcss-is-pseudo-class": "^4.0.8",
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.3",
     "@emotion/server": "^11.11.0",

package.json

@@ -62,15 +62,20 @@ export const compile = async (
 
   const { default: postcss } = await import("postcss");
   const { default: cssvariables } = await import("postcss-css-variables");
+  const { default: isPseudoClass } = await import(
+    // @ts-ignore
+    "@csstools/postcss-is-pseudo-class"
+  );
   // @ts-ignore
   const { default: logical } = await import("postcss-logical");
 
-  const result = await postcss([cssvariables(), logical()]).process(
-    mergedStylesheet,
-    {
-      from: undefined,
-    }
-  );
+  const result = await postcss([
+    cssvariables(),
+    logical(),
+    isPseudoClass(),
+  ]).process(mergedStylesheet, {
+    from: undefined,
+  });
 
   return `<style>${result.css}</style>${html}`;
 };
@@ -85,13 +90,16 @@ export const __docConfig: DocConfig = {
       server: true,
       client: true,
       examples: {
-        default:{
+        default: {
           description: `A simple function to compile a React component to an HTML string with the Onedoc print styles.
           \`\`\`jsx
           const html = await compile(<Component />);
           \`\`\``,
-          template: <Tailwind><div className="bg-red-400">Hello World!</div></Tailwind>,
-
+          template: (
+            <Tailwind>
+              <div className="bg-red-400">Hello World!</div>
+            </Tailwind>
+          ),
         },
         emotion: {
           description: `Pass \`{ emotion: true }\` as the second compile option to merge and extract critical CSS using Emotion. Some libraries such as Chakra UI require this option to work correctly.

src/compile/compile.tsx

@@ -19,6 +19,9 @@ import { CSS } from "../css/css";
 import preflightCss from "../../node_modules/tailwindcss/lib/css/preflight.css?raw";
 import { createTailwindcssPlugin } from "@mhsdesign/jit-browser-tailwindcss";
 
+// @ts-ignore
+import isPseudoClass from "@csstools/postcss-is-pseudo-class";
+
 export const Tailwind = ({
   children,
   config,
@@ -53,6 +56,7 @@ export const Tailwind = ({
       content: [{ content: markup, extension: "html" }],
     }),
     // postcssCssVariables,
+    isPseudoClass(),
     postcssColorFunctionalNotation,
   ]).process(
     String.raw`
@@ -89,7 +93,8 @@ The supported Tailwind version is 3.3.2 due to changes in the PostCSS plugin syn
       server: true,
       examples: {
         default: {
-          description: "Use a simple Tailwind tag to support Tailwind in your document.",
+          description:
+            "Use a simple Tailwind tag to support Tailwind in your document.",
           template: (
             <Tailwind>
               <div className="bg-gradient-to-tr from-blue-500 to-blue-700 rounded-2xl p-12"></div>

src/tailwind/tailwind.tsx

@@ -25,3 +25,21 @@ test("works with tailwind", async () => {
 
   expect(html).toContain("rgba(239, 68, 68");
 });
+
+test("works with tailwind dark", async () => {
+  const TestComponent = () => (
+    <Tailwind
+      config={{
+        darkMode: "class",
+      }}
+    >
+      <div className="dark:bg-red-500">Test</div>
+    </Tailwind>
+  );
+
+  const html = await compile(<TestComponent />);
+
+  console.log(html);
+
+  expect(html).toContain("rgba(239, 68, 68");
+});