inline2css

inline2css v0.2.0

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.

New Features in v0.2.0

• Line Number Tracking: Shows where each element is located in the original HTML
• Selector Optimization: Generates intelligent selectors using class names and element hierarchies
• CSS Minification: Adds a flag to output minified CSS for production
• Source Maps Support: Generates source maps to help with debugging
• Custom Prefix Option: Allows customization of the ID prefix
• Framework Detection: Automatically detects which frameworks are being used
• Media Query Support: Better handling of responsive Bootstrap/Tailwind classes
• CSS Property Sorting: Sorts properties alphabetically or by type
• Specificity Preservation: Maintains the original specificity of styles
• HTML Validation: Warns about invalid HTML structure

Installation

npm install inline2css

Usage

Command Line Interface

# Basic usage
npx inline2css --input input.html --output styles.css

# With all options
npx inline2css --input input.html --output styles.css --html-output modified.html --stats \
  --prefix "custom_" --sort alphabetical --optimize-selectors --minify --validate \
  --preserve-specificity --sourcemap

# Using a URL as input
npx inline2css --url https://example.com --output styles.css

JavaScript API

const inline2css = require('inline2css');

// Process HTML file with enhanced features
inline2css.processHtmlEnhanced('input.html', {
  idPrefix: 'custom_',
  sortProperties: true,
  sortMethod: 'alphabetical', // or 'type'
  optimizeSelectors: true,
  minify: true,
  validateHtml: true,
  detectFrameworks: true,
  preserveSpecificity: true,
  trackLineNumbers: true,
  generateSourceMap: true,
  sourceFile: 'input.html',
  outputFile: 'styles.css'
})
  .then(result => {
    console.log('CSS:', result.css);
    console.log('Modified HTML:', result.html);
    console.log('Stats:', result.stats);
    console.log('Source Map:', result.sourceMap);
  })
  .catch(err => {
    console.error('Error:', err);
  });

// Original API still works
inline2css.processFile('input.html')
  .then(result => {
    console.log('CSS:', result.css);
    console.log('Modified HTML:', result.html);
    console.log('Stats:', result.stats);
  });

Command Line Options

Basic Options

• --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)

New Options in v0.2.0

• --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 debugging

Examples

Converting a file with inline styles

<!-- input.html -->
<div style="color: red; font-size: 16px;">
  <p style="margin: 10px;">This is a test</p>
</div>

npx inline2css --input input.html --output styles.css

Generated CSS (styles.css):

/* Generated by inline2css */

#inline2css_a1b2c3d4 {
    color: red;
    font-size: 16px;
}

#inline2css_e5f6g7h8 {
    margin: 10px;
}

Using selector optimization

npx inline2css --input input.html --output styles.css --optimize-selectors

Generated CSS with optimized selectors:

/* Generated by inline2css with optimized selectors */

div {
    color: red;
    font-size: 16px;
}

div > p {
    margin: 10px;
}

Using CSS property sorting

npx inline2css --input input.html --output styles.css --sort type

Generated CSS with properties sorted by type:

/* Generated by inline2css */

#inline2css_a1b2c3d4 {
    font-size: 16px;
    color: red;
}

#inline2css_e5f6g7h8 {
    margin: 10px;
}

Dependencies

• cheerio: HTML parsing (similar to BeautifulSoup in Python)
• commander: Command-line interface
• axios: HTTP requests for URL fetching

License

MIT