bartveneman

import { test, expect } from "@playwright/test";

test("Allows the selected CSS to be copied", async ({ page, context }) => {
	// Allow clipboard permissions
  await context.grantPermissions(["clipboard-write", "clipboard-read"]);
	
	// Click the "Copy CSS" button
	await page.getByRole("button", { name: "Copy CSS" }).click();
	
	// Get the clipboard text

bartveneman

/**
 * Make entire parent clickable from a link within:
 *
 * <element class="coverable">
 *   <a class="coverable-link" href="https://example.com">Example</a>
 *   <img src="https://example.com/image.jpg">
 * </element>
 */
.coverable {
	position: relative;

bartveneman

import * as csstree from 'css-tree'
import { css } from './large-css.js'

let ast = csstree.parse(css, {
	positions: true,
})

function indent(size) {
	return ''.padStart(size, '\t')
}

bartveneman

import prettier from 'prettier/esm/standalone.mjs'
import cssParser from 'prettier/esm/parser-postcss.mjs'

onmessage = function (event) {
	try {
		let result = prettier.format(event.data, {
			parser: 'css',
			plugins: [cssParser]
		})
		postMessage(result)

bartveneman

.ad-cls.art-social:not(.clearfix):before,
.ad-cls.author-row:not(.clearfix):before,
.ad-cls.block-header:not(.clearfix):before,
.ad-cls.breadcrumb.trunc:not(.clearfix):before,
.ad-cls.browse-list:not(.clearfix):before,
.ad-cls.card-strip:not(.clearfix):before,
.ad-cls.card:not(.clearfix):before,
.ad-cls.comment-form:not(.clearfix):before,
.ad-cls.comment-post-box:not(.clearfix):before,
.ad-cls.comment-post-links:not(.clearfix):before,

bartveneman

.thing {
 box-shadow: -80px 55.33333px #f2f2f2,-86px -119.66667px #f2f2f2,229px -72.66667px #f2f2f2,-125px 72.33333px #f2f2f2,53px -39.66667px #f2f2f2,242px 60.33333px #f2f2f2,-138px -220.66667px #f2f2f2,-12px -67.66667px #f2f2f2,-85px 58.33333px #239a98,80px -98.66667px #239a98,-127px 34.33333px #239a98,-218px -193.66667px #239a98,-222px -408.66667px #239a98,176px -191.66667px #239a98,56px 2.33333px #239a98,-46px -18.66667px #239a98,-97px -196.66667px #f2f2f2,3px 57.33333px #f2f2f2,-106px -29.66667px #f2f2f2,-109px .33333px #f2f2f2,39px -37.66667px #f2f2f2,-117px -92.66667px #f2f2f2,-152px -371.66667px #f2f2f2,113px -57.66667px #f2f2f2;
 box-shadow: 0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff;
}

bartveneman

(() => {
	var all = Array.from(document.querySelectorAll('*'))
	var c = new Set()
	var t = new Set()
	
	for (var i = 0;  i< all.length; i++) {
		var el = window.getComputedStyle(all[i])
		var size = el.getPropertyValue('font-size')
		var family = el.getPropertyValue('font-family')
		var weight = el.getPropertyValue('font-weight')

bartveneman

var items = [1, 25, 2, 3, 1]
var sorted = items.sort()

// sorted: [ 1, 1, 2, 25, 3 ] 🤦‍♂️

// !! MAKE SURE TO USE parseInt() !!

var sorted = items.sort((a, b) => parseInt(a, 10) - parseInt(b, 10))
// sorted: [ 1, 1, 2, 3, 25 ] 🎉

bartveneman

const addLineItemMachine = Machine({
  id: 'addLineItem',
  initial: 'initial',
  context: {
    cartId: undefined,
    discount: undefined,
    productPrice: undefined,
    shippingPrice: undefined,
    contentfulProductName: undefined,
    finalSelection: undefined,

bartveneman

const addLineItemMachine = Machine({
  id: 'addLineItem',
  initial: 'initial',
  context: {
    cartId: undefined,
    discount: undefined,
    productPrice: undefined,
    shippingPrice: undefined,
    contentfulProductName: undefined,
    finalSelection: undefined,