Add mustache templates and regen

cssProps/package.json

@@ -39,6 +39,7 @@
     "mdn-browser-compat-data": "^1.1.2",
     "mdn-data": "^2.0.22",
     "microbundle": "^0.12.4",
+    "mustache": "^4.2.0",
     "preact": "^10.5.6"
   }
 }

cssProps/scripts/generateAtRules.js

@@ -1,11 +1,11 @@
-const jetpack = require('fs-jetpack')
-const mdnData = require('mdn-data')
+const jetpack = require('fs-jetpack');
+const mdnData = require('mdn-data');
 //[ 'api', 'css', 'l10n' ]
 
 const cssData = mdnData.css;
 //[ 'atRules', 'selectors', 'types', 'properties', 'syntaxes', 'units' ]
 
-const cssAtRules = cssData.atRules
+const cssAtRules = cssData.atRules;
 // '@counter-style': {
 //     syntax: '@counter-style <counter-style-name> {\n' +
 //       '  [ system: <counter-system>; ] ||\n' +
@@ -37,85 +37,28 @@ const cssAtRules = cssData.atRules
 //     mdn_url: 'https://developer.mozilla.org/docs/Web/CSS/@counter-style'
 //   },
 
-
-const cssStandardAtRules = Object.keys(cssAtRules).reduce((result, nextKey) => { 
-    if(cssAtRules[nextKey].status === 'standard'){
-        result[nextKey] = cssAtRules[nextKey]
+const cssStandardAtRules = Object.keys(cssAtRules).reduce((result, nextKey) => {
+    if (cssAtRules[nextKey].status === 'standard') {
+        result[nextKey] = cssAtRules[nextKey];
     }
-    return result
-}, {})
-
-// jetpack.write('./cssStandardAtRules.json', cssStandardAtRules)
-
-
-let indexTemplate = "//Do not modify this file.  This file is generated from ./scripts/generateAtRules.js\n"
-let testTemplate = `//Do not modify this file.  This file is generated from ./scripts/generateAtRules.js
-import * as cssAtRules from '../index';
-import { color, maxWidth } from '../../props/index';
-import { css, setup } from 'goober';
-
-jest.mock('goober', () => ({
-    css: jest.fn().mockReturnValue('css()')
-}));
-
-describe('cssAtRules', () => {
-    beforeEach(() => {
-        css.mockClear();
-    });
-`
+    return result;
+}, {});
 
 //Loop through all the css properties generating the source code, the root index file, and the jest tests
-Object.keys(cssStandardAtRules).forEach(atRule => {
-    const isNested = ['@charset', '@import', '@namespace'].includes(atRule) ? false : true
-    const atRuleCamelCase = toCamelCase(atRule.slice(1)) //Also removes '@' character
-
-    jetpack.dir(`./src/atRules/${atRuleCamelCase}`);
-    jetpack.write(`./src/atRules/${atRuleCamelCase}/index.js`, functionIndexTemplate(atRule, atRuleCamelCase));
-
-    indexTemplate += `export { default as ${atRuleCamelCase} } from './${atRuleCamelCase}/index'\n`
-
-    testTemplate += `
-    it('${atRule} type', () => {
-        expect(typeof cssAtRules.${atRuleCamelCase}).toEqual('function');
-    });
-
-    it('${atRule}', () => {
-        expect(cssAtRules.${atRuleCamelCase}("(param)", [
-            color("blue"),
-            maxWidth("100px")
-        ])).toEqual({"${atRule} (param)": {"color": "blue", "maxWidth": "100px"}});
-    });
+Object.keys(cssStandardAtRules).forEach((atRule) => {
+    const isNested = ['@charset', '@import', '@namespace'].includes(atRule) ? false : true;
+    const atRuleCamelCase = toCamelCase(atRule.slice(1)); //Also removes '@' character
 
-`
+    jetpack.dir(`./src/atRules/${atRuleCamelCase}`);
+    jetpack.write(
+        `./src/atRules/${atRuleCamelCase}/index.js`,
+        functionIndexTemplate(atRule, atRuleCamelCase)
+    );
 });
 
-testTemplate += "});"
 jetpack.write('./src/atRules/index.js', indexTemplate);
 jetpack.write('./src/atRules/__tests__/atRules.test.js', testTemplate);
 
 function toCamelCase(str) {
-    return str.replace(/-[a-z]/g, g => g[1].toUpperCase())
+    return str.replace(/-[a-z]/g, (g) => g[1].toUpperCase());
 }
-
-function functionIndexTemplate(atRule, atRuleCamelCase) {
-    return `//Do not modify this file.  This file is generated from ./scripts/generateAtRules.js
-/**
- * @name ${atRuleCamelCase}
- * @category CssProps Helper
- * @summary Returns a numerical value appended with the css atRule ${atRule}
- *
- * @description
- * Returns a numerical value appended with the css atRule ${atRule}
- *
- * @param {number} atRule- The numerical value that the css atRule will be appended
- * @returns {string} numerical value with appended atRule ${atRule}
- */
-
-export default function charset(atRuleParams, arrayOfCssProps) {
-    return {
-        ["${atRule}" + (atRuleParams ? " " + atRuleParams : "")]: arrayOfCssProps.reduce((result, cssPropObj) => {
-            return Object.assign(result, cssPropObj)
-        }, {})
-    }
-}`
-}

cssProps/scripts/generateProps.js

@@ -1,26 +1,22 @@
-const jetpack = require('fs-jetpack')
-const mdnData = require('mdn-data')
+const jetpack = require('fs-jetpack');
+const Mustache = require('mustache');
+const mdnData = require('mdn-data');
 //[ 'api', 'css', 'l10n' ]
 
 const cssData = mdnData.css;
 //[ 'atRules', 'selectors', 'types', 'properties', 'syntaxes', 'units' ]
 
-const cssProperties = cssData.properties
-const cssStandardProperties = Object.keys(cssProperties).reduce((result, nextKey) => { 
-    if(cssProperties[nextKey].status === 'standard'){
-        result[nextKey] = cssProperties[nextKey]
+const cssProperties = cssData.properties;
+const cssStandardProperties = Object.keys(cssProperties).reduce((result, nextKey) => {
+    if (cssProperties[nextKey].status === 'standard') {
+        result[nextKey] = cssProperties[nextKey];
     }
-    return result
-}, {})
-
-// jetpack.write('./cssProperties.json', cssStandardProperties)
+    return result;
+}, {});
 
 const cssSyntax = Object.keys(cssStandardProperties).map((prop) => {
-    return cssStandardProperties[prop].syntax
-})
-
-// jetpack.write('./cssPropertiesSyntax.json', cssSyntax)
-
+    return cssStandardProperties[prop].syntax;
+});
 // {
 //     syntax: 'false | true',
 //     media: 'visual',
@@ -36,69 +32,33 @@ const cssSyntax = Object.keys(cssStandardProperties).map((prop) => {
 //     mdn_url: 'https://developer.mozilla.org/docs/Web/CSS/-ms-accelerator'
 // }
 
-let indexTemplate = "//Do not modify this file.  This file is generated from ./scripts/generateProps.js\n"
-let testTemplate = `//Do not modify this file.  This file is generated from ./scripts/generateProps.js
-import * as cssProps from '../index';
-import { css, setup } from 'goober';
+const propsIndexTemplate = jetpack.read('./templates/props.index.mustache');
+const propsPropIndexTemplate = jetpack.read('./templates/props.prop.index.mustache');
+const propsTestTemplate = jetpack.read('./templates/props.test.mustache');
 
-jest.mock('goober', () => ({
-    css: jest.fn().mockReturnValue('css()')
-}));
-
-describe('cssProps', () => {
-    beforeEach(() => {
-        css.mockClear();
-    });
-`
+const propsListView = {
+    Props: []
+};
 
 //Loop through all the css properties generating the source code, the root index file, and the jest tests
-Object.keys(cssStandardProperties).forEach(property => {
+Object.keys(cssStandardProperties).forEach((property) => {
     const prop = toCamelCase(property);
-
-    jetpack.dir(`./src/props/${prop}`);
-    jetpack.write(`./src/props/${prop}/index.js`, functionIndexTemplate(prop));
-
-    indexTemplate += `export { default as ${prop} } from './${prop}/index'\n`
-
-    testTemplate += `
-    it('${prop} type', () => {
-        expect(typeof cssProps.${prop}).toEqual('function');
-    });
 
-    it('${prop}', () => {
-        expect(cssProps.${prop}("value")).toEqual({${prop}:'value'});
-    });
+    propView = { prop: prop };
+    propsListView.Props.push(propView);
+
+    const propsPropIndexFile = Mustache.render(propsPropIndexTemplate, propView);
 
-`
+    jetpack.dir(`./src/props/${prop}`);
+    jetpack.write(`./src/props/${prop}/index.js`, propsPropIndexFile);
 });
 
-testTemplate += "});"
-jetpack.write('./src/props/index.js', indexTemplate);
-jetpack.write('./src/props/__tests__/props.test.js', testTemplate);
+const propsIndexFile = Mustache.render(propsIndexTemplate, propsListView);
+jetpack.write('./src/props/index.js', propsIndexFile);
+
+const propsTestFile = Mustache.render(propsTestTemplate, propsListView);
+jetpack.write('./src/props/__tests__/props.test.js', propsTestFile);
 
 function toCamelCase(str) {
-    return str.replace(/-[a-z]/g, g => g[1].toUpperCase())
+    return str.replace(/-[a-z]/g, (g) => g[1].toUpperCase());
 }
-
-function functionIndexTemplate(prop) {
-    return `//Do not modify this file.  This file is generated from ./scripts/generateProps.js
-import { default as appendArgs } from '../../util/index'
-
-/**
- * @name ${prop}
- * @category CssProps Helper
- * @summary Returns css property ${prop} and value as an object
- *
- * @description
- * Returns an object with the css property ${prop} with its passed in values
- *
- * @param - One or more parameters that will be appended together based on a delimiter
- * @returns ${prop} property as object
- */
-
-export default function ${prop}() {
-    return {
-        ${prop}: appendArgs(arguments)
-    }
-}`
-}