Gathering detailed insights and metrics for inline2css
Gathering detailed insights and metrics for inline2css
Gathering detailed insights and metrics for inline2css
Gathering detailed insights and metrics for inline2css
npm install inline2css
Typescript
Module System
Min. Node Version
Node Version
NPM Version
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
A tool that converts inline styles and framework-specific classes (Bootstrap and Tailwind) from HTML files into external CSS. This helps improve code maintainability and separation of concerns.
1npm install inline2css
1# Basic usage 2npx inline2css --input input.html --output styles.css 3 4# With all options 5npx inline2css --input input.html --output styles.css --html-output modified.html --stats \ 6 --prefix "custom_" --sort alphabetical --optimize-selectors --minify --validate \ 7 --preserve-specificity --sourcemap 8 9# Using a URL as input 10npx inline2css --url https://example.com --output styles.css
1const inline2css = require('inline2css'); 2 3// Process HTML file with enhanced features 4inline2css.processHtmlEnhanced('input.html', { 5 idPrefix: 'custom_', 6 sortProperties: true, 7 sortMethod: 'alphabetical', // or 'type' 8 optimizeSelectors: true, 9 minify: true, 10 validateHtml: true, 11 detectFrameworks: true, 12 preserveSpecificity: true, 13 trackLineNumbers: true, 14 generateSourceMap: true, 15 sourceFile: 'input.html', 16 outputFile: 'styles.css' 17}) 18 .then(result => { 19 console.log('CSS:', result.css); 20 console.log('Modified HTML:', result.html); 21 console.log('Stats:', result.stats); 22 console.log('Source Map:', result.sourceMap); 23 }) 24 .catch(err => { 25 console.error('Error:', err); 26 }); 27 28// Original API still works 29inline2css.processFile('input.html') 30 .then(result => { 31 console.log('CSS:', result.css); 32 console.log('Modified HTML:', result.html); 33 console.log('Stats:', result.stats); 34 });
--input
, -i
: Path to input HTML file--url
, -u
: URL to fetch HTML from (alternative to --input)--output
, -o
: Path to output CSS file--html-output
: Path to output modified HTML file (optional)--stats
, -s
: Show statistics about extracted styles (optional)--prefix <prefix>
: Custom prefix for generated IDs (default: "inline2css_")--sort [method]
: Sort CSS properties (alphabetical or type)--optimize-selectors
: Generate optimized selectors instead of always using IDs--minify
: Minify the output CSS--validate
: Validate HTML structure and show warnings--no-framework-detection
: Disable automatic framework detection--preserve-specificity
: Maintain the original specificity of styles--no-line-numbers
: Disable line number tracking--sourcemap
: Generate source map for debugging1<!-- input.html --> 2<div style="color: red; font-size: 16px;"> 3 <p style="margin: 10px;">This is a test</p> 4</div>
1npx inline2css --input input.html --output styles.css
Generated CSS (styles.css):
1/* Generated by inline2css */ 2 3#inline2css_a1b2c3d4 { 4 color: red; 5 font-size: 16px; 6} 7 8#inline2css_e5f6g7h8 { 9 margin: 10px; 10}
1npx inline2css --input input.html --output styles.css --optimize-selectors
Generated CSS with optimized selectors:
1/* Generated by inline2css with optimized selectors */ 2 3div { 4 color: red; 5 font-size: 16px; 6} 7 8div > p { 9 margin: 10px; 10}
1npx inline2css --input input.html --output styles.css --sort type
Generated CSS with properties sorted by type:
1/* Generated by inline2css */ 2 3#inline2css_a1b2c3d4 { 4 font-size: 16px; 5 color: red; 6} 7 8#inline2css_e5f6g7h8 { 9 margin: 10px; 10}
MIT
No vulnerabilities found.
No security vulnerabilities found.