open-props-scss
open-props-scss copied to clipboard
Documentation
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.
I'm not convinced about this. It's more work to maintain, for not much benefit. If the scss output is not super readable, then I can run prettier on it before publishing next time. Is there anything else I'm missing?