add tests

jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+};

package.json

@@ -5,14 +5,16 @@
   "main": "./lib/style2js.js",
   "scripts": {
     "format": "prettier --write src/",
-    "build": "tsc",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "npm run test && npm run tsc",
+    "tsc": "tsc",
+    "test": "jest --coverage"
   },
   "author": "Fadi Khadra <fdkhadra@gmail.com> (https://fkhadra.github.io)",
   "license": "MIT",
   "dependencies": {
     "@types/node": "^14.14.16",
     "commander": "^6.2.1",
+    "ts-jest": "^26.4.4",
     "typescript": "^4.1.3"
   },
   "prettier": {

src/cli.ts

@@ -7,6 +7,23 @@ let source = '';
 
 program
   .name('style2js')
+  .description(
+    `
+Generate js file to inject your css into the dom.
+For example the command below will output 3 files into your dist folder
+
+style2js style.min.css --out-dir ./dist
+|_ inject-style.js
+|_ inject-style.esm.js
+|_ inject-style.d.ts
+
+When someone use your library, he can do the following to load the css
+
+import { injectStyle } from "your-library/inject-style";
+// inject the stylesheet into the dom
+injectStyle();
+    `
+  )
   .arguments('<source>')
   .action((arg) => {
     source = arg;
@@ -20,9 +37,13 @@ program
     'Function name used to import the generated style',
     'injectStyle'
   )
-  .option('--filename <filename>', 'Output filename', 'inject-style.js')
+  .option(
+    '--filename <filename>',
+    'Output filename without extension',
+    'inject-style'
+  )
   .option('--gen-types', 'Generate typescript definition', true)
-  .option('--append-to-file', 'Append to file if it exists', false);
+  .option('--esm', 'Generate esm file', true);
 
 if (process.argv.length < 3) program.help();
 

src/style2js.ts

@@ -1,21 +1,19 @@
 import { readFile, writeFile } from 'fs/promises';
-import { join, parse } from 'path';
+import { join } from 'path';
 import { existsSync } from 'fs';
 
 export interface Style2jsParams {
   source: string;
   outDir: string;
   filename?: string;
   exportAs?: string;
-  appendToFile?: boolean;
   genTypes?: boolean;
   esm?: boolean;
 }
 
 export const enum DefaultParams {
-  FILENAME = 'inject-style.js',
+  FILENAME = 'inject-style',
   EXPORT_AS = 'injectStyle',
-  APPEND_TO_FILE = 0,
   TYPE_DEF = 1,
   ESM = 1,
 }
@@ -25,7 +23,6 @@ export async function style2js({
   outDir,
   filename = DefaultParams.FILENAME,
   exportAs = DefaultParams.EXPORT_AS,
-  appendToFile = Boolean(DefaultParams.APPEND_TO_FILE),
   genTypes = Boolean(DefaultParams.TYPE_DEF),
   esm = Boolean(DefaultParams.ESM),
 }: Style2jsParams) {
@@ -37,13 +34,12 @@ export async function style2js({
       throw `The provided directory ${outDir} does not exist.`;
 
     const style = (await readFile(source, 'utf-8')).replace(/\r?\n|\r/g, '');
-    const writeFlag = appendToFile ? 'a' : 'w';
 
-    console.log('EHREKRJEK');
+    const writeFlag = 'w';
 
     // cjs
     await writeFile(
-      join(outDir, filename),
+      join(outDir, `${filename}.js`),
       `
   "use strict";
   
@@ -61,10 +57,8 @@ export async function style2js({
     );
 
     if (esm) {
-      const esmFilename = `${parse(filename).name}.esm.js`;
-
       await writeFile(
-        join(outDir, esmFilename),
+        join(outDir, `${filename}.esm.js`),
         `
     export function ${exportAs}() {
       var style = "${style}";

src/tests/style2js.spec.ts

@@ -0,0 +1,144 @@
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'fs';
+import { join } from 'path';
+import { DefaultParams, style2js } from '../style2js';
+
+//@ts-expect-error
+const processExit = jest.spyOn(process, 'exit').mockImplementation(() => {});
+const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+const OUT_DIR = './out';
+const ONE_LINE_CSS_FILE = join(OUT_DIR, 'one-line.css');
+
+beforeAll(() => {
+  process.chdir(__dirname);
+
+  if (!existsSync(OUT_DIR)) mkdirSync(OUT_DIR);
+
+  writeFileSync(ONE_LINE_CSS_FILE, '.foo{display:flex;}');
+});
+
+afterAll(() => {
+  processExit.mockRestore();
+  consoleError.mockRestore();
+});
+
+/**
+ * Generate filename with extension
+ *
+ */
+function getFilenames(filename: string) {
+  return ['js', 'esm.js', 'd.ts'].map((ext) =>
+    join(OUT_DIR, `${filename}.${ext}`)
+  );
+}
+
+describe('style2js', () => {
+  it('Should exit when input file does not exist', () => {
+    style2js({
+      source: '',
+      outDir: '',
+    });
+    expect(consoleError).toHaveBeenCalled();
+    expect(processExit).toHaveBeenCalledWith(1);
+  });
+
+  it('Should exit when out directory does not exist', () => {
+    style2js({
+      source: './style2js.spec.ts',
+      outDir: 'foobar',
+    });
+    expect(consoleError).toHaveBeenCalled();
+    expect(processExit).toHaveBeenCalledWith(1);
+  });
+
+  it('Should create 3 files using the default filename', (done) => {
+    const [cjs, esm, typeDef] = getFilenames(DefaultParams.FILENAME);
+
+    style2js({
+      source: ONE_LINE_CSS_FILE,
+      outDir: OUT_DIR,
+    }).then(() => {
+      expect(existsSync(cjs)).toBe(true);
+      expect(existsSync(esm)).toBe(true);
+      expect(existsSync(typeDef)).toBe(true);
+
+      done();
+    });
+  });
+
+  it('Allow to specify filename', (done) => {
+    const [cjs, esm, typeDef] = getFilenames('foobar');
+
+    style2js({
+      filename: 'foobar',
+      source: ONE_LINE_CSS_FILE,
+      outDir: OUT_DIR,
+    }).then(() => {
+      expect(existsSync(cjs)).toBe(true);
+      expect(existsSync(esm)).toBe(true);
+      expect(existsSync(typeDef)).toBe(true);
+
+      done();
+    });
+  });
+
+  it('Allow to disable type definition', (done) => {
+    const [cjs, esm, typeDef] = getFilenames('without-types');
+
+    style2js({
+      filename: 'without-types',
+      source: ONE_LINE_CSS_FILE,
+      outDir: OUT_DIR,
+      genTypes: false,
+    }).then(() => {
+      expect(existsSync(cjs)).toBe(true);
+      expect(existsSync(esm)).toBe(true);
+      expect(existsSync(typeDef)).toBe(false);
+
+      done();
+    });
+  });
+
+  it('Allow to disable esm', (done) => {
+    const [cjs, esm, typeDef] = getFilenames('without-esm');
+
+    style2js({
+      filename: 'without-esm',
+      source: ONE_LINE_CSS_FILE,
+      outDir: OUT_DIR,
+      esm: false,
+    }).then(() => {
+      expect(existsSync(cjs)).toBe(true);
+      expect(existsSync(esm)).toBe(false);
+      expect(existsSync(typeDef)).toBe(true);
+
+      done();
+    });
+  });
+
+  it('Allow to specify export name', (done) => {
+    const [cjs, esm, typeDef] = getFilenames('export-as');
+    const patternToMatch = /function loadStyle\(\)/g;
+
+    style2js({
+      exportAs: 'loadStyle',
+      filename: 'export-as',
+      source: ONE_LINE_CSS_FILE,
+      outDir: OUT_DIR,
+    }).then(() => {
+      expect(existsSync(cjs)).toBe(true);
+      expect(existsSync(esm)).toBe(true);
+      expect(existsSync(typeDef)).toBe(true);
+
+      const cjsContent = readFileSync(cjs, { encoding: 'utf-8' });
+      expect(cjsContent).toMatch(patternToMatch);
+
+      const esmContent = readFileSync(esm, { encoding: 'utf-8' });
+      expect(esmContent).toMatch(patternToMatch);
+
+      const typeDefContent = readFileSync(typeDef, { encoding: 'utf-8' });
+      expect(typeDefContent).toMatch(patternToMatch);
+
+      done();
+    });
+  });
+});

tsconfig.json

@@ -20,7 +20,8 @@
     "noFallthroughCasesInSwitch": true,
   },
   "exclude": [
-    "node_modules"
+    "node_modules",
+    "src/tests/**/*"
   ],
   "include": [
     "src/**/*"