JPKCom DB

Compiler — Manual

The complete feature reference for the Compiler: all four tabs, the engines used (Dart Sass, Terser, JS Beautifier), every option, and its limits.

Back to the overview: Compiler · Open the tool: www.jpkc.com/tools/compiler/

This manual describes the Compiler in full: how the interface is laid out, each of the four tabs with its actions and options, the engine each one uses, and the limits of every mode. Tab, button, and option names appear exactly as the tool labels them.

Layout and shared controls

The tool has four tabs: SASS/SCSS, HTML, JavaScript, and CSS. Each tab is built the same way — an Input editor on the left, a read-only Output editor on the right, and an Options card below with the settings and the action buttons. Both editors are ACE editors (opens in a new tab) in the dark Dracula theme, with syntax highlighting for the relevant language (the SASS/SCSS tab's output is highlighted as CSS); long lines wrap, and the Tab key indents the input editor by two spaces.

Every tab carries the same helper functions — the buttons show only an icon, their name appears as a tooltip:

  • Upload file (input card) — loads a file into the input editor. Accepted extensions are filtered per tab (.scss/.sass/.css, .html/.htm, .js/.mjs, .css).
  • Clear (input card) — empties input and output and removes this tab's saved state. If the editor holds your own code (rather than the sample), the tool asks first ("Clear the input?"); Ctrl+Z in the input editor brings the content back even afterwards.
  • Use output as input (output card) — moves the output into the input editor, for example to edit beautified code and then minify it. The move is a single undo step: Ctrl+Z in the input editor restores what was there before.
  • Copy (output card) — copies the output to the clipboard.
  • Download (output card) — saves the output as a file. The name follows the most recently uploaded file (theme.scss becomes theme.css); without an upload it's styles (SCSS, CSS), index (HTML), or script (JavaScript). If the last action was a Minify, the tool appends .min (theme.min.css). The extension matches the tab: .css, .html, .js, .css. The name taken from an upload only lasts until you reload the page.

Auto-save: Whatever you type into an input editor is saved per tab in the browser (LocalStorage) about a second after your last keystroke and restored on your next visit; the output isn't saved. The tool also remembers the options of all tabs. On first load — and on the next load after a Clear — each tab starts with a sample snippet so you can try the behavior right away. Pressing Ctrl+Z right after the page loads doesn't empty the editor: the restored content doesn't count as an edit.

Architecture

The Compiler works entirely client-side. The page only serves the interface; all conversions are computed by JavaScript in your browser. There's no server round-trip, no API, and no history on a server — your code never leaves your machine. Everything fetched later is a script from the same domain as the tool: the Sass compiler module (see below) on the first compile, plus the editor's language modes, color theme, and syntax workers.

The libraries involved: Dart Sass (opens in a new tab) for SCSS/Sass, Terser (opens in a new tab) for JS minify, JS Beautifier (opens in a new tab) for all three beautify actions, and ACE (opens in a new tab) as the editor. HTML and CSS minify are the tool's own routines.

The SASS/SCSS tab — Compile

This tab turns SCSS, indented-syntax Sass, or plain CSS into CSS. It's the only tab that actually compiles; the other three only format or shrink.

Engine: Dart Sass (lazy-loaded)

Compilation is done by Dart Sass (opens in a new tab) in its pure JavaScript build (the sass npm package, version 1.105.1). That means the current Sass module system works: @use with built-in modules such as sass:math and sass:color, math.div() for division, and color functions like color.adjust() — exactly what the sample snippet demonstrates. The compiler module weighs around 0.9 MB gzip-compressed (just under 6 MB unpacked, across three files), so it's loaded only on your first click on Compile — the notice "Loading Sass compiler..." appears while it loads. From then on the engine stays loaded for the rest of the session. If loading fails (say, you're offline), the tool reports "Failed to load the Sass compiler." and tries again on the next click.

Option: Syntax

A select determines how Dart Sass reads the input:

  • Auto-detect (default) — the tool decides: if the code contains curly braces { } or semicolons ; outside strings and comments, it's treated as SCSS (plain CSS is valid SCSS); otherwise as the indented Sass syntax.
  • SCSS — the brace syntax with { } and ;.
  • Indented (.sass) — the indented syntax without braces or semicolons, as used in .sass files.
  • Plain CSS — the input is read as plain CSS without Sass extensions.

