kempo-css 1.3.13 → 2.0.0

package/scripts/build.js

@@ -1,174 +1,174 @@
-#!/usr/bin/env node
-
-import { execSync } from 'child_process';
-import fs from 'fs';
-import path from 'path';
-import { minify } from 'terser';
-
-// Check for watch flag
-const isWatchMode = process.argv.includes('--watch');
-
-if (isWatchMode) {
-  console.log('Watch mode enabled - monitoring CSS files for changes...\n');
-} else {
-  console.log('Building Kempo CSS...\n');
-}
-
-// Define input and output files
-const inputFiles = [
-  'src/kempo.css',
-  'src/kempo-hljs.css'
-];
-
-const outputDir = 'dist';
-const outputFiles = [
-  'kempo.min.css',
-  'kempo-hljs.min.css'
-];
-
-// Create dist directory if it doesn't exist
-if (!fs.existsSync(outputDir)) {
-  fs.mkdirSync(outputDir);
-  console.log(`Created ${outputDir}/ directory`);
-}
-
-// Minify each CSS file
-inputFiles.forEach((inputFile, index) => {
-  const outputFile = path.join(outputDir, outputFiles[index]);
-  
-  try {
-    // Check if input file exists
-    if (!fs.existsSync(inputFile)) {
-      console.log(`Skipping ${inputFile} (file not found)`);
-      return;
-    }
-
-    // Get file size before minification
-    const originalSize = fs.statSync(inputFile).size;
-
-    // Minify the CSS using clean-css-cli
-    console.log(`Minifying ${inputFile}...`);
-    execSync(`npx cleancss -o ${outputFile} ${inputFile}`, { stdio: 'inherit' });
-
-    // Get file size after minification
-    const minifiedSize = fs.statSync(outputFile).size;
-    const savings = ((originalSize - minifiedSize) / originalSize * 100).toFixed(1);
-
-    console.log(`${inputFile} → ${outputFile}`);
-    console.log(`   Original: ${(originalSize / 1024).toFixed(1)}KB`);
-    console.log(`   Minified: ${(minifiedSize / 1024).toFixed(1)}KB`);
-    console.log(`   Savings: ${savings}%\n`);
-  } catch (error) {
-    console.error(`Error minifying ${inputFile}:`, error.message);
-  }
-});
-
-// Process and minify components
-async function processComponents(){
-  const componentsDir = 'src/components';
-  const docsComponentsDir = 'docs/components';
-
-  if(!fs.existsSync(componentsDir)){
-    return;
-  }
-
-  if(!fs.existsSync(docsComponentsDir)){
-    fs.mkdirSync(docsComponentsDir, { recursive: true });
-    console.log(`Created ${docsComponentsDir}/ directory`);
-  }
-
-  const componentFiles = fs.readdirSync(componentsDir).filter(file => file.endsWith('.js'));
-  
-  console.log('\nProcessing JavaScript files...');
-  for(const file of componentFiles){
-    const srcPath = path.join(componentsDir, file);
-    const destPath = path.join(docsComponentsDir, file);
-    
-    try{
-      const code = fs.readFileSync(srcPath, 'utf-8');
-      
-      if(file.endsWith('.min.js')){
-        fs.writeFileSync(destPath, code);
-        console.log(`Copied ${srcPath} → ${destPath} (already minified)`);
-      }else{
-        console.log(`Minifying ${srcPath}...`);
-        const result = await minify(code);
-        fs.writeFileSync(destPath, result.code);
-        const originalSize = Buffer.byteLength(code, 'utf-8');
-        const minifiedSize = Buffer.byteLength(result.code, 'utf-8');
-        const savings = ((originalSize - minifiedSize) / originalSize * 100).toFixed(1);
-        console.log(`   Original: ${(originalSize / 1024).toFixed(1)}KB`);
-        console.log(`   Minified: ${(minifiedSize / 1024).toFixed(1)}KB`);
-        console.log(`   Savings: ${savings}%`);
-      }
-    }catch(error){
-      console.error(`Error processing ${srcPath}:`, error.message);
-    }
-  }
-}
-
-processComponents().then(() => {
-
-// Copy CSS to docs
-const cssFiles = ['src/kempo.css', 'src/kempo-hljs.css'];
-const docsDir = 'docs';
-
-cssFiles.forEach(file => {
-  if(fs.existsSync(file)){
-    const fileName = path.basename(file);
-    const destPath = path.join(docsDir, fileName);
-    fs.copyFileSync(file, destPath);
-    console.log(`Copied ${file} → ${destPath}`);
-  }
-});
-
-// Copy minified CSS to docs
-const minifiedFiles = fs.readdirSync(outputDir).filter(file => file.endsWith('.css'));
-minifiedFiles.forEach(file => {
-  const srcPath = path.join(outputDir, file);
-  const destPath = path.join(docsDir, file);
-  fs.copyFileSync(srcPath, destPath);
-  console.log(`Copied ${srcPath} → ${destPath}`);
-});
-
-  console.log('\nBuild complete!');
-  console.log(`Minified files are in the ${outputDir}/ directory`);
-}).catch(error => {
-  console.error('Build error:', error);
-  process.exit(1);
-});
-
-// Watch mode functionality
-if (isWatchMode) {
-  console.log('Watching for changes... (Press Ctrl+C to stop)\n');
-  
-  inputFiles.forEach(inputFile => {
-    if (fs.existsSync(inputFile)) {
-      fs.watchFile(inputFile, { interval: 1000 }, (curr, prev) => {
-        if (curr.mtime !== prev.mtime) {
-          console.log(`\n${inputFile} changed, rebuilding...`);
-          
-          // Find the corresponding output file
-          const index = inputFiles.indexOf(inputFile);
-          const outputFile = path.join(outputDir, outputFiles[index]);
-            try {
-            const originalSize = fs.statSync(inputFile).size;
-            console.log(`Minifying ${inputFile}...`);
-            execSync(`npx cleancss -o ${outputFile} ${inputFile}`, { stdio: 'inherit' });
-            
-            const minifiedSize = fs.statSync(outputFile).size;
-            const savings = ((originalSize - minifiedSize) / originalSize * 100).toFixed(1);
-            
-            console.log(`${inputFile} → ${outputFile}`);
-            console.log(`   Original: ${(originalSize / 1024).toFixed(1)}KB`);
-            console.log(`   Minified: ${(minifiedSize / 1024).toFixed(1)}KB`);
-            console.log(`   Savings: ${savings}%`);
-            console.log('\nWatching for changes...');
-          } catch (error) {
-            console.error(`Error minifying ${inputFile}:`, error.message);
-          }
-        }
-      });
-    }
-  });
+#!/usr/bin/env node
+
+import { execSync } from 'child_process';
+import fs from 'fs';
+import path from 'path';
+import { minify } from 'terser';
+
+// Check for watch flag
+const isWatchMode = process.argv.includes('--watch');
+
+if (isWatchMode) {
+  console.log('Watch mode enabled - monitoring CSS files for changes...\n');
+} else {
+  console.log('Building Kempo CSS...\n');
+}
+
+// Define input and output files
+const inputFiles = [
+  'src/kempo.css',
+  'src/kempo-hljs.css'
+];
+
+const outputDir = 'dist';
+const outputFiles = [
+  'kempo.min.css',
+  'kempo-hljs.min.css'
+];
+
+// Create dist directory if it doesn't exist
+if (!fs.existsSync(outputDir)) {
+  fs.mkdirSync(outputDir);
+  console.log(`Created ${outputDir}/ directory`);
+}
+
+// Minify each CSS file
+inputFiles.forEach((inputFile, index) => {
+  const outputFile = path.join(outputDir, outputFiles[index]);
+  
+  try {
+    // Check if input file exists
+    if (!fs.existsSync(inputFile)) {
+      console.log(`Skipping ${inputFile} (file not found)`);
+      return;
+    }
+
+    // Get file size before minification
+    const originalSize = fs.statSync(inputFile).size;
+
+    // Minify the CSS using clean-css-cli
+    console.log(`Minifying ${inputFile}...`);
+    execSync(`npx cleancss -o ${outputFile} ${inputFile}`, { stdio: 'inherit' });
+
+    // Get file size after minification
+    const minifiedSize = fs.statSync(outputFile).size;
+    const savings = ((originalSize - minifiedSize) / originalSize * 100).toFixed(1);
+
+    console.log(`${inputFile} → ${outputFile}`);
+    console.log(`   Original: ${(originalSize / 1024).toFixed(1)}KB`);
+    console.log(`   Minified: ${(minifiedSize / 1024).toFixed(1)}KB`);
+    console.log(`   Savings: ${savings}%\n`);
+  } catch (error) {
+    console.error(`Error minifying ${inputFile}:`, error.message);
+  }
+});
+
+// Process and minify components
+async function processComponents(){
+  const componentsDir = 'src/components';
+  const docsComponentsDir = 'docs/components';
+
+  if(!fs.existsSync(componentsDir)){
+    return;
+  }
+
+  if(!fs.existsSync(docsComponentsDir)){
+    fs.mkdirSync(docsComponentsDir, { recursive: true });
+    console.log(`Created ${docsComponentsDir}/ directory`);
+  }
+
+  const componentFiles = fs.readdirSync(componentsDir).filter(file => file.endsWith('.js'));
+  
+  console.log('\nProcessing JavaScript files...');
+  for(const file of componentFiles){
+    const srcPath = path.join(componentsDir, file);
+    const destPath = path.join(docsComponentsDir, file);
+    
+    try{
+      const code = fs.readFileSync(srcPath, 'utf-8');
+      
+      if(file.endsWith('.min.js')){
+        fs.writeFileSync(destPath, code);
+        console.log(`Copied ${srcPath} → ${destPath} (already minified)`);
+      }else{
+        console.log(`Minifying ${srcPath}...`);
+        const result = await minify(code);
+        fs.writeFileSync(destPath, result.code);
+        const originalSize = Buffer.byteLength(code, 'utf-8');
+        const minifiedSize = Buffer.byteLength(result.code, 'utf-8');
+        const savings = ((originalSize - minifiedSize) / originalSize * 100).toFixed(1);
+        console.log(`   Original: ${(originalSize / 1024).toFixed(1)}KB`);
+        console.log(`   Minified: ${(minifiedSize / 1024).toFixed(1)}KB`);
+        console.log(`   Savings: ${savings}%`);
+      }
+    }catch(error){
+      console.error(`Error processing ${srcPath}:`, error.message);
+    }
+  }
+}
+
+processComponents().then(() => {
+
+// Copy CSS to docs
+const cssFiles = ['src/kempo.css', 'src/kempo-hljs.css'];
+const docsDir = 'docs';
+
+cssFiles.forEach(file => {
+  if(fs.existsSync(file)){
+    const fileName = path.basename(file);
+    const destPath = path.join(docsDir, fileName);
+    fs.copyFileSync(file, destPath);
+    console.log(`Copied ${file} → ${destPath}`);
+  }
+});
+
+// Copy minified CSS to docs
+const minifiedFiles = fs.readdirSync(outputDir).filter(file => file.endsWith('.css'));
+minifiedFiles.forEach(file => {
+  const srcPath = path.join(outputDir, file);
+  const destPath = path.join(docsDir, file);
+  fs.copyFileSync(srcPath, destPath);
+  console.log(`Copied ${srcPath} → ${destPath}`);
+});
+
+  console.log('\nBuild complete!');
+  console.log(`Minified files are in the ${outputDir}/ directory`);
+}).catch(error => {
+  console.error('Build error:', error);
+  process.exit(1);
+});
+
+// Watch mode functionality
+if (isWatchMode) {
+  console.log('Watching for changes... (Press Ctrl+C to stop)\n');
+  
+  inputFiles.forEach(inputFile => {
+    if (fs.existsSync(inputFile)) {
+      fs.watchFile(inputFile, { interval: 1000 }, (curr, prev) => {
+        if (curr.mtime !== prev.mtime) {
+          console.log(`\n${inputFile} changed, rebuilding...`);
+          
+          // Find the corresponding output file
+          const index = inputFiles.indexOf(inputFile);
+          const outputFile = path.join(outputDir, outputFiles[index]);
+            try {
+            const originalSize = fs.statSync(inputFile).size;
+            console.log(`Minifying ${inputFile}...`);
+            execSync(`npx cleancss -o ${outputFile} ${inputFile}`, { stdio: 'inherit' });
+            
+            const minifiedSize = fs.statSync(outputFile).size;
+            const savings = ((originalSize - minifiedSize) / originalSize * 100).toFixed(1);
+            
+            console.log(`${inputFile} → ${outputFile}`);
+            console.log(`   Original: ${(originalSize / 1024).toFixed(1)}KB`);
+            console.log(`   Minified: ${(minifiedSize / 1024).toFixed(1)}KB`);
+            console.log(`   Savings: ${savings}%`);
+            console.log('\nWatching for changes...');
+          } catch (error) {
+            console.error(`Error minifying ${inputFile}:`, error.message);
+          }
+        }
+      });
+    }
+  });
 }

package/src/kempo-hljs.css

@@ -1,125 +1,125 @@
-:root {
-  --c_text: light-dark(#000000, #DCDCDC);
-  --c_keyword: light-dark(#0000ff, #569CD6);
-  --c_builtin: light-dark(#00b0e8, #4EC9B0);
-  --c_number: light-dark(#709756, #B8D7A3);
-  --c_string: light-dark(#a31515, #D69D85);
-  --c_regex: light-dark(#914525, #9A5334);
-  --c_function: inherit;
-  --c_comment: light-dark(#008000, #57A64A);
-  --c_doc: light-dark(#808080, #608B4E);
-  --c_tag: light-dark(#7d7d7d, #9B9B9B);
-  --c_var: light-dark(#b436bf, #BD63C5);
-  --c_attr: light-dark(#ff0000, #9CDCFE);
-  --c_section: light-dark(#a31515, #ffd700);
-  --c_selector: light-dark(#0000ff, #569CD6);
-  --c_addition: light-dark(#a31515, #144212);
-  --c_deletion: light-dark(#2b91af, #600);
-  --c_caret: light-dark(black, white);
-}
-
-.hljs {
-  display: block;
-  overflow-x: auto;
-  color: var(--c_text);
-}
-
-.hljs-keyword,
-.hljs-literal,
-.hljs-symbol,
-.hljs-name,
-.hljs-link {
-  color: var(--c_keyword);
-}
-
-.hljs-link {
-  text-decoration: underline;
-}
-
-.hljs-built_in,
-.hljs-type {
-  color: var(--c_builtin);
-}
-
-.hljs-number,
-.hljs-class {
-  color: var(--c_number);
-}
-
-.hljs-string,
-.hljs-meta-string {
-  color: var(--c_string);
-}
-
-.hljs-regexp,
-.hljs-template-tag {
-  color: var(--c_regex);
-}
-
-.hljs-subst,
-.hljs-function,
-.hljs-title,
-.hljs-params,
-.hljs-formula {
-  color: var(--c_function);
-}
-
-.hljs-comment,
-.hljs-quote {
-  color: var(--c_comment);
-  font-style: italic
-}
-
-.hljs-doctag {
-  color: var(--c_doc);
-}
-
-.hljs-meta,
-.hljs-meta-keyword,
-.hljs-tag {
-  color: var(--c_tag);
-}
-
-.hljs-variable,
-.hljs-template-variable {
-  color: var(--c_var);
-}
-
-.hljs-attr,
-.hljs-attribute,
-.hljs-builtin-name {
-  color: var(--c_attr);
-}
-
-.hljs-section {
-  color: var(--c_section);
-}
-
-.hljs-emphasis {
-  font-style: italic
-}
-
-.hljs-strong {
-  font-weight: bold
-}
-
-.hljs-bullet,
-.hljs-selector-tag,
-.hljs-selector-id,
-.hljs-selector-class,
-.hljs-selector-attr,
-.hljs-selector-pseudo {
-  color: var(--c_selector);
-}
-
-.hljs-addition {
-  background-color: var(--c_addition);
-  display: inline-block;
-  width: 100%
-}
-
-.hljs-deletion {
-  background-color: var(--c_deletion);
-  display: inline-block;
-  width: 100%
+:root {
+  --c_text: light-dark(#000000, #DCDCDC);
+  --c_keyword: light-dark(#0000ff, #569CD6);
+  --c_builtin: light-dark(#00b0e8, #4EC9B0);
+  --c_number: light-dark(#709756, #B8D7A3);
+  --c_string: light-dark(#a31515, #D69D85);
+  --c_regex: light-dark(#914525, #9A5334);
+  --c_function: inherit;
+  --c_comment: light-dark(#008000, #57A64A);
+  --c_doc: light-dark(#808080, #608B4E);
+  --c_tag: light-dark(#7d7d7d, #9B9B9B);
+  --c_var: light-dark(#b436bf, #BD63C5);
+  --c_attr: light-dark(#ff0000, #9CDCFE);
+  --c_section: light-dark(#a31515, #ffd700);
+  --c_selector: light-dark(#0000ff, #569CD6);
+  --c_addition: light-dark(#a31515, #144212);
+  --c_deletion: light-dark(#2b91af, #600);
+  --c_caret: light-dark(black, white);
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  color: var(--c_text);
+}
+
+.hljs-keyword,
+.hljs-literal,
+.hljs-symbol,
+.hljs-name,
+.hljs-link {
+  color: var(--c_keyword);
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+.hljs-built_in,
+.hljs-type {
+  color: var(--c_builtin);
+}
+
+.hljs-number,
+.hljs-class {
+  color: var(--c_number);
+}
+
+.hljs-string,
+.hljs-meta-string {
+  color: var(--c_string);
+}
+
+.hljs-regexp,
+.hljs-template-tag {
+  color: var(--c_regex);
+}
+
+.hljs-subst,
+.hljs-function,
+.hljs-title,
+.hljs-params,
+.hljs-formula {
+  color: var(--c_function);
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: var(--c_comment);
+  font-style: italic
+}
+
+.hljs-doctag {
+  color: var(--c_doc);
+}
+
+.hljs-meta,
+.hljs-meta-keyword,
+.hljs-tag {
+  color: var(--c_tag);
+}
+
+.hljs-variable,
+.hljs-template-variable {
+  color: var(--c_var);
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-builtin-name {
+  color: var(--c_attr);
+}
+
+.hljs-section {
+  color: var(--c_section);
+}
+
+.hljs-emphasis {
+  font-style: italic
+}
+
+.hljs-strong {
+  font-weight: bold
+}
+
+.hljs-bullet,
+.hljs-selector-tag,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: var(--c_selector);
+}
+
+.hljs-addition {
+  background-color: var(--c_addition);
+  display: inline-block;
+  width: 100%
+}
+
+.hljs-deletion {
+  background-color: var(--c_deletion);
+  display: inline-block;
+  width: 100%
 }