tomhodgins

[
  "animation-delay",
  "animation-direction",
  "animation-duration",
  "animation-fill-mode",
  "animation-iteration-count",
  "animation-name",
  "animation-play-state",
  "animation-timing-function",
  "background-attachment",

tomhodgins

/* defining something like this */
@--custom-grammar (at-rule: --demo) {
  selectors: :--custom();

  @--custom-grammar (selector: :--custom()) {
    properties: --direction, --depth;

    @--custom-grammar (property: --direction) {
      value: north | east | south | west;
    }

tomhodgins

@--custom-units {
  --finger-widths: 50px;
  --smidge: 5px;
}

div {
  width: 10--finger-widths;
  height: 40--finger-widths;
  margin-top: 1--smidge;
}

tomhodgins

// Step 1: Create a <style> tag to use and add it to the document
var css = document.body.appendChild(document.createElement('style'))

// Empty all custom CSS added so far
css.innerHTML = ''

// Add new CSS to our <style> tag (replace with your own CSS rules)
css.innerHTML += `
  p {
    color: red;

tomhodgins

import * as parseCSS from 'https://tomhodgins.github.io/parse-css/index.js'

const input = {
  css: '',
  js: ''
}
const output = {
  css: '',
  js: ''
}

tomhodgins

[
  [ "HTMLElement", "abbr" ],
  [ "HTMLElement", "address" ],
  [ "HTMLElement", "aside" ],
  [ "HTMLElement", "b" ],
  [ "HTMLElement", "bdi" ],
  [ "HTMLElement", "bdo" ],
  [ "HTMLElement", "code" ],
  [ "HTMLElement", "dd" ],
  [ "HTMLDetailsElement", "details" ],

tomhodgins

// run this code on this page:
// https://html.spec.whatwg.org/multipage/

[...document.querySelectorAll('#toc-semantics a')]
  .filter(tag => tag.querySelector('code'))
  .filter(({textContent}) => /The .+ element/.test(textContent))
  .map(({textContent}) => textContent = textContent.replace(/.+The (.+) element/, '$1'))
  .sort()
  .map(name => [document.createElement(name).constructor.name, name])

tomhodgins

function replaceWord(element, target, replacement) {
  var iterable = document.createNodeIterator(element, NodeFilter.SHOW_TEXT)

  for (var node; node = iterable.nextNode();) {
    node.data = node.data.replace(new RegExp(target, 'g'), replacement)
  }
}

tomhodgins

':root'
  .split('')
  .map(char => 
    '.#[]:'.includes(char)
      ? char
      : `\\${char.charCodeAt(0).toString(16)}`
  )
  .join('')

tomhodgins

// import {filter, all, stringify} from 'https://unpkg.com/cssomtools'
// import {parseACommaSeparatedListOfComponentValues} from 'https://tomhodgins.github.io/parse-css/index.js'


import('https://unpkg.com/cssomtools').then(({process, all, stringify}) => {
  import('https://tomhodgins.github.io/parse-css/index.js').then(({parseACommaSeparatedListOfComponentValues}) => {

    function transplant(target = ':root') {
      let output = {
        html: '',