Merge pull request #5 from g45t345rt/master

update packages to latest + css entry-point fix and feature to resolve css from node_modules

package.json

@@ -27,34 +27,35 @@
   "module": "dist/index.esm.js",
   "types": "src/modules.d.ts",
   "dependencies": {
-    "autoprefixer": "^10.2.4",
+    "autoprefixer": "^10.2.5",
     "fs-extra": "^9.1.0",
     "less": "^4.x",
     "postcss": "8.x",
     "postcss-modules": "^4.0.0",
+    "resolve-file": "^0.3.0",
     "sass": "^1.x",
     "stylus": "^0.x",
     "tmp": "^0.2.1"
   },
   "devDependencies": {
     "@types/chai": "^4.2.15",
-    "@types/fs-extra": "^9.0.7",
+    "@types/fs-extra": "^9.0.8",
     "@types/less": "^3.0.2",
-    "@types/mocha": "^8.2.1",
+    "@types/mocha": "^8.2.2",
-    "@types/node": "^14.14.28",
+    "@types/node": "^14.14.35",
     "@types/sass": "^1.16.0",
     "@types/stylus": "^0.48.33",
     "@types/tmp": "^0.2.0",
-    "chai": "^4.3.0",
+    "chai": "^4.3.4",
     "cross-env": "^7.0.3",
-    "esbuild": "^0.8.49",
+    "esbuild": "^0.9.6",
-    "mocha": "^8.3.0",
+    "mocha": "^8.3.2",
+    "normalize.css": "^8.0.1",
     "prettier": "^2.2.1",
-    "typescript": "^4.1.5",
+    "typescript": "^4.2.3",
     "yorkie": "^2.0.0"
   },
   "peerDependencies": {
-    "esbuild": "^0.8.46",
     "less": "^4.x",
     "postcss": "8.x",
     "sass": "^1.x",

src/index.ts

@@ -13,6 +13,7 @@ import postcss from "postcss";
 import postcssModules from "postcss-modules";
 import less from "less";
 import stylus from "stylus";
+import resolveFile from "resolve-file";
 
 interface PostCSSPluginOptions {
   plugins: PostCSSPlugin[];
@@ -56,21 +57,31 @@ const postCSSPlugin = ({
     });
 
     build.onResolve(
-      { filter: /.\.(css|sass|scss|less|styl)$/, namespace: "file" },
+      { filter: /.\.(css|sass|scss|less|styl)$/ },
       async (args) => {
-        const sourceFullPath = path.resolve(args.resolveDir, args.path),
+        // Namespace is empty when using CSS as an entrypoint
-          sourceExt = path.extname(sourceFullPath),
+        if (args.namespace !== "file" && args.namespace !== "") return;
-          sourceBaseName = path.basename(sourceFullPath, sourceExt),
+
-          sourceDir = path.dirname(sourceFullPath),
+        // Resolve files also from node_modules (ex: npm normalize.css)
-          sourceRelDir = path.relative(path.dirname(rootDir), sourceDir),
+        let sourceFullPath = resolveFile(args.path);
-          isModule = sourceBaseName.match(/\.module$/),
+        if (!sourceFullPath)
-          tmpDir = path.resolve(tmpDirPath, sourceRelDir),
+          sourceFullPath = path.resolve(args.resolveDir, args.path);
-          tmpFilePath = path.resolve(
+
-            tmpDir,
+        const sourceExt = path.extname(sourceFullPath);
-            `${sourceBaseName}-tmp-${Date.now()}-${sourceExt.replace(".", "")}${
+        const sourceBaseName = path.basename(sourceFullPath, sourceExt);
-              isModule ? ".module" : ""
+        const sourceDir = path.dirname(sourceFullPath);
-            }.css`
+        const sourceRelDir = path.relative(path.dirname(rootDir), sourceDir);
-          );
+        const isModule = sourceBaseName.match(/\.module$/);
+        const tmpDir = path.resolve(tmpDirPath, sourceRelDir);
+
+        let tmpFilePath = path.resolve(
+          tmpDir,
+          `${Date.now()}-${sourceBaseName}.css`
+        );
+
+        // When CSS is an entry-point we don't want to append Date.now()
+        if (args.kind === "entry-point")
+          tmpFilePath = path.resolve(tmpDir, `${sourceBaseName}.css`);
 
         await ensureDir(tmpDir);
 

test/index.js

@@ -5,7 +5,7 @@ const autoprefixer = require("autoprefixer"),
 
 describe("PostCSS esbuild tests", () => {
   it("Works with basic CSS imports", (done) => {
-    test("basic")
+    test(["tests/basic.ts"])
       .then((res) => {
         assert(res);
         done();
@@ -13,7 +13,7 @@ describe("PostCSS esbuild tests", () => {
       .catch(done);
   });
   it("Works with preprocessors", (done) => {
-    test("preprocessors")
+    test(["tests/preprocessors.ts"])
       .then((res) => {
         assert(res);
         done();
@@ -21,7 +21,23 @@ describe("PostCSS esbuild tests", () => {
       .catch(done);
   });
   it("Works with CSS modules", (done) => {
-    test("modules")
+    test(["tests/modules.ts"])
+      .then((res) => {
+        assert(res);
+        done();
+      })
+      .catch(done);
+  });
+  it("Works with CSS as entrypoint", (done) => {
+    test(["tests/styles.css", "tests/styles2.css"])
+      .then((res) => {
+        assert(res);
+        done();
+      })
+      .catch(done);
+  });
+  it("Works with node_modules import", (done) => {
+    test(["tests/node_modules.ts"])
       .then((res) => {
         assert(res);
         done();
@@ -30,9 +46,9 @@ describe("PostCSS esbuild tests", () => {
   });
 });
 
-function test(test) {
+function test(entryPoint) {
   return build({
-    entryPoints: [`tests/${test}.ts`],
+    entryPoints: entryPoint,
     bundle: true,
     outdir: "dist",
     plugins: [

test/tests/node_modules.ts

@@ -0,0 +1 @@
+import "normalize.css";

test/tests/styles.css

@@ -0,0 +1,6 @@
+.example {
+  display: grid;
+  transition: all 0.5s;
+  user-select: none;
+  background: linear-gradient(to bottom, white, black);
+}

test/tests/styles2.css

@@ -0,0 +1,6 @@
+.example {
+  display: grid;
+  transition: all 0.5s;
+  user-select: none;
+  background: linear-gradient(to bottom, white, black);
+}