First commit

Author: anonymous

README.md

@@ -1,46 +1,52 @@
-# esbuild-plugin-sass
+(Huge thanks to https://github.com/koluch/esbuild-plugin-sass which this is based off)
 
-![Node.js CI](https://github.com/koluch/esbuild-plugin-sass/workflows/Node.js%20CI/badge.svg)
+# esbuild-plugin-postcss
 
-Plugin for [esbuild](https://esbuild.github.io/) to support SASS styles
+![Node.js CI](https://github.com/koluch/esbuild-plugin-postcss/workflows/Node.js%20CI/badge.svg)
+
+Plugin for [esbuild](https://esbuild.github.io/) to support PostCSS
 
 ## Install
 
 ```bash
-npm i esbuild esbuild-plugin-sass
+npm i esbuild esbuild-plugin-postcss
 ```
 
 ## Usage example
 
-Create file `src/test.scss`:
+Create file `src/test.css`:
 
-```scss
-body {
-  &.isRed {
-    background: red;
-  }
+```css
+input[type="text"] {
+  border-radius: 1px;
 }
 ```
 
 Create file `src/index.js`:
 
 ```js
-import './test.scss'
+import "./test.css";
 ```
 
-
 Create file `build.js`:
 
 ```js
-const esbuild = require('esbuild');
-const sassPlugin = require('esbuild-plugin-sass')
+const esbuild = require("esbuild");
+const autoprefixer = require("autoprefixer");
+const postCssPlugin = require("esbuild-plugin-postcss");
 
-esbuild.build({
-    entryPoints: ['src/index.js'],
+esbuild
+  .build({
+    entryPoints: ["src/index.js"],
     bundle: true,
-    outfile: 'bundle.js',
-    plugins: [sassPlugin()],
-}).catch((e) => console.error(e.message))
+    outfile: "bundle.js",
+    plugins: [
+      postCssPlugin({
+        plugins: [autoprefixer],
+      }),
+    ],
+  })
+  .catch((e) => console.error(e.message));
 ```
 
 Run:
@@ -49,10 +55,4 @@ Run:
 node build.js
 ```
 
-File named `bundle.css` with following content will be created:
-
-```css
-body.isRed {
-  background: red;
-}
-```
+File named `bundle.css` with appropriate postcss plugins applied.

index.js

@@ -1,21 +1,20 @@
 const fs = require("fs-extra");
-const sass = require("sass");
+const postcss = require("postcss");
 const util = require("util");
 const tmp = require("tmp");
 const path = require("path");
-const csstree = require("css-tree");
 
-const sassRender = util.promisify(sass.render);
+const readFile = util.promisify(fs.readFile);
 const writeFile = util.promisify(fs.writeFile);
 const ensureDir = util.promisify(fs.ensureDir);
 
-module.exports = (options = {}) => ({
-  name: "sass",
+module.exports = (options = { plugins: [] }) => ({
+  name: "postcss",
   setup: function (build) {
     const { rootDir = options.rootDir || process.cwd() } = options;
     const tmpDirPath = tmp.dirSync().name;
     build.onResolve(
-      { filter: /.\.(scss|sass)$/, namespace: "file" },
+      { filter: /.\.(css)$/, namespace: "file" },
       async (args) => {
         const sourceFullPath = path.resolve(args.resolveDir, args.path);
         const sourceExt = path.extname(sourceFullPath);
@@ -27,14 +26,15 @@ module.exports = (options = {}) => ({
         const tmpFilePath = path.resolve(tmpDir, `${sourceBaseName}.css`);
         await ensureDir(tmpDir);
 
-        // Compile SASS to CSS
-        let css = (await sassRender({ file: sourceFullPath })).css.toString();
+        const css = await readFile(sourceFullPath);
 
-        // Replace all relative urls
-        css = await replaceUrls(css, tmpFilePath, sourceDir, rootDir);
+        const result = postcss(options.plugins).process(css, {
+          from: sourceFullPath,
+          to: tmpFilePath,
+        });
 
         // Write result file
-        await writeFile(tmpFilePath, css);
+        await writeFile(tmpFilePath, result.css);
 
         return {
           path: tmpFilePath,
@@ -43,76 +43,3 @@ module.exports = (options = {}) => ({
     );
   },
 });
-
-async function replaceUrls(css, newCssFileName, sourceDir, rootDir) {
-  const ast = csstree.parse(css);
-
-  csstree.walk(ast, {
-    enter(node) {
-      if (node.type === "Url") {
-        const value = node.value;
-        const stringValue = value.value;
-
-        let normalizedUrl;
-        if (value.type === "String") {
-          const match = stringValue.match(/^['"](.*)["']$/s);
-          if (match) {
-            normalizedUrl = match[1];
-          } else {
-            normalizedUrl = stringValue;
-          }
-        } else {
-          normalizedUrl = stringValue;
-        }
-
-        if (isLocalFileUrl(normalizedUrl)) {
-          const resolved = resolveUrl(normalizedUrl, sourceDir, rootDir);
-          const relativePath = path.relative(newCssFileName, resolved.file);
-
-          node.value = {
-            ...node.value,
-            type: "String",
-            // disable keeping query and hash parts of original url, since esbuild doesn't support it yet
-            // value: `"${relativePath}${resolved.query}${resolved.hash}"`,
-            value: `"${relativePath}"`,
-          };
-        }
-      }
-    },
-  });
-
-  return csstree.generate(ast);
-}
-
-function isLocalFileUrl(url) {
-  if (/^https?:\/\//i.test(url)) {
-    return false;
-  }
-  if (/^data:/.test(url)) {
-    return false;
-  }
-  if (/^#/.test(url)) {
-    return false;
-  }
-
-  return true;
-}
-
-function resolveUrl(url, originalFolder, rootDir) {
-  const [_, pathname, query, hash] = url.match(/^(.*?)(\?.*?)?(#.*?)?$/);
-
-  let file = "";
-  if (pathname.startsWith("/")) {
-    file = path.resolve(rootDir, pathname.substring(1));
-    // todo: resolve by root dir
-  } else {
-    file = path.resolve(originalFolder, pathname);
-  }
-
-  return {
-    file,
-    pathname,
-    query: query || "",
-    hash: hash || "",
-  };
-}