facebookincubator · slorber · Apr 4, 2024 · Apr 2, 2024 · Apr 2, 2024 · Apr 2, 2024
diff --git a/.github/workflows/build-size.yml b/.github/workflows/build-size.yml
@@ -15,6 +15,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+      - run: corepack enable
       - uses: preactjs/compressed-size-action@v2
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -10,6 +10,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+      - run: corepack enable
       - name: Install
         run: yarn install
       - name: Prettier

diff --git a/.github/workflows/post-diff-comment.yml b/.github/workflows/post-diff-comment.yml
@@ -17,6 +17,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+      - run: corepack enable
 
       - name: Compute dist diff
         id: dists

diff --git a/.gitignore b/.gitignore
@@ -71,3 +71,18 @@ packages/core/demo/js
 # Dist folders
 packages/core/dist
 packages/core/dist-branch
+
+# Yarn
+# https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
+.yarn/*
+website/.yarn/*
+!.yarn/releases
+!.yarn/patches
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+# if you are NOT using Zero-installs, then:
+# comment the following lines
+#!.yarn/cache
+# and uncomment the following lines
+.pnp.*
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -0,0 +1 @@
+nodeLinker: node-modules
diff --git a/package.json b/package.json
@@ -19,18 +19,20 @@
     "website:build": "yarn workspace infima-website build",
     "website:serve": "yarn workspace infima-website serve",
     "website:deploy": "yarn workspace infima-website deploy",
-    "lock:update": "npx --yes yarn-deduplicate",
+    "website:clear": "yarn workspace infima-website clear",
+    "lock:update": "yarn dedupe --mode=update-lockfile",
     "postinstall": "yarn lock:update",
     "prepare": "husky install"
   },
   "devDependencies": {
-    "husky": "^8.0.1",
-    "lint-staged": "^13.0.3",
-    "prettier": "^2.7.1",
-    "stylelint": "^15.10.1",
-    "stylelint-copyright": "^2.0.0-rc.1",
-    "stylelint-declaration-block-no-ignored-properties": "^2.5.0",
-    "stylelint-high-performance-animation": "^1.6.0",
-    "stylelint-order": "^5.0.0"
-  }
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
+    "stylelint": "^16.3.1",
+    "stylelint-copyright": "^3.2.0",
+    "stylelint-declaration-block-no-ignored-properties": "^2.8.0",
+    "stylelint-high-performance-animation": "^1.10.0",
+    "stylelint-order": "^6.0.4"
+  },
+  "packageManager": "[email protected]"
 }
diff --git a/packages/core/demo/index.html b/packages/core/demo/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

diff --git a/packages/core/styles/layout/spacing.pcss b/packages/core/styles/layout/spacing.pcss
@@ -7,8 +7,7 @@
 
 @each $type in (margin, padding) {
   @each $size, $value in (none, xs, sm, md, lg, xl),
-    (0, 0.25rem, 0.5rem, 1rem, 2rem, 5rem)
-  {
+    (0, 0.25rem, 0.5rem, 1rem, 2rem, 5rem) {
     .$(type)--$(size) {
       $(type): $(value) !important;
     }

diff --git a/website/package.json b/website/package.json
@@ -15,11 +15,14 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.3.1",
-    "@docusaurus/preset-classic": "^2.3.1",
-    "@docusaurus/types": "^2.3.1",
-    "clsx": "^1.2.1",
+    "@docusaurus/core": "^3.2.0",
+    "@docusaurus/preset-classic": "^3.2.0",
+    "@docusaurus/types": "^3.2.0",
+    "@mdx-js/react": "^3.0.1",
+    "clsx": "^2.1.0",
+    "prism-react-renderer": "^2.3.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "unist-util-visit": "^5.0.0"
   }
 }
diff --git a/website/src/remark/playground.js b/website/src/remark/playground.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const visit = require('unist-util-visit');
+import {visit} from 'unist-util-visit';
 
 const codeBlockTitleRegex =
   /containerClassName=(?<quote>["'])(?<containerClassName>.*?)\1/;
@@ -16,13 +16,70 @@ module.exports = function plugin() {
       if (node.lang === 'html') {
         const containerClassName =
           node.meta?.match(codeBlockTitleRegex)?.groups.containerClassName;
-        parent.children.splice(parent.children.indexOf(node), 0, {
-          type: 'jsx',
-          value: `<div${
-            containerClassName ? ` className="${containerClassName}"` : ' '
-          } dangerouslySetInnerHTML={{__html: \`${node.value}\`}}/><br />`,
-        });
-        return index + 2;
+
+        const html = node.value;
+
+        const playgroundElement = {
+          type: 'mdxJsxFlowElement',
+          name: 'div',
+          attributes: [
+            {
+              type: 'mdxJsxAttribute',
+              name: 'className',
+              value: containerClassName,
+            },
+            {
+              type: 'mdxJsxAttribute',
+              name: 'dangerouslySetInnerHTML',
+              value: {
+                type: 'mdxJsxAttributeValueExpression',
+                data: {
+                  estree: {
+                    type: 'Program',
+                    body: [
+                      {
+                        type: 'ExpressionStatement',
+                        expression: {
+                          type: 'ObjectExpression',
+                          properties: [
+                            {
+                              type: 'Property',
+                              kind: 'init',
+                              key: {
+                                type: 'Identifier',
+                                name: '__html',
+                              },
+                              value: {
+                                type: 'Literal',
+                                value: `\`${html}\``,
+                                raw: `\`${html}\``,
+                              },
+                            },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                },
+              },
+            },
+          ],
+        };
+
+        const lineBreakElement = {
+          type: 'mdxJsxFlowElement',
+          name: 'br',
+        };
+
+        const elementsToInsert = [playgroundElement, lineBreakElement];
+
+        parent.children.splice(
+          parent.children.indexOf(node),
+          0,
+          ...elementsToInsert,
+        );
+
+        return index + elementsToInsert.length + 1;
       }
     });
   };