Remy Sharp remy

What is your opinion about CSS-in-JS?

I had some "interesting" responses on Twitter over an observation I had that CSS-in-JS doesn't often come with a relatable use-case.

My opinion has always been: use the best tool for the job. When I first looked at CSS-in-JS it was because I was using a pattern library that included a 200K CSS file (compressed!). This wasn't okay. I wanted to only deliver the CSS that I was using in my components. CSS-in-JS appears to be a good match for this problem.

Coupled with the promise of scoped styled (i.e. no global styles interfering), the ability to automatically ensure only the used CSS is delivered, CSS-in-JS has its appeals.

The killer feature for me though, is if some CSS-in-JS tool can provide automatic, configuration-free, critical CSS.

Cheesy Cloud Biscuits

Intended to be a low carb, high fat, super tasty meal 💪

Makes: 4
Cooking time: 15 minutes
Prep time: ~5-10 minutes

	// Example of the JavaScript module for the Arc project.

	let bytes;
	let slicePtr = 0;

	function yellow(line, i) {
	line[i + 1] = line[i] = 255;
	line[i + 2] = 0;
	}

	const round(value, decimals) =>Number(Math.round(value+'e'+decimals)+'e-'+decimals);

	round(1.005, 2); // 1.01
	Math.round(1.005, 2); // 1.00

	// via http://www.jacklmoore.com/notes/rounding-in-javascript/

	console.clear();

	const w = 4;
	const h = 6;

	const res = Array.from({
	length: w * h
	}, (_, i) => i).map(i => {
	const x = i % w;
	const y = i / w \| 0;

	import { withRouter } from 'next/router';
	import Link from 'next/link';
	import React, { Children } from 'react';

	const ActiveLink = ({ router, children, ...props }) => {
	const child = Children.only(children);

	let className = child.props.className \|\| '';
	if (router.pathname === props.href && props.activeClassName) {
	className = `${className} ${props.activeClassName}`.trim();

	// FILENAME: app/polyfills/fetch.js

	import Promise from './promise';
	import * as messaging from "messaging";

	const OPEN = messaging.peerSocket.OPEN;

	// Helpful to check whether we are connected or not.
	// setInterval(() => {
	// const readyState = messaging.peerSocket.readyState;

	.next
	out