A collection of awesome babel macros and related resources

• Macros
  • General
  • Object/Array manipulation
  • Code generation
  • Development
  • React
  • CSS-in-JS
  • GraphQL
• Resources
  • General
  • Developing macros
• Integrations

• param.macro: Partial application syntax and lambda parameters for JavaScript, inspired by Scala's _ and Kotlin's it
• ms.macro: Convert various time formats to milliseconds
• raw.macro: Apply webpack's raw-loader
• filesize.macro: Apply webpack's filesize-loader
• lqip.macro: Create LQIP at build-time, similar to webpack's lqip-loader
• data-uri.macro: Convert assets to data URIs
• regexgen.macro: Convert set of strings to optimized regular expression
• tinker.macro: Evaluate Laravel code
• @lingui/macro: Macro for internationalization in LinguiJS
• pipeline.macro: Macro working similarly to the pipeline operator
• paths.macro: Import paths like __dirname and __filename as static values
• for-own.macro: Make for-in only visit own properties
• ts-nameof.macro: nameof in TypeScript
• files.macro: Transform directory into array of file names
• flavors.macro: Build different flavors of an app by manipulating import headers

• traph.macro: Transform Objects easily, leveraging object getters and graphs
• idx.macro: Traverse properties on objects and arrays
• assign.macro: Transpile Object.assign-style expressions to direct assignments

• preval.macro: Pre-evaluate code¹
• codegen.macro: Generate code¹
• import-all.macro: Import all files that match a glob

• scope.macro: Useful build-time console functions
• penv.macro: Pick specified value or branch according to the build environment
• dev-console.macro: Remove all console.log, console.warn and console.error calls from production builds
• babel-plugin-trace/macro: Add labeled statement logging helpers with file and function name prefix
• inspect.macro: Log an expression and the result of that expression to the console
• require-context.macro: Mock webpack's require.context()

• Tersus-JSX: Inspired by AngularJS, ng-if (use tj-if) and ng-repeat (use tj-for) for neater JSX in React
• tagged-translations: Translate text in React applications
• svgr.macro: Apply SVGR
• css-to-rn.macro: Convert CSS to React Native style sheet
• hooks.macro: Automatic React Hooks memoization invalidation
• inline-mdx.macro: Convert MDX into inline components
• react-broker/macros: Lazy-load React components
• rpi.macro: Macro for react-precious-image
• react-hot-reload.macro: Zero configuration Hot Module Replacement for CRAv2
• mdi-norm/macro: Embed Material Design system SVG icons
• reactive.macro: Reduce React boilerplate

• react-emotion/macro: Minify and optimize emotion styles
• glamorous.macro: Give your glamorous components a nice displayName for React DevTools
• styled-jsx/macro: Use styled-jsx's resolve tag
• styled-components/macro: Improve the debugging experience and add server-side rendering support to styled-components
• styled-import/macro: Lightweight CSS parser for stealing rules from stylesheets, for use with styled-components, React, or anywhere else you might be doing CSS in JS -- especially useful for working with global or 3rd-party stylesheets
• unique-classname.macro: Generate unique className for emotion
• tailwind.macro: Use Tailwind with any CSS-in-JS library

• graphql.macro: Compile GraphQL AST
• blade.macro: Generate GraphQL query strings inline and solve the double declaration problem

• babel-plugin-macros usage
• Search npm for keyword:babel-plugin-macros to find macros
• Difference between plugins and macros
• Zero-config code transformation with babel-plugin-macros

• babel-plugin-macros usage for macro authors
• jamiebuilds/babel-handbook
• Writing custom Babel and ESLint plugins with ASTs
• Code Transformation and Linting

The following projects include babel-plugin-macros, so macros can be used out of the box without additional configuration:

• Gatsby
• Create React App

1. preval vs codegen ↩️

Contributions welcome! Read the contribution guidelines first.

To the extent possible under law, Jonas Gierer has waived all copyright and related or neighboring rights to this work.