Skip to content

Commit

Permalink
feat: Implement tailwind preview with code lens (#10)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kdy1
kdy1 authored Sep 21, 2023
1 parent d76df42 commit 1a539ad
Show file tree
Hide file tree
Showing 3 changed files with 3 additions and 41 deletions.
5 changes: 1 addition & 4 deletions exts/vscode-tailwind-preview/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,12 +75,9 @@
"@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",
"postcss": "^8.4.30",
"postcss-load-config": "^4.0.1"
"moo": "^0.5.2"
}
}
30 changes: 2 additions & 28 deletions exts/vscode-tailwind-preview/src/extension.ts
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,7 @@
import * as vscode from "vscode";
import * as path from "path";
import postcss from "postcss";
import postcssrc from "postcss-load-config";
import tailwindcss from "tailwindcss";
import {
findMatchingTag,
getTagForPosition,
getTagsForPosition,
getValidTags,
} from "./tokenizer/tagMatcher";
import { getTagForPosition, getValidTags } from "./tokenizer/tagMatcher";
import { parseTags } from "./tokenizer/tagParser";
import resolveConfig from "tailwindcss/resolveConfig";
import { Match } from "./tokenizer/interfaces";

const COMMAND_OPEN_PREVIEW = "dudy.tailwind-preview.open";
Expand All @@ -37,27 +28,10 @@ async function renderTag(
return [htmlContent, range];
}

const css = postcss.parse(
`
@tailwind base;
@tailwind components;
@tailwind utilities;
`,
{ from: document.fileName }
);

// console.log('result', css);
const postcssConfig = await postcssrc({}, document.fileName);

const plugins = postcssConfig.plugins;
const cssResult = await postcss(plugins).process(css);

const finalHtml = `
<html>
<head>
<style>
${cssResult.css}
</style>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
${htmlContent}
Expand Down
9 changes: 0 additions & 9 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 comment on commit 1a539ad

@vercel
Copy link

@vercel vercel bot commented on 1a539ad Sep 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

swc-plugins – ./apps/swc-plugins

swc-plugins-git-main-dudy.vercel.app
swc-plugins.vercel.app
swc-plugins-dudy.vercel.app
plugins.swc.rs

Please sign in to comment.