emily-css 1.0.8 → 1.0.14

package/src/index.js

@@ -142,8 +142,9 @@ function generateAllColours(colourConfig) {
 // ============================================================================
 
 function generateSpacing(baseUnit, scale) {
-  // scale is now a key-value object from config
-  // Just return it as-is since values are already defined (e.g., "1rem", "4px")
+  // Spacing values are defined explicitly in emily.config.json under spacing.scale.
+  // The baseUnit key in config is informational only — it documents the design intent
+  // (e.g. "this system is based on 8px") but does not drive generation.
   return scale;
 }
 
@@ -151,30 +152,40 @@ function generateSpacing(baseUnit, scale) {
 // FONT PRESETS
 // ============================================================================
 
+// Font presets define the CSS font-family stack only.
+// Loading the actual font files is the user's responsibility — link them in your HTML
+// or use @fontsource packages in your build. emily-css does not generate @import rules
+// for external CDNs so it stays self-contained and works offline.
+// See docs: https://emilyui.com/docs/getting-started
 const FONT_PRESETS = {
   'system': {
     stack: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-    googleFont: false,
   },
   'inter': {
     name: 'Inter',
     stack: '"Inter", system-ui, sans-serif',
-    googleFont: true,
-    importUrl: 'https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap',
   },
   'lexend': {
     name: 'Lexend',
     stack: '"Lexend", system-ui, sans-serif',
-    googleFont: true,
-    importUrl: 'https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap',
   },
   'georgia': {
     stack: 'Georgia, "Times New Roman", serif',
-    googleFont: false,
+  },
+  'dm-sans': {
+    name: 'DM Sans',
+    stack: '"DM Sans", system-ui, sans-serif',
+  },
+  'nunito': {
+    name: 'Nunito',
+    stack: '"Nunito", system-ui, sans-serif',
+  },
+  'atkinson': {
+    name: 'Atkinson Hyperlegible',
+    stack: '"Atkinson Hyperlegible", system-ui, sans-serif',
   },
   'mono': {
     stack: '"Menlo", "Monaco", "Courier New", monospace',
-    googleFont: false,
   },
 };
 
@@ -197,14 +208,6 @@ function generateFontCSS(config) {
   let fontFace = '';
   let bodyFont = '';
 
-  // Import Google Fonts — dedupe if heading and body use the same font
-  const imports = new Set();
-  if (headingPreset.googleFont) imports.add(headingPreset.importUrl);
-  if (bodyPreset.googleFont) imports.add(bodyPreset.importUrl);
-  imports.forEach(url => {
-    fontFace += `@import url("${url}");\n`;
-  });
-
   bodyFont += `  body {\n    font-family: ${bodyPreset.stack};\n    font-synthesis: style;\n  }\n`;
   bodyFont += `  h1, h2, h3, h4, h5, h6 {\n    font-family: ${headingPreset.stack};\n  }\n`;
 
@@ -284,7 +287,8 @@ const {
   blendUtilities,
   cursorUtilities,
   accessibilityUtilities,
-  containerUtilities
+  containerUtilities,
+  codeUtilities
 } = require('./generators');
 
 // ============================================================================
@@ -471,8 +475,7 @@ function generateTypographyUtilities(config) {
   css += `.text-right { text-align: right; }\n`;
   css += `.text-justify { text-align: justify; }\n`;
 
-  // Text wrapping
-  css += `.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n`;
+  // Text wrapping (.truncate lives in overflowUtilities in generators.js — not duplicated here)
   css += `.whitespace-nowrap { white-space: nowrap; }\n`;
   css += `.whitespace-normal { white-space: normal; }\n`;
   css += `.break-words { word-break: break-word; }\n`;
@@ -582,7 +585,7 @@ function generateBaseStyles(config) {
   // Build a lookup map from font size name → CSS variable
   const fontSizeMap = {};
   (config.typography?.fontSizes || []).forEach(({ name }) => {
-    fontSizeMap[name] = `var(--emily-text-${name})`;
+    fontSizeMap[name] = `var(--text-${name})`;
   });
 
   // Line height hints per size — keeps headings tighter than body text
@@ -779,7 +782,7 @@ function addStateVariants(css) {
 // BUILD FUNCTION
 // ============================================================================
 
-function build(options = {}) {
+function buildFullFramework() {
   const configPath = path.join(process.cwd(), 'emily.config.json');
   if (!fs.existsSync(configPath)) {
     console.error(`\n  emily-css: No config found.\n  Expected: ${configPath}\n  Run "emily-css init" to create one.\n`);
@@ -787,24 +790,7 @@ function build(options = {}) {
   }
   const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
 
-  if (options.purge) {
-    const { purgeCSS } = require('./purge.js');
-    const cssPath = path.join(process.cwd(), 'dist/emily.css');
-    if (!fs.existsSync(cssPath)) {
-      console.error('  emily-css: Run "emily-css build" first.');
-      process.exit(1);
-    }
-    console.log(`Purging unused utilities from ${options.purge}...`);
-    const css = fs.readFileSync(cssPath, 'utf8');
-    const purged = purgeCSS(css, options.purge);
-    const minified = purged.replace(/\/\*[\s\S]*?\*\//g, '').replace(/\s+/g, ' ').replace(/\s?\{/g, '{').replace(/\s?\}/g, '}').replace(/;\s/g, ';').trim();
-    fs.writeFileSync(path.join(process.cwd(), 'dist/emily.purged.css'), purged);
-    fs.writeFileSync(path.join(process.cwd(), 'dist/emily.purged.min.css'), minified);
-    console.log('✓ Purged CSS: dist/emily.purged.css');
-    return;
-  }
-
-  console.log('Building EmilyUI...');
+  console.log('Building EmilyCSS full framework...');
 
   // Generate colours
   const colours = generateAllColours(config.colours);
@@ -844,6 +830,7 @@ function build(options = {}) {
   utilityCss += cursorUtilities();
   utilityCss += accessibilityUtilities();
   utilityCss += containerUtilities();
+  utilityCss += codeUtilities();
 
   // Add state, dark mode, and responsive variants to utilities
   utilityCss = addStateVariants(utilityCss);
@@ -904,6 +891,38 @@ function build(options = {}) {
   p, h1, h2, h3, h4, h5, h6 {
     overflow-wrap: break-word;
   }
+
+  /* Code blocks — VSCode Dark+ style by default */
+  pre {
+    background-color: #1e1e1e;
+    color: #d4d4d4;
+    padding: 1.25rem;
+    border-radius: 0 0 6px;
+    overflow-x: auto;
+    font-family: "Menlo", "Monaco", "Courier New", monospace;
+    font-size: 0.875rem;
+    line-height: 1.7;
+    border: 1px solid #333;
+  }
+
+  pre code {
+    background: none;
+    padding: 0;
+    border-radius: 0;
+    color: inherit;
+    font-size: inherit;
+    font-family: inherit;
+  }
+
+  /* Inline code */
+  code {
+    font-family: "Menlo", "Monaco", "Courier New", monospace;
+    font-size: 0.875em;
+    background-color: #2d2d2d;
+    color: #d4d4d4;
+    padding: 0.125rem 0.375rem;
+    border-radius: 4px;
+  }
 ${bodyFont}`;
 
   // @font-face must sit outside @layer for broadest browser compatibility
@@ -926,26 +945,107 @@ ${bodyFont}`;
   fs.writeFileSync(outputPath, css);
   console.log(`✓ Generated CSS: ${outputPath}`);
   console.log(`✓ File size: ${(css.length / 1024).toFixed(2)} KB (unminified)`);
+  console.log('Full framework build complete');
+}
+
+function minify(css) {
+  return css
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+    .replace(/\s+/g, ' ')
+    .replace(/\s?\{/g, '{')
+    .replace(/\s?\}/g, '}')
+    .replace(/;\s/g, ';')
+    .trim();
+}
+
+function getConfig() {
+  const configPath = path.join(process.cwd(), 'emily.config.json');
+
+  if (!fs.existsSync(configPath)) {
+    console.error('\n  emily-css: No config found. Run "emily-css init" first.\n');
+    process.exit(1);
+  }
 
-  // Generate minified version
-  const minified = css.replace(/\/\*[\s\S]*?\*\//g, '').replace(/\s+/g, ' ').replace(/\s?\{/g, '{').replace(/\s?\}/g, '}').replace(/;\s/g, ';').trim();
+  return JSON.parse(fs.readFileSync(configPath, 'utf8'));
+}
+
+function getSourceDir(config) {
+  return config.purge && config.purge.sourceDir ? config.purge.sourceDir : '.';
+}
+
+function buildProductionCss() {
+  const config = getConfig();
+  const sourceDir = getSourceDir(config);
+  const cssPath = path.join(process.cwd(), 'dist/emily.css');
   const minPath = path.join(process.cwd(), 'dist/emily.min.css');
+
+  if (!fs.existsSync(cssPath)) {
+    buildFullFramework();
+  }
+
+  const { purgeCSS } = require('./purge.js');
+  const css = fs.readFileSync(cssPath, 'utf8');
+  const purged = purgeCSS(css, sourceDir, config);
+  const minified = minify(purged);
+
   fs.writeFileSync(minPath, minified);
-  console.log('  -> Minified: ' + minPath);
-  console.log('  -> File size: ' + (minified.length / 1024).toFixed(2) + ' KB (minified)');
+
+  return {
+    css,
+    purged,
+    minified,
+    originalSize: Buffer.byteLength(css, 'utf8'),
+    outputSize: Buffer.byteLength(minified, 'utf8')
+  };
+}
+
+function isFrameworkStale() {
+  const configPath = path.join(process.cwd(), 'emily.config.json');
+  const cssPath = path.join(process.cwd(), 'dist/emily.css');
+
+  if (!fs.existsSync(cssPath)) return true;
+  if (!fs.existsSync(configPath)) return true;
+
+  return fs.statSync(configPath).mtimeMs > fs.statSync(cssPath).mtimeMs;
+}
+
+function ensureFullFramework() {
+  if (isFrameworkStale()) {
+    buildFullFramework();
+  }
+}
+
+function build(options = {}) {
+  ensureFullFramework();
+
+  const result = buildProductionCss();
+  const cssPath = path.join(process.cwd(), 'dist/emily.css');
+
+  console.log('✓ Generated production CSS: dist/emily.min.css');
+  console.log('✓ File size: ' + (result.outputSize / 1024).toFixed(2) + ' KB');
+
+  if (!options.keepFull && fs.existsSync(cssPath)) {
+    try {
+      fs.unlinkSync(cssPath);
+      console.log('Removed dist/emily.css for production build.');
+    } catch (e) {
+      // Windows FUSE: can't delete, non-fatal
+    }
+  }
 
   console.log('Build complete');
 }
 
 if (require.main === module) {
   const args = process.argv.slice(2);
-  const purgeIndex = args.indexOf('--purge');
-  const purgeDir = purgeIndex !== -1 ? args[purgeIndex + 1] : null;
-  build(purgeDir ? { purge: purgeDir } : {});
+  build({ keepFull: args.includes('--keep-full') });
 }
 
 module.exports = {
   build,
+  buildFullFramework,
+  buildProductionCss,
+  ensureFullFramework,
   hexToOklch,
   oklchToHex,
   generateColourScale,
@@ -958,4 +1058,5 @@ module.exports = {
   addStateVariants,
   addResponsiveVariants,
   generateFontCSS,
+  codeUtilities,
 };