PostCSS Inline Extract

PostCSS plugin to extract inline styles from HTML and convert them to CSS rules.

This plugin helps you extract style attributes from HTML elements and convert them into structured CSS rules with customizable selectors.

/* Input CSS (empty or existing styles) */

/* HTML input with inline styles */
<div style="color: red; margin: 10px;" class="button">Click me</div>
<span style="font-size: 14px;" id="text">Hello</span>

/* Output CSS */
.button {
  color: red;
  margin: 10px;
}

#text {
  font-size: 14px;
}

Features

• Extract inline styles from HTML style attributes
• Multiple selector generation strategies (class, id, hash)
• Optional extraction from <style> tags
• Automatic property merging for duplicate selectors
• TypeScript support with full type definitions
• Fast and lightweight with minimal dependencies

Installation

npm install --save-dev postcss postcss-inline-extract

Usage

Basic Usage

const postcss = require('postcss');
const inlineExtract = require('postcss-inline-extract');

const html = `
  <div style="color: red; margin: 10px;" class="button">Click me</div>
  <span style="font-size: 14px;" class="text">Hello</span>
`;

postcss([
  inlineExtract({ html })
])
  .process('', { from: undefined })
  .then(result => {
    console.log(result.css);
    /*
    .button {
      color: red;
      margin: 10px;
    }
    .text {
      font-size: 14px;
    }
    */
  });

With PostCSS Configuration

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-inline-extract')({
      html: require('fs').readFileSync('src/index.html', 'utf8')
    })
  ]
};

Options

html (required)

Type: string

The HTML content to extract inline styles from.

inlineExtract({
  html: '<div style="color: red;" class="button">Click me</div>'
})

selector

Type: 'class' | 'id' | 'hash' | Array<'class' | 'id' | 'hash'>
Default: 'class'

Strategy for generating CSS selectors:

• 'class': Use existing class attribute (.className). Elements without a class attribute will be ignored.
• 'id': Use existing id attribute (#idName). Elements without an id attribute will be ignored.
• 'hash': Generate random hash selectors (.abc123) for all elements with inline styles.

// Use class attributes
inlineExtract({
  html: htmlContent,
  selector: 'class'
})

// Use ID attributes
inlineExtract({
  html: htmlContent,
  selector: 'id'
})

// Priority order: try class first, then id
inlineExtract({
  html: htmlContent,
  selector: ['class', 'id']
})

styleTags

Type: boolean
Default: false

Whether to also extract CSS from <style> tags in the HTML.

inlineExtract({
  html: `
    <style>
      .existing { margin: 20px; }
    </style>
    <div style="color: red;" class="button">Click me</div>
  `,
  styleTags: true
})

indent

Type: number
Default: 2

Number of spaces for CSS indentation.

inlineExtract({
  html: htmlContent,
  indent: 4
})

Examples

Multiple Classes (Compound Selectors)

<div style="color: blue; padding: 15px;" class="button primary large">
  Submit Button
</div>

/* Output: Creates compound selector from multiple classes */
.button.primary.large {
  color: blue;
  padding: 15px;
}

Multiple Elements with Same Class

<div style="color: red;" class="button">Button 1</div>
<div style="margin: 10px;" class="button">Button 2</div>

/* Output: Properties are automatically merged */
.button {
  color: red;
  margin: 10px;
}

Hash Selector Generation

<div style="color: blue;">No class or ID</div>

inlineExtract({
  html: htmlContent,
  selector: 'hash'
})

/* Output: Random hash selector */
.a1b2c3 {
  color: blue;
}

TypeScript Support

This plugin includes full TypeScript definitions:

import postcss from 'postcss';
import inlineExtract, { PluginOptions, SelectorType } from 'postcss-inline-extract';

const options: PluginOptions = {
  html: '<div style="color: red;" class="button">Click me</div>',
  selector: 'class' as SelectorType,
  styleTags: false,
  indent: 2
};

const processor = postcss([inlineExtract(options)]);

License

MIT License