@place-framework/place-block-image

A webpack plugin that generates CSS custom properties from image dimensions to prevent layout shift and automatically creates components for React and Vue.

Overview

This package provides a webpack plugin that:

• Scans your project for images
• Extracts image dimensions automatically
• Generates CSS custom properties (CSS variables) for width, height, and aspect ratio
• Creates optimized components for React and Vue frameworks
• Prevents cumulative layout shift (CLS) by providing image dimensions upfront

Features

• Automatic Image Processing: Automatically detects and processes images in your project
• CSS Custom Properties: Generates CSS variables for image dimensions
• Framework Components: Creates ready-to-use components for React (JSX/TSX) and Vue
• Layout Shift Prevention: Helps maintain stable layouts by providing image dimensions
• TypeScript Support: Full TypeScript support with type definitions
• Webpack Integration: Seamless integration with your webpack build process

Installation

npm install @place-framework/place-block-image

Usage

Webpack Configuration

Add the plugin to your webpack configuration:

const PlaceBlockImagePlugin = require('@place-framework/place-block-image');

module.exports = {
  // ... your webpack config
  plugins: [
    new PlaceBlockImagePlugin({
      // Plugin options
    })
  ]
};

Generated CSS Variables

The plugin generates CSS custom properties like:

:root {
  --image-example-width: 800px;
  --image-example-height: 600px;
  --image-example-aspect-ratio: 1.333;
}

Generated Components

React (JSX/TSX)

import { ImageExample } from './generated/images';

function MyComponent() {
  return <ImageExample alt="Example image" />;
}

Vue

<template>
  <ImageExample alt="Example image" />
</template>

<script>
import { ImageExample } from './generated/images';

export default {
  components: {
    ImageExample
  }
};
</script>

Benefits

• Performance: Prevents layout shift by providing image dimensions upfront
• Developer Experience: Automatically generates components, reducing boilerplate
• Maintainability: Centralized image dimension management
• SEO: Better Core Web Vitals scores through CLS prevention

Configuration Options

The plugin accepts various configuration options to customize its behavior:

• Image source directories
• Output paths for generated files
• Component template customization
• CSS variable naming conventions

Requirements

• Webpack: >= 5.0.0
• React: >= 16.8.0 (optional, for React components)
• Vue: >= 3.0.0 (optional, for Vue components)

License

MIT

Author

Brian Kelley