https://github.com/knowledgecode/postcss-inline-extract
PostCSS plugin to extract inline styles from HTML and convert them to CSS rules
https://github.com/knowledgecode/postcss-inline-extract
css extract html inline-styles postcss-plugin style-attributes
Last synced: 5 months ago
JSON representation
PostCSS plugin to extract inline styles from HTML and convert them to CSS rules
- Host: GitHub
- URL: https://github.com/knowledgecode/postcss-inline-extract
- Owner: knowledgecode
- License: mit
- Created: 2025-08-20T04:00:53.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-08-20T04:10:13.000Z (5 months ago)
- Last Synced: 2025-08-20T04:40:59.907Z (5 months ago)
- Topics: css, extract, html, inline-styles, postcss-plugin, style-attributes
- Language: TypeScript
- Homepage:
- Size: 0 Bytes
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# PostCSS Inline Extract
[
][PostCSS]
[](https://github.com/knowledgecode/postcss-inline-extract/actions/workflows/ci.yml)
[](https://www.npmjs.com/package/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.
```css
/* Input CSS (empty or existing styles) */
/* HTML input with inline styles */
Hello
```
```css
/* 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 `` tags
- Automatic property merging for duplicate selectors
- TypeScript support with full type definitions
- Fast and lightweight with minimal dependencies
## Installation
```bash
npm install --save-dev postcss postcss-inline-extract
```
## Usage
### Basic Usage
```javascript
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
```javascript
// 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.
```javascript
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.
```javascript
// 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.
```javascript
inlineExtract({
html: `
<style>
.existing { margin: 20px; }
`,
styleTags: true
})
```
### `indent`
Type: `number`
Default: `2`
Number of spaces for CSS indentation.
```javascript
inlineExtract({
html: htmlContent,
indent: 4
})
```
## Examples
### Multiple Classes (Compound Selectors)
```html
```
```css
/* Output: Creates compound selector from multiple classes */
.button.primary.large {
color: blue;
padding: 15px;
}
```
### Multiple Elements with Same Class
```html
```
```css
/* Output: Properties are automatically merged */
.button {
color: red;
margin: 10px;
}
```
### Hash Selector Generation
```html
No class or ID
```
```javascript
inlineExtract({
html: htmlContent,
selector: 'hash'
})
```
```css
/* Output: Random hash selector */
.a1b2c3 {
color: blue;
}
```
## TypeScript Support
This plugin includes full TypeScript definitions:
```typescript
import postcss from 'postcss';
import inlineExtract, { PluginOptions, SelectorType } from 'postcss-inline-extract';
const options: PluginOptions = {
html: '
',
selector: 'class' as SelectorType,
styleTags: false,
indent: 2
};
const processor = postcss([inlineExtract(options)]);
```
## License
[MIT License](LICENSE)
[PostCSS]: https://github.com/postcss/postcss