devs
/
emoji-picker-element
mirror of https://github.com/nolanlawson/emoji-picker-element.git
4
0
Fork 0
Code Issues Projects Releases Wiki Activity

chore: improve css docs generation

This commit is contained in:
Nolan Lawson 2020-06-17 01:01:46 -07:00
parent 48fb0d3181
commit 1d99292f7d
2 changed files with 46 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
README.md
View File

@ -102,30 +102,30 @@ Here is a full list of options:
<!-- CSS variable options start -->
| Variable | Default | Default (dark) | Description |
| ---------------------------- | ---------- | -------------- | ----------------------------------------------- |
| `--background` | `#fff` | `#222` | Background of the entire `<emoji-picker>` |
| `--border-color` | `#e0e0e0` | `#444` | |
| `--border-size` | `1px` | | Width of border used in most of the picker |
| `--button-active-background` | `#e6e6e6` | `#555555` | Background of an active button |
| `--button-hover-background` | `#d9d9d9` | `#484848` | Background of a hovered button |
| `--category-font-size` | `1rem` | | Font size of custom emoji category headings |
| `--emoji-padding` | `0.5rem` | | |
| `--emoji-size` | `1.375rem` | | |
| `--indicator-color` | `#385ac1` | `#5373ec` | Color of the nav indicator |
| `--indicator-height` | `3px` | | Height of the nav indicator |
| `--input-border-color` | `#999` | `#ccc` | |
| `--input-border-radius` | `0.5rem` | | |
| `--input-border-size` | `1px` | | |
| `--input-font-color` | `#111` | `#efefef` | |
| `--input-font-size` | `1rem` | | |
| `--input-line-height` | `1.5` | | |
| `--input-padding` | `0.25rem` | | |
| `--input-placeholder-color` | `#999` | `#ccc` | |
| `--num-columns` | `8` | | How many columns to display in the emoji grid |
| `--outline-color` | `#999` | `#fff` | Focus outline color |
| `--outline-size` | `2px` | | Focus outline width |
| `--skintone-border-radius` | `1rem` | | border radius of the skintone dropdown |
| Variable | Default | Default (dark) | Description |
| ---------------------------- | ---------- | -------------- | --------------------------------------------- |
| `--background` | `#fff` | `#222` | Background of the entire `<emoji-picker>` |
| `--border-color` | `#e0e0e0` | `#444` | |
| `--border-size` | `1px` | | Width of border used in most of the picker |
| `--button-active-background` | `#e6e6e6` | `#555555` | Background of an active button |
| `--button-hover-background` | `#d9d9d9` | `#484848` | Background of a hovered button |
| `--category-font-size` | `1rem` | | Font size of custom emoji category headings |
| `--emoji-padding` | `0.5rem` | | |
| `--emoji-size` | `1.375rem` | | |
| `--indicator-color` | `#385ac1` | `#5373ec` | Color of the nav indicator |
| `--indicator-height` | `3px` | | Height of the nav indicator |
| `--input-border-color` | `#999` | `#ccc` | |
| `--input-border-radius` | `0.5rem` | | |
| `--input-border-size` | `1px` | | |
| `--input-font-color` | `#111` | `#efefef` | |
| `--input-font-size` | `1rem` | | |
| `--input-line-height` | `1.5` | | |
| `--input-padding` | `0.25rem` | | |
| `--input-placeholder-color` | `#999` | `#ccc` | |
| `--num-columns` | `8` | | How many columns to display in the emoji grid |
| `--outline-color` | `#999` | `#fff` | Focus outline color |
| `--outline-size` | `2px` | | Focus outline width |
| `--skintone-border-radius` | `1rem` | | border radius of the skintone dropdown |
<!-- CSS variable options end -->

34
bin/generateCssDocs.js
View File

@ -1,31 +1,40 @@
import sass from 'sass'
import table from 'markdown-table'
import { replaceInReadme } from './replaceInReadme.js'
import postcss from 'postcss'
const START_MARKER = '<!-- CSS variable options start -->'
const END_MARKER = '<!-- CSS variable options end -->'
function extractCSSVariables (css) {
return [...css.matchAll(/(--[^:]+)\s*:\s*([^;]+)\s*;\s*(?:\/\*(.*?)\*\/)?/gs)]
.map(_ => ({
name: _[1],
value: _[2],
comments: _[3]
}))
function extractCSSVariables (node) {
const res = []
for (let i = 0; i < node.nodes.length; i++) {
const subNode = node.nodes[i]
if (subNode.type === 'decl' && subNode.prop.startsWith('--')) {
const nextNode = node.nodes[i + 1]
const comment = (nextNode && nextNode.type === 'comment' && nextNode.text.trim()) || undefined
res.push({
name: subNode.prop,
value: subNode.value,
comment
})
}
}
return res
}
// Find all the CSS variables declared on the :host and print them out
// into the README as documentation
async function generateMarkdownTable (css) {
css = css.replace(/@media.*?\{.*\}/sg, '')
const hosts = [...css.matchAll(/:host\s*(?:,\s*:host\(\.light\))?\s*\{(.*?)\}/gs)].map(_ => _[1])
const darkHosts = [...css.matchAll(/:host\(\.dark\)\s*\{(.*?)\}/gs)].map(_ => _[1])
const ast = postcss.parse(css)
const hosts = ast.nodes.filter(({ selector }) => ([':host', ':host,\n:host(.light)'].includes(selector)))
const darkHosts = ast.nodes.filter(({ selector }) => selector === ':host(.dark)')
const vars = hosts.map(extractCSSVariables).flat()
const darkVars = darkHosts.map(extractCSSVariables).flat()
const sortedVars = vars.sort((a, b) => a.name < b.name ? -1 : 1)
const data = sortedVars.map(({ name, value, comments }) => {
const data = sortedVars.map(({ name, value, comment }) => {
const darkIndex = darkVars.findIndex(_ => _.name === name)
let darkValue = darkIndex !== -1 ? darkVars[darkIndex].value : ''
if (darkValue === value) {
@ -34,7 +43,7 @@ async function generateMarkdownTable (css) {
const wrap = _ => ('`' + _ + '`')
return [wrap(name), wrap(value), darkValue ? wrap(darkValue) : '', comments || '']
return [wrap(name), wrap(value), darkValue ? wrap(darkValue) : '', comment || '']
})
const headers = ['Variable', 'Default', 'Default (dark)', 'Description']
return table([
@ -45,6 +54,7 @@ async function generateMarkdownTable (css) {
async function main () {
const css = sass.renderSync({ file: './src/picker/styles/variables.scss' }).css.toString('utf8')
const markdown = await generateMarkdownTable(css)
await replaceInReadme(START_MARKER, END_MARKER, markdown)
}