kempo-css 2.2.0 → 2.2.1

package/bin/shake.js

@@ -11,16 +11,16 @@ const flagIndex = (flag) => {
 
 const htmlPath = flagIndex('--html') || args.find(a => !a.startsWith('--'));
 const themePath = flagIndex('--theme');
+const colorMode = flagIndex('--color-mode');
 
 if(!htmlPath){
-  console.error('Usage: kempo-css-shake --html <file.html> [--theme <theme.css>]');
+  console.error('Usage: kempo-css-shake --html <file.html> [--theme <theme.css>] [--color-mode light|dark]');
   process.exit(1);
 }
 
 const html = readFileSync(resolve(htmlPath), 'utf-8');
 const options = {};
-if(themePath){
-  options.theme = resolve(themePath);
-}
+if(themePath) options.theme = resolve(themePath);
+if(colorMode) options.colorMode = colorMode;
 
 process.stdout.write(shake(html, options));

package/dist/shake.js

@@ -0,0 +1 @@
+import{readFileSync as e}from"fs";import{resolve as t,dirname as r}from"path";import{fileURLToPath as o}from"url";import*as s from"css-tree";import{Parser as a}from"htmlparser2";const l=r(o(import.meta.url)),n=t(l,"kempo.css"),i=e=>{const t=new Map;return s.parse(e).children.forEach(e=>{if("Rule"!==e.type)return;":root"===s.generate(e.prelude)&&e.block.children.forEach(e=>{"Declaration"===e.type&&e.property.startsWith("--")&&t.set(e.property,s.generate(e.value))})}),t};export default(r,{theme:o,colorMode:l}={})=>{const c=e(n,"utf-8"),p=i(c);if(o){const r="string"==typeof o&&o.includes("{")?o:e(t(o),"utf-8");i(r).forEach((e,t)=>p.set(t,e))}const m=(e=>{const t=new Map(e);let r=!0,o=0;for(;r&&o<30;){r=!1,o++;for(const[e,o]of t){const s=o.replace(/var\(\s*(--[\w-]+)\s*(?:,\s*([^)]+))?\)/g,(o,s,a)=>{if(s===e)return o;const l=t.get(s);return void 0===l||l.includes(`var(${e})`)?void 0!==a?(r=!0,a.trim()):o:(r=!0,l)});s!==o&&t.set(e,s)}}return t})(p),d=(e=>{const t=new Set(["html","body"]),r=new Set,o=new Set,s=new Set,l=new a({onopentag(e,a){t.add(e.toLowerCase()),a.class&&a.class.split(/\s+/).forEach(e=>{e&&r.add(e)}),a.id&&o.add(a.id),Object.keys(a).forEach(e=>s.add(e.toLowerCase()))}});return l.write(e),l.end(),{tags:t,classes:r,ids:o,attrs:s}})(r),h=s.parse(c);s.walk(h,{visit:"Rule",enter(e,t,r){if(":root"===s.generate(e.prelude)){let o=!0;if(e.block.children.forEach(e=>{"Declaration"===e.type&&e.property.startsWith("--")||(o=!1)}),o)return void r.remove(t);const s=[];return e.block.children.forEach((e,t)=>{"Declaration"===e.type&&e.property.startsWith("--")&&s.push(t)}),void s.forEach(t=>e.block.children.remove(t))}}}),s.walk(h,{visit:"Rule",enter(e,t,r){const o=s.generate(e.prelude);/\[theme=/.test(o)&&r.remove(t)}}),s.walk(h,{visit:"Atrule",enter(e,t,r){if("media"!==e.name)return;s.generate(e.prelude).includes("prefers-color-scheme")&&r.remove(t)}}),s.walk(h,{visit:"Rule",enter(e,t,r){((e,t)=>e.split(",").some(e=>{const r=e.trim();return!!r&&(":root"===r||"*"===r||r.replace(/::[\w-]+/g,"").replace(/:[\w-]+(\([^)]*\))?/g,"").split(/[\s>+~]+/).filter(Boolean).every(e=>{const r=e.match(/^([a-zA-Z][\w-]*)/),o=[...e.matchAll(/\.([\w-]+)/g)].map(e=>e[1]),s=[...e.matchAll(/#([\w-]+)/g)].map(e=>e[1]),a=[...e.matchAll(/\[([\w-]+)/g)].map(e=>e[1].toLowerCase());return!(r&&!t.tags.has(r[1].toLowerCase())||o.length&&o.some(e=>!t.classes.has(e))||s.length&&s.some(e=>!t.ids.has(e))||a.length&&a.some(e=>!t.attrs.has(e)))}))}))(s.generate(e.prelude),d)||r.remove(t)}}),s.walk(h,{visit:"Atrule",enter(e,t,r){"media"===e.name&&e.block&&0===e.block.children.size&&r.remove(t)}});let u=((e,t)=>{let r,o=e;do{r=o,o=o.replace(/var\(\s*(--[\w-]+)\s*(?:,\s*([^)]+))?\)/g,(e,r,o)=>{const s=t.get(r);return void 0!==s?s:void 0!==o?o.trim():e})}while(o!==r);return o})(s.generate(h),m);return"light"!==l&&"dark"!==l||(u=((e,t)=>{let r=e,o=0;for(;;){const e=r.indexOf("light-dark(",o);if(-1===e)break;const s=e;let a=e+11,l=1,n=-1;for(;a<r.length&&l>0&&("("===r[a]?l++:")"===r[a]?l--:","===r[a]&&1===l&&-1===n&&(n=a),0!==l);)a++;if(-1===n||0!==l){o=e+1;continue}const i=r.slice(s+11,n).trim(),c=r.slice(n+1,a).trim(),p="dark"===t?c:i;r=r.slice(0,s)+p+r.slice(a+1),o=s}return r})(u,l)),u};

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "kempo-css",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "",
   "type": "module",
   "main": "scripts/build.js",
   "exports": {
     ".": "./scripts/build.js",
-    "./shake": "./src/shake.js"
+    "./shake": "./dist/shake.js"
   },
   "bin": {
     "kempo-css-shake": "bin/shake.js"

package/scripts/build.js

@@ -132,6 +132,23 @@ minifiedFiles.forEach(file => {
   console.log(`Copied ${srcPath} → ${destPath}`);
 });
 
+// Minify shake.js
+console.log('\nMinifying src/shake.js...');
+try{
+  const shakeCode = fs.readFileSync('src/shake.js', 'utf-8');
+  const shakeResult = await minify(shakeCode, { module: true });
+  fs.writeFileSync(path.join(outputDir, 'shake.js'), shakeResult.code);
+  const origSize = Buffer.byteLength(shakeCode, 'utf-8');
+  const minSize = Buffer.byteLength(shakeResult.code, 'utf-8');
+  const savings = ((origSize - minSize) / origSize * 100).toFixed(1);
+  console.log(`src/shake.js → dist/shake.js`);
+  console.log(`   Original: ${(origSize / 1024).toFixed(1)}KB`);
+  console.log(`   Minified: ${(minSize / 1024).toFixed(1)}KB`);
+  console.log(`   Savings: ${savings}%`);
+}catch(error){
+  console.error('Error minifying shake.js:', error.message);
+}
+
   console.log('\nBuild complete!');
   console.log(`Minified files are in the ${outputDir}/ directory`);
 

package/src/shake.js

@@ -133,10 +133,44 @@ const inlineVars = (css, vars) => {
   return result;
 };
 
+/*
+  Resolve light-dark(a, b) → a (light) or b (dark)
+  Handles nested parens inside arguments
+*/
+const resolveLightDark = (css, mode) => {
+  let result = css;
+  let searchFrom = 0;
+  while(true){
+    const idx = result.indexOf('light-dark(', searchFrom);
+    if(idx === -1) break;
+    const start = idx;
+    let i = idx + 'light-dark('.length;
+    let depth = 1;
+    let commaPos = -1;
+    while(i < result.length && depth > 0){
+      if(result[i] === '(') depth++;
+      else if(result[i] === ')') depth--;
+      else if(result[i] === ',' && depth === 1 && commaPos === -1) commaPos = i;
+      if(depth === 0) break;
+      i++;
+    }
+    if(commaPos === -1 || depth !== 0){
+      searchFrom = idx + 1;
+      continue;
+    }
+    const lightVal = result.slice(start + 'light-dark('.length, commaPos).trim();
+    const darkVal = result.slice(commaPos + 1, i).trim();
+    const replacement = mode === 'dark' ? darkVal : lightVal;
+    result = result.slice(0, start) + replacement + result.slice(i + 1);
+    searchFrom = start;
+  }
+  return result;
+};
+
 /*
   Main shake function
 */
-export default (html, { theme } = {}) => {
+export default (html, { theme, colorMode } = {}) => {
   const kempoCss = readFileSync(kempoPath, 'utf-8');
   const vars = extractRootVars(kempoCss);
   if(theme){
@@ -222,5 +256,9 @@ export default (html, { theme } = {}) => {
     }
   });
 
-  return inlineVars(csstree.generate(ast), resolved);
+  let output = inlineVars(csstree.generate(ast), resolved);
+  if(colorMode === 'light' || colorMode === 'dark'){
+    output = resolveLightDark(output, colorMode);
+  }
+  return output;
 };