styles(indentation): switch to tabs and improve .editorconfig

.editorconfig

@@ -3,12 +3,21 @@
 root = true
 
 [*]
-indent_style = space
-indent_size = 2
+indent_style = tab
+indent_size = 4
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
+quote_type = double
+
+[*.{js,css}]
+block_comment_start = /**
+block_comment = *
+block_comment_end = */
+
+[*.js]
+quote_type = single
 
 [*.md]
 trim_trailing_whitespace = false

.eleventy.js

@@ -1,35 +1,35 @@
 import a11yCSS from './a11y.css.js'
 
 export default function (eleventyConfig) {
-  eleventyConfig.setUseGitIgnore(false)
+	eleventyConfig.setUseGitIgnore(false)
 
-  eleventyConfig.addPlugin(a11yCSS)
+	eleventyConfig.addPlugin(a11yCSS)
 
-  eleventyConfig.addPassthroughCopy('site/static')
-  eleventyConfig.addPassthroughCopy({
-    'css/a11y-en_errors-only.css': 'static/css/a11y-en_errors-only.css',
-    'css/a11y-en_warnings-only.css': 'static/css/a11y-en_warnings-only.css',
-    'css/a11y-en_obsoletes-only.css': 'static/css/a11y-en_obsoletes-only.css',
-    'css/a11y-en_advices-only.css': 'static/css/a11y-en_advices-only.css',
-    'node_modules/a11y-syntax-highlighting/dist/prism/a11y-light.min.css': 'static/css/a11y-light.min.css'
-  })
-  eleventyConfig.addShortcode('year', () => `${new Date().getFullYear()}`)
-  eleventyConfig.addShortcode('version', () => `${Date.now()}`)
-  eleventyConfig.addWatchTarget('site/static/docs.css')
-  eleventyConfig.addWatchTarget('site/static/docs.js')
+	eleventyConfig.addPassthroughCopy('site/static')
+	eleventyConfig.addPassthroughCopy({
+		'css/a11y-en_errors-only.css': 'static/css/a11y-en_errors-only.css',
+		'css/a11y-en_warnings-only.css': 'static/css/a11y-en_warnings-only.css',
+		'css/a11y-en_obsoletes-only.css': 'static/css/a11y-en_obsoletes-only.css',
+		'css/a11y-en_advices-only.css': 'static/css/a11y-en_advices-only.css',
+		'node_modules/a11y-syntax-highlighting/dist/prism/a11y-light.min.css': 'static/css/a11y-light.min.css'
+	})
+	eleventyConfig.addShortcode('year', () => `${new Date().getFullYear()}`)
+	eleventyConfig.addShortcode('version', () => `${Date.now()}`)
+	eleventyConfig.addWatchTarget('site/static/docs.css')
+	eleventyConfig.addWatchTarget('site/static/docs.js')
 
-  eleventyConfig.setBrowserSyncConfig({
-    ui: false,
-    ghostMode: false,
-    open: true,
-    browser: 'firefox',
-  })
+	eleventyConfig.setBrowserSyncConfig({
+		ui: false,
+		ghostMode: false,
+		open: true,
+		browser: 'firefox',
+	})
 
-  return {
-    dir: {
-      input: 'site',
-      output: 'docs'
-    },
-    markdownTemplateEngine: 'njk'
-  }
+	return {
+		dir: {
+			input: 'site',
+			output: 'docs'
+		},
+		markdownTemplateEngine: 'njk'
+	}
 }

a11y.css.js

@@ -4,146 +4,147 @@ import showdown from 'showdown'
 import fm from 'front-matter'
 import prism from 'prismjs'
 import loadLanguages from 'prismjs/components/index.js'
+
 loadLanguages(['scss', 'css-extras'])
 
 const DIRECTORIES = {
-  sass: {
-    input: './sass/themes/',
-    output: './site/_data/sass/'
-  },
-  api: {
-    input: './sass/utils/',
-    output: './site/_data/sass/'
-  }
+	sass: {
+		input: './sass/themes/',
+		output: './site/_data/sass/'
+	},
+	api: {
+		input: './sass/utils/',
+		output: './site/_data/sass/'
+	}
 }
 
 const processSassDocumentation = file => {
-  const inputFileExtension = path.extname(file)
-  const inputFilename = path.basename(file, inputFileExtension)
-  const excludeFiles = ['_all']
-
-  // Exclude files that we don't want to process
-  if (inputFileExtension !== '.scss' || excludeFiles.includes(inputFilename)) {
-    return
-  }
-
-  const content = fs.readFileSync(file, 'utf8')
-  const commentBlockRegex = /\/\*doc(.)*?\*\//gs
-
-  const comments = Array.from(content.matchAll(commentBlockRegex), data => {
-    return parseSassComment(data[0])
-  })
-
-  // Avoid crash if output directory does not exists
-  if (!fs.existsSync(DIRECTORIES.sass.output)) {
-    fs.mkdirSync(DIRECTORIES.sass.output)
-  }
-
-  // Write Eleventy data files
-  fs.writeFileSync(
-    `${DIRECTORIES.sass.output}/${inputFilename.replace('_', '')}.json`,
-    JSON.stringify(comments, null, 2)
-  )
+	const inputFileExtension = path.extname(file)
+	const inputFilename = path.basename(file, inputFileExtension)
+	const excludeFiles = ['_all']
+
+	// Exclude files that we don't want to process
+	if (inputFileExtension !== '.scss' || excludeFiles.includes(inputFilename)) {
+		return
+	}
+
+	const content = fs.readFileSync(file, 'utf8')
+	const commentBlockRegex = /\/\*doc(.)*?\*\//gs
+
+	const comments = Array.from(content.matchAll(commentBlockRegex), data => {
+		return parseSassComment(data[0])
+	})
+
+	// Avoid crash if output directory does not exists
+	if (!fs.existsSync(DIRECTORIES.sass.output)) {
+		fs.mkdirSync(DIRECTORIES.sass.output)
+	}
+
+	// Write Eleventy data files
+	fs.writeFileSync(
+		`${DIRECTORIES.sass.output}/${inputFilename.replace('_', '')}.json`,
+		JSON.stringify(comments, null, 2)
+	)
 }
 
 const processApiDocumentation = file => {
-  const content = fs.readFileSync(file, 'utf8')
-  const commentBlockRegex = /\/\*doc(.)*?\*\//gs
+	const content = fs.readFileSync(file, 'utf8')
+	const commentBlockRegex = /\/\*doc(.)*?\*\//gs
 
-  const comments = Array.from(content.matchAll(commentBlockRegex), data => {
-    return parseSassComment(data[0])
-  })
+	const comments = Array.from(content.matchAll(commentBlockRegex), data => {
+		return parseSassComment(data[0])
+	})
 
-  // Avoid crash if output directory does not exists
-  if (!fs.existsSync(DIRECTORIES.api.output)) {
-    fs.mkdirSync(DIRECTORIES.api.output)
-  }
+	// Avoid crash if output directory does not exists
+	if (!fs.existsSync(DIRECTORIES.api.output)) {
+		fs.mkdirSync(DIRECTORIES.api.output)
+	}
 
-  return comments
+	return comments
 }
 
 const parseSassComment = comment => {
-  // Remove CSS comments syntax
-  comment = comment.replace(/(\/\*doc|\*\/)/g, '').trim()
-
-  const content = fm(comment)
-  let processedContent = new showdown.Converter({
-    tables: true,
-    customizedHeaderId: true,
-    ghCompatibleHeaderId: true
-  }).makeHtml(content.body)
-
-  const headingsRegex = /(<h([2-5]).*>(.*)<\/h[2-5]>)/gim
-  processedContent = processedContent.replace(headingsRegex, `<h$2>$3</h$2>`)
-
-  // HTML code blocks
-  const markupRegex = /((<pre><code class="html language-html">)(.[\s\S]+?)(\/code><\/pre>))/gm
-  const htmlRegex = /((?<=<code class="html language-html">)(.[\s\S]+?)(?=<\/code>))/gm
-  let htmlContent = processedContent.match(htmlRegex)
-  htmlContent = String(htmlContent).replace(/(&lt;)+/g, '<')
-  htmlContent = htmlContent.replace(/(&gt;)+/g, '>')
-  let processedHTML = prism.highlight(htmlContent, prism.languages.html, 'html')
-  processedContent = processedContent.replace(markupRegex, `<div class="pre"><div>${htmlContent}</div><pre><code class="html language-html" data-language="Example">${processedHTML}</code></pre></div>`)
-
-  // CSS code blocks
-  const stylesRegex = /((<pre><code class="css language-css">)(.[\s\S]+?)(\/code><\/pre>))/gm
-  const cssRegex = /((?<=<code class="css language-css">)(.[\s\S]+?)(?=<\/code>))/gm
-  let cssContent = processedContent.match(cssRegex)
-  cssContent = String(cssContent).replace(/(&gt;)+/g, '>')
-  let processedCSS = prism.highlight(String(cssContent), prism.languages.css, 'css-extras')
-  processedContent = processedContent.replace(stylesRegex, `<div class="pre"><pre><code class="css language-css" data-language="CSS">${processedCSS}</code></pre></div>`)
-
-  // SCSS code blocks
-  const scssBlockRegex = /((<pre><code class="scss language-scss">)(.[\s\S]+?)(\/code><\/pre>))/gm
-  const scssRegex = /((?<=<code class="scss language-scss">)(.[\s\S]+?)(?=<\/code>))/gm
-  let scssContent = processedContent.match(scssRegex)
-  scssContent = String(scssContent).replace(/(&amp;)+/g, '&')
-  scssContent = String(scssContent).replace(/(&gt;)+/g, '>')
-  let processedSCSS = prism.highlight(String(scssContent), prism.languages.scss, 'scss')
-  processedContent = processedContent.replace(scssBlockRegex, `<div class="pre"><pre><code class="scss language-scss" data-language="Sass">${processedSCSS}</code></pre></div>`)
-
-  // Sass code blocks
-  const sassBlockRegex = /((<pre><code class="sass language-sass">)(.[\s\S]+?)(\/code><\/pre>))/gm
-  const sassRegex = /((?<=<code class="sass language-sass">)(.[\s\S]+?)(?=<\/code>))/gm
-  const sassContent = processedContent.match(sassRegex)
-  let processedSASS = prism.highlight(String(sassContent), prism.languages.scss, 'scss')
-  processedContent = processedContent.replace(sassBlockRegex, `<div class="pre"><pre><code class="scss language-scss" data-language="Sass">${processedSASS}</code></pre></div>`)
-
-  return {
-    attributes: content.attributes,
-    body: processedContent
-  }
+	// Remove CSS comments syntax
+	comment = comment.replace(/(\/\*doc|\*\/)/g, '').trim()
+
+	const content = fm(comment)
+	let processedContent = new showdown.Converter({
+		tables: true,
+		customizedHeaderId: true,
+		ghCompatibleHeaderId: true
+	}).makeHtml(content.body)
+
+	const headingsRegex = /(<h([2-5]).*>(.*)<\/h[2-5]>)/gim
+	processedContent = processedContent.replace(headingsRegex, `<h$2>$3</h$2>`)
+
+	// HTML code blocks
+	const markupRegex = /((<pre><code class="html language-html">)(.[\s\S]+?)(\/code><\/pre>))/gm
+	const htmlRegex = /((?<=<code class="html language-html">)(.[\s\S]+?)(?=<\/code>))/gm
+	let htmlContent = processedContent.match(htmlRegex)
+	htmlContent = String(htmlContent).replace(/(&lt;)+/g, '<')
+	htmlContent = htmlContent.replace(/(&gt;)+/g, '>')
+	let processedHTML = prism.highlight(htmlContent, prism.languages.html, 'html')
+	processedContent = processedContent.replace(markupRegex, `<div class="pre"><div>${htmlContent}</div><pre><code class="html language-html" data-language="Example">${processedHTML}</code></pre></div>`)
+
+	// CSS code blocks
+	const stylesRegex = /((<pre><code class="css language-css">)(.[\s\S]+?)(\/code><\/pre>))/gm
+	const cssRegex = /((?<=<code class="css language-css">)(.[\s\S]+?)(?=<\/code>))/gm
+	let cssContent = processedContent.match(cssRegex)
+	cssContent = String(cssContent).replace(/(&gt;)+/g, '>')
+	let processedCSS = prism.highlight(String(cssContent), prism.languages.css, 'css-extras')
+	processedContent = processedContent.replace(stylesRegex, `<div class="pre"><pre><code class="css language-css" data-language="CSS">${processedCSS}</code></pre></div>`)
+
+	// SCSS code blocks
+	const scssBlockRegex = /((<pre><code class="scss language-scss">)(.[\s\S]+?)(\/code><\/pre>))/gm
+	const scssRegex = /((?<=<code class="scss language-scss">)(.[\s\S]+?)(?=<\/code>))/gm
+	let scssContent = processedContent.match(scssRegex)
+	scssContent = String(scssContent).replace(/(&amp;)+/g, '&')
+	scssContent = String(scssContent).replace(/(&gt;)+/g, '>')
+	let processedSCSS = prism.highlight(String(scssContent), prism.languages.scss, 'scss')
+	processedContent = processedContent.replace(scssBlockRegex, `<div class="pre"><pre><code class="scss language-scss" data-language="Sass">${processedSCSS}</code></pre></div>`)
+
+	// Sass code blocks
+	const sassBlockRegex = /((<pre><code class="sass language-sass">)(.[\s\S]+?)(\/code><\/pre>))/gm
+	const sassRegex = /((?<=<code class="sass language-sass">)(.[\s\S]+?)(?=<\/code>))/gm
+	const sassContent = processedContent.match(sassRegex)
+	let processedSASS = prism.highlight(String(sassContent), prism.languages.scss, 'scss')
+	processedContent = processedContent.replace(sassBlockRegex, `<div class="pre"><pre><code class="scss language-scss" data-language="Sass">${processedSASS}</code></pre></div>`)
+
+	return {
+		attributes: content.attributes,
+		body: processedContent
+	}
 }
 
 const generateJsonDocumentation = () => {
-  /**
-   * Remove output directory before creating it again
-   * @note This is an experimental feature and requires Node v12.10.0 at least
-   * @see https://nodejs.org/api/fs.html#fs_fs_rmdirsync_path_options
-   */
-  fs.rmSync(DIRECTORIES.sass.output, { recursive: true, force: true })
-  fs.rmSync(DIRECTORIES.api.output, { recursive: true, force: true })
-
-  fs.readdirSync(DIRECTORIES.sass.input).forEach(file => {
-    processSassDocumentation(DIRECTORIES.sass.input + file)
-  })
-
-  let contentAPI = []
-  fs.readdirSync(DIRECTORIES.api.input).forEach((file) => {
-    if (['_all'].includes(path.basename(file, '.scss'))) {
-      return
-    }
-
-    contentAPI = contentAPI.concat(processApiDocumentation(DIRECTORIES.api.input + file))
-  })
-
-  // Write Eleventy data files
-  fs.writeFileSync(
-    `${DIRECTORIES.api.output}/api.json`,
-    JSON.stringify(contentAPI, null, 2)
-  )
+	/**
+	 * Remove output directory before creating it again
+	 * @note This is an experimental feature and requires Node v12.10.0 at least
+	 * @see https://nodejs.org/api/fs.html#fs_fs_rmdirsync_path_options
+	 */
+	fs.rmSync(DIRECTORIES.sass.output, {recursive: true, force: true})
+	fs.rmSync(DIRECTORIES.api.output, {recursive: true, force: true})
+
+	fs.readdirSync(DIRECTORIES.sass.input).forEach(file => {
+		processSassDocumentation(DIRECTORIES.sass.input + file)
+	})
+
+	let contentAPI = []
+	fs.readdirSync(DIRECTORIES.api.input).forEach((file) => {
+		if (['_all'].includes(path.basename(file, '.scss'))) {
+			return
+		}
+
+		contentAPI = contentAPI.concat(processApiDocumentation(DIRECTORIES.api.input + file))
+	})
+
+	// Write Eleventy data files
+	fs.writeFileSync(
+		`${DIRECTORIES.api.output}/api.json`,
+		JSON.stringify(contentAPI, null, 2)
+	)
 }
 
 export default function () {
-  generateJsonDocumentation()
+	generateJsonDocumentation()
 }