About

Distributing a front-end application as a single JavaScript file requires embedding CSS directly into the JS bundle. This converter wraps raw CSS text inside a JavaScript snippet that programmatically creates a <style> element and injects it into the document <head> at runtime. The approach mirrors tools like gulp-css2js and grunt-css2js. Incorrect escaping of quote characters, backslashes, or newline sequences in the CSS source will produce a JavaScript syntax error that silently breaks your entire stylesheet. This tool handles those edge cases: it escapes \, ", and line terminators before wrapping.

An optional CSS minification pass strips comments, collapses whitespace, and removes redundant semicolons before conversion, reducing the final bundle size. The prefix and suffix are fully configurable - you can output a DOM-injecting IIFE, assign CSS text to a variable, or wrap it in a CommonJS module.exports. Note: this tool performs textual wrapping only. It does not parse or validate CSS syntax. Malformed CSS will be faithfully embedded as-is.

Formulas

The conversion algorithm applies a sequential transformation pipeline to the raw CSS source string S:

S₁ = minify(S) if minification enabled

S₂ = trimTrailingNewline(S₁)

S₃ = trimSpacesBeforeNewline(S₂)

S₄ = escapeBackslashes(S₃) → \ → \\

S₅ = escapeQuotes(S₄) → " → \"

S₆ = splitOnNewline(S₅) if enabled: join lines with \n" + "

output = prefix + S₆ + suffix

Where prefix defaults to an IIFE that creates a <style> element: (function(c){var d=document,s=d.createElement("style");s.textContent=c;d.head.appendChild(s);})(" and suffix closes with ");. The minify function applies regex passes: strip /* ... */ comments, collapse consecutive whitespace to single space, remove spaces adjacent to { } : ; , selectors, and remove trailing semicolons before closing braces.

Reference Data

Option	Default	Effect
prefix	DOM injection IIFE open	String prepended before escaped CSS text
suffix	DOM injection IIFE close	String appended after escaped CSS text
splitOnNewline	TRUE	Each CSS line becomes a separate JS string concatenation line
trimSpacesBeforeNewline	TRUE	Strips trailing spaces on each line before escaping
trimTrailingNewline	TRUE	Removes final newline characters from CSS input
minifyCSS	FALSE	Strips comments, collapses whitespace, removes redundant semicolons
Escape: \	Always	Backslashes doubled to \\
Escape: "	Always	Double quotes escaped to \"
Escape: "	When single-quote prefix	Single quotes escaped to \"
Escape: newline	Always	Literal newlines replaced with \n in strings
Escape: carriage return	Always	Literal \r removed or escaped
Output: DOM injection	Default mode	Generates IIFE that creates <style> element
Output: Variable assignment	Preset available	Assigns CSS string to var cssText
Output: ES module export	Preset available	Uses export default syntax
Output: CommonJS export	Preset available	Uses module.exports syntax
File input	Supported	Upload .css files via drag-and-drop or file picker
File output	Supported	Download result as .js file

Frequently Asked Questions

The default output wraps CSS in an immediately-invoked function expression (IIFE) that calls document.createElement("style"), sets its textContent to the CSS string, and appends the node to document.head. This executes synchronously when the script loads, so styles are available before the next paint in most browsers.

Yes. The converter escapes backslashes first (doubling them), then escapes double-quote characters. This order matters - reversing it would double-escape the backslashes inserted by quote escaping. CSS content like url("image.png") or Unicode escapes like \e001 are handled correctly.

When enabled, each line of CSS becomes its own quoted string segment joined with + concatenation operators, producing readable multi-line JavaScript. When disabled, the entire CSS is a single string on one line. Disabled mode produces slightly smaller output. Enabled mode is easier to debug when inspecting the generated JS file.

No. The built-in minifier applies basic regex transformations: comment removal, whitespace collapsing, and redundant semicolon trimming. It does not perform advanced optimizations like property merging, shorthand conversion, or duplicate rule elimination. For production bundles, minify CSS with a dedicated tool first, then pass the result through this converter.

Yes. Switch the output mode preset to Variable Assignment, ES Module, or CommonJS, or manually edit the prefix and suffix fields. For example, set prefix to var cssText = " and suffix to ";\n to store the CSS string in a variable without any DOM manipulation.

The converter performs textual wrapping only. It does not resolve or inline external references. Any @import statements or relative url() paths will remain as-is in the embedded string. At runtime, those references resolve relative to the HTML document, not the original CSS file location. You must adjust paths or inline assets before conversion.