ng-tailwindcss-jit - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

index.js

@@ -6,3 +6,2 @@ #! /usr/bin/env node
 const { execSync } = require("child_process");
-const ora = require("ora");
 const {
@@ -13,9 +12,11 @@ isRoot,
   updatePackageJson,
+  readModule,
   writeFile,
   generatePostInstallScript,
 } = require("./utils");
-const { logSuccess, logError, logWarning } = require("./logging");
+const { logSuccess, logError, logWarning, log } = require("./logging");
 
 console.log(`${packageJson.name} v${packageJson.version}`);
 
+// VALIDATIONS
 if (!isRoot()) {
@@ -52,7 +53,24 @@ logWarning("Not running at project root");
 
-pkg.scripts.start = `TAILWIND_MODE='watch' ${pkg.scripts.start}`;
-pkg.scripts.postinstall = pkg.scripts.postinstall
-  ? `node ./scripts/ng-tailwindcss-jit.js && ${pkg.scripts.postinstall}`
-  : `node ./scripts/ng-tailwindcss-jit.js`;
+// START SCRIPT
+log("Update start script in package.json");
+const START_SCRIPT = "cross-env TAILWIND_MODE=watch";
 
+let startScript = pkg.scripts.start;
+startScript = startScript.replace("TAILWIND_MODE='watch' ", "");
+if (!startScript.includes(START_SCRIPT)) {
+  startScript = startScript.replace("ng serve", `${START_SCRIPT} ng serve`);
+}
+pkg.scripts.start = startScript;
+
+// POST INSTALL SCRIPT
+log("Add postinstall script in package.json");
+const POSTINSTALL_SCRIPT = "node ./scripts/ng-tailwindcss-jit.js";
+
+let postinstallScript = pkg.scripts.postinstall;
+if (!postinstallScript) {
+  pkg.scripts.postinstall = POSTINSTALL_SCRIPT;
+} else if (!postinstallScript.includes(POSTINSTALL_SCRIPT)) {
+  pkg.scripts.postinstall = `${POSTINSTALL_SCRIPT} && ${pkg.scripts.postinstall}`;
+}
+
 writeFile("./scripts/ng-tailwindcss-jit.js", generatePostInstallScript());
@@ -62,22 +80,32 @@
 
-if (!installedPackages.includes("@tailwindcss/jit")) {
-  const spinner = ora({
-    text: "Installing @tailwindcss/jit\n",
-    interval: 10,
-  }).start();
-  spinner.color = "green";
+// INSTALL PACKAGES
+log("Installing required packages");
 
-  try {
-    execSync(
-      "node ./scripts/ng-tailwindcss-jit.js && npm i @tailwindcss/jit --save-dev"
+const tailwindJitPackageName = !installedPackages.includes("@tailwindcss/jit")
+  ? "@tailwindcss/jit"
+  : "";
+try {
+  execSync(`npm i --save-dev ${tailwindJitPackageName} cross-env`, {
+    stdio: "inherit",
+  });
+  execSync("node ./scripts/ng-tailwindcss-jit.js", { stdio: "inherit" });
+} catch {
+  logError("Installation of @tailwindcss/jit failed");
+  process.exit();
+}
+
+logSuccess("Configured @tailwind/jit successfully");
+
+// FREQUENT ERRORS
+try {
+  const tailwindConfig = readModule("./tailwind.config.js");
+  if (
+    !tailwindConfig ||
+    !tailwindConfig.purge ||
+    tailwindConfig.purge.length === 0
+  ) {
+    logWarning(
+      "Ensure that files to `purge` are configured in your tailwind config file"
     );
-  } catch {
-    logError("Installation of @tailwindcss/jit failed");
-    process.exit();
   }
-  spinner.stop();
-} else {
-  execSync("node ./scripts/ng-tailwindcss-jit.js");
-}
-
-logSuccess("Configured successfully");
+} catch {}

logging.js

@@ -15,2 +15,6 @@ const chalk = require("chalk");
 
+function log(message) {
+  console.log(message);
+}
+
 module.exports = {
@@ -20,2 +24,3 @@ logError,
   logWarning,
+  log,
 };

package.json

 {
   "name": "ng-tailwindcss-jit",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Configures your angular project to use jit compiler for tailwindcss",
@@ -27,5 +27,4 @@ "bin": {
     "chalk": "^4.1.0",
-    "fs-extra": "^9.1.0",
-    "ora": "^5.4.0"
+    "fs-extra": "^9.1.0"
   }
 }

README.md

 # ng-tailwindcss-jit
 
+![NPM Version](https://img.shields.io/npm/v/ng-tailwindcss-jit)
+![NPM License](https://img.shields.io/npm/l/ng-tailwindcss-jit)
+
 Configures your angular project to use jit compiler for tailwindcss
 
-![](./ng-tailwindcss-jit.png)
+![Angular + Tailwind CSS JIT](./ng-tailwindcss-jit.png)
 
@@ -13,8 +16,16 @@ ## Usage
 
+## Demo
+
+https://github.com/apvarun/demo-ng-tailwindcss-jit
+
 ## Prerequisites
 
-- Project must have Twilwind CSS installed
+- Project must have Tailwind CSS installed
 - Minimum angular version 11.2 (version from which angular supports Tailwind CSS out-of-the-box)
 - Should be using the default angular builder
 
+## How it works
+
+**Read article:** https://apvarun.com/blog/tailwindcss-jit-in-angular
+
 ## Contributing
@@ -21,0 +32,0 @@

utils.js

@@ -36,2 +36,10 @@ const path = require("path");
 
+function readModule(file) {
+  const filePath = path.resolve(file);
+  if (existsSync(filePath)) {
+    return require(filePath);
+  }
+  return false;
+}
+
 function writeFile(path, content) {
@@ -66,4 +74,5 @@ ensureFileSync(path);
   updatePackageJson,
+  readModule,
   writeFile,
   generatePostInstallScript,
 };

New alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25709

increased by7.25%

Dependency count

2

decreased by-33.33%

Number of package files

8

increased by14.29%

Lines of code

169

increased by27.07%

Number of lines in readme file

37

increased by42.31%

Worsened metrics

Number of low supply chain risk alerts

2

increased by100%

Dependency changes

• - Removedora@^5.4.0

• - Removedansi-regex@5.0.1(transitive)

• - Removedbase64-js@1.5.1(transitive)

• - Removedbl@4.1.0(transitive)

• - Removedbuffer@5.7.1(transitive)

• - Removedcli-cursor@3.1.0(transitive)

• - Removedcli-spinners@2.9.2(transitive)

• - Removedclone@1.0.4(transitive)

• - Removeddefaults@1.0.4(transitive)

• - Removedieee754@1.2.1(transitive)

• - Removedinherits@2.0.4(transitive)

• - Removedis-interactive@1.0.0(transitive)

• - Removedis-unicode-supported@0.1.0(transitive)

• - Removedlog-symbols@4.1.0(transitive)

• - Removedmimic-fn@2.1.0(transitive)

• - Removedonetime@5.1.2(transitive)

• - Removedora@5.4.1(transitive)

• - Removedreadable-stream@3.6.2(transitive)

• - Removedrestore-cursor@3.1.0(transitive)

• - Removedsafe-buffer@5.2.1(transitive)

• - Removedsignal-exit@3.0.7(transitive)

• - Removedstring_decoder@1.3.0(transitive)

• - Removedstrip-ansi@6.0.1(transitive)

• - Removedutil-deprecate@1.0.2(transitive)

• - Removedwcwidth@1.0.1(transitive)