autobg-macro.macro

中文

a Babel macro that can automatically generate CSS code for background image, width, and height based on a given image path. It is typically used in conjunction with styled-components.

This project is a fork oflittlee/autobg.macro, with additional features:

• Supports both Vite and webpack
• Supports vw and rem units

install

npm i -S autobg-macro.macro

Usage

import styled from 'styled-components/macro';
import autobg from 'autobg-macro.macro';

const MyDiv = styled.div`
  text-align: center;
  ${autobg('./path/to/img.png')}
  color: red;
`;

Assuming the size of the image file is 750x750, the above code is compiled as:

import styled from 'styled-components/macro';

const MyDiv = styled.div`
  text-align: center;
  background-image: url('${typeof require === 'function' ? new URL('./path/to/img.png', import.meta.url).toString() : require('./path/to/img.png')?.default}');
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100vw;
  height: 100vw;
  color: red;
`;

Config

| 字段名 | 类型 | 默认值 | 说明 | | ------------- | ------------- | ------ | ------------------------------------------------------------ | | baseUrl | string | ./src | Basic URL for image path resolution | | esModule | boolean | false | Set this value to the same as the URL loader or file loader. Set it to false when using react-scripts<4 | | require | boolean|null | null | Forces the use of require to import images. If false, use new URL. If true, use require. If null, decide whether to use require by judging if require exists. This may result in more generated code. | | unit | px|vw|rem | px | CSS unit for image width and height in the generated CSS | | designWidth | number | 750 | Effective when unit = vw. Used to calculate the conversion factor from px to vw | | rootValue | number | 100 | Effective when unit = rem. Used to calculate the conversion factor from px to rem | | unitPrecision | number | 5 | The number of decimal places to keep when converting px to other units |

Use the autobg-macros.macros field in the package.json file as an example of the configuration. For more configuration details, please refer to babel-plugin-macros

// ./babel-plugin-macros.config.js

module.exports = {
  /** @type {import('autobg-macro.macro').Config)} */
  'autobg-macro.macro': {
    baseUrl: './src',
    unit: 'vw',
    designWidth: 750,
  }
}