AST

1.js

// ASTRING
// -----------------------------------------------------------------------------

// import acorn from 'acorn';
// import astring from 'astring';

// let code = 'let answer = 4 + 7 * 5 + 3;\n';

// let ast = acorn.parse(code, { ecmaVersion: 6 });

// let formattedCode = astring.generate(ast);

// console.log(ast);
// console.log(`Formatted code: ${formattedCode}`);

// MAGIC STRING
// -----------------------------------------------------------------------------

// import acorn from 'acorn';
// import MagicString from 'magic-string';

// let code = 4 + 7 * 5 + 3;

// let ast = acorn.parse(code, { ecmaVersion: 6 });

// let s = new MagicString(ast);

// console.log(ast);
// console.log(s);

2.js

import acorn from 'acorn';
import walker from 'estree-walker';
import astring from 'astring';
import postcss from 'postcss';

import postcssPresetEnv from 'postcss-preset-env';

const code = `
  const styles = [
    css\`
      h1 {
        color: rgb(0 255 0);

        & span {
          color: blue;
        }
      }
    \`
  ];
`;

const ast = acorn.parse(code, { ecmaVersion: 10 });

walker.walk(ast, {
  enter(node) {
    if (node.type === 'TaggedTemplateExpression') {
      walker.walk(node, {
        enter(node) {
          if (node.type === 'TemplateElement') {
            const css = node.value.raw;

            postcss([postcssPresetEnv({ stage: 0 })])
            .process(css, { from: undefined })
            .then((result) => {
              return node.value.raw = result.css;

              // this.skip();
            });
          }
        },

        leave(node) {
          console.log(node);
        },
      });
    };
  },

  // leave(node) {
  //   console.log(node);
  // },
});

const formattedCode = astring.generate(ast);

// console.log(formattedCode);

README.md

• babel-plugin-postcss-template-literals
• Astring
• estree-walker
• rollup-pluginutils
• rollup-plugin-inject

package.json

{
  "scripts": {
    "start": "node --experimental-modules ./2.js"
  },
  "type": "module",
  "devDependencies": {
    "acorn": "^6.1.1",
    "astring": "^1.4.0",
    "estree-walker": "^0.6.1",
    "magic-string": "^0.25.2",
    "postcss": "^7.0.17",
    "postcss-preset-env": "^6.6.0"
  }
}