@troychaplin/component2block 0.2.7 → 0.3.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.
Files changed (13) hide show
  1. package/README.md +25 -11
  2. package/dist/cli.js +3 -0
  3. package/dist/cli.js.map +1 -1
  4. package/dist/config.js +2 -2
  5. package/dist/generators/tokens-scss.d.ts +3 -0
  6. package/dist/generators/tokens-scss.d.ts.map +1 -0
  7. package/dist/generators/tokens-scss.js +24 -0
  8. package/dist/generators/tokens-scss.js.map +1 -0
  9. package/dist/index.d.ts +1 -0
  10. package/dist/index.d.ts.map +1 -1
  11. package/dist/index.js +4 -0
  12. package/dist/index.js.map +1 -1
  13. package/package.json +1 -1
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- <img src="docs/images/banner.png" alt="Block Finder Plugin Banner" style="width: 100%; height: auto;">
1
+ <img src="docs/images/banner.png" alt="component2block banner" style="width: 100%; height: auto;">
2
2
 
3
3
  # component2block
4
4
 
@@ -18,10 +18,11 @@ c2b.config.json single source of truth
18
18
  │ npx c2b generate
19
19
  │
20
20
  ├──► src/styles/tokens.css CSS custom properties
21
+ ├──► src/styles/_tokens.scss SCSS variables (for @media queries)
21
22
  ├──► src/styles/fonts.css @font-face declarations
22
23
  ├──► src/styles/base-styles.scss Base typography (zero-specificity)
23
24
  │
24
- ├──► dist/wp/theme.json WordPress settings + styles
25
+ ├──► dist/wp/theme-{prefix}.json WordPress settings + styles
25
26
  ├──► dist/wp/tokens.wp.css CSS vars mapped to --wp--preset--*
26
27
  ├──► dist/wp/tokens.css CSS vars with hardcoded values
27
28
  └──► dist/wp/integrate.php PHP hooks for the theme.json cascade
@@ -122,24 +123,37 @@ Options (generate):
122
123
  ## Programmatic API
123
124
 
124
125
  ```ts
125
- import { generate } from 'component2block';
126
+ import { generate } from '@troychaplin/component2block';
126
127
 
127
128
  const result = generate('./c2b.config.json');
128
129
  // result.files: Array<{ path: string; size: number }>
129
130
  ```
130
131
 
131
- Individual generators are also exported:
132
+ Individual generators, config helpers, and types are also exported:
132
133
 
133
134
  ```ts
134
135
  import {
136
+ // Config
135
137
  loadConfig,
138
+ validateConfig,
139
+ // Generators
136
140
  generateTokensCss,
141
+ generateTokensScss,
137
142
  generateTokensWpCss,
138
143
  generateThemeJson,
139
144
  generateFontsCss,
140
145
  generateContentScss,
141
146
  generateIntegratePhp,
142
- } from 'component2block';
147
+ copyFontFiles,
148
+ // Types
149
+ type C2bConfig,
150
+ type C2bConfigInput,
151
+ type TokenEntry,
152
+ type TokenGroup,
153
+ type TokenCategory,
154
+ type FontFaceEntry,
155
+ type BaseStylesConfig,
156
+ } from '@troychaplin/component2block';
143
157
  ```
144
158
 
145
159
  ## Documentation
@@ -180,7 +194,7 @@ import {
180
194
 
181
195
  | Guide | Description |
182
196
  |-------|-------------|
183
- | [Architecture](./docs/advanced/architecture.md) | Design decisions, project structure, category registry |
197
+ | [Architecture](./docs/advanced/ARCHITECTURE.md) | Design decisions, project structure, category registry |
184
198
  | [Token Flow](./docs/advanced/token-flow.md) | How tokens resolve differently per output |
185
199
 
186
200
  ## Development
@@ -188,14 +202,14 @@ import {
188
202
  ```bash
189
203
  npm install
190
204
  npm run build # Compile TypeScript
191
- npm test # Run 215 tests
205
+ npm test # Run the test suite
192
206
  ```
193
207
 
194
208
  ## Screenshots
195
209
 
196
210
  | Before | After |
197
211
  |-------|-------------|
198
- | <img src="docs/images/before-01-styles.jpg" alt="Block Finder Plugin Banner" style="width: 100%; height: auto;"> | <img src="docs/images/after-01-styles.jpg" alt="Block Finder Plugin Banner" style="width: 100%; height: auto;"> |
199
- | <img src="docs/images/before-02-typography.jpg" alt="Block Finder Plugin Banner" style="width: 100%; height: auto;"> | <img src="docs/images/after-02-typography.jpg" alt="Block Finder Plugin Banner" style="width: 100%; height: auto;"> |
200
- | <img src="docs/images/before-03-colors.jpg" alt="Block Finder Plugin Banner" style="width: 100%; height: auto;"> | <img src="docs/images/after-03-colors.jpg" alt="Block Finder Plugin Banner" style="width: 100%; height: auto;"> |
201
- | <img src="docs/images/before-04-template.jpg" alt="Block Finder Plugin Banner" style="width: 100%; height: auto;"> | <img src="docs/images/after-04-template.jpg" alt="Block Finder Plugin Banner" style="width: 100%; height: auto;"> |
212
+ | <img src="docs/images/before-01-styles.jpg" alt="Site Editor styles panel before component2block" style="width: 100%; height: auto;"> | <img src="docs/images/after-01-styles.jpg" alt="Site Editor styles panel with component2block presets" style="width: 100%; height: auto;"> |
213
+ | <img src="docs/images/before-02-typography.jpg" alt="Typography controls before component2block" style="width: 100%; height: auto;"> | <img src="docs/images/after-02-typography.jpg" alt="Typography controls with component2block fonts" style="width: 100%; height: auto;"> |
214
+ | <img src="docs/images/before-03-colors.jpg" alt="Color palette before component2block" style="width: 100%; height: auto;"> | <img src="docs/images/after-03-colors.jpg" alt="Color palette with component2block tokens" style="width: 100%; height: auto;"> |
215
+ | <img src="docs/images/before-04-template.jpg" alt="Block template before component2block" style="width: 100%; height: auto;"> | <img src="docs/images/after-04-template.jpg" alt="Block template with component2block styles" style="width: 100%; height: auto;"> |
package/dist/cli.js CHANGED
@@ -37,6 +37,7 @@ try {
37
37
  if (dryRun) {
38
38
  const { loadConfig } = await import('./config.js');
39
39
  const { generateTokensCss } = await import('./generators/tokens-css.js');
40
+ const { generateTokensScss } = await import('./generators/tokens-scss.js');
40
41
  const { generateTokensWpCss } = await import('./generators/tokens-wp-css.js');
41
42
  const { generateThemeJson } = await import('./generators/theme-json.js');
42
43
  const { generateIntegratePhp } = await import('./generators/integrate-php.js');
@@ -45,6 +46,8 @@ try {
45
46
  const config = loadConfig(configPath);
46
47
  console.log('=== tokens.css ===');
47
48
  console.log(generateTokensCss(config));
49
+ console.log('=== _tokens.scss ===');
50
+ console.log(generateTokensScss(config));
48
51
  const fontsCss = generateFontsCss(config);
49
52
  if (fontsCss) {
50
53
  console.log('=== fonts.css ===');
package/dist/cli.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":"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"}
package/dist/config.js CHANGED
@@ -319,8 +319,8 @@ function validateTokenGroup(category, group) {
319
319
  // ============================================================================
320
320
  /**
321
321
  * Map baseStyles property names to their expected token category.
322
- * Properties with no entry here have no associated token category and
323
- * accept only CSS keywords or raw values.
322
+ * Properties with no entry here (e.g. `fontStyle`) have no associated token
323
+ * category and accept only CSS keywords (from CSS_KEYWORDS below) or raw values.
324
324
  */
325
325
  const PROPERTY_CATEGORY = {
326
326
  fontFamily: 'fontFamily',
package/dist/generators/tokens-scss.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import type { C2bConfig } from '../types.js';
2
+ export declare function generateTokensScss(config: C2bConfig): string;
3
+ //# sourceMappingURL=tokens-scss.d.ts.map
package/dist/generators/tokens-scss.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tokens-scss.d.ts","sourceRoot":"","sources":["../../src/generators/tokens-scss.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAI7C,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,SAAS,GAAG,MAAM,CAyB5D"}
package/dist/generators/tokens-scss.js ADDED
@@ -0,0 +1,24 @@
1
+ import { CATEGORY_REGISTRY, CATEGORY_ORDER, DEFAULT_FLUID, camelToKebab } from '../types.js';
2
+ import { buildFluidClamp } from './fluid.js';
3
+ export function generateTokensScss(config) {
4
+ const lines = [
5
+ '// Auto-generated by component2block — do not edit manually',
6
+ ];
7
+ for (const category of CATEGORY_ORDER) {
8
+ const group = config.tokens[category];
9
+ if (!group)
10
+ continue;
11
+ const def = CATEGORY_REGISTRY[category];
12
+ lines.push('');
13
+ lines.push(`// ${def.label}`);
14
+ for (const [key, entry] of Object.entries(group)) {
15
+ const cssKey = def.directMap ? camelToKebab(key) : key;
16
+ const varName = `$${config.prefix}-${def.cssSegment}-${cssKey}`;
17
+ const clampValue = entry.fluid ? buildFluidClamp(entry, config.fluid ?? DEFAULT_FLUID) : null;
18
+ lines.push(`${varName}: ${clampValue ?? entry.value};`);
19
+ }
20
+ }
21
+ lines.push('');
22
+ return lines.join('\n');
23
+ }
24
+ //# sourceMappingURL=tokens-scss.js.map
package/dist/generators/tokens-scss.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tokens-scss.js","sourceRoot":"","sources":["../../src/generators/tokens-scss.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC7F,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,UAAU,kBAAkB,CAAC,MAAiB;IAClD,MAAM,KAAK,GAAa;QACtB,6DAA6D;KAC9D,CAAC;IAEF,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,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACf,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC;QAE9B,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;YACjD,MAAM,MAAM,GAAG,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;YACvD,MAAM,OAAO,GAAG,IAAI,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,UAAU,IAAI,MAAM,EAAE,CAAC;YAChE,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YAC9F,KAAK,CAAC,IAAI,CAAC,GAAG,OAAO,KAAK,UAAU,IAAI,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC;QAC1D,CAAC;IACH,CAAC;IAED,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAEf,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC"}
package/dist/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  export { loadConfig, validateConfig } from './config.js';
2
2
  export { generateTokensCss } from './generators/tokens-css.js';
3
+ export { generateTokensScss } from './generators/tokens-scss.js';
3
4
  export { generateTokensWpCss } from './generators/tokens-wp-css.js';
4
5
  export { generateThemeJson } from './generators/theme-json.js';
5
6
  export { generateIntegratePhp } from './generators/integrate-php.js';
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAWA,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,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,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,CAsD1E"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,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,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,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,CAyD1E"}
package/dist/index.js CHANGED
@@ -2,6 +2,7 @@ import { writeFileSync, mkdirSync } from 'node:fs';
2
2
  import { dirname, resolve, join } from 'node:path';
3
3
  import { loadConfig } from './config.js';
4
4
  import { generateTokensCss } from './generators/tokens-css.js';
5
+ import { generateTokensScss } from './generators/tokens-scss.js';
5
6
  import { generateTokensWpCss } from './generators/tokens-wp-css.js';
6
7
  import { generateThemeJson } from './generators/theme-json.js';
7
8
  import { generateIntegratePhp } from './generators/integrate-php.js';
@@ -10,6 +11,7 @@ import { generateContentScss } from './generators/content-scss.js';
10
11
  import { copyFontFiles } from './generators/copy-fonts.js';
11
12
  export { loadConfig, validateConfig } from './config.js';
12
13
  export { generateTokensCss } from './generators/tokens-css.js';
14
+ export { generateTokensScss } from './generators/tokens-scss.js';
13
15
  export { generateTokensWpCss } from './generators/tokens-wp-css.js';
14
16
  export { generateThemeJson } from './generators/theme-json.js';
15
17
  export { generateIntegratePhp } from './generators/integrate-php.js';
@@ -28,6 +30,8 @@ export function generate(configPath, cwd) {
28
30
  };
29
31
  // Generate tokens.css for local dev (Storybook)
30
32
  write(join(config.srcDir, 'tokens.css'), generateTokensCss(config));
33
+ // Generate _tokens.scss so consumers can use tokens in @media queries and other compile-time contexts
34
+ write(join(config.srcDir, '_tokens.scss'), generateTokensScss(config));
31
35
  // Generate fonts.css if fontFace entries exist
32
36
  const fontsCss = generateFontsCss(config);
33
37
  if (fontsCss) {
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@troychaplin/component2block",
3
- "version": "0.2.7",
3
+ "version": "0.3.0",
4
4
  "description": "Generate WordPress theme.json and CSS token files from a single config for component libraries",
5
5
  "type": "module",
6
6
  "bin": {