feat: basic transform

Author: skovy

package.json

@@ -36,6 +36,7 @@
     "trailingComma": "es5"
   },
   "devDependencies": {
+    "@types/glob": "^7.2.0",
     "@types/node": "^17.0.13",
     "dripip": "^0.10.0",
     "husky": "^7.0.4",

src/api.ts

@@ -0,0 +1,11 @@
+import postcss, { Root } from 'postcss';
+
+export interface TransformAPI {
+  parse(source: string): Root;
+}
+
+const parse: TransformAPI['parse'] = source => {
+  return postcss.parse(source);
+};
+
+export const api: TransformAPI = { parse };

src/cli.ts

@@ -14,24 +14,27 @@ const run = async () => {
   const cli = cac(`${NAME}`);
 
   cli
-    .command('[files]', 'File path to transform. Glob patterns are supported.')
+    .command(
+      '[files]',
+      'File path to transform. Note glob patterns are supported but must be wrapped in quotes.'
+    )
     .example(`${NAME} ./a.css`)
     .example(`${NAME} ./src/a.css`)
-    .example(`${NAME} ./src/**/*.css`)
-    .example(`${NAME} ./**/*.css`)
+    .example(`${NAME} "./src/**/*.css"`)
+    .example(`${NAME} "./**/*.css"`)
     .option('-t, --transform <transform>', 'Path to the transform file', {
       default: './transform.ts',
     })
-    .action(async (files: string[], flags) => {
+    .action(async (files: string, flags) => {
       const { transform } = flags;
 
       await processTransform({ files, transform });
     });
 
   cli.help();
   cli.version(VERSION);
-  cli.parse(process.argv, { run: false });
 
+  cli.parse(process.argv, { run: false });
   await cli.runMatchedCommand();
 };
 

src/index.ts

@@ -1 +1,2 @@
 export { traverse, Processors } from './traverse';
+export { Transform } from './transform';

src/process-transform.ts

@@ -1,10 +1,14 @@
+import glob from 'glob';
+import fs from 'fs';
 import { loadTransform } from './load-transform';
+import { TransformFileInfo } from './transform';
+import { api } from './api';
 
 interface ProcessTransformOptions {
   /**
-   * The list of file paths to process and run through the transform.
+   * The file path to process and run through the transform.
    */
-  files: string[];
+  files: string;
 
   /**
    * The transform path to run each file through.
@@ -13,8 +17,18 @@ interface ProcessTransformOptions {
 }
 
 export const processTransform = async (options: ProcessTransformOptions) => {
-  console.log(options);
   const transform = await loadTransform(options.transform);
+  const files = glob.sync(options.files);
 
-  transform();
+  files.map(file => {
+    const source = fs.readFileSync(file, 'utf8').toString();
+    const fileInfo: TransformFileInfo = { path: file, source };
+    const result = transform(fileInfo, api);
+
+    console.log(result);
+
+    if (result !== null) {
+      fs.writeFileSync(file, result);
+    }
+  });
 };

src/transform.ts

@@ -1,8 +1,21 @@
-interface TransformFileInfo {}
+import { TransformAPI } from './api';
 
-interface TransformAPI {}
+export interface TransformFileInfo {
+  /**
+   * The file path for the current file being transformed.
+   */
+  path: string;
+
+  /**
+   * The file contents for the current file being transformed.
+   */
+  source: string;
+}
 
 export type Transform = (
+  /**
+   * Metadata for the current file being transformed.
+   */
   fileInfo: TransformFileInfo,
   api: TransformAPI
 ) => null | string;

test/css/a.css

@@ -0,0 +1,6 @@
+.class {
+  margin: 42px;
+  color: blue;
+  padding-right: 10em;
+  background-color: rgba(0, 0, 0, 0.2);
+}

test/css/b.css

@@ -0,0 +1,5 @@
+.another-selector {
+  width: 100%;
+  margin: -16px;
+  color: green;
+}

test/transforms/color-to-red.ts

@@ -1,3 +1,13 @@
-export const t = () => {
-  console.log('HELLO WORLD TRANSFORM.');
+import { Transform } from '../../src';
+
+export const transform: Transform = (fileInfo, api) => {
+  const root = api.parse(fileInfo.source);
+
+  root.walk(node => {
+    if (node.type === 'decl' && node.prop === 'color') {
+      node.value = 'red';
+    }
+  });
+
+  return root.toString();
 };

yarn.lock

@@ -1456,6 +1456,14 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
+"@types/glob@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.2.0.tgz#bc1b5bf3aa92f25bd5dd39f35c57361bdce5b2eb"
+  integrity sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==
+  dependencies:
+    "@types/minimatch" "*"
+    "@types/node" "*"
+
 "@types/graceful-fs@^4.1.2":
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.5.tgz#21ffba0d98da4350db64891f92a9e5db3cdb4e15"
@@ -1501,6 +1509,11 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
+"@types/minimatch@*":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.5.tgz#1001cc5e6a3704b83c236027e77f2f58ea010f40"
+  integrity sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==
+
 "@types/ms@*":
   version "0.7.31"
   resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"