tomhodgins

json types in CSS syntax {
  --string: "string";
  --number: 1;
  --object: {"key": "value"};
  --array: [1, 2, 3];
  --boolean: true false;
  --null: null;

  --example: {
    "json": ["data", true]

tomhodgins

window.matchMedia('(prefers-color-scheme: dark)').addListener(list => {
  console.log(
    event.matches === true
      ? 'Dark mode enabled'
      : 'Light mode enabled'
  )
})

tomhodgins

// Instead of these function names (same as the heading text in CSS syntax spec):

parseAStylesheet()
parseAListOfRules()
parseARule()
parseADeclaration()
parseAListOfDeclarations()
parseAComponentValue()
parseAListOfComponentValues()
parseACommaSeparatedListOfComponentValues()

tomhodgins

@--custom-functions {
  --example: 'https://path/to/some/module.js';
  --currency: num =>
    Number(num).toLocaleString('en', {
      style: 'currency',
      currency: 'USD'
    })
  ;
}

tomhodgins

/* Load JS without check */
@--script url(./path/to/plugin.js);

/* Check for name in global object before loading JS */
@--script 'plugin' url(./path/to/plugin.js);

tomhodgins

/* Export individual rules from a stylesheet */
@--export a {}
@--export b {}
@--export c {}

/* Define a list of rules as a default export for the stylesheet  */
@--export {
  d {}
  e {}
  f {}

tomhodgins

// Ways to create a <div> from JS

// write
document.write('<div></div>')

// createElement
document.createElement('<div></div>')

// innerHTML
document.documentElement.innerHTML += '<div></div>'

tomhodgins

The part where there are questions right now are you can have a rule list inside a rule, like:

@--custom {
  a {}
  b {}
  c {}
}

tomhodgins

let css = `a { color: red; }`
let taggedCSS = css`a { color: red }`

let html = `<a href=#>Hello</a>`
let taggedHTML = html`<a href=#>Hello</a>`

tomhodgins

<ul>
  <li>
    <a href="https://example.com/page1" title="Last updated 2020-05-08T09:35:39+01:00">https://example.com/page1</a>
  </li>
  <li>
    <a href="https://example.com/page2" title="Last updated 2020-05-08T09:35:39+01:00">https://example.com/page2</a>
  </li>
  <li>
    <a href="https://example.com/page3" title="Last updated 2020-05-13T13:49:48+01:00">https://example.com/page3</a>
  </li>