Function transform

scripts/plugins/compileStyledComponentsPlugin.ts:24–76

(content, id)

    name: 'compileStyledComponentsPlugin',

    async transform(content, id) {
      if (!/tsx$/.test(id)) {
        return;
      }

      const source = project.getSourceFile(id);

      if (fileMap.has(id) && fileMap.get(id) !== content) {
        source.refreshFromFileSystemSync();
      }
      fileMap.set(id, content);

      const needTransformNode: NoSubstitutionTemplateLiteral[] = [];

      source.forEachDescendant((node) => {
        if (!node.isKind(SyntaxKind.NoSubstitutionTemplateLiteral)) {
          return;
        }

        const isStyledTemplate = node.getParentIf((parent) =>
          parent.getChildAtIndex(0).getFullText().trim().startsWith('styled')
        );
        if (!isStyledTemplate) {
          return;
        }

        needTransformNode.push(node);
      });

      if (!needTransformNode.length) {
        return;
      }

      await Promise.all(
        needTransformNode.map(async (node) => {
          const lessString = node.getFullText().trim().replaceAll('`', '');

          const prefix = `${styledPlaceholder} {`;

          const lessInput = `${prefix}${lessString}}`;

          const cssOutput = (await less.render(lessInput)).css.trim();
          const cssString = cssOutput.slice(prefix.length, cssOutput.length - 1);

          node.replaceWithText(`\`${cssString}\``);
        })
      );

      return {
        code: source.getFullText(),
        map: null,
      };
    },
  };
}