create-tampermonkey-typescript 1.2.3 → 1.2.5

package/README.md

@@ -32,6 +32,8 @@ and bundled into the output script, then injected into the page at runtime — n
 at build time and only the CSS you actually use is injected into your userscript.
 
 ✨ **Prettier** — Sets up Prettier with a pre-configured `.prettierrc` and `.prettierignore` for consistent formatting.
+If Tailwind is enabled, there is also a prompt to enable the `prettier-plugin-classnames` and `prettier-plugin-tailwindcss`
+plugins which organize class names and automatically wraps the `className` string if it exceeds print width.
 
 🚀 **GitHub Actions workflows** — Includes CI/CD workflows that automatically create Git tags when 
 `package.json` version changes, and publish GitHub Releases with the built script attached.

package/dist/cli.js

@@ -5,10 +5,10 @@ import prompts from 'prompts';
 import kleur from 'kleur';
 import { execSync } from 'node:child_process';
 import { fileURLToPath } from 'url';
-const __FILENAME = fileURLToPath(import.meta.url);
-const __DIRNAME = path.dirname(__FILENAME);
-const TEMPLATES_DIR = path.join(__DIRNAME, '../templates');
-const defaultDevDeps = [
+export const __FILENAME = fileURLToPath(import.meta.url);
+export const __DIRNAME = path.dirname(__FILENAME);
+export const TEMPLATES_DIR = path.join(__DIRNAME, '../templates');
+export const defaultDevDeps = [
     'typescript', //
     'vite',
     'vite-plugin-banner',
@@ -16,10 +16,10 @@ const defaultDevDeps = [
     'ts-node',
     '@types/tampermonkey',
 ];
-const defaultDeps = [];
-const baseTsConfig = {
+export const defaultDeps = [];
+export const baseTsConfig = {
     compilerOptions: {
-        types: ['vite/client', 'node'],
+        types: ['vite/client', 'node', 'tampermonkey'],
         target: 'ES2022',
         module: 'ESNext',
         moduleResolution: 'bundler',
@@ -37,7 +37,20 @@ const baseTsConfig = {
     },
     include: ['src'],
 };
-const availableFeatures = [
+export const basePrettierRc = {
+    trailingComma: 'es5',
+    tabWidth: 2,
+    semi: false,
+    singleQuote: true,
+    printWidth: 120,
+    plugins: [],
+};
+export const prettierTailwindPlugins = [
+    'prettier-plugin-tailwindcss',
+    'prettier-plugin-classnames',
+    'prettier-plugin-merge',
+];
+export const availableFeatures = [
     {
         name: 'React',
         description: 'Adds react support to the project',
@@ -55,9 +68,17 @@ const availableFeatures = [
         name: 'Prettier',
         description: 'Adds Prettier with default .prettierrc and .prettierignore files',
         directory: path.join(TEMPLATES_DIR, 'prettier'),
+        devDependencies: ['prettier'],
         hook: (params) => {
-            renameDotFiles(params, 'prettierrc', 'prettierignore');
-            execInProjectDir('npm install --save-dev --save-exact prettier', params);
+            if (params.prettierTailwindPlugins) {
+                installDependencies(params, prettierTailwindPlugins, '-D');
+            }
+            const prettierRc = {
+                ...basePrettierRc,
+                ...(params.prettierTailwindPlugins ? { plugins: prettierTailwindPlugins } : {}),
+            };
+            writeObjectToJsonFile(prettierRc, '.prettierrc', params);
+            renameDotFiles(params, 'prettierignore');
         },
     },
     {
@@ -75,7 +96,7 @@ const availableFeatures = [
         directory: path.join(TEMPLATES_DIR, 'github-workflows'),
     },
 ];
-const availablePackageManagers = [
+export const availablePackageManagers = [
     {
         name: 'npm',
         exists: () => commandExists('npm --version'),
@@ -123,7 +144,7 @@ async function main() {
     // Initialize package.json
     logWithPrefix(`Creating ${kleur.yellow('package.json')}`);
     const packageJson = createPackageJson(params);
-    writeObjectToFile(packageJson, 'package.json', params);
+    writeObjectToJsonFile(packageJson, 'package.json', params);
     // Initialize the lock file
     logWithPrefix(`Initializing lock file`);
     execInProjectDir(`${params.packageManager.installCmd}`, params);
@@ -134,13 +155,13 @@ async function main() {
     if (devDeps.length > 0) {
         logWithPrefix('Installing dev dependencies');
         console.log(`    ${kleur.dim(devDeps.join(', '))}`);
-        execInProjectDir(`${params.packageManager.addDependencyCmd} -D ${devDeps.join(' ')}`, params);
+        installDependencies(params, devDeps, '-D');
     }
     // Install dependencies
     if (deps.length > 0) {
         logWithPrefix('Installing dependencies');
         console.log(`    ${kleur.dim(deps.join(', '))}`);
-        execInProjectDir(`${params.packageManager.addDependencyCmd}  ${deps.join(' ')}`, params);
+        installDependencies(params, deps, '-D');
     }
     // Handle tsconfig.json
     const tsConfig = { ...baseTsConfig };
@@ -150,7 +171,7 @@ async function main() {
         }
     }
     logWithPrefix(`Creating ${kleur.yellow('tsconfig.json')}`);
-    writeObjectToFile(tsConfig, 'tsconfig.json', params);
+    writeObjectToJsonFile(tsConfig, 'tsconfig.json', params);
     // Copy files
     logWithPrefix('Copying project files');
     // Base files
@@ -179,7 +200,7 @@ async function main() {
 function logWithPrefix(message) {
     console.log(`${kleur.cyan('-')} ${kleur.white(message)}`);
 }
-function commandExists(cmd) {
+export function commandExists(cmd) {
     try {
         execSync(cmd, { stdio: 'ignore' });
         return true;
@@ -188,7 +209,7 @@ function commandExists(cmd) {
         return false;
     }
 }
-function checkCwdAccess() {
+export function checkCwdAccess() {
     try {
         fs.accessSync(process.cwd(), fs.constants.W_OK | fs.constants.R_OK);
     }
@@ -198,7 +219,7 @@ function checkCwdAccess() {
     }
     return true;
 }
-function findValidPackageManager() {
+export function findValidPackageManager() {
     if (!availablePackageManagers.find((pm) => pm.exists())) {
         console.log(kleur.red('Could not find any valid package manager: '));
         console.log(kleur.yellow(`(${availablePackageManagers.map((pm) => pm.name).join(', ')})`));
@@ -206,7 +227,7 @@ function findValidPackageManager() {
     }
     return true;
 }
-function validateProjectName(projectName) {
+export function validateProjectName(projectName) {
     if (!projectName || projectName.length === 0)
         return 'Project name cannot be empty';
     if (projectName.includes(' '))
@@ -260,11 +281,16 @@ async function promptForParams() {
             message: 'Select features:',
             choices: availableFeatures.map((f) => ({ title: f.name, value: f.name, description: f.description })),
         },
+        {
+            type: (prev) => (prev.includes('Prettier') && prev.includes('TailwindCSS') ? 'confirm' : null),
+            name: 'prettierTailwindPlugins',
+            message: 'Install prettier-plugin-tailwindcss (auto-sorts classes) and prettier-plugin-classnames (wraps long class strings)?',
+        },
     ], {
         onCancel: () => process.exit(0),
     });
 }
-async function createProjectDirectory(path) {
+export async function createProjectDirectory(path) {
     try {
         fs.mkdirSync(path, { recursive: true });
         return true;
@@ -276,7 +302,7 @@ async function createProjectDirectory(path) {
         return 'Unknown error.';
     }
 }
-function createPackageJson(params) {
+export function createPackageJson(params) {
     return {
         name: params.projectName,
         description: params.description,
@@ -289,7 +315,7 @@ function createPackageJson(params) {
         },
     };
 }
-function writeObjectToFile(object, fileName, params) {
+export function writeObjectToJsonFile(object, fileName, params) {
     const filePath = path.join(params.projectPath, fileName);
     const jsonString = JSON.stringify(object, null, 2);
     fs.writeFileSync(filePath, jsonString);
@@ -297,9 +323,15 @@ function writeObjectToFile(object, fileName, params) {
 function execInProjectDir(command, params) {
     execSync(command, { stdio: 'inherit', cwd: params.projectPath });
 }
-function renameDotFiles(params, ...fileNames) {
+function installDependencies(params, dependencies, flags = '') {
+    execInProjectDir(`${params.packageManager.addDependencyCmd} ${flags} ${dependencies.join(' ')}`, params);
+}
+export function renameDotFiles(params, ...fileNames) {
     for (const fileName of fileNames) {
         fs.renameSync(path.join(params.projectPath, `_${fileName}`), path.join(params.projectPath, `.${fileName}`));
     }
 }
-main().then(() => { }, (e) => console.error(kleur.red(e.message || e)));
+const isDirectRun = process.argv[1]?.endsWith('cli.ts') || process.argv[1]?.endsWith('cli.js');
+if (isDirectRun) {
+    main().then(() => { }, (e) => console.error(kleur.red(e.message || e)));
+}

package/package.json

@@ -1,51 +1,53 @@
-{
-  "name": "create-tampermonkey-typescript",
-  "version": "1.2.3",
-  "description": "CLI tool for generating a TamperMonkey script project written in typescript which is transpiled to JavaScript to be ran in the browser",
-  "license": "MIT",
-  "homepage": "https://github.com/neth392/create-tampermonkey-typescript",
-  "author": "neth392",
-  "keywords": [
-    "tampermonkey",
-    "typescript",
-    "template"
-  ],
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "files": [
-    "dist",
-    "templates"
-  ],
-  "type": "module",
-  "bin": {
-    "create-tampermonkey-typescript": "dist/cli.js"
-  },
-  "scripts": {
-    "build": "tsc",
-    "dev": "ts-node src/cli.ts"
-  },
-  "devDependencies": {
-    "@tailwindcss/vite": "^4.1.18",
-    "@types/node": "^24.0.10",
-    "@types/prompts": "^2.4.9",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "@types/tampermonkey": "^5.0.4",
-    "prettier": "^3.6.1",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "tailwindcss": "^4.1.18",
-    "ts-node": "^10.9.2",
-    "type-fest": "^5.4.4",
-    "typescript": "^5.8.3",
-    "vite": "^7.0.0",
-    "vite-plugin-banner": "^0.8.1",
-    "vite-plugin-css-injected-by-js": "^3.5.2"
-  },
-  "dependencies": {
-    "kleur": "^4.1.5",
-    "prompts": "^2.4.2"
-  }
-}
+{
+  "name": "create-tampermonkey-typescript",
+  "version": "1.2.5",
+  "description": "CLI tool for generating a TamperMonkey script project written in typescript which is transpiled to JavaScript to be ran in the browser",
+  "license": "MIT",
+  "homepage": "https://github.com/neth392/create-tampermonkey-typescript",
+  "author": "neth392",
+  "keywords": [
+    "tampermonkey",
+    "typescript",
+    "template"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "type": "module",
+  "bin": {
+    "create-tampermonkey-typescript": "dist/cli.js"
+  },
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/node": "^24.0.10",
+    "@types/prompts": "^2.4.9",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@types/tampermonkey": "^5.0.4",
+    "prettier": "^3.6.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tailwindcss": "^4.1.18",
+    "ts-node": "^10.9.2",
+    "type-fest": "^5.4.4",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.0",
+    "vite-plugin-banner": "^0.8.1",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vitest": "^4.1.0"
+  },
+  "dependencies": {
+    "kleur": "^4.1.5",
+    "prompts": "^2.4.2"
+  }
+}

package/templates/base/README.md

@@ -86,6 +86,10 @@ You should customize this file to include directives specific to your script, su
 - All imported CSS is combined and injected as an inline `<style>` element at runtime
 - The userscript header from `userscript.txt` is prepended
 
+### Removing JSDoc/Comments in Final Script
+The `vite.config.ts` file has a section that can be uncommented which will remove JSDoc and comments from the final
+script, reducing the output file size.
+
 ---
 
 ## CSS
@@ -211,7 +215,21 @@ const App = () => (
 
 ```
 
-For more information, see the [Tailwind CSS docs](https://tailwindcss.com/docs).
+### IMPORTANT
+There is a chance that simply using `@import "tailwindcss";` in your styles will break the page's native styling.
+In order to prevent this and utilize tailwind's utilities in your script's own UI, you can scope tailwind to your
+root container like so in `styles.css` (only applicable in v4).
+
+```css
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(theme);
+
+#your-root-id {
+  @tailwind utilities;
+}
+```
+
+For more information on Tailwind, see the [Tailwind CSS docs](https://tailwindcss.com/docs).
 
 ---
 
@@ -219,6 +237,10 @@ For more information, see the [Tailwind CSS docs](https://tailwindcss.com/docs).
 
 Prettier is included with a pre-configured `.prettierrc` and `.prettierignore` file. Feel free to change them to best fit your programming style.
 
+### Prettier & Tailwind
+Optionally enabled are the `prettier-plugin-tailwindcss` and `prettier-plugin-classnames` plugins to assist in
+formatting when using class names. `prettier-plugin-merge` is used to fix incompatibility between the two.
+
 ---
 
 ## GitHub Workflows

package/templates/base/vite.config.ts

@@ -39,9 +39,22 @@ export default defineConfig({
     },
   },
   plugins: [
-    ...(hasTailwind ? [(await import('@tailwindcss/vite')).default()] : []),
+    ...(hasTailwind
+      ? [
+          (await import('@tailwindcss/vite')).default({
+            optimize: { minify: true },
+          }),
+        ]
+      : []),
     cssInjectedByJsPlugin({ topExecutionPriority: true }),
     banner({ content: meta, verify: false }),
+    // Uncomment below to remove comments & JSDoc from the final script.
+    // {
+    //   name: 'strip-comments',
+    //   renderChunk(code) {
+    //     return code.replace(/\/\*\*[\s\S]*?\*\//g, '').replace(/\/\*[^!][\s\S]*?\*\//g, '')
+    //   },
+    // },
   ],
   build: {
     cssCodeSplit: false,

package/templates/tailwindcss/src/styles.css

@@ -1,2 +1,15 @@
-/* Add all styles here, keep tailwindcss import for using tailwind */
-@import 'tailwindcss';
+/* Add all styles in this file, or create multiple files and be sure to import them all in your script. */
+@import 'tailwindcss';
+
+
+/* (For Tailwind v4) If just using tailwind utilities, it is recommended to replace the above with this. */
+/* It will prevent tailwind's preflight from breaking the css of the page outside of your script's scope. */
+/* Simply delete the above, uncomment below, and replace #your-root-element-id with your own. */
+
+/*@layer theme, base, components, utilities;*/
+/*@import "tailwindcss/theme.css" layer(theme);*/
+/*@custom-variant dark (&:is(.dark-mode *));*/
+
+/*#your-root-element-id {*/
+/*  @tailwind utilities;*/
+/*}*/

package/templates/prettier/_prettierrc

@@ -1,7 +0,0 @@
-{
-  "trailingComma": "es5",
-  "tabWidth": 2,
-  "semi": false,
-  "singleQuote": true,
-  "printWidth": 120
-}