If you upload a file whose extension doesn't match a pinned syntax (a .sass file while SCSS is selected, or a .scss file under Indented (.sass), for instance), the tool switches the select to Auto-detect and says so in the success message ("syntax switched to Auto-detect"). If the pinned syntax doesn't match the code and compilation fails because of it, the error message points this out and suggests Auto-detect. Plain CSS is the exception: there, .css and .scss files as well as SCSS-style code count as a match — the tool doesn't switch and gives no hint, even though Sass variables, mixins, // comments, and module calls such as math.div() fail with an error under Plain CSS (a bare @use line, on the other hand, passes through into the CSS unchanged, without an error). In that case, pick Auto-detect or SCSS yourself.

Option: Output Style

A select controls the format of the CSS output:

  • Expanded (default) — readable CSS with indentation and line breaks, one declaration per line.
  • Compressed — minified CSS, everything on one line with no superfluous whitespace. Handy when you want production-ready CSS straight away, without going through the CSS minify tab afterwards.

Compile

The Compile button starts the conversion. If the engine isn't loaded yet, it's pulled in first. On success the CSS appears in the output editor on the right, along with the message "SCSS compiled successfully.".

Warnings and @debug: Anything Dart Sass reports while compiling — warnings, notices about deprecated features (prefix Deprecation:), and @debug output (prefix @debug:) — does not end up in the CSS. It goes into a yellow box below the editors ("1 message from Sass:" or "N messages from Sass:"), each entry with its line number, provided Dart Sass supplies a position. Those lines are also flagged in the input editor's gutter, and instead of the success message you get a warning notice: "Compiled with 1 warning." or "Compiled with N warnings.".

Errors: If compilation fails, the tool writes /* Compilation Error */ plus the Dart Sass message and position ("Line X, column Y") as a CSS comment into the output, flags the line as an error in the input editor, and puts the cursor right on the spot. An error message names the line and the reason — and, if the pinned syntax doesn't match the code, the hint to try Auto-detect (missing for SCSS code under Plain CSS, see above).

Limits

You can't pull in your own files via @use or @import: the tool has no access to a file system, so the entire source must sit in the input editor. The built-in modules (sass:math, sass:color, and so on) work fine. Because Dart Sass computes the way the current Sass version prescribes, older code written for LibSass or earlier Sass versions may trigger deprecation warnings or output colors in a different notation than before.

The HTML tab — Beautify & Minify

Formats or shrinks HTML. Two actions, three options.

Option: Indent Size

Indentation depth for Beautify: 2 spaces or 4 spaces (default: 4). Indentation uses spaces.

Option: Wrap Length

Maximum line length for Beautify: No wrap (0), 80, or 120 (default). Controls the width at which long lines are wrapped.

Option: Remove comments

A checkbox (default: off) that applies only to Minify: when set, HTML comments (<!-- … -->) are stripped from the output. Conditional comments (<!--[if …]> and their counterparts) stay, because they do something.

Beautify

Indents the HTML cleanly — via JS Beautifier (opens in a new tab). The content of <head> and <body> is indented as well, and existing blank lines are kept (at most two in a row). Content inside <code> and <pre> is left untouched so its whitespace is preserved.

Minify

Shrinks the HTML through an in-house routine that doesn't change how the page renders:

  • Whitespace — every run of spaces, tabs, and line breaks collapses to a single space, but is never removed entirely. A space between inline elements (<b>a</b> <i>b</i>) is visible text; drop it and the words run together.
  • <pre>, <textarea>, and <script> are kept character for character — every line break counts there, and a script folded onto one line would vanish behind a // comment.
  • <style> blocks go through the CSS tab's minifier (see below). Regular CSS comments are dropped in the process; /*! … */ comments stay.
  • Comments are only removed when Remove comments is ticked.

The success message reports the savings, e.g. "HTML minified (1.2 KB → 0.9 KB, −25 %)".

Limits

Since whitespace is collapsed rather than removed, the savings on heavily indented HTML are smaller than with more aggressive minifiers — that's the price for the page looking exactly as it did before. The routine doesn't recognize elements that get white-space: pre from CSS (instead of being a <pre>); their whitespace is collapsed like everywhere else.

The JavaScript tab — Beautify & Minify

Formats or shrinks JavaScript. Beautify and Minify use different engines and therefore have their own options.

Option: Indent Size

Indentation depth for Beautify: 2 spaces or 4 spaces (default: 4).

Option: Preserve newlines

Checkbox for Beautify (default: on): existing blank lines in the source are kept — several in a row shrink to one. Unticked, Beautify removes all blank lines.

Option: Drop console

Checkbox for Minify (default: off): removes console.* calls from the result — useful for clearing debug output out of production code.

Option: Mangle names

Checkbox for Minify (default: on): shortens local variable and function names, which shrinks the file further.

Beautify

Formats JavaScript for readability — via JS Beautifier (opens in a new tab), with a collapsed brace style (brace_style: collapse) and a space after an anonymous function (function ()). Further formatting options such as brace style or comma-first are available in the Beautify tool.

Minify

Shrinks JavaScript with Terser (opens in a new tab), the de-facto standard minifier. Processing is asynchronous; on a syntax error in the input the tool writes the error message into the output as // Error: … and reports it as a notice as well. Terser understands modern JavaScript (ES2015+).

Limits

Mangle names only shortens names that are safe to rename locally — global APIs and exported names stay unchanged. Drop console removes console calls; if your code relies on their return value elsewhere (rare), keep that in mind.

The CSS tab — Beautify & Minify

Formats or shrinks CSS. Two options, two actions.

Option: Indent Size

Indentation depth for Beautify: 2 spaces or 4 spaces (default: 4).

Option: Remove comments (minify)

Checkbox for Minify (default: on): strips CSS comments (/* … */). Untick it and every comment stays in the result. Comments of the form /*! … */ — the usual notation for license and copyright notices — are kept either way.

Beautify

Indents CSS for readability — via JS Beautifier (opens in a new tab).

Minify

Shrinks CSS through an in-house routine that doesn't change its meaning:

  • Strings ("…", '…') stay as they are — content: "a : b" keeps its spaces. The one exception: the final step shortens the sequence ;} to } everywhere, including inside strings and kept comments.
  • Whitespace is collapsed and only removed entirely where it carries no meaning: around {, }, ;, ,, >, and ~. It stays around +, because calc() needs it, and around : in selectors as well, since div :first-child (descendant) is not the same as div:first-child.
  • Declarations are tightened: color : red; becomes color:red;, and the last semicolon before } is dropped. If the value contains a string (content : "…", font-family : "Segoe UI"), the spaces around : stay.
  • Comments disappear as long as Remove comments (minify) is ticked; /*! … */ always stays.

The success message reports the savings, e.g. "CSS minified (2.1 KB → 1.5 KB, −29 %)".

Limits

The minify doesn't shorten values (#ffffff doesn't become #fff, 0px doesn't become 0) and doesn't merge rules — it only removes whitespace and comments. If you want SCSS minified in one step, the Compressed Output Style in the SASS/SCSS tab is the better route.

How this differs from the Beautify tool

The Compiler can beautify HTML, JavaScript, and CSS — using the same library as the standalone Beautify tool. The features deliberately overlap, and the hint texts in the HTML, JavaScript, and CSS tabs link to Beautify. The difference: Beautify specializes in formatting, exposes all of JS Beautifier's options, and can additionally unpack P.A.C.K.E.R.-packed and URL-encoded JavaScript (option Detect packers) — which the Compiler doesn't do. Conversely, only the Compiler can minify and compile SCSS. If you just need clean indentation as part of a compile/minify task, stay here; if you need unpacking or finer formatting control, Beautify is the right address.

Operational facts — at a glance

  • Client-side: All conversions run in the browser; your code is never uploaded to a server — no API, no history.
  • Lazy Sass: The Dart Sass module (~0.9 MB gzip-compressed) loads only on the first compile (once per session).
  • Engines: SCSS/Sass → Dart Sass 1.105.1; JS minify → Terser; HTML/JS/CSS beautify → JS Beautifier; HTML/CSS minify → in-house routines that leave the rendering intact.
  • SCSS options: Syntax Auto-detect/SCSS/Indented (.sass)/Plain CSS, Output Style Expanded/Compressed; warnings and @debug listed below the editors.
  • Persistence: Inputs per tab and the options of all tabs are saved in LocalStorage and restored.
  • I/O: Upload (filtered extensions), Use output as input, Copy, Download under the uploaded name or styles/index/script (with .min after a minify), Clear with confirmation per tab.

For the introduction and the big picture see the overview page. Concrete workflows are in the examples, strategy and pitfalls in the tips & tricks.