Skip to content

Instantly share code, notes, and snippets.

😍
Writing CSS

Tommy Hodgins tomhodgins

😍
Writing CSS
View GitHub Profile
View css-parser-entry-points.js
// Instead of these function names (same as the heading text in CSS syntax spec):
parseAStylesheet()
parseAListOfRules()
parseARule()
parseADeclaration()
parseAListOfDeclarations()
parseAComponentValue()
parseAListOfComponentValues()
parseACommaSeparatedListOfComponentValues()
View custom-function-at-rule.css
@--custom-functions {
--example: 'https://path/to/some/module.js';
--currency: num =>
Number(num).toLocaleString('en', {
style: 'currency',
currency: 'USD'
})
;
}
View script-at-rule.css
/* 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
tomhodgins / import-export.css
Last active Jun 11, 2020
Some ideas about how @--import and @--export could be used to pass CSS objects between files
View import-export.css
/* 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
tomhodgins / how-to-create-an-element.js
Created May 16, 2020
Various ways JS can create an element in an HTML document
View how-to-create-an-element.js
// Ways to create a <div> from JS
// write
document.write('<div></div>')
// createElement
document.createElement('<div></div>')
// innerHTML
document.documentElement.innerHTML += '<div></div>'
View questions-about-rule-nesting-in-css.md

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

@--custom {
  a {}
  b {}
  c {}
}
View testing-highlighting.js
let css = `a { color: red; }`
let taggedCSS = css`a { color: red }`
let html = `<a href=#>Hello</a>`
let taggedHTML = html`<a href=#>Hello</a>`
View result.html
<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>
View sitemap-stylesheet.xsl
<xsl:stylesheet
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:sitemap="http://www.sitemaps.org/schemas/sitemap/0.9"
>
<xsl:output
method="xml"
encoding="utf-8"
indent="yes"
View scroll-container.html
<script type=module>
import html from 'https://crocdn.com/_plugins/html.js'
customElements.define(
'scroll-container',
class ScrollContainer extends HTMLElement {
constructor() {
super()
this.updateOverflowAttribute = this.updateOverflowAttribute.bind(this)
You can’t perform that action at this time.