vite-plugin-capsize-radix 0.0.6 → 0.0.8

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 (6) hide show
  1. package/README.md +17 -5
  2. package/dist/index.d.mts +6 -3
  3. package/dist/index.d.ts +6 -3
  4. package/dist/index.js +29 -21
  5. package/dist/index.mjs +29 -21
  6. package/package.json +5 -5
package/README.md CHANGED
@@ -81,8 +81,20 @@ to be slightly smaller than on desktop. We do that by shifting the text a size s
81
81
 
82
82
  ## Parameters:
83
83
 
84
- * __outputPath (string): Required__: The file path where the generated CSS or design tokens should be saved.
85
- * __fontSizes (number[]): Optional__: An array of numerical font size values (presumably in pixels). Defaults to [9, 11, 12, 14, 18, 24, 36, 48, 64].
86
- * __lineHeights (number[]): Optional__: An array of numerical line height values. Defaults to [21, 24, 26, 27, 29, 36, 44, 52, 64].
87
- * __defaultFontStack (FontMetrics[])__: Optional. An array of `FontMetrics` objects. Defaults to a System Font stack.
88
- * __headingFontStack (FontMetrics[])__: Optional. An array of `FontMetrics` objects. Defaults to your `defaultFontStack`.
84
+ * __outputPath (string): Required__. The file path where the generated CSS or design tokens should be saved.
85
+ * __textStyles (TextStyle[]): Optional__. An array of objects, each representing a text style. Each object contains two properties: `fontSize` and `lineHeight`, which are numerical values, pixels for `fontSize` and pixels or relative value for `lineHeight`. Defaults to:
86
+ ```ts
87
+ [
88
+ { fontSize: 9, lineHeight: 21 },
89
+ { fontSize: 11, lineHeight: 24 },
90
+ { fontSize: 12, lineHeight: 26 },
91
+ { fontSize: 14, lineHeight: 27 },
92
+ { fontSize: 18, lineHeight: 29 },
93
+ { fontSize: 24, lineHeight: 36 },
94
+ { fontSize: 36, lineHeight: 44 },
95
+ { fontSize: 48, lineHeight: 52 },
96
+ { fontSize: 64, lineHeight: 64 }
97
+ ]
98
+ ```
99
+ * __defaultFontStack (FontMetrics[]): Optional__. An array of `FontMetrics` objects. Defaults to a System Font stack.
100
+ * __headingFontStack (FontMetrics[]): Optional__. An array of `FontMetrics` objects. Defaults to your `defaultFontStack`.
package/dist/index.d.mts CHANGED
@@ -1,13 +1,16 @@
1
1
  import { Plugin } from 'vite';
2
2
  import { FontMetrics } from '@capsizecss/core';
3
3
 
4
+ interface TextStyle {
5
+ fontSize: number;
6
+ lineHeight: number;
7
+ }
4
8
  interface Options {
5
9
  outputPath: string;
6
- fontSizes?: number[];
7
- lineHeights?: number[];
10
+ textStyles?: TextStyle[];
8
11
  defaultFontStack?: FontMetrics[];
9
12
  headingFontStack?: FontMetrics[];
10
13
  }
11
- declare function capsizeRadixPlugin({ outputPath, fontSizes, lineHeights, defaultFontStack, headingFontStack, }: Options): Plugin;
14
+ declare function capsizeRadixPlugin({ outputPath, textStyles, defaultFontStack, headingFontStack, }: Options): Plugin;
12
15
 
13
16
  export { capsizeRadixPlugin };
package/dist/index.d.ts CHANGED
@@ -1,13 +1,16 @@
1
1
  import { Plugin } from 'vite';
2
2
  import { FontMetrics } from '@capsizecss/core';
3
3
 
4
+ interface TextStyle {
5
+ fontSize: number;
6
+ lineHeight: number;
7
+ }
4
8
  interface Options {
5
9
  outputPath: string;
6
- fontSizes?: number[];
7
- lineHeights?: number[];
10
+ textStyles?: TextStyle[];
8
11
  defaultFontStack?: FontMetrics[];
9
12
  headingFontStack?: FontMetrics[];
10
13
  }
11
- declare function capsizeRadixPlugin({ outputPath, fontSizes, lineHeights, defaultFontStack, headingFontStack, }: Options): Plugin;
14
+ declare function capsizeRadixPlugin({ outputPath, textStyles, defaultFontStack, headingFontStack, }: Options): Plugin;
12
15
 
13
16
  export { capsizeRadixPlugin };
package/dist/index.js CHANGED
@@ -117,9 +117,9 @@ async function generate(options) {
117
117
  } else {
118
118
  headingFontStack = defaultFontStack;
119
119
  }
120
- const mobileFontData = [options.fontSizes[0], ...options.fontSizes].map(
121
- (fontSize, i) => {
122
- const lineGap = options.lineHeights[i - 1] - fontSize;
120
+ const mobileFontData = [options.textStyles[0], ...options.textStyles].map(
121
+ ({ fontSize, lineHeight }, i) => {
122
+ const lineGap = lineHeight - fontSize;
123
123
  const style = (0, import_core.createStyleString)(
124
124
  `rt-r-size-${i + 1}:not(.rt-DialogContent)`,
125
125
  {
@@ -139,8 +139,8 @@ async function generate(options) {
139
139
  };
140
140
  }
141
141
  );
142
- const fontData = options.fontSizes.map((fontSize, i) => {
143
- const lineGap = options.lineHeights[i] - fontSize;
142
+ const fontData = options.textStyles.map(({ fontSize, lineHeight }, i) => {
143
+ const lineGap = lineHeight - fontSize;
144
144
  const style = (0, import_core.createStyleString)(
145
145
  `rt-r-size-${i + 1}:not(.rt-DialogContent)`,
146
146
  {
@@ -160,33 +160,33 @@ async function generate(options) {
160
160
  };
161
161
  });
162
162
  const mobileTextStyles = (0, import_core.createStyleString)(`rt-Text`, {
163
- capHeight: options.fontSizes[1],
164
- lineGap: options.lineHeights[1] - options.fontSizes[1],
163
+ capHeight: options.textStyles[1].fontSize,
164
+ lineGap: options.textStyles[1].lineHeight - options.textStyles[1].fontSize,
165
165
  fontMetrics: options.defaultFontStack[0]
166
166
  });
167
167
  const mobileEmStyles = (0, import_core.createStyleString)(`rt-Em`, {
168
- capHeight: options.fontSizes[1],
169
- lineGap: options.lineHeights[1] - options.fontSizes[1],
168
+ capHeight: options.textStyles[1].fontSize,
169
+ lineGap: options.textStyles[1].lineHeight - options.textStyles[1].fontSize,
170
170
  fontMetrics: options.defaultFontStack[0]
171
171
  });
172
172
  const mobileQuoteStyles = (0, import_core.createStyleString)(`rt-Quote`, {
173
- capHeight: options.fontSizes[1],
174
- lineGap: options.lineHeights[1] - options.fontSizes[1],
173
+ capHeight: options.textStyles[1].fontSize,
174
+ lineGap: options.textStyles[1].lineHeight - options.textStyles[1].fontSize,
175
175
  fontMetrics: options.defaultFontStack[0]
176
176
  });
177
177
  const textStyles = (0, import_core.createStyleString)(`rt-Text`, {
178
- capHeight: options.fontSizes[2],
179
- lineGap: options.lineHeights[2] - options.fontSizes[2],
178
+ capHeight: options.textStyles[2].fontSize,
179
+ lineGap: options.textStyles[2].lineHeight - options.textStyles[2].fontSize,
180
180
  fontMetrics: options.defaultFontStack[0]
181
181
  });
182
182
  const emStyles = (0, import_core.createStyleString)(`rt-Em`, {
183
- capHeight: options.fontSizes[2],
184
- lineGap: options.lineHeights[2] - options.fontSizes[2],
183
+ capHeight: options.textStyles[2].fontSize,
184
+ lineGap: options.textStyles[2].lineHeight - options.textStyles[2].fontSize,
185
185
  fontMetrics: options.defaultFontStack[0]
186
186
  });
187
187
  const quoteStyles = (0, import_core.createStyleString)(`rt-Quote`, {
188
- capHeight: options.fontSizes[2],
189
- lineGap: options.lineHeights[2] - options.fontSizes[2],
188
+ capHeight: options.textStyles[2].fontSize,
189
+ lineGap: options.textStyles[2].lineHeight - options.textStyles[2].fontSize,
190
190
  fontMetrics: options.defaultFontStack[0]
191
191
  });
192
192
  import_fs.default.writeFileSync(
@@ -207,8 +207,17 @@ async function generate(options) {
207
207
  }
208
208
  function capsizeRadixPlugin({
209
209
  outputPath,
210
- fontSizes = [9, 11, 12, 14, 18, 24, 36, 48, 64],
211
- lineHeights = [21, 24, 26, 27, 29, 36, 44, 52, 64],
210
+ textStyles = [
211
+ { fontSize: 9, lineHeight: 19 },
212
+ { fontSize: 11, lineHeight: 24 },
213
+ { fontSize: 12, lineHeight: 26 },
214
+ { fontSize: 14, lineHeight: 28 },
215
+ { fontSize: 18, lineHeight: 30 },
216
+ { fontSize: 24, lineHeight: 36 },
217
+ { fontSize: 36, lineHeight: 44 },
218
+ { fontSize: 48, lineHeight: 52 },
219
+ { fontSize: 64, lineHeight: 64 }
220
+ ],
212
221
  defaultFontStack,
213
222
  headingFontStack
214
223
  }) {
@@ -217,8 +226,7 @@ function capsizeRadixPlugin({
217
226
  buildStart() {
218
227
  generate({
219
228
  outputPath,
220
- fontSizes,
221
- lineHeights,
229
+ textStyles,
222
230
  defaultFontStack,
223
231
  headingFontStack
224
232
  });
package/dist/index.mjs CHANGED
@@ -87,9 +87,9 @@ async function generate(options) {
87
87
  } else {
88
88
  headingFontStack = defaultFontStack;
89
89
  }
90
- const mobileFontData = [options.fontSizes[0], ...options.fontSizes].map(
91
- (fontSize, i) => {
92
- const lineGap = options.lineHeights[i - 1] - fontSize;
90
+ const mobileFontData = [options.textStyles[0], ...options.textStyles].map(
91
+ ({ fontSize, lineHeight }, i) => {
92
+ const lineGap = lineHeight - fontSize;
93
93
  const style = createStyleString(
94
94
  `rt-r-size-${i + 1}:not(.rt-DialogContent)`,
95
95
  {
@@ -109,8 +109,8 @@ async function generate(options) {
109
109
  };
110
110
  }
111
111
  );
112
- const fontData = options.fontSizes.map((fontSize, i) => {
113
- const lineGap = options.lineHeights[i] - fontSize;
112
+ const fontData = options.textStyles.map(({ fontSize, lineHeight }, i) => {
113
+ const lineGap = lineHeight - fontSize;
114
114
  const style = createStyleString(
115
115
  `rt-r-size-${i + 1}:not(.rt-DialogContent)`,
116
116
  {
@@ -130,33 +130,33 @@ async function generate(options) {
130
130
  };
131
131
  });
132
132
  const mobileTextStyles = createStyleString(`rt-Text`, {
133
- capHeight: options.fontSizes[1],
134
- lineGap: options.lineHeights[1] - options.fontSizes[1],
133
+ capHeight: options.textStyles[1].fontSize,
134
+ lineGap: options.textStyles[1].lineHeight - options.textStyles[1].fontSize,
135
135
  fontMetrics: options.defaultFontStack[0]
136
136
  });
137
137
  const mobileEmStyles = createStyleString(`rt-Em`, {
138
- capHeight: options.fontSizes[1],
139
- lineGap: options.lineHeights[1] - options.fontSizes[1],
138
+ capHeight: options.textStyles[1].fontSize,
139
+ lineGap: options.textStyles[1].lineHeight - options.textStyles[1].fontSize,
140
140
  fontMetrics: options.defaultFontStack[0]
141
141
  });
142
142
  const mobileQuoteStyles = createStyleString(`rt-Quote`, {
143
- capHeight: options.fontSizes[1],
144
- lineGap: options.lineHeights[1] - options.fontSizes[1],
143
+ capHeight: options.textStyles[1].fontSize,
144
+ lineGap: options.textStyles[1].lineHeight - options.textStyles[1].fontSize,
145
145
  fontMetrics: options.defaultFontStack[0]
146
146
  });
147
147
  const textStyles = createStyleString(`rt-Text`, {
148
- capHeight: options.fontSizes[2],
149
- lineGap: options.lineHeights[2] - options.fontSizes[2],
148
+ capHeight: options.textStyles[2].fontSize,
149
+ lineGap: options.textStyles[2].lineHeight - options.textStyles[2].fontSize,
150
150
  fontMetrics: options.defaultFontStack[0]
151
151
  });
152
152
  const emStyles = createStyleString(`rt-Em`, {
153
- capHeight: options.fontSizes[2],
154
- lineGap: options.lineHeights[2] - options.fontSizes[2],
153
+ capHeight: options.textStyles[2].fontSize,
154
+ lineGap: options.textStyles[2].lineHeight - options.textStyles[2].fontSize,
155
155
  fontMetrics: options.defaultFontStack[0]
156
156
  });
157
157
  const quoteStyles = createStyleString(`rt-Quote`, {
158
- capHeight: options.fontSizes[2],
159
- lineGap: options.lineHeights[2] - options.fontSizes[2],
158
+ capHeight: options.textStyles[2].fontSize,
159
+ lineGap: options.textStyles[2].lineHeight - options.textStyles[2].fontSize,
160
160
  fontMetrics: options.defaultFontStack[0]
161
161
  });
162
162
  fs.writeFileSync(
@@ -177,8 +177,17 @@ async function generate(options) {
177
177
  }
178
178
  function capsizeRadixPlugin({
179
179
  outputPath,
180
- fontSizes = [9, 11, 12, 14, 18, 24, 36, 48, 64],
181
- lineHeights = [21, 24, 26, 27, 29, 36, 44, 52, 64],
180
+ textStyles = [
181
+ { fontSize: 9, lineHeight: 19 },
182
+ { fontSize: 11, lineHeight: 24 },
183
+ { fontSize: 12, lineHeight: 26 },
184
+ { fontSize: 14, lineHeight: 28 },
185
+ { fontSize: 18, lineHeight: 30 },
186
+ { fontSize: 24, lineHeight: 36 },
187
+ { fontSize: 36, lineHeight: 44 },
188
+ { fontSize: 48, lineHeight: 52 },
189
+ { fontSize: 64, lineHeight: 64 }
190
+ ],
182
191
  defaultFontStack,
183
192
  headingFontStack
184
193
  }) {
@@ -187,8 +196,7 @@ function capsizeRadixPlugin({
187
196
  buildStart() {
188
197
  generate({
189
198
  outputPath,
190
- fontSizes,
191
- lineHeights,
199
+ textStyles,
192
200
  defaultFontStack,
193
201
  headingFontStack
194
202
  });
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "vite-plugin-capsize-radix",
3
3
  "description": "Great Typography with Radix & Capsize",
4
- "version": "0.0.6",
4
+ "version": "0.0.8",
5
5
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
6
6
  "dependencies": {
7
7
  "@capsizecss/core": "^4.1.0",
@@ -36,8 +36,8 @@
36
36
  "import": "./dist/index.d.mts",
37
37
  "require": "./dist/index.d.ts"
38
38
  },
39
- "import": "./dist/index.mjs",
40
- "require": "./dist/index.cjs"
39
+ "require": "./dist/index.js",
40
+ "import": "./dist/index.mjs"
41
41
  },
42
42
  "./package.json": "./package.json"
43
43
  },
@@ -51,8 +51,8 @@
51
51
  "vite-plugin"
52
52
  ],
53
53
  "license": "MIT",
54
- "main": "./dist/index.cjs",
55
- "module": "./dist/index.js",
54
+ "main": "./dist/index.js",
55
+ "module": "./dist/index.mjs",
56
56
  "scripts": {
57
57
  "build": "npm run clean && tsup --external @capsizecss/core --external mustache --external @capsizecss/metrics",
58
58
  "check": "tsc",