Chris Ferdinandi cferdinandi

Automate GitHub Release

This script automates the publishing of a new release on GitHub and runs npm deploy whenever the version number in package.json is changed.

It requires two secret tokens in the repo settings:

GH_TOKEN - a fine-grained token with read/write permissions for content and pull releases.
NPM_TOKEN - a CI token from your NPM account.

Learn more about how it works here.

This week, I wrote about using the CSS @import rule to modularize CSS, and some performance challenges with that approach.

tl;dr: the issue isn't the @import rule itself, but that files under 1kb often end up the same size or even bigger when gzipped, so you get no compression benefits.

I ran a few additional tests, and wanted to share the data I found.

Current Setup

40 modular CSS files
All imported from a single kelp.css file hosted on JSDelivr

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Kelp</title>
	<meta name="description" content="A UI library for people who love HTML, powered by modern CSS and Web Components.">

	<!-- Mobile Screen Resizing -->
	<meta name="viewport" content="width=device-width, initial-scale=1">

	accordion-group {
	background-color: #f7f7f7;
	border-radius: 0.25em;
	display: block;
	margin-block-end: 1.5em;
	padding: 0.5em 1em;
	width: 100%;
	}

	accordion-group [accordion-trigger] {

	/**
	* Don't show button until JavaScript is instantiated
	*/
	share-me:not(:defined) {
	display: none;
	}

	/**
	* Visually hide an element, but leave it available for screen readers
	* @link https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css

	# ----------------------------------------------------------------------
	# \| Compression \|
	# ----------------------------------------------------------------------

	<IfModule mod_deflate.c>

	# Force compression for mangled `Accept-Encoding` request headers
	# https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html

	<IfModule mod_setenvif.c>

	<!DOCTYPE html>
	<html>
	<head>
	<title>Smooth Scroll</title>

	<style type="text/css">
	body {
	margin: 1em auto;
	max-width: 30em;
	width: 88%;

	.button-favorites[aria-pressed="true"] {
	background-color: #ff4136;
	border-color: #ff4136;
	color: #ffffff;
	}

	function handleClick (event) {

	// Make sure clicked element has the .save-data class
	if (event.target.matches('.save-data')) {

	// Get the value of the [data-id] attribute
	let id = event.target.getAttribute('data-id');

	// Make sure there's an ID
	if (id) {