CodeKit for Mac

What's new in this version:

CodeKit 3.29
Improved:
- Updates Dart Sass to the version released 12 seconds after the last CodeKit update so that Sass files in Foundation 6.9 compile
- Yes, Foundation still exists
- It's a race between Zurb and I to see who lasts longer and I'll be damned if the chubby astronaut is gonna win that fight


CodeKit 3.28
Improvements:
- @compile statements in Kit files would fail if the target file had its Output Action set to "ignore"
- TypeScript's JSX Fragment Factory option is now exposed in Project Settings. It defaults to "Fragment".
- ^-- I have no idea what that means
- Full support for macOS Sequoia

Component Updates:
- Autoprefixer 10.4.20
- Babel 7.25.2
- Browserslist 4.23.3
- Dart Sass 1.78.0
- ESLint 9.10.0
- Node 20.17.0
- Npm 10.8.3
- PostCSS 8.4.47
- Pug 3.0.3
- Rollup 4.21.3
- SVGO 3.3.2
- Terser 5.32.0
- TypeScript 5.6.2


CodeKit 3.27
ESLint Changes:
- ESLint 9.0 drops support for the handy "environment" options (browser, jQuery, etc.) and instead makes YOU responsible for knowing what global variables are needed for a given environment
- CodeKit has always been about getting rid of friction, so the environment options continue to work just as they always have—I simply reimplemented what ESLint dropped
- ESLint 9 also drops support for .eslintrc files, so those options have disappeared from the UI


CodeKit 3.26
Improved:
- App go more vroom. CodeKit has always been fast and has always compiled on background threads. This release is even faster because it migrates many tools to Swift Concurrency, which reduces thread-shifting overhead in the macOS kernel.
- The UI is now more fingerprint resistant

Deprecations:
- Libsass: it's going away. It hasn't been updated in years and Dart Sass is the official standard now. The next release will drop Libsass.
- ESLint Formatting Rules: ESLint deprecated 30+ rules that enforce only style, not code-correctness. These rules will disappear in the future.
- My Space Gray MacBook Pro From 10 Months Ago: I am embarrassed to be seen with it


CodeKit 3.25
Improved:
- Resolves UI glitches on the macOS Sonoma betas


CodeKit 3.24
Improved:
The cache buster now skips canonical links:
- I'm aware of UI-related issues on the macOS Sonoma betas. Apple always fixes those before the GM release and CodeKit will be ready when Sonoma goes live.

Fixed:
- Creating a new Zurb Foundation project might crash the app
- "Might" is doing a lot of work there


CodeKit 3.23.1
- Change log not available for this version


CodeKit 3.21
Fixed:
- Installing packages that require cloning with Git might hang on Apple Silicon Macs without Rosetta 2 installed
- An issue where Silicon Valley had too many banks

Rollup External Modules:
- By default, if you import an external JS module but don't use any code from it, Rollup assumes you still need the import because the module does something else that's important. You can now disable this assumption in Project Settings > Rollup, if needed.


CodeKit 3.20
- You can now customize which comments Terser removes during JS minification
- Fixed a crash in the "Apply Best Defaults for Build Folders" routine
- Apparently lied about fixing that crash three updates ago
- If you hate yourself enough to still be using Bower in 2023, Rollup will no longer resolve Bower imports during JS bundling. Switch to npm


CodeKit 3.19
Bootstrap:
- The JS file that bundles Bootstrap components is now named so that you can access it from external scripts using the standard new bootstrap.Popover(...) syntax
- This has no effect on existing projects; only ones you create from now on

Other Changes:
- The Projects Sidebar (you knew that was a thing, right?) sometimes didn't show disabled Projects as disabled
- When installing npm packages, the target Project is no longer explicitly disabled, but CodeKit still ignores file-change events in that Project until the installation completes
- Adds support for the Dynamic Island


CodeKit 3.18.2
- Resolves potential crashes introduced by the Swift 5.5 compiler


CodeKit 3.18.1
- 3.18.1 resolves a potential AppleScript crash on macOS 12.5

Changed:
- Updated the Bootstrap starter project to support Bootstrap 5.2+
- When an optimized image is larger than the original, the UI now highlights that in red
- This happens if you take an optimized image and re-optimize it at a much higher quality setting
- Don't do that

TypeScript:
- TypeScript has a new Module Detection option to control how TS scans for ES6 vs CommonJS modules
- This is unrelated to the Module Resolution option that has existed forever
- There's 37 paragraphs of gibberish on the TypeScript blog that explains the option
- "Explains" is a strong word


CodeKit 3.17.1
Changed:
- ESLint regrouped its 3,451 rules
- Some of the rules in the new "suggested" group would make me "suggest" that the person who selected rules for that group "introduce" their "face" to a "wall" repeatedly
- Violence is apparently frowned upon by HR
- *.woff and *.woff2 files will no longer be cache-busted because Chrome whines when they are
- Dart Sass is finally fully-native on Apple Silicon, so it's faster than ever

Fixed:
- Kit @import statements incorrectly ignored spaces in file paths
- Double-clicking files in the list would sometimes not work correctly
- 3.17.1 fixes a crash that might occur if you removed a project while the Build pane was open


CodeKit 3.17
Changed:
- ESLint regrouped its 3,451 rules
- Some of the rules in the new "suggested" group would make me "suggest" that the person who selected rules for that group "introduce" their "face" to a "wall" repeatedly.
- Violence is apparently frowned upon by HR.
- *.woff and *.woff2 files will no longer be cache-busted because Chrome whines when they are
- Dart Sass is finally fully-native on Apple Silicon, so it's faster than ever

Fixed:
- Kit @import statements incorrectly ignored spaces in file paths
- Double-clicking files in the list would sometimes not work correctly

Component Updates:
- Autoprefixer 10.4.7
- Babel 7.17.10
- Browserslist 4.20.3
- CoffeeScript 2.7.0
- Dart Sass 1.50.0
- ESLint 8.14.0
- Node 16.15.0
- PostCSS 8.4.12
- Rollup 2.71.1
- Stylus 0.57.0
- Terser 5.13.1
- TypeScript 4.6.4


CodeKit 3.16.1
- Fixes an issue where Tailwind files might not compile correctly.


CodeKit 3.16
Bootstrap 5:
- CodeKit can now automatically spin up a Bootstrap 5 Project.
- Choose File > New Bootstrap Project
- Watch the screencast or read the docs for details.

Tailwind 3.x:
- New Tailwind Projects now default to Tailwind 3.x
- The new "JIT Mode" is automatically supported for these projects.
- Legacy Tailwind 2.x projects still work just fine, too.

Different:
- New option in Preferences: CodeKit can now auto-switch the active project when you save files.
- I did not test what happens if you save files from 15 different projects at once.
- I recommend that you also not test what happens if you save files from 15 different projects at once.
- Files changed by replacement via drag-n-drop in the Finder are now processed automatically again.
- CoffeeLint was discontinued and hadn't been updated in five years. It's removed.

Also Different:
- Dart Sass 1.45.1 has a couple potentially-breaking changes you should read about.
- CodeKit now requires macOS 10.15+ because Xcode 13.2 got dumber. (There's a bug in the build process that causes crashes on 10.13 and 10.14.)
- Yes, I told Apple.
- Yes, Apple ignored me.
- Yes, that's how it always goes.
- Yes, I'm looking forward to WWDC 2022, where Apple will once again lie to promise me how valuable and important I am and how we're "partners" working to "inspire dreams."


CodeKit 3.15.1
Changed:
- Pop-up buttons are no longer comically oversized on Monterey.
- Added HDMI port & SD card slot.
- Did Babel's job for them (see below).
- Increased app thickness to fill new $3,500 hole in wallet caused by HDMI port and SD card slot.

Async/Await:
- To use "async/await" in your JS, go to Project Settings > Babel and set the useBuiltIns option to "Usage".
- When you do, CodeKit now verifies that you have the right dependencies installed and offers to install them if needed.
- Could have saved, like, 6,000 support emails if I had done this five years ago.

Component Updates:
- Autoprefixer 10.4.0
- Babel 7.16.0
- CoffeeScript 2.6.1
- Dart Sass 1.43.4
- ESLint 8.2.0
- Less 4.1.2
- Node 16.13.0
- PostCSS 8.3.11
- Rollup 2.60.0
- SVGO 2.8.0
- Terser 5.10.0
- TypeScript 4.5.2


CodeKit 3.15
Tailwind JIT:
- Tailwind's new JIT mode is now fully supported.
- Add mode: 'jit' to your tailwind.config.js file, save, and then refresh the project in CodeKit.
- No other configuration is needed; CodeKit will take it from there.

Improved:
- Node.js is now native on M1 Macs, making just about every tool in the app faster.

Fixed:
- The chevrons in outlineViews were sometimes the wrong color.
- The shadows around buttons disappeared if you toggled dark mode, making buttons hard to see.
- The 'emit character set' option for Dart Sass actually works now.
- Terser's 'reserved names' list is now always honored.
- Sublime Text 4 appears in code editor menus.

We're Breaking Up:
- This release removes Compass, which was end-of-lifed 5 years ago. It also removes JSHint and JSLint. If you were still using those, JS files will switch to ESLint automatically.


CodeKit 3.14.4
Things That Got Better:
- The Environment option can now be changed from the Project Inspector.
- Things That Were Supposed To Have Gotten Better Last Time:
- Sweet, merciful Christ I think PurgeCSS is finally good to go.
- First, I modified PurgeCSS to support skipping folders.
- Next, I added that to the UI in Project Settings > PurgeCSS
- End result: PurgeCSS won't scan the "node_modules" folder anymore.

Things That Suck Less:
- If you have a typo in your package.json file, the error message in the log is more helpful in that the error message now actually shows up in the log.
- Creating a new Zurb Foundation project won't crash.
- Root-relative Pug imports now link correctly.


CodeKit 3.14.3
New Right-Click Options:
- Right-click any file/folder and preview it directly in any web browser.
- You can now open any file's output in Finder from the right-click menu.

PurgeCSS Fix:
- Remember how I said PurgeCSS would shoot you in the foot if you didn't configure it correctly?
- Turns out, the PurgeCSS docs were out of date and a thing that used to work no longer works.
- I used the thing in CodeKit 3.14.2. Because of course.
- This update fixes the thing.
- Yes, this means that *I* did not configure PurgeCSS correctly.
- In my defense, I still suck less than whoever is building the rocket engines for SpaceX.
- (Don't use the negation operator ! in PurgeCSS content entries.)

Other Fixes:
- Stylus files compile without dumb warnings again.
- PostCSS no longer runs when there's nothing to do.

App go Vroooom:
- Node.js is now native on Apple Silicon, so almost every tool in CodeKit is even faster.
- Intel is soooo screwed.

Component Updates:
- SVGO 2.2.0
- PostCSS 8.2.7
- Babel 7.13.8
- Rollup 2.40.0
- TypeScript 4.2.2
- Pug 3.0.2
- ESLint 7.21.0
- PurgeCSS 4.0.2
- Node 15.11.0


CodeKit 3.14.2
- Removes a useless Babel warning about unused options.


CodeKit 3.14.1
- Fixes build steps that might run out of order, a pedantic npm warning, and the HTML minifier possibly removing cache-busting queries.


CodeKit 3.14.0
TailwindCSS:
- CodeKit now automatically supports TailwindCSS projects.
- Use File > New TailwindCSS Project to spin one up fast.
- Existing Tailwind projects are also supported from version 1.9.6+
- For details, read the docs or watch the screencast.

PurgeCSS:
- PurgeCSS is now available for CSS, Sass, Less, and Stylus files.
- It gets rid of unused CSS rules.
- If you configure it incorrectly, it gets rid of all CSS rules.
- Configure it correctly.
- To do that, read the docs or watch the screencast.
- If you email me, "CodeKit breaks my site!" and it turns out you forgot to configure PurgeCSS, I get to put a MIDI of my choice on your website for a month.
- I have "MMMBop" in MIDI.

CSSO:
- CSSO is a highly-tuned CSS optimizer/minifier.
- You can run it on CSS, Sass, Less, and Stylus files.
- If you set the options just right, you can have PurgeCSS shoot you in one foot and CSSO shoot you in the other.
- No, I will not share my "MMMBop" MIDI.

Custom PostCSS Plugins:
- CodeKit now honors your postcss.config.js file and runs any custom PostCSS plugins that you specify.
- You can install PostCSS plugins from CodeKit's Packages area, like a civilized human.
- There are important details about integrating your custom PostCSS plugins into the flow of plugins that are built into CodeKit.
- You're fresh out of feet, so the next thing you're gonna shoot off is more valuable. Better read the docs or watch the screencast, Doc Holiday.

CSS Imports:
- You can now (optionally) have CodeKit combine all @import-ed files in a CSS file.
- CSS files now show a "Linked Files" pane.
- You can import CSS files in the same project, an npm package, or a CodeKit Framework.
- Look, it's not important why I have an "MMMBop" MIDI.

Build Environment Option:
- There's a new "Environment" option in Project Settings > General.
- You can now set certain tools (PurgeCSS, CSSO, Minifiers, Source Maps, etc.) to run only in a given environment.
- The value from the PopUp Button is automatically synced with the NODE_ENV environment variable.

Big Changes:
- CodeKit now runs natively on Apple Silicon.
- Support for macOS 10.11 and 10.12 is dropped. Update your OS.

Other Changes:
- More UI has been overhauled for Big Sur.
- Rollup's "context" option is now exposed.
- You can now select hidden folders in "Choose a Folder" panels.
- The discontinued Neat framework no longer appears in the UI, but projects using it will still compile just fine.
- Tool config files are now auto-ignored unless you explicitly change their Output Action.
- The "strict math" option for Less files is removed because Less 4.0 no longer supports it.
- The entire browser-refresh server was re-written using Swift-NIO. It's faster, better, thinner, sexier, multi-threaded...it's basically Tom Brady moving forward through time.

Fixed:
- The cache buster generated different hashes for a file, even when the file's content had not changed.
- The Packages list didn't sort correctly when reloaded.
- Certain dependency links between Kit files weren't detected until a Project was refreshed.
- Browser Refreshing might break if you used the back button in your browser.


CodeKit 3.13.3
New WebP Image Optimization:
- WebP is a Google image format that's 50-70% smaller on disk than JPEG or PNG
- CodeKit can now automatically export a WebP version of any PNG, JPEG, or GIF-even animated GIFs
- Complete control over all 8,000 WebP Optimizer settings, neatly organized into "Presets"
- CodeKit adds WebP support system-wide, so you can view WebPs (ugh) in Finder and via QuickLook
- Read the documentation or watch the screencast to get up to speed

New Nova Extension:
- Nova is a new NATIVE Mac editor by Panic
- It does not suck
- This extension automatically launches CodeKit and adds your Project to the app whenever you open it in Nova, saving you time and hassle
- Install the Extension by downloading it or via Nova's Extension Library
- I am slightly miffed that Nova's first-run screen is now cooler than mine. I will escalate this fight until GPUs set houses on fire, Panic

Changed:
- The UI has been updated for Big Sur
- The thumbnail at the top of the image inspector is now much more performant
- The AppleScript API has a new method to refresh a Project
- The core task-dispatching part of CodeKit is now written in Swift and builds got about 12% faster as a result

Fixed:
- Certain textfields magically warped colors when edited in Dark Mode
- An issue where a "Run Script" Build Step might not save its script source correctly
- Edge didn't show up in the list of browsers because Microsoft changed its bundle identifier
- An edge-case memory leak in the Sass import scanner
- 3.13.2 fixes a bug in 3.13 where files set to "copy" would hang indefinitely and a bug where the "file-watching is paused" banner failed to show


CodeKit 3.10.2
New:
The Kit @Compile Statement:
- Works like @import, but compiles the file first.
- Example: @compile 'someFile.md' will compile 'someFile.md' and drop the output in place.
- Works with any file CodeKit supports, including custom file types you add to the app.
- For details, watch this screencast or read the documentation.

Image Comparison Tool:
- You know how every fall all the blogs are like, "The Pixel 67 clearly takes better photos than the iPhone 24 Pro Max. I mean, just look at my child's hair by candlelight. LOOK AT MY CHILD! LOOK AT IT!"
- You know how those blogs have little sliders you can drag to compare the same photo from iPhone-whatsit and Android-dontcare?

That's now in CodeKit:
- a screenshot of the image compare tool in CodeKit
- If your Project uses a Build Folder (so the image doesn't overwrite itself when optimizing), you can instantly compare the original and optimized versions. Select the file and hit the space bar or double-click the preview thumbnail in the Inspector

Other New Stuff:
- Custom Environment Variables — Set them in the General section of Project Settings. They're available in all Hooks, Build Steps, and most of the tools CodeKit runs (including Babel, Rollup, etc.). See the documentation
- Libsass Globbing — Sass globbing is now supported when using the Libsass compiler (Even multi-level globbing)
- Rollup Options — You can now specify external modules, enable/disable Treeshaking, and force string replacements when bundling. See the documentation.

Changed:
- PNGQuant is now multi-threaded and optimizes large PNGs faster
- If you're still running macOS 10.11 or 10.12, you'll see a warning when CodeKit launches. Parts of the UI won't look right because of bugs in those ancient OS versions

Fixed:
- Output Paths weren't editable sometimes because Swift is a pedantic ass
- "Run Script" Build Steps sometimes failed if they appeared at the end of the Build process
- Links to ESLint rules in the Log didn't work because Swift is a pedantic ass
- Sass @debug statements weren't working due to a change in Libsass
- ESLint wasn't working for some people in the original 3.10 release


CodeKit 3.10.1
- Change log not available for this version


CodeKit 3.9.2

- 3.9.2 fixes issues where TypeScript files failed to compile and npm packages with names shorter than 4 characters didn't show up in search results

Quick Fix:
- 3.9.2 fixes issues where TypeScript files failed to compile and npm packages with names shorter than 4 characters didn't show up in search results

NEW: npm!:
- The 'Components' area of CodeKit has been 100% rebuilt from scratch
- It's WAY better. Faster, smoother, sexier. It's like Scarlett Johnasson, Ryan Reynolds, and Rachel McAdams had a sleepover with jQuery
- This is the nicest thing anyone has ever said about jQuery
- npm is now the default package manager
- The old UI was terrible. I'd say I can't believe you put up with that garbage, but you've probably got Slack's app running right now, don't you?
- Bower is still fully supported. You can switch to it at any time, it uses the same new UI, and I even gave it new features. (Bower is deprecated by the developer, but it will be in CodeKit as long as it exists.)
- There are SO many new features: uninstalling, pruning, viewing changelogs in one click, breaking/non-breaking update warnings, custom endpoint installations, installing from a package.json file...
- Watch this 5-minute screencast to get up to speed fast. Or read the documentation

NEW: Notification Control:
- You can now control exactly when CodeKit posts notifications, beeps, and comes to the front
- See Preferences > Notifications
- It was not possible to migrate your old options to this new system

Other New Stuff:
- Builds are 32% faster
- The log design has been tweaked. (It's not the sexy sleepover that the new npm interface is, but it's not Gary Busey either.)
- Added the Babel UseBuiltIns and excludePaths options to the UI. (You can now control polyfills and transpile items in node_modules folders.)
- New project icons
- The "Open With" menus now include Terminal as an option
- You can now force CodeKit to always reload the entire page, even when just CSS files change. (Useful for Shopify developers.) See Project Settings > Browser Refreshing
- CodeKit is now notarized by Apple for security

Changed:
- CodeKit now attempts to keep its window the same size. Previously, when you switched sections, the app restored the last known size for that section
- CodeKit now supports full screen
- Windows are now much more fluid when resizing/animating
- Pages that do not have a or tag will now auto-refresh as long as they are HTML files
- Previously, CodeKit would use up to 8 CPU cores during builds. If your Mac has more than that, CodeKit will now use them all

Fixed:
- An issue where JS files with @codeKit statements wouldn't compile un-minified
- An issue where the Project Icon Picker wouldn't display icons sometimes
- An issue where browsers might hang and refuse to load the page if you switched the Preview Server from TLS to non-TLS

macOS Catalina:
- I don't officially support macOS betas, but folks tell me CodeKit is working fine on 10.15. This update is fully notarized and should be ready for Catalina

Major Component Updates:
- Autoprefixer 9.6.1
- RollupJS 1.17.0
- TerserJS 4.1.2
- Babel 7.5.5
- Libsass 3.6.1
- Browserslist 4.6.6
- TypeScript 3.5.3
- ESLint 6.1.0
- SVGO 1.3.0
- HTML-Minifier 4.0.0
- CoffeeScript 2.4.1
- Node 10.16.0


CodeKit 3.9.1
- Change log not available for this version


CodeKit 3.8.2
- Fixes a crash that occurred when scanning malformed Bower packages for import statements


CodeKit 3.8.1
- Fixes an issue in 3.8 that caused crashes with the Projects Sidebar open


CodeKit 3.7.4

Sass and CSS:
- The last update made it impossible to import CSS files into Sass files
- The Sass team decided to roll back that change
- This update restores the ability to @import CSS files. To have their content added to your Sass file, make sure your import statement does NOT include the .css extension

Fixed:
- The browserslist label on the AutoPrefixer pane of Project Settings didn't update correctly


CodeKit 3.7.3
- Babel source maps stopped working and enabling TLS could crash on Mojave
- Remember when I said the new Content-Security-Policy headers "just work"? Turns out I meant that in more of the AirDrop sense: "60% of the time, it works every GODDAMMIT THE DEVICE IS RIGHT HERE WHY CAN'T YOU SEE IT IF I HAVE TO TOGGLE WIFI ON AND OFF ONE MORE TIME I'M BUYING A DELL I SWEAR."
- Anyway, CSP now works correctly. I promise
- The rule editor in the Hooks area wouldn't save changes. That seemed inconvenient, so now it does


CodeKit 3.7.2
- Remember when I said the new Content-Security-Policy headers "just work"? Turns out I meant that in more of the AirDrop sense: "60% of the time, it works every GODDAMMIT THE DEVICE IS RIGHT HERE WHY CAN'T YOU SEE IT IF I HAVE TO TOGGLE WIFI ON AND OFF ONE MORE TIME I'M BUYING A DELL I SWEAR."
- Anyway, CSP now works correctly. I promise.
- The rule editor in the Hooks area wouldn't save changes. That seemed inconvenient, so now it does


CodeKit 3.7.1
- Change log not available for this version


CodeKit 3.7
New: Dark Mode + Mojave Support:
- Dark mode is available on every version of macOS, not just Mojave.
- On 10.14+, CodeKit will match the system accent color by default, but you can set a different one if you prefer.
- Adopted Apple's new "runtime hardening" security. If the app is somehow ever compromised, this feature vastly limits what an attacker could access on your Mac.

New: Target Browsers:
- A new category in Project Settings: Target Browsers
- Shows all the desktop and mobile browsers in which your project will work.
- Shows coverage percentages for the world and your local region.
- Babel, Autoprefixer, and other tools will now automatically configure themselves based on what browsers you enter here.

New: Babel 7:
- No more configuring. Babel will automatically choose the right plugins based on the browsers you support.
- Much faster transpiling.
- If you previously customized Babel settings, double-check them after updating.
- New: Base64 Imports in Kit Files:
- In Kit files, you can now write @import-base64 'someFile.png' to automatically base64-encode the target and include it in the base file.
- See the Kit documentation for examples.

New: Less 3.0:
- Less has been updated to 3.8.1 and some options have changed (mostly about when math operations get performed). If you use Less, double-check the options on your files after updating.

More:
- The list of options for Syntax Checkers and UglifyJS is now searchable.
- When ESLint shows an issue in the Log, you can now click the rule name to instantly adjust that rule in Project Settings.
- New AppleScript command to process a single file at a time. See the docs.
- The Preview Server now supports Content Security Policy (CSP) headers. If your site uses them, they just work; there's nothing to configure.
- CodeKit now tracks@plugin directives in Less files and recompiles when they change.
- The PNG image optimizer is about 10% faster.

Fixed:
- If you add custom languages to the app, then swap extensions, settings don't get confused any more.
- An edge-case where the preview server could crash.
- A possible race-condition in browser syncing.
- Triple-slash directives in TypeScript files weren't handled correctly.
- CodeKit won't try to set up the refresh server on ancient browsers that can't handle it, which will make one guy stop emailing me.

Component Updates:
- Libsass 3.5.4
- Babel 7.1.0
- Less 3.8.1
- UglifyJS 3.4.9
- CoffeeScript 2.3.1
- Susy 3.0.5
- MultiMarkdown 6.4.0
- Autoprefixer 9.1.5
- Haml 5.0.4
- Bourbon 5.1.0
- Bitters 1.8.0
- Neat 3.0.0
- ESLint 5.6.0
- PNGQuant 2.12.0
- Node 8.11.4