Robin Malfait RobinMalfait

Determenistic classNames
No context switching, the styles are in the same file as the component
Allows for easy deletability (if that's a word), in pure CSS files you can have the problem that you don't (always) know if you can uberhaupt delete the css or not
We still allow for nested styles like:

import { Button } from './Button';
const Accordion = styled.div`
  // We don't need to know which class `.Button` uses, in pure css we _do_ need to know which one
 ${Button} {

	// Switch
	const applicationReducer = (state, action) => {
	switch (action.type) {
	case "FETCH_PACKAGES/START":
	case "FETCH_DEPENDENCIES/START":
	return {
	...state,
	fetch_count: state.fetch_count + 1
	};

	it("should create new state when an action is namespaced", async () => {
	// Types
	const ACCUMULATOR = "ACCUMULATOR";
	const ADD = "ADD";
	const SUBTRACT = "SUBTRACT";
	const MULTIPLY = "MULTIPLY";

	// Action creators
	function add(value) {
	return createAction(namespace(ACCUMULATOR, ADD), value);

	const output = {
	_: ["a", "b"],
	foo: "bar",
	baz: true
	};

	const sgray = ({ _, ...input }) =>
	[
	..._,
	...Object.keys(input).reduce((acc, key) => {

	const classNames = (...classes) => classes.filter(Boolean).join(' ');

	// No need to default to an empty string as className
	function Switch({on, className, ...props}) {
	return (
	<div className="toggle">
	<input
	className="toggle-input"
	type="checkbox"
	/>

	/**
	* The Y-Combinator
	*/
	const y = fn => (f => f(f))(f => fn(x => f(f)(x)));

	const factorial = y(fac => n => {
	return n < 2 ? 1 : n * fac(n - 1);
	});

	const fibonacci = y(fib => n => {

	<dimen name="text_spacing">4dp</dimen>
	<dimen name="small_text">12sp</dimen>

	{
	"inodes": 4,
	"hnodes": 16,
	"onodes": 2,
	"wih": {
	"rows": 16,
	"cols": 4,
	"matrix": [
	[
	-1.1898033052663801,