feat: Implement vscode extension for previewing tailwind element from…

… IDE (#7)

Currently, it does not support CSS styling, but I think it's better to split the PR.

.gitignore

@@ -20,4 +20,6 @@ package-lock.json
 yarn/lock
 
 
-*.tsbuildinfo
+*.tsbuildinfo
+
+out/

exts/vscode-tailwind-preview/.eslintrc.js

@@ -0,0 +1,16 @@
+/**@type {import('eslint').Linter.Config} */
+// eslint-disable-next-line no-undef
+module.exports = {
+  root: true,
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint"],
+  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  ignorePatterns: ["media"],
+  rules: {
+    semi: [2, "always"],
+    "@typescript-eslint/no-unused-vars": 0,
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/explicit-module-boundary-types": 0,
+    "@typescript-eslint/no-non-null-assertion": 0,
+  },
+};

exts/vscode-tailwind-preview/.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+  // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+  // List of extensions which should be recommended for users of this workspace.
+  "recommendations": ["dbaeumer.vscode-eslint"]
+}

exts/vscode-tailwind-preview/.vscode/launch.json

@@ -0,0 +1,21 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Run Extension",
+      "type": "extensionHost",
+      "request": "launch",
+      "runtimeExecutable": "${execPath}",
+      "args": [
+        "--disable-extensions",
+        "--extensionDevelopmentPath=${workspaceRoot}"
+      ],
+      "outFiles": ["${workspaceFolder}/out/**/*.js"],
+      "preLaunchTask": "npm: watch"
+    }
+  ]
+}

exts/vscode-tailwind-preview/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "editor.insertSpaces": false,
+  "editor.formatOnSave": true
+}

exts/vscode-tailwind-preview/.vscode/tasks.json

@@ -0,0 +1,20 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "watch",
+      "problemMatcher": "$tsc-watch",
+      "isBackground": true,
+      "presentation": {
+        "reveal": "never"
+      },
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    }
+  ]
+}

exts/vscode-tailwind-preview/README.md

@@ -0,0 +1,7 @@
+# vscode-tailwind-preview
+
+# License
+
+- The syntax files in `./syntaxes` are copied from [tlent/jest-snapshot-language-support](https://github.com/tlent/jest-snapshot-language-support).
+
+- The lexer codes in `./src/tokenizer` are copiled from [vincaslt/vscode-highlight-matching-tag](https://github.com/vincaslt/vscode-highlight-matching-tag).

exts/vscode-tailwind-preview/media/jsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es2020",
+    "jsx": "preserve",
+    "checkJs": true,
+    "strict": true,
+    "strictFunctionTypes": true,
+    "lib": ["dom"]
+  },
+  "exclude": ["node_modules", "**/node_modules/*"],
+  "typeAcquisition": {
+    "include": ["@types/vscode-webview"]
+  }
+}

exts/vscode-tailwind-preview/media/main.js

@@ -0,0 +1,45 @@
+// This script will be run within the webview itself
+// It cannot access the main VS Code APIs directly.
+
+(function () {
+  const vscode = acquireVsCodeApi();
+
+  const oldState = /** @type {{ count: number} | undefined} */ (
+    vscode.getState()
+  );
+
+  const counter = /** @type {HTMLElement} */ (
+    document.getElementById("lines-of-code-counter")
+  );
+  console.log("Initial state", oldState);
+
+  let currentCount = (oldState && oldState.count) || 0;
+  counter.textContent = `${currentCount}`;
+
+  setInterval(() => {
+    counter.textContent = `${currentCount++} `;
+
+    // Update state
+    vscode.setState({ count: currentCount });
+
+    // Alert the extension when the cat introduces a bug
+    if (Math.random() < Math.min(0.001 * currentCount, 0.05)) {
+      // Send a message back to the extension
+      vscode.postMessage({
+        command: "alert",
+        text: "🐛  on line " + currentCount,
+      });
+    }
+  }, 100);
+
+  // Handle messages sent from the extension to the webview
+  window.addEventListener("message", (event) => {
+    const message = event.data; // The json data that the extension sent
+    switch (message.command) {
+      case "refactor":
+        currentCount = Math.ceil(currentCount * 0.5);
+        counter.textContent = `${currentCount}`;
+        break;
+    }
+  });
+})();

exts/vscode-tailwind-preview/media/reset.css

@@ -0,0 +1,30 @@
+html {
+  box-sizing: border-box;
+  font-size: 13px;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ol,
+ul {
+  margin: 0;
+  padding: 0;
+  font-weight: normal;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}

exts/vscode-tailwind-preview/media/vscode.css

@@ -0,0 +1,91 @@
+:root {
+  --container-padding: 20px;
+  --input-padding-vertical: 6px;
+  --input-padding-horizontal: 4px;
+  --input-margin-vertical: 4px;
+  --input-margin-horizontal: 0;
+}
+
+body {
+  padding: 0 var(--container-padding);
+  color: var(--vscode-foreground);
+  font-size: var(--vscode-font-size);
+  font-weight: var(--vscode-font-weight);
+  font-family: var(--vscode-font-family);
+  background-color: var(--vscode-editor-background);
+}
+
+ol,
+ul {
+  padding-left: var(--container-padding);
+}
+
+body > *,
+form > * {
+  margin-block-start: var(--input-margin-vertical);
+  margin-block-end: var(--input-margin-vertical);
+}
+
+*:focus {
+  outline-color: var(--vscode-focusBorder) !important;
+}
+
+a {
+  color: var(--vscode-textLink-foreground);
+}
+
+a:hover,
+a:active {
+  color: var(--vscode-textLink-activeForeground);
+}
+
+code {
+  font-size: var(--vscode-editor-font-size);
+  font-family: var(--vscode-editor-font-family);
+}
+
+button {
+  border: none;
+  padding: var(--input-padding-vertical) var(--input-padding-horizontal);
+  width: 100%;
+  text-align: center;
+  outline: 1px solid transparent;
+  outline-offset: 2px !important;
+  color: var(--vscode-button-foreground);
+  background: var(--vscode-button-background);
+}
+
+button:hover {
+  cursor: pointer;
+  background: var(--vscode-button-hoverBackground);
+}
+
+button:focus {
+  outline-color: var(--vscode-focusBorder);
+}
+
+button.secondary {
+  color: var(--vscode-button-secondaryForeground);
+  background: var(--vscode-button-secondaryBackground);
+}
+
+button.secondary:hover {
+  background: var(--vscode-button-secondaryHoverBackground);
+}
+
+input:not([type="checkbox"]),
+textarea {
+  display: block;
+  width: 100%;
+  border: none;
+  font-family: var(--vscode-font-family);
+  padding: var(--input-padding-vertical) var(--input-padding-horizontal);
+  color: var(--vscode-input-foreground);
+  outline-color: var(--vscode-input-border);
+  background-color: var(--vscode-input-background);
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--vscode-input-placeholderForeground);
+}

exts/vscode-tailwind-preview/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@dudykr/tailwind-preview",
+  "description": "Cat Coding - A Webview API Sample",
+  "version": "0.0.1",
+  "publisher": "Dudy",
+  "private": true,
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dudykr/oss"
+  },
+  "engines": {
+    "vscode": "^1.74.0"
+  },
+  "categories": [
+    "Other"
+  ],
+  "activationEvents": [
+    "onLanguage:jest-snapshot",
+    "onLanguage:typescript",
+    "onLanguage:javascript",
+    "onLanguage:html"
+  ],
+  "main": "./out/extension.js",
+  "contributes": {
+    "languages": [
+      {
+        "id": "jest-snapshot",
+        "aliases": [
+          "Jest Snapshot",
+          "jest-snapshot"
+        ],
+        "extensions": [
+          ".js.snap",
+          ".jsx.snap",
+          ".ts.snap",
+          ".tsx.snap"
+        ]
+      }
+    ],
+    "grammars": [
+      {
+        "language": "jest-snapshot",
+        "scopeName": "source.jest.snap",
+        "path": "./syntaxes/jest-snapshot.tmLanguage"
+      },
+      {
+        "scopeName": "jest-snapshot.injection",
+        "path": "./syntaxes/injection.tmLanguage.json",
+        "embeddedLanguages": {
+          "meta.embedded.inline.snap": "source.jest.snap"
+        },
+        "injectTo": [
+          "source.js",
+          "source.jsx",
+          "source.js.jsx",
+          "source.ts",
+          "source.tsx"
+        ]
+      }
+    ],
+    "commands": []
+  },
+  "scripts": {
+    "vscode:prepublish": "npm run compile",
+    "compile": "tsc -p ./",
+    "lint": "eslint \"src/**/*.ts\"",
+    "watch": "tsc -w -p ./"
+  },
+  "devDependencies": {
+    "@types/moo": "^0.5.6",
+    "@types/node": "^16.18.34",
+    "@types/vscode": "^1.73.0",
+    "@types/vscode-webview": "^1.57.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.0",
+    "@typescript-eslint/parser": "^6.7.0",
+    "eslint": "^8.26.0",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.2.2"
+  },
+  "dependencies": {
+    "moo": "^0.5.2"
+  }
+}