@kokimoki/kit 1.0.2 → 1.0.3
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/dist/index.js +18 -2
- package/dist/kokimoki-kit-plugin.js +16 -9
- package/dist/preprocess-style.js +33 -16
- package/package.json +1 -2
package/dist/index.js
CHANGED
@@ -1,2 +1,18 @@
|
|
1
|
-
|
2
|
-
|
1
|
+
"use strict";
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
3
|
+
if (k2 === undefined) k2 = k;
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
7
|
+
}
|
8
|
+
Object.defineProperty(o, k2, desc);
|
9
|
+
}) : (function(o, m, k, k2) {
|
10
|
+
if (k2 === undefined) k2 = k;
|
11
|
+
o[k2] = m[k];
|
12
|
+
}));
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
15
|
+
};
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
17
|
+
__exportStar(require("./kokimoki-kit-plugin"), exports);
|
18
|
+
__exportStar(require("./preprocess-style"), exports);
|
@@ -1,12 +1,18 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
1
|
+
"use strict";
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
4
|
+
};
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
6
|
+
exports.kokimokiKitPlugin = void 0;
|
7
|
+
const bson_objectid_1 = __importDefault(require("bson-objectid"));
|
8
|
+
const promises_1 = __importDefault(require("fs/promises"));
|
9
|
+
const preprocess_style_1 = require("./preprocess-style");
|
10
|
+
const kokimokiKitPlugin = () => {
|
5
11
|
return {
|
6
12
|
name: "kokimoki-kit",
|
7
13
|
async transform(code, id) {
|
8
14
|
if (id.endsWith("kokimoki.style.css")) {
|
9
|
-
return preprocessStyle(code);
|
15
|
+
return (0, preprocess_style_1.preprocessStyle)(code);
|
10
16
|
}
|
11
17
|
return code;
|
12
18
|
},
|
@@ -42,7 +48,7 @@ export const kokimokiKitPlugin = () => {
|
|
42
48
|
}
|
43
49
|
// Ensure .kokimoki directory exists
|
44
50
|
try {
|
45
|
-
await
|
51
|
+
await promises_1.default.mkdir(".kokimoki");
|
46
52
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
47
53
|
}
|
48
54
|
catch (e) {
|
@@ -53,7 +59,7 @@ export const kokimokiKitPlugin = () => {
|
|
53
59
|
// Try to read the app id from the .kokimoki/app-id file
|
54
60
|
let appId;
|
55
61
|
try {
|
56
|
-
appId = await
|
62
|
+
appId = await promises_1.default.readFile(".kokimoki/app-id", "utf8");
|
57
63
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
58
64
|
}
|
59
65
|
catch (e) {
|
@@ -63,8 +69,8 @@ export const kokimokiKitPlugin = () => {
|
|
63
69
|
}
|
64
70
|
// If the app id doesn't exist, generate a new one
|
65
71
|
if (!appId) {
|
66
|
-
appId = new
|
67
|
-
await
|
72
|
+
appId = new bson_objectid_1.default().toHexString();
|
73
|
+
await promises_1.default.writeFile(".kokimoki/app-id", appId);
|
68
74
|
}
|
69
75
|
// Inject the app id into the index.html
|
70
76
|
html = html.replace("<head>", `<head>
|
@@ -82,3 +88,4 @@ export const kokimokiKitPlugin = () => {
|
|
82
88
|
},
|
83
89
|
};
|
84
90
|
};
|
91
|
+
exports.kokimokiKitPlugin = kokimokiKitPlugin;
|
package/dist/preprocess-style.js
CHANGED
@@ -1,5 +1,11 @@
|
|
1
|
-
|
2
|
-
|
1
|
+
"use strict";
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
4
|
+
};
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
6
|
+
exports.preprocessStyle = exports.generatePalette = exports.generateA11yOnColor = exports.destringRgb = exports.handleStringColor = exports.calculateRatio = exports.getLuminance = exports.hexToTailwindRgbString = exports.revertReplaceForColorPickers = exports.rgbToHex = exports.hexToRgb = void 0;
|
7
|
+
const colornames_1 = __importDefault(require("colornames"));
|
8
|
+
const colorjs_io_1 = __importDefault(require("colorjs.io"));
|
3
9
|
// List of rgb tuple variable names (possibly temporary system to support color picker for these variables)
|
4
10
|
const rgbTupleVariableNames = [
|
5
11
|
"theme-font-color-base",
|
@@ -85,7 +91,7 @@ const rgbTupleVariableNames = [
|
|
85
91
|
"color-surface-800",
|
86
92
|
"color-surface-900",
|
87
93
|
];
|
88
|
-
|
94
|
+
function hexToRgb(hex) {
|
89
95
|
const sanitizedHex = hex.replace(/##/g, "#");
|
90
96
|
const colorParts = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(sanitizedHex);
|
91
97
|
if (!colorParts)
|
@@ -97,10 +103,12 @@ export function hexToRgb(hex) {
|
|
97
103
|
b: parseInt(b, 16),
|
98
104
|
};
|
99
105
|
}
|
100
|
-
|
106
|
+
exports.hexToRgb = hexToRgb;
|
107
|
+
function rgbToHex(r, g, b) {
|
101
108
|
const toHex = (c) => `0${c.toString(16)}`.slice(-2);
|
102
109
|
return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
|
103
110
|
}
|
111
|
+
exports.rgbToHex = rgbToHex;
|
104
112
|
// export function replaceForColorPickers(code: string) {
|
105
113
|
// return code.replace(
|
106
114
|
// /--([a-z0-9-]+):\s*(\d+)\s+(\d+)\s+(\d+);/gi,
|
@@ -110,7 +118,7 @@ export function rgbToHex(r, g, b) {
|
|
110
118
|
// }
|
111
119
|
// );
|
112
120
|
// }
|
113
|
-
|
121
|
+
function revertReplaceForColorPickers(code) {
|
114
122
|
return code.replace(/--([a-z0-9-]+):(.*?);/gi, (match, name, value) => {
|
115
123
|
if (!rgbTupleVariableNames.includes(name))
|
116
124
|
return match;
|
@@ -128,7 +136,7 @@ export function revertReplaceForColorPickers(code) {
|
|
128
136
|
.map((x) => x.trim());
|
129
137
|
return `--${name}: ${r} ${g} ${b};`;
|
130
138
|
}
|
131
|
-
const hex =
|
139
|
+
const hex = (0, colornames_1.default)(value);
|
132
140
|
if (hex) {
|
133
141
|
const rgb = hexToRgb(hex);
|
134
142
|
if (rgb)
|
@@ -137,6 +145,7 @@ export function revertReplaceForColorPickers(code) {
|
|
137
145
|
return match;
|
138
146
|
});
|
139
147
|
}
|
148
|
+
exports.revertReplaceForColorPickers = revertReplaceForColorPickers;
|
140
149
|
function lighten(hex, intensity) {
|
141
150
|
const color = hexToRgb(`#${hex}`);
|
142
151
|
if (!color)
|
@@ -155,7 +164,7 @@ function darken(hex, intensity) {
|
|
155
164
|
const b = Math.round(color.b * intensity);
|
156
165
|
return rgbToHex(r, g, b);
|
157
166
|
}
|
158
|
-
|
167
|
+
function hexToTailwindRgbString(hex) {
|
159
168
|
const sanitizedHex = hex.replace(/##/g, "#");
|
160
169
|
const colorParts = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(sanitizedHex);
|
161
170
|
if (!colorParts)
|
@@ -163,7 +172,8 @@ export function hexToTailwindRgbString(hex) {
|
|
163
172
|
const [, r, g, b] = colorParts;
|
164
173
|
return `${parseInt(r, 16)} ${parseInt(g, 16)} ${parseInt(b, 16)}`;
|
165
174
|
}
|
166
|
-
|
175
|
+
exports.hexToTailwindRgbString = hexToTailwindRgbString;
|
176
|
+
function getLuminance(r, g, b) {
|
167
177
|
const { _r, _g, _b } = typeof r === "object"
|
168
178
|
? { _r: r.r, _g: r.g, _b: r.b }
|
169
179
|
: { _r: r, _g: g, _b: b }; // I'm not really happy with this ternary, but it works
|
@@ -176,7 +186,8 @@ export function getLuminance(r, g, b) {
|
|
176
186
|
});
|
177
187
|
return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
|
178
188
|
}
|
179
|
-
|
189
|
+
exports.getLuminance = getLuminance;
|
190
|
+
function calculateRatio(luminance1, luminance2) {
|
180
191
|
const lum1 = typeof luminance1 === "string"
|
181
192
|
? getLuminance(handleStringColor(luminance1))
|
182
193
|
: luminance1;
|
@@ -189,7 +200,8 @@ export function calculateRatio(luminance1, luminance2) {
|
|
189
200
|
? (lum2 + 0.05) / (lum1 + 0.05)
|
190
201
|
: (lum1 + 0.05) / (lum2 + 0.05);
|
191
202
|
}
|
192
|
-
|
203
|
+
exports.calculateRatio = calculateRatio;
|
204
|
+
function handleStringColor(colorString, returnType = "rgb") {
|
193
205
|
// if it's a css variable
|
194
206
|
if (colorString.includes("--")) {
|
195
207
|
colorString = colorString.replace(/var\(|\)/g, ""); // grab just the variable name
|
@@ -212,6 +224,7 @@ export function handleStringColor(colorString, returnType = "rgb") {
|
|
212
224
|
}
|
213
225
|
return colorString;
|
214
226
|
}
|
227
|
+
exports.handleStringColor = handleStringColor;
|
215
228
|
function cssColorToHex(colorString) {
|
216
229
|
if (colorString.includes("#"))
|
217
230
|
return colorString;
|
@@ -223,12 +236,12 @@ function cssColorToHex(colorString) {
|
|
223
236
|
.map((x) => x.trim());
|
224
237
|
return rgbToHex(Number(r), Number(g), Number(b));
|
225
238
|
}
|
226
|
-
const hex =
|
239
|
+
const hex = (0, colornames_1.default)(colorString);
|
227
240
|
if (hex)
|
228
241
|
return hex;
|
229
242
|
return "#000000";
|
230
243
|
}
|
231
|
-
|
244
|
+
function destringRgb(rgbString) {
|
232
245
|
const rgb = rgbString.match(/(\d+),?\s*(\d+),?\s*(\d+)/); // matches "255, 255, 255" and "255 255 255"
|
233
246
|
if (!rgb)
|
234
247
|
throw new Error("Invalid RGB string!");
|
@@ -238,12 +251,14 @@ export function destringRgb(rgbString) {
|
|
238
251
|
b: parseInt(rgb[3], 10),
|
239
252
|
};
|
240
253
|
}
|
241
|
-
|
254
|
+
exports.destringRgb = destringRgb;
|
255
|
+
function generateA11yOnColor(hex) {
|
242
256
|
const black = calculateRatio(hex, "#000000");
|
243
257
|
const white = calculateRatio(hex, "#FFFFFF");
|
244
258
|
return black < white ? "0 0 0" : "255 255 255";
|
245
259
|
}
|
246
|
-
|
260
|
+
exports.generateA11yOnColor = generateA11yOnColor;
|
261
|
+
function generatePalette(baseColor) {
|
247
262
|
const hexValidation = new RegExp(/^#[0-9a-f]{6}$/i);
|
248
263
|
if (!hexValidation.test(baseColor))
|
249
264
|
baseColor = "#CCCCCC";
|
@@ -284,6 +299,7 @@ export function generatePalette(baseColor) {
|
|
284
299
|
});
|
285
300
|
return response;
|
286
301
|
}
|
302
|
+
exports.generatePalette = generatePalette;
|
287
303
|
function preprocessGfcThemeBlock(code) {
|
288
304
|
// Generate map of defined css variables
|
289
305
|
const cssVariableMap = {};
|
@@ -330,7 +346,7 @@ function preprocessDaisyThemeBlock(code) {
|
|
330
346
|
const variableRegex = /--(p|pc|b1|bc|b2|er|erc|su|suc|s|sc|a|ac):\s*(.*?);/gi;
|
331
347
|
return code.replace(variableRegex, (_, name, value) => {
|
332
348
|
try {
|
333
|
-
const oklch = new
|
349
|
+
const oklch = new colorjs_io_1.default(value).to("oklch");
|
334
350
|
const [l, c, h] = oklch.coords;
|
335
351
|
const lStr = (l * 100).toFixed(1);
|
336
352
|
const cStr = c.toFixed(3);
|
@@ -343,7 +359,7 @@ function preprocessDaisyThemeBlock(code) {
|
|
343
359
|
}
|
344
360
|
});
|
345
361
|
}
|
346
|
-
|
362
|
+
function preprocessStyle(code) {
|
347
363
|
// Find and replace [data-theme] block contents
|
348
364
|
const themeBlockRegex = /\[data-theme=(?:"|')?(gfc|gfc-theme|mac-theme|consensus-theme|daisy-light|daisy-dark)(?:"|')?\]\s*{([\s\S]*?)}/gi;
|
349
365
|
return code.replace(themeBlockRegex, (_, theme, block) => {
|
@@ -360,3 +376,4 @@ export function preprocessStyle(code) {
|
|
360
376
|
}
|
361
377
|
});
|
362
378
|
}
|
379
|
+
exports.preprocessStyle = preprocessStyle;
|