Does jscodeshift work with css/scss/etc..?

Hey there,

First off, thanks for the awesome looking tool. I thought I’d write a simple codemod to change px to em’s and wanted to use jscodeshift to do it.

Here’s the transform I’m using: http://astexplorer.net/#/usDeoLTPFE/2

And here’s the jscodeshift command I was running:

jscodeshift . -t ./codemods/scss-px-to-em.js -v 1 --extensions scss

I must be doing something wrong because the output is totally wrong. So, is it possible to use jscodeshift to do postcss transforms?

Thanks very much!

[benjamn]

The techniques that recast uses are generic enough to work for any language that has an AST, though you’d have to implement pretty-printer cases for all those AST types.

That said, CSS formatting tends to be much more regular than JS formatting, so you could more easily get away with just parsing, transforming, and pretty-printing your CSS, without so much effort to preserve idiomatic formatting.

[danieldelcore]

Hey folks, it is possible to do as suggested above via PostCSS.

I’ve written a guide here, hope it helps: www.codeshiftcommunity.com/docs/css-codemods

Here’s an example:

const plugin = (): Plugin => {
  const processed = Symbol("processed");

  return {
    postcssPlugin: "UsingTokens",
    Declaration: (decl) => {
      // Transformation goes here
    },
  };
};

export default async function transformer(file: FileInfo) {
  return await postcss([plugin()]).process(file.source).css;
}

The main downside with this approach is that you aren’t able to leverage the “API” & AST of jscodeshift and recast. So you will need to rely solely on PostCSS. Also since jscodeshift uses dependency injection to expose it’s API, distributing codemods that use dependencies may be problematic.

An idea for jscodeshift future architectural direction could be to refactor the “Runner” to be generic and allow authors of transforms to import the AST/Transformation library of choice.