@troychaplin/component2block 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +160 -0
- package/dist/cli.d.ts +3 -0
- package/dist/cli.d.ts.map +1 -0
- package/dist/cli.js +89 -0
- package/dist/cli.js.map +1 -0
- package/dist/config.d.ts +38 -0
- package/dist/config.d.ts.map +1 -0
- package/dist/config.js +256 -0
- package/dist/config.js.map +1 -0
- package/dist/generators/content-scss.d.ts +3 -0
- package/dist/generators/content-scss.d.ts.map +1 -0
- package/dist/generators/content-scss.js +207 -0
- package/dist/generators/content-scss.js.map +1 -0
- package/dist/generators/fluid.d.ts +7 -0
- package/dist/generators/fluid.d.ts.map +1 -0
- package/dist/generators/fluid.js +31 -0
- package/dist/generators/fluid.js.map +1 -0
- package/dist/generators/fonts-css.d.ts +3 -0
- package/dist/generators/fonts-css.d.ts.map +1 -0
- package/dist/generators/fonts-css.js +33 -0
- package/dist/generators/fonts-css.js.map +1 -0
- package/dist/generators/integrate-php.d.ts +2 -0
- package/dist/generators/integrate-php.d.ts.map +1 -0
- package/dist/generators/integrate-php.js +9 -0
- package/dist/generators/integrate-php.js.map +1 -0
- package/dist/generators/theme-json.d.ts +3 -0
- package/dist/generators/theme-json.d.ts.map +1 -0
- package/dist/generators/theme-json.js +245 -0
- package/dist/generators/theme-json.js.map +1 -0
- package/dist/generators/tokens-css.d.ts +3 -0
- package/dist/generators/tokens-css.d.ts.map +1 -0
- package/dist/generators/tokens-css.js +32 -0
- package/dist/generators/tokens-css.js.map +1 -0
- package/dist/generators/tokens-wp-css.d.ts +3 -0
- package/dist/generators/tokens-wp-css.d.ts.map +1 -0
- package/dist/generators/tokens-wp-css.js +37 -0
- package/dist/generators/tokens-wp-css.js.map +1 -0
- package/dist/index.d.ts +16 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +50 -0
- package/dist/index.js.map +1 -0
- package/dist/preset.d.ts +13 -0
- package/dist/preset.d.ts.map +1 -0
- package/dist/preset.js +31 -0
- package/dist/preset.js.map +1 -0
- package/dist/types.d.ts +166 -0
- package/dist/types.d.ts.map +1 -0
- package/dist/types.js +123 -0
- package/dist/types.js.map +1 -0
- package/package.json +58 -0
- package/templates/integrate.php.tpl +133 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tokens-css.js","sourceRoot":"","sources":["../../src/generators/tokens-css.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,UAAU,iBAAiB,CAAC,MAAiB;IACjD,MAAM,KAAK,GAAa;QACtB,gEAAgE;QAChE,EAAE;QACF,SAAS;KACV,CAAC;IAEF,IAAI,aAAa,GAAG,IAAI,CAAC;IAEzB,KAAK,MAAM,QAAQ,IAAI,cAAc,EAAE,CAAC;QACtC,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QACtC,IAAI,CAAC,KAAK;YAAE,SAAS;QAErB,MAAM,GAAG,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;QAExC,IAAI,CAAC,aAAa,EAAE,CAAC;YACnB,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACjB,CAAC;QACD,aAAa,GAAG,KAAK,CAAC;QAEtB,KAAK,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,KAAK,KAAK,CAAC,CAAC;QAEnC,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;YACjD,sEAAsE;YACtE,MAAM,MAAM,GAAG,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;YACvD,MAAM,OAAO,GAAG,KAAK,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,UAAU,IAAI,MAAM,EAAE,CAAC;YAClE,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YAC/D,KAAK,CAAC,IAAI,CAAC,KAAK,OAAO,KAAK,UAAU,IAAI,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC;QAC5D,CAAC;IACH,CAAC;IAED,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAChB,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAEf,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tokens-wp-css.d.ts","sourceRoot":"","sources":["../../src/generators/tokens-wp-css.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAI7C,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,SAAS,GAAG,MAAM,CAwC7D"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { CATEGORY_REGISTRY, CATEGORY_ORDER, camelToKebab } from '../types.js';
|
|
2
|
+
import { buildFluidClamp } from './fluid.js';
|
|
3
|
+
export function generateTokensWpCss(config) {
|
|
4
|
+
const lines = [
|
|
5
|
+
'/* Auto-generated by component2block — do not edit manually */',
|
|
6
|
+
'',
|
|
7
|
+
':root {',
|
|
8
|
+
];
|
|
9
|
+
let firstCategory = true;
|
|
10
|
+
for (const category of CATEGORY_ORDER) {
|
|
11
|
+
const group = config.tokens[category];
|
|
12
|
+
if (!group)
|
|
13
|
+
continue;
|
|
14
|
+
const def = CATEGORY_REGISTRY[category];
|
|
15
|
+
if (!firstCategory) {
|
|
16
|
+
lines.push('');
|
|
17
|
+
}
|
|
18
|
+
firstCategory = false;
|
|
19
|
+
lines.push(` /* ${def.label} */`);
|
|
20
|
+
for (const [key, entry] of Object.entries(group)) {
|
|
21
|
+
// Layout keys are camelCase in config but kebab-case in CSS variables
|
|
22
|
+
const cssKey = def.directMap ? camelToKebab(key) : key;
|
|
23
|
+
const varName = `--${config.prefix}--${def.cssSegment}-${cssKey}`;
|
|
24
|
+
const fallback = entry.fluid ? buildFluidClamp(entry) ?? entry.value : entry.value;
|
|
25
|
+
if (def.wpPreset && entry.slug) {
|
|
26
|
+
lines.push(` ${varName}: var(${def.wpPreset}--${entry.slug}, ${fallback});`);
|
|
27
|
+
}
|
|
28
|
+
else {
|
|
29
|
+
lines.push(` ${varName}: ${fallback};`);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
lines.push('}');
|
|
34
|
+
lines.push('');
|
|
35
|
+
return lines.join('\n');
|
|
36
|
+
}
|
|
37
|
+
//# sourceMappingURL=tokens-wp-css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tokens-wp-css.js","sourceRoot":"","sources":["../../src/generators/tokens-wp-css.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,UAAU,mBAAmB,CAAC,MAAiB;IACnD,MAAM,KAAK,GAAa;QACtB,gEAAgE;QAChE,EAAE;QACF,SAAS;KACV,CAAC;IAEF,IAAI,aAAa,GAAG,IAAI,CAAC;IAEzB,KAAK,MAAM,QAAQ,IAAI,cAAc,EAAE,CAAC;QACtC,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QACtC,IAAI,CAAC,KAAK;YAAE,SAAS;QAErB,MAAM,GAAG,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;QAExC,IAAI,CAAC,aAAa,EAAE,CAAC;YACnB,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACjB,CAAC;QACD,aAAa,GAAG,KAAK,CAAC;QAEtB,KAAK,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,KAAK,KAAK,CAAC,CAAC;QAEnC,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;YACjD,sEAAsE;YACtE,MAAM,MAAM,GAAG,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;YACvD,MAAM,OAAO,GAAG,KAAK,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,UAAU,IAAI,MAAM,EAAE,CAAC;YAClE,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC;YAEnF,IAAI,GAAG,CAAC,QAAQ,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;gBAC/B,KAAK,CAAC,IAAI,CAAC,KAAK,OAAO,SAAS,GAAG,CAAC,QAAQ,KAAK,KAAK,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,CAAC;YAChF,CAAC;iBAAM,CAAC;gBACN,KAAK,CAAC,IAAI,CAAC,KAAK,OAAO,KAAK,QAAQ,GAAG,CAAC,CAAC;YAC3C,CAAC;QACH,CAAC;IACH,CAAC;IAED,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAChB,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAEf,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export { loadConfig, validateConfig } from './config.js';
|
|
2
|
+
export { generateTokensCss } from './generators/tokens-css.js';
|
|
3
|
+
export { generateTokensWpCss } from './generators/tokens-wp-css.js';
|
|
4
|
+
export { generateThemeJson } from './generators/theme-json.js';
|
|
5
|
+
export { generateIntegratePhp } from './generators/integrate-php.js';
|
|
6
|
+
export { generateFontsCss } from './generators/fonts-css.js';
|
|
7
|
+
export { generateContentScss } from './generators/content-scss.js';
|
|
8
|
+
export type { C2bConfig, C2bConfigInput, TokenEntry, TokenGroup, TokenCategory, FontFaceEntry, BaseStylesConfig } from './types.js';
|
|
9
|
+
export interface GenerateResult {
|
|
10
|
+
files: Array<{
|
|
11
|
+
path: string;
|
|
12
|
+
size: number;
|
|
13
|
+
}>;
|
|
14
|
+
}
|
|
15
|
+
export declare function generate(configPath?: string, cwd?: string): GenerateResult;
|
|
16
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,YAAY,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEpI,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC9C;AAED,wBAAgB,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,cAAc,CAsC1E"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { writeFileSync, mkdirSync } from 'node:fs';
|
|
2
|
+
import { dirname, resolve, join } from 'node:path';
|
|
3
|
+
import { loadConfig } from './config.js';
|
|
4
|
+
import { generateTokensCss } from './generators/tokens-css.js';
|
|
5
|
+
import { generateTokensWpCss } from './generators/tokens-wp-css.js';
|
|
6
|
+
import { generateThemeJson } from './generators/theme-json.js';
|
|
7
|
+
import { generateIntegratePhp } from './generators/integrate-php.js';
|
|
8
|
+
import { generateFontsCss } from './generators/fonts-css.js';
|
|
9
|
+
import { generateContentScss } from './generators/content-scss.js';
|
|
10
|
+
export { loadConfig, validateConfig } from './config.js';
|
|
11
|
+
export { generateTokensCss } from './generators/tokens-css.js';
|
|
12
|
+
export { generateTokensWpCss } from './generators/tokens-wp-css.js';
|
|
13
|
+
export { generateThemeJson } from './generators/theme-json.js';
|
|
14
|
+
export { generateIntegratePhp } from './generators/integrate-php.js';
|
|
15
|
+
export { generateFontsCss } from './generators/fonts-css.js';
|
|
16
|
+
export { generateContentScss } from './generators/content-scss.js';
|
|
17
|
+
export function generate(configPath, cwd) {
|
|
18
|
+
const config = loadConfig(configPath);
|
|
19
|
+
const baseDir = cwd ?? process.cwd();
|
|
20
|
+
const files = [];
|
|
21
|
+
const write = (relativePath, content) => {
|
|
22
|
+
const fullPath = resolve(baseDir, relativePath);
|
|
23
|
+
mkdirSync(dirname(fullPath), { recursive: true });
|
|
24
|
+
writeFileSync(fullPath, content, 'utf-8');
|
|
25
|
+
files.push({ path: relativePath, size: content.length });
|
|
26
|
+
};
|
|
27
|
+
// Generate tokens.css for local dev (Storybook)
|
|
28
|
+
write(config.tokensPath, generateTokensCss(config));
|
|
29
|
+
// Generate fonts.css if fontFace entries exist
|
|
30
|
+
const fontsCss = generateFontsCss(config);
|
|
31
|
+
if (fontsCss) {
|
|
32
|
+
const fontsPath = join(dirname(config.tokensPath), 'fonts.css');
|
|
33
|
+
write(fontsPath, fontsCss);
|
|
34
|
+
}
|
|
35
|
+
// Generate _content-generated.scss if baseStyles are defined
|
|
36
|
+
const contentScss = generateContentScss(config);
|
|
37
|
+
if (contentScss) {
|
|
38
|
+
const contentScssPath = join(dirname(config.tokensPath), '_content-generated.scss');
|
|
39
|
+
write(contentScssPath, contentScss);
|
|
40
|
+
}
|
|
41
|
+
// Generate WordPress assets
|
|
42
|
+
write(`${config.wpDir}/tokens.css`, generateTokensCss(config));
|
|
43
|
+
if (config.wpThemeable) {
|
|
44
|
+
write(`${config.wpDir}/tokens.wp.css`, generateTokensWpCss(config));
|
|
45
|
+
}
|
|
46
|
+
write(`${config.wpDir}/theme.json`, generateThemeJson(config));
|
|
47
|
+
write(`${config.wpDir}/integrate.php`, generateIntegratePhp());
|
|
48
|
+
return { files };
|
|
49
|
+
}
|
|
50
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAOnE,MAAM,UAAU,QAAQ,CAAC,UAAmB,EAAE,GAAY;IACxD,MAAM,MAAM,GAAG,UAAU,CAAC,UAAU,CAAC,CAAC;IACtC,MAAM,OAAO,GAAG,GAAG,IAAI,OAAO,CAAC,GAAG,EAAE,CAAC;IACrC,MAAM,KAAK,GAA4B,EAAE,CAAC;IAE1C,MAAM,KAAK,GAAG,CAAC,YAAoB,EAAE,OAAe,EAAE,EAAE;QACtD,MAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;QAChD,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;QAClD,aAAa,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;QAC1C,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IAC3D,CAAC,CAAC;IAEF,gDAAgD;IAChD,KAAK,CAAC,MAAM,CAAC,UAAU,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC;IAEpD,+CAA+C;IAC/C,MAAM,QAAQ,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC1C,IAAI,QAAQ,EAAE,CAAC;QACb,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,WAAW,CAAC,CAAC;QAChE,KAAK,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IAC7B,CAAC;IAED,6DAA6D;IAC7D,MAAM,WAAW,GAAG,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAChD,IAAI,WAAW,EAAE,CAAC;QAChB,MAAM,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,yBAAyB,CAAC,CAAC;QACpF,KAAK,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC;IACtC,CAAC;IAED,4BAA4B;IAC5B,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,aAAa,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/D,IAAI,MAAM,CAAC,WAAW,EAAE,CAAC;QACvB,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,gBAAgB,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC;IACtE,CAAC;IACD,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,aAAa,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/D,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,gBAAgB,EAAE,oBAAoB,EAAE,CAAC,CAAC;IAE/D,OAAO,EAAE,KAAK,EAAE,CAAC;AACnB,CAAC"}
|
package/dist/preset.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Storybook Preset for component2block
|
|
3
|
+
*
|
|
4
|
+
* Auto-injects generated and authored style files into the Storybook preview.
|
|
5
|
+
* Add to .storybook/main.ts addons array:
|
|
6
|
+
*
|
|
7
|
+
* addons: ['../component2block/dist/preset.js']
|
|
8
|
+
*
|
|
9
|
+
* The preset reads c2b.config.json, derives file paths from tokensPath,
|
|
10
|
+
* and injects any that exist: tokens.css, fonts.css, reset.scss, content.scss.
|
|
11
|
+
*/
|
|
12
|
+
export declare function previewAnnotations(entry?: string[]): string[];
|
|
13
|
+
//# sourceMappingURL=preset.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../src/preset.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAMH,wBAAgB,kBAAkB,CAAC,KAAK,GAAE,MAAM,EAAO,GAAG,MAAM,EAAE,CAgBjE"}
|
package/dist/preset.js
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Storybook Preset for component2block
|
|
3
|
+
*
|
|
4
|
+
* Auto-injects generated and authored style files into the Storybook preview.
|
|
5
|
+
* Add to .storybook/main.ts addons array:
|
|
6
|
+
*
|
|
7
|
+
* addons: ['../component2block/dist/preset.js']
|
|
8
|
+
*
|
|
9
|
+
* The preset reads c2b.config.json, derives file paths from tokensPath,
|
|
10
|
+
* and injects any that exist: tokens.css, fonts.css, reset.scss, content.scss.
|
|
11
|
+
*/
|
|
12
|
+
import { existsSync } from 'node:fs';
|
|
13
|
+
import { resolve, dirname, join } from 'node:path';
|
|
14
|
+
import { loadConfig } from './config.js';
|
|
15
|
+
export function previewAnnotations(entry = []) {
|
|
16
|
+
try {
|
|
17
|
+
const config = loadConfig();
|
|
18
|
+
const stylesDir = dirname(resolve(config.tokensPath));
|
|
19
|
+
const candidates = [
|
|
20
|
+
resolve(config.tokensPath),
|
|
21
|
+
join(stylesDir, 'fonts.css'),
|
|
22
|
+
join(stylesDir, 'reset.scss'),
|
|
23
|
+
join(stylesDir, 'content.scss'),
|
|
24
|
+
];
|
|
25
|
+
return [...entry, ...candidates.filter(existsSync)];
|
|
26
|
+
}
|
|
27
|
+
catch {
|
|
28
|
+
return entry;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
//# sourceMappingURL=preset.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"preset.js","sourceRoot":"","sources":["../src/preset.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,MAAM,UAAU,kBAAkB,CAAC,QAAkB,EAAE;IACrD,IAAI,CAAC;QACH,MAAM,MAAM,GAAG,UAAU,EAAE,CAAC;QAC5B,MAAM,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;QAEtD,MAAM,UAAU,GAAG;YACjB,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC;YAC1B,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC;YAC5B,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC;YAC7B,IAAI,CAAC,SAAS,EAAE,cAAc,CAAC;SAChC,CAAC;QAEF,OAAO,CAAC,GAAG,KAAK,EAAE,GAAG,UAAU,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;IACtD,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,KAAK,CAAC;IACf,CAAC;AACH,CAAC"}
|
package/dist/types.d.ts
ADDED
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
export interface FontFaceEntry {
|
|
2
|
+
weight: string;
|
|
3
|
+
style: string;
|
|
4
|
+
src: string;
|
|
5
|
+
}
|
|
6
|
+
/** Valid typography CSS properties for baseStyles element definitions */
|
|
7
|
+
export type BaseStyleProperty = 'fontFamily' | 'fontSize' | 'fontWeight' | 'lineHeight' | 'fontStyle';
|
|
8
|
+
/** A single element definition within baseStyles */
|
|
9
|
+
export interface BaseStyleElementDef {
|
|
10
|
+
fontFamily?: string;
|
|
11
|
+
fontSize?: string;
|
|
12
|
+
fontWeight?: string;
|
|
13
|
+
lineHeight?: string;
|
|
14
|
+
fontStyle?: string;
|
|
15
|
+
color?: string;
|
|
16
|
+
background?: string;
|
|
17
|
+
hoverColor?: string;
|
|
18
|
+
}
|
|
19
|
+
/** Valid element keys in baseStyles config */
|
|
20
|
+
export type BaseStyleElement = 'body' | 'heading' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'caption' | 'button' | 'link';
|
|
21
|
+
/** Padding values for each side */
|
|
22
|
+
export interface BaseStylesSpacingPadding {
|
|
23
|
+
top?: string;
|
|
24
|
+
right?: string;
|
|
25
|
+
bottom?: string;
|
|
26
|
+
left?: string;
|
|
27
|
+
}
|
|
28
|
+
/** Spacing section within baseStyles */
|
|
29
|
+
export interface BaseStylesSpacing {
|
|
30
|
+
blockGap?: string;
|
|
31
|
+
padding?: BaseStylesSpacingPadding;
|
|
32
|
+
}
|
|
33
|
+
/** The full baseStyles config section */
|
|
34
|
+
export type BaseStylesConfig = Partial<Record<BaseStyleElement, BaseStyleElementDef>> & {
|
|
35
|
+
spacing?: BaseStylesSpacing;
|
|
36
|
+
};
|
|
37
|
+
export interface TokenEntry {
|
|
38
|
+
value: string;
|
|
39
|
+
name?: string;
|
|
40
|
+
slug?: string;
|
|
41
|
+
cssOnly?: boolean;
|
|
42
|
+
fluid?: {
|
|
43
|
+
min: string;
|
|
44
|
+
max: string;
|
|
45
|
+
};
|
|
46
|
+
fontFace?: FontFaceEntry[];
|
|
47
|
+
}
|
|
48
|
+
/**
|
|
49
|
+
* Fluid fontSize shorthand as written by user.
|
|
50
|
+
* { "min": "0.875rem", "max": "1rem" } expands to { value: "1rem", fluid: { min, max } }.
|
|
51
|
+
*/
|
|
52
|
+
export interface FluidInput {
|
|
53
|
+
min: string;
|
|
54
|
+
max: string;
|
|
55
|
+
}
|
|
56
|
+
export type TokenGroup = Record<string, TokenEntry>;
|
|
57
|
+
/**
|
|
58
|
+
* Defines how a token category maps to CSS variables,
|
|
59
|
+
* WordPress preset CSS variables, and theme.json output.
|
|
60
|
+
*/
|
|
61
|
+
export interface CategoryDef {
|
|
62
|
+
/** CSS variable segment: e.g. "color" → --prefix-color-*, "font-family" → --prefix-font-family-* */
|
|
63
|
+
cssSegment: string;
|
|
64
|
+
/** Human-readable label for CSS comments */
|
|
65
|
+
label: string;
|
|
66
|
+
/** Output order in generated CSS files */
|
|
67
|
+
order: number;
|
|
68
|
+
/**
|
|
69
|
+
* Where named tokens (with name+slug) go in theme.json settings.
|
|
70
|
+
* - `path`: dot-separated path under settings, e.g. "color.palette" or "shadow.presets"
|
|
71
|
+
* - `valueKey`: the property name for the token value in the preset object, e.g. "color", "size", "shadow"
|
|
72
|
+
*
|
|
73
|
+
* Omit for categories that don't produce theme.json presets (fontWeight, lineHeight, etc.)
|
|
74
|
+
*/
|
|
75
|
+
themeJson?: {
|
|
76
|
+
path: string;
|
|
77
|
+
valueKey: string;
|
|
78
|
+
};
|
|
79
|
+
/** WordPress preset CSS variable prefix, e.g. "--wp--preset--color". Omit = hardcoded in wp css. */
|
|
80
|
+
wpPreset?: string;
|
|
81
|
+
/** Key under settings.custom for tokens without a native preset mapping, e.g. "fontWeight" */
|
|
82
|
+
custom?: string;
|
|
83
|
+
/** If true, category is excluded from theme.json entirely (e.g. zIndex) */
|
|
84
|
+
exclude?: boolean;
|
|
85
|
+
/** If true, tokens map directly to a settings object (not a preset array). Used by layout. */
|
|
86
|
+
directMap?: boolean;
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
89
|
+
* Central registry mapping token category names to their output behavior.
|
|
90
|
+
* Adding a new category here is all that's needed to support it across all generators.
|
|
91
|
+
*/
|
|
92
|
+
/**
|
|
93
|
+
* Maps user-facing config category names to internal flat category names.
|
|
94
|
+
* Categories not in this map use their key as-is (e.g. "fontSize" → "fontSize").
|
|
95
|
+
*/
|
|
96
|
+
export declare const INPUT_CATEGORY_MAP: Record<string, TokenCategory>;
|
|
97
|
+
export declare const CATEGORY_REGISTRY: Record<string, CategoryDef>;
|
|
98
|
+
export type TokenCategory = 'colorPalette' | 'colorGradient' | 'spacing' | 'fontFamily' | 'fontSize' | 'shadow' | 'fontWeight' | 'lineHeight' | 'radius' | 'transition' | 'zIndex' | 'layout';
|
|
99
|
+
/** All valid category names, derived from the registry */
|
|
100
|
+
export declare const VALID_CATEGORIES: TokenCategory[];
|
|
101
|
+
/** Categories sorted by their output order */
|
|
102
|
+
export declare const CATEGORY_ORDER: TokenCategory[];
|
|
103
|
+
/** Internal config after normalization — uses flat category keys like colorPalette */
|
|
104
|
+
export interface C2bConfig {
|
|
105
|
+
prefix: string;
|
|
106
|
+
tokensPath: string;
|
|
107
|
+
wpDir: string;
|
|
108
|
+
wpThemeable: boolean;
|
|
109
|
+
tokens: Partial<Record<TokenCategory, TokenGroup>>;
|
|
110
|
+
baseStyles?: BaseStylesConfig;
|
|
111
|
+
}
|
|
112
|
+
/** Output configuration group */
|
|
113
|
+
export interface OutputConfig {
|
|
114
|
+
tokensPath?: string;
|
|
115
|
+
wpDir?: string;
|
|
116
|
+
wpThemeable?: boolean;
|
|
117
|
+
}
|
|
118
|
+
/**
|
|
119
|
+
* Token entry as written by user — can be a string (shorthand) or full object.
|
|
120
|
+
* String shorthand behavior depends on the category:
|
|
121
|
+
* - Preset categories (color, gradient, shadow, fontFamily, fontSize): registers as preset
|
|
122
|
+
* - Custom-only categories (fontWeight, radius): CSS-only
|
|
123
|
+
* - Excluded categories (zIndex): CSS-only
|
|
124
|
+
*/
|
|
125
|
+
export type TokenEntryInput = string | FluidInput | TokenEntry;
|
|
126
|
+
/** Token group as written by user — supports string and fluid shorthand */
|
|
127
|
+
export type TokenGroupInput = Record<string, TokenEntryInput>;
|
|
128
|
+
/**
|
|
129
|
+
* Config as written by the user:
|
|
130
|
+
* - Token categories under a "tokens" wrapper
|
|
131
|
+
* - Output settings under an "output" wrapper
|
|
132
|
+
* - "color" maps to colorPalette, "gradient" maps to colorGradient
|
|
133
|
+
* - Token values can be strings (shorthand), fluid shorthand, or full objects
|
|
134
|
+
* - slug is auto-derived from key, name is auto-derived from key (title-case)
|
|
135
|
+
* - String shorthand registers as preset for preset-capable categories
|
|
136
|
+
*/
|
|
137
|
+
export interface C2bConfigInput {
|
|
138
|
+
prefix: string;
|
|
139
|
+
output?: OutputConfig;
|
|
140
|
+
tokens?: Record<string, TokenGroupInput>;
|
|
141
|
+
baseStyles?: BaseStylesConfig;
|
|
142
|
+
/** @deprecated Use output.tokensPath */
|
|
143
|
+
tokensPath?: string;
|
|
144
|
+
/** @deprecated Use output.wpDir */
|
|
145
|
+
outDir?: string;
|
|
146
|
+
/** @deprecated Use output.wpThemeable */
|
|
147
|
+
wpThemeable?: boolean;
|
|
148
|
+
/** @deprecated Use tokens wrapper */
|
|
149
|
+
[category: string]: string | boolean | OutputConfig | BaseStylesConfig | TokenGroupInput | undefined;
|
|
150
|
+
}
|
|
151
|
+
/**
|
|
152
|
+
* Convert a kebab-case key to camelCase.
|
|
153
|
+
* e.g. "content-size" → "contentSize"
|
|
154
|
+
*/
|
|
155
|
+
export declare function kebabToCamel(str: string): string;
|
|
156
|
+
/**
|
|
157
|
+
* Convert a kebab-case key to Title Case.
|
|
158
|
+
* e.g. "primary-hover" → "Primary Hover"
|
|
159
|
+
*/
|
|
160
|
+
export declare function kebabToTitle(str: string): string;
|
|
161
|
+
/**
|
|
162
|
+
* Convert a camelCase key to kebab-case.
|
|
163
|
+
* e.g. "fontFamily" → "font-family"
|
|
164
|
+
*/
|
|
165
|
+
export declare function camelToKebab(str: string): string;
|
|
166
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
|
package/dist/types.js
ADDED
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Central registry mapping token category names to their output behavior.
|
|
3
|
+
* Adding a new category here is all that's needed to support it across all generators.
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* Maps user-facing config category names to internal flat category names.
|
|
7
|
+
* Categories not in this map use their key as-is (e.g. "fontSize" → "fontSize").
|
|
8
|
+
*/
|
|
9
|
+
export const INPUT_CATEGORY_MAP = {
|
|
10
|
+
color: 'colorPalette',
|
|
11
|
+
gradient: 'colorGradient',
|
|
12
|
+
};
|
|
13
|
+
export const CATEGORY_REGISTRY = {
|
|
14
|
+
colorPalette: {
|
|
15
|
+
cssSegment: 'color',
|
|
16
|
+
label: 'Colors',
|
|
17
|
+
order: 0,
|
|
18
|
+
themeJson: { path: 'color.palette', valueKey: 'color' },
|
|
19
|
+
wpPreset: '--wp--preset--color',
|
|
20
|
+
},
|
|
21
|
+
colorGradient: {
|
|
22
|
+
cssSegment: 'gradient',
|
|
23
|
+
label: 'Gradients',
|
|
24
|
+
order: 1,
|
|
25
|
+
themeJson: { path: 'color.gradients', valueKey: 'gradient' },
|
|
26
|
+
wpPreset: '--wp--preset--gradient',
|
|
27
|
+
},
|
|
28
|
+
spacing: {
|
|
29
|
+
cssSegment: 'spacing',
|
|
30
|
+
label: 'Spacing',
|
|
31
|
+
order: 2,
|
|
32
|
+
themeJson: { path: 'spacing.spacingSizes', valueKey: 'size' },
|
|
33
|
+
wpPreset: '--wp--preset--spacing',
|
|
34
|
+
},
|
|
35
|
+
fontFamily: {
|
|
36
|
+
cssSegment: 'font-family',
|
|
37
|
+
label: 'Font Families',
|
|
38
|
+
order: 3,
|
|
39
|
+
themeJson: { path: 'typography.fontFamilies', valueKey: 'fontFamily' },
|
|
40
|
+
wpPreset: '--wp--preset--font-family',
|
|
41
|
+
},
|
|
42
|
+
fontSize: {
|
|
43
|
+
cssSegment: 'font-size',
|
|
44
|
+
label: 'Font Sizes',
|
|
45
|
+
order: 4,
|
|
46
|
+
themeJson: { path: 'typography.fontSizes', valueKey: 'size' },
|
|
47
|
+
wpPreset: '--wp--preset--font-size',
|
|
48
|
+
},
|
|
49
|
+
shadow: {
|
|
50
|
+
cssSegment: 'shadow',
|
|
51
|
+
label: 'Shadows',
|
|
52
|
+
order: 5,
|
|
53
|
+
themeJson: { path: 'shadow.presets', valueKey: 'shadow' },
|
|
54
|
+
wpPreset: '--wp--preset--shadow',
|
|
55
|
+
custom: 'shadow',
|
|
56
|
+
},
|
|
57
|
+
fontWeight: {
|
|
58
|
+
cssSegment: 'font-weight',
|
|
59
|
+
label: 'Font Weights',
|
|
60
|
+
order: 6,
|
|
61
|
+
custom: 'fontWeight',
|
|
62
|
+
},
|
|
63
|
+
lineHeight: {
|
|
64
|
+
cssSegment: 'line-height',
|
|
65
|
+
label: 'Line Heights',
|
|
66
|
+
order: 7,
|
|
67
|
+
custom: 'lineHeight',
|
|
68
|
+
},
|
|
69
|
+
radius: {
|
|
70
|
+
cssSegment: 'radius',
|
|
71
|
+
label: 'Border Radius',
|
|
72
|
+
order: 8,
|
|
73
|
+
custom: 'radius',
|
|
74
|
+
},
|
|
75
|
+
transition: {
|
|
76
|
+
cssSegment: 'transition',
|
|
77
|
+
label: 'Transitions',
|
|
78
|
+
order: 9,
|
|
79
|
+
custom: 'transition',
|
|
80
|
+
},
|
|
81
|
+
zIndex: {
|
|
82
|
+
cssSegment: 'z',
|
|
83
|
+
label: 'Z-Index',
|
|
84
|
+
order: 10,
|
|
85
|
+
exclude: true,
|
|
86
|
+
},
|
|
87
|
+
layout: {
|
|
88
|
+
cssSegment: 'layout',
|
|
89
|
+
label: 'Layout',
|
|
90
|
+
order: 11,
|
|
91
|
+
directMap: true,
|
|
92
|
+
themeJson: { path: 'layout', valueKey: 'direct' },
|
|
93
|
+
},
|
|
94
|
+
};
|
|
95
|
+
/** All valid category names, derived from the registry */
|
|
96
|
+
export const VALID_CATEGORIES = Object.keys(CATEGORY_REGISTRY);
|
|
97
|
+
/** Categories sorted by their output order */
|
|
98
|
+
export const CATEGORY_ORDER = [...VALID_CATEGORIES].sort((a, b) => CATEGORY_REGISTRY[a].order - CATEGORY_REGISTRY[b].order);
|
|
99
|
+
/**
|
|
100
|
+
* Convert a kebab-case key to camelCase.
|
|
101
|
+
* e.g. "content-size" → "contentSize"
|
|
102
|
+
*/
|
|
103
|
+
export function kebabToCamel(str) {
|
|
104
|
+
return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
|
|
105
|
+
}
|
|
106
|
+
/**
|
|
107
|
+
* Convert a kebab-case key to Title Case.
|
|
108
|
+
* e.g. "primary-hover" → "Primary Hover"
|
|
109
|
+
*/
|
|
110
|
+
export function kebabToTitle(str) {
|
|
111
|
+
return str
|
|
112
|
+
.split('-')
|
|
113
|
+
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
|
|
114
|
+
.join(' ');
|
|
115
|
+
}
|
|
116
|
+
/**
|
|
117
|
+
* Convert a camelCase key to kebab-case.
|
|
118
|
+
* e.g. "fontFamily" → "font-family"
|
|
119
|
+
*/
|
|
120
|
+
export function camelToKebab(str) {
|
|
121
|
+
return str.replace(/([A-Z])/g, '-$1').toLowerCase();
|
|
122
|
+
}
|
|
123
|
+
//# sourceMappingURL=types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
|
package/package.json
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@troychaplin/component2block",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Generate WordPress theme.json and CSS token files from a single config for component libraries",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"bin": {
|
|
7
|
+
"c2b": "./dist/cli.js"
|
|
8
|
+
},
|
|
9
|
+
"main": "./dist/index.js",
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"exports": {
|
|
12
|
+
".": {
|
|
13
|
+
"import": "./dist/index.js",
|
|
14
|
+
"types": "./dist/index.d.ts"
|
|
15
|
+
},
|
|
16
|
+
"./preset": {
|
|
17
|
+
"import": "./dist/preset.js",
|
|
18
|
+
"types": "./dist/preset.d.ts"
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
"files": [
|
|
22
|
+
"dist",
|
|
23
|
+
"templates"
|
|
24
|
+
],
|
|
25
|
+
"scripts": {
|
|
26
|
+
"build": "tsc",
|
|
27
|
+
"dev": "tsc --watch",
|
|
28
|
+
"test": "vitest",
|
|
29
|
+
"prepublishOnly": "npm run build"
|
|
30
|
+
},
|
|
31
|
+
"engines": {
|
|
32
|
+
"node": ">=20"
|
|
33
|
+
},
|
|
34
|
+
"keywords": [
|
|
35
|
+
"storybook",
|
|
36
|
+
"wordpress",
|
|
37
|
+
"gutenberg",
|
|
38
|
+
"block-theme",
|
|
39
|
+
"design-tokens",
|
|
40
|
+
"theme-json",
|
|
41
|
+
"css-variables"
|
|
42
|
+
],
|
|
43
|
+
"author": "Troy Chaplin",
|
|
44
|
+
"license": "MIT",
|
|
45
|
+
"repository": {
|
|
46
|
+
"type": "git",
|
|
47
|
+
"url": "https://github.com/troychaplin/component2block.git"
|
|
48
|
+
},
|
|
49
|
+
"homepage": "https://github.com/troychaplin/component2block",
|
|
50
|
+
"bugs": {
|
|
51
|
+
"url": "https://github.com/troychaplin/component2block/issues"
|
|
52
|
+
},
|
|
53
|
+
"devDependencies": {
|
|
54
|
+
"@types/node": "^25.1.0",
|
|
55
|
+
"typescript": "^5.9.3",
|
|
56
|
+
"vitest": "^4.0.18"
|
|
57
|
+
}
|
|
58
|
+
}
|