Documentation

[woodcox]

What do you think about auto generating some .md files to help with documentation? So that instead of saying the following in the README.md:

Most of the names follow the same naming convention as open props CSS variables, except the -- is replaced with $. You can find the values of all props by inspecting the scss files on npm.

You could have:

You can find the values of all the props in the relevant markdown file below:

• animations
• aspects
• borders
• // ...

This could be done by adding the following to generateScss.mjs.

const writeSCSSModule = async (moduleName, content) => {
  const outFile = path.join(__dirname, `${moduleName}.scss`);
  await fs.writeFile(outFile, content, { encoding: 'utf-8' });
};

// md codeblock
const writeMDCodeBlock = async (moduleName, content) => {
  const outFile = path.join(__dirname, `${moduleName}.md`);
  const codeBlock = '```scss\n' + content + '\n```';
  await fs.writeFile(outFile, codeBlock, { encoding: 'utf-8' });
};
// ...

// write scss & md files
  await writeSCSSModule(moduleName, generatedScss);
  await writeMDCodeBlock(moduleName, generatedScss);
// ...

It might also help to add prettier for the formatting.