emily-css 1.2.0 → 1.2.2

package/src/index.js

@@ -4,6 +4,7 @@
 const fs = require('fs');
 const path = require('path');
 const { generateManifest } = require('./manifest');
+const { generateIntellisense } = require('./intellisense');
 
 
 // ============================================================================
@@ -1507,6 +1508,32 @@ function getManifestOutputPath(config) {
     : path.join(process.cwd(), outputPath);
 }
 
+function getIntellisenseSettings(config) {
+  const intellisenseConfig = config.intellisense;
+
+  if (intellisenseConfig === true) {
+    return { enabled: true, output: 'dist/emily.intellisense.json' };
+  }
+
+  if (intellisenseConfig && typeof intellisenseConfig === 'object') {
+    return {
+      enabled: intellisenseConfig.enabled === true,
+      output: intellisenseConfig.output || 'dist/emily.intellisense.json',
+    };
+  }
+
+  return { enabled: false, output: 'dist/emily.intellisense.json' };
+}
+
+function getIntellisenseOutputPath(config) {
+  const intellisenseSettings = getIntellisenseSettings(config);
+  const outputPath = intellisenseSettings.output || 'dist/emily.intellisense.json';
+
+  return path.isAbsolute(outputPath)
+    ? outputPath
+    : path.join(process.cwd(), outputPath);
+}
+
 function ensureDirectoryForFile(filePath) {
   const dir = path.dirname(filePath);
 
@@ -1729,15 +1756,30 @@ ${bodyFont}`;
   fs.writeFileSync(fullCssPath, css);
 
   const manifestSettings = getManifestSettings(config);
+  const intellisenseSettings = getIntellisenseSettings(config);
+  const shouldGenerateManifestData =
+    manifestSettings.enabled || intellisenseSettings.enabled;
+  const manifestData = shouldGenerateManifestData
+    ? generateManifest(css, config)
+    : null;
+
   if (manifestSettings.enabled) {
     const manifestPath = getManifestOutputPath(config);
-    const manifest = generateManifest(css, config);
 
     ensureDirectoryForFile(manifestPath);
-    fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2));
+    fs.writeFileSync(manifestPath, JSON.stringify(manifestData, null, 2));
     console.log(`✓ Generated manifest: ${manifestPath}`);
   }
 
+  if (intellisenseSettings.enabled) {
+    const intellisensePath = getIntellisenseOutputPath(config);
+    const intellisense = generateIntellisense(manifestData);
+
+    ensureDirectoryForFile(intellisensePath);
+    fs.writeFileSync(intellisensePath, JSON.stringify(intellisense, null, 2));
+    console.log(`✓ Generated IntelliSense: ${intellisensePath}`);
+  }
+
   console.log(`✓ Generated CSS: ${fullCssPath}`);
   console.log(`✓ File size: ${(css.length / 1024).toFixed(2)} KB (unminified)`);
   console.log('Full framework build complete');
@@ -1753,11 +1795,16 @@ function minify(css) {
     .trim();
 }
 
-function buildProductionCss() {
+function buildProductionCss(options = {}) {
   const config = getConfig();
   const sourceDir = getSourceDir(config);
   const fullCssPath = getFullCssPath(config);
   const productionCssPath = getProductionCssPath(config);
+  const profile = {
+    purge: 0,
+    minify: 0,
+    write: 0,
+  };
 
   if (!fs.existsSync(fullCssPath)) {
     buildFullFramework();
@@ -1765,11 +1812,18 @@ function buildProductionCss() {
 
   const { purgeCSS } = require('./purge.js');
   const css = fs.readFileSync(fullCssPath, 'utf8');
+  const purgeStart = Date.now();
   const purged = purgeCSS(css, sourceDir, config);
+  profile.purge = Date.now() - purgeStart;
+
+  const minifyStart = Date.now();
   const minified = minify(purged);
+  profile.minify = Date.now() - minifyStart;
 
+  const writeStart = Date.now();
   ensureDirectoryForFile(productionCssPath);
   fs.writeFileSync(productionCssPath, minified);
+  profile.write = Date.now() - writeStart;
 
   return {
     css,
@@ -1779,6 +1833,7 @@ function buildProductionCss() {
     outputSize: Buffer.byteLength(minified, 'utf8'),
     outputPath: productionCssPath,
     fullCssPath,
+    profile: options.profile ? profile : undefined,
   };
 }
 
@@ -1800,11 +1855,14 @@ function ensureFullFramework() {
 }
 
 function build(options = {}) {
+  const totalStart = Date.now();
+  const frameworkStart = Date.now();
   ensureFullFramework();
+  const frameworkMs = Date.now() - frameworkStart;
 
   const config = getConfig();
   const fullCssPath = getFullCssPath(config);
-  const result = buildProductionCss();
+  const result = buildProductionCss({ profile: options.profile });
 
   console.log('\u2713 Generated production CSS: ' + path.relative(process.cwd(), result.outputPath));
   console.log('\u2713 File size: ' + (result.outputSize / 1024).toFixed(2) + ' KB');
@@ -1818,12 +1876,27 @@ function build(options = {}) {
     }
   }
 
+  if (options.profile) {
+    const timings = result.profile || { purge: 0, minify: 0, write: 0 };
+    const totalMs = Date.now() - totalStart;
+
+    console.log('\nEmilyCSS build profile\n');
+    console.log('Framework: ' + frameworkMs + 'ms');
+    console.log('Purge:     ' + timings.purge + 'ms');
+    console.log('Minify:    ' + timings.minify + 'ms');
+    console.log('Write:     ' + timings.write + 'ms');
+    console.log('Total:     ' + totalMs + 'ms');
+  }
+
   console.log('Build complete');
 }
 
 if (require.main === module) {
   const args = process.argv.slice(2);
-  build({ keepFull: args.includes('--keep-full') });
+  build({
+    keepFull: args.includes('--keep-full'),
+    profile: args.includes('--profile'),
+  });
 }
 
 module.exports = {

package/src/intellisense.js

@@ -0,0 +1,27 @@
+function toIntellisenseUtility(utility) {
+  return {
+    class: utility.class || null,
+    category: utility.category || null,
+    property: utility.property || null,
+    value: utility.value || null,
+    token: utility.token || null,
+    variants: Array.isArray(utility.variants) ? utility.variants : [],
+  };
+}
+
+function generateIntellisense(manifest) {
+  const utilities = Array.isArray(manifest && manifest.utilities)
+    ? manifest.utilities
+    : [];
+
+  return {
+    version: "1",
+    generatedAt:
+      (manifest && manifest.generatedAt) || new Date().toISOString(),
+    utilities: utilities.map(toIntellisenseUtility),
+  };
+}
+
+module.exports = {
+  generateIntellisense,
+};

package/src/manifest.js

@@ -1,4 +1,5 @@
 const MANIFEST_VERSION = '1.1.0';
+const packageJson = require('../package.json');
 const {
   DEFAULT_RESPONSIVE_VARIANTS,
   BASE_VARIANTS,
@@ -38,18 +39,76 @@ function getTokenFromDeclarations(declarations) {
   return null;
 }
 
-function isSimpleBaseClassSelector(selector) {
-  if (!selector || !selector.startsWith('.')) return false;
-  if (selector.includes(' ')) return false;
-  if (selector.includes(',')) return false;
-  if (selector.includes('[')) return false;
-  if (selector.includes(':')) return false;
-  if (selector.includes('::')) return false;
-  if (selector.includes('>')) return false;
-  if (selector.includes('+')) return false;
-  if (selector.includes('~')) return false;
-
-  return true;
+function readLeadingClassSelector(selector) {
+  if (!selector || !selector.startsWith('.')) return null;
+
+  let classSelector = '.';
+
+  for (let i = 1; i < selector.length; i++) {
+    const char = selector[i];
+
+    if (char === '\\' && i + 1 < selector.length) {
+      classSelector += selector[i] + selector[i + 1];
+      i++;
+      continue;
+    }
+
+    if (
+      char === ' ' ||
+      char === '\t' ||
+      char === '\n' ||
+      char === '\r' ||
+      char === ',' ||
+      char === '>' ||
+      char === '+' ||
+      char === '~' ||
+      char === ':' ||
+      char === '['
+    ) {
+      break;
+    }
+
+    classSelector += char;
+  }
+
+  return classSelector.length > 1 ? classSelector : null;
+}
+
+function extractManifestClassSelectors(selector) {
+  if (typeof selector !== 'string' || selector.trim().length === 0) {
+    return [];
+  }
+
+  const classSelectors = [];
+  const seen = new Set();
+  const selectorParts = selector
+    .split(',')
+    .map((part) => part.trim())
+    .filter(Boolean);
+
+  selectorParts.forEach((part) => {
+    const classSelector = readLeadingClassSelector(part);
+    if (!classSelector) return;
+    if (classSelector.includes('\\:')) return;
+
+    const remainder = part.slice(classSelector.length).trimStart();
+
+    // Expanded pseudo-state / pseudo-element and attribute selectors are not
+    // base utilities in the manifest (for example .hover\:x:hover, .x[...]).
+    if (
+      remainder.startsWith(':') ||
+      remainder.startsWith('::') ||
+      remainder.startsWith('[')
+    ) {
+      return;
+    }
+
+    if (seen.has(classSelector)) return;
+    seen.add(classSelector);
+    classSelectors.push(classSelector);
+  });
+
+  return classSelectors;
 }
 
 function inferCategory(className, property) {
@@ -249,7 +308,10 @@ function getVariants(config) {
 
 function generateManifest(css, config = {}) {
   const manifest = {
-    version: MANIFEST_VERSION,
+    schemaVersion: '1',
+    package: packageJson.name || 'emily-css',
+    version: packageJson.version || '0.0.0',
+    manifestVersion: MANIFEST_VERSION,
     generatedAt: new Date().toISOString(),
     utilities: [],
   };
@@ -266,21 +328,25 @@ function generateManifest(css, config = {}) {
   while ((ruleMatch = ruleRegex.exec(cleanedCss)) !== null) {
     const selector = ruleMatch[1].trim();
     const declarationBlock = ruleMatch[2].trim();
-
-    if (!isSimpleBaseClassSelector(selector)) continue;
+    const classSelectors = extractManifestClassSelectors(selector);
+    if (classSelectors.length === 0) continue;
 
     const { declarations, firstProperty, firstValue } = parseDeclarations(declarationBlock);
     if (!firstProperty) continue;
 
-    manifest.utilities.push({
-      class: normalizeClassName(selector),
-      category: inferCategory(normalizeClassName(selector), firstProperty),
-      property: firstProperty,
-      value: firstValue,
-      token: getTokenFromDeclarations(declarations),
-      declarations,
-      variants,
-      source: 'generated-css',
+    classSelectors.forEach((classSelector) => {
+      const className = normalizeClassName(classSelector);
+
+      manifest.utilities.push({
+        class: className,
+        category: inferCategory(className, firstProperty),
+        property: firstProperty,
+        value: firstValue,
+        token: getTokenFromDeclarations(declarations),
+        declarations,
+        variants,
+        source: 'generated-css',
+      });
     });
   }
 

package/src/purge.js

@@ -36,23 +36,48 @@ function getAllFiles(dir, extensions = DEFAULT_EXTENSIONS) {
 
 function extractClassNames(content) {
   const classNames = new Set();
-  const classRegex = /(?:class|className)\s*=\s*["']([^"']+)["']/g;
+
+  function isLikelyClassToken(token) {
+    if (!token || typeof token !== "string") return false;
+    if (token.length > 120) return false;
+    if (token.includes("://")) return false;
+    if (token.startsWith(".") || token.startsWith("#") || token.startsWith("@")) return false;
+    if (token.endsWith(":")) return false;
+    if (/[(){};,`$]/.test(token)) return false;
+    if (!/^[a-zA-Z0-9:#_./\-[\]]+$/.test(token)) return false;
+    if (!/[a-zA-Z]/.test(token)) return false;
+
+    return true;
+  }
+
+  function addClassToken(token) {
+    if (!token) return;
+
+    const cleaned = token.trim().replace(/^['"`]+|['"`]+$/g, "");
+    if (!cleaned) return;
+    if (!isLikelyClassToken(cleaned)) return;
+
+    classNames.add(cleaned);
+  }
+
+  const classRegex = /(?:class|className)\s*=\s*(["'])([\s\S]*?)\1/g;
   let match;
 
   while ((match = classRegex.exec(content)) !== null) {
-    const classes = match[1].split(/\s+/);
-    classes.forEach((cls) => {
-      if (cls.trim()) classNames.add(cls.trim());
-    });
+    const classes = match[2].split(/\s+/);
+    classes.forEach(addClassToken);
   }
 
-  const vueRegex = /(?::class|class\.|v-bind:class)\s*=\s*["'{]([^"'}]+)["'}]/g;
-  while ((match = vueRegex.exec(content)) !== null) {
-    const classes = match[1].split(/[\s,]+/);
-    classes.forEach((cls) => {
-      const cleaned = cls.replace(/['"`{}"]/g, "").trim();
-      if (cleaned) classNames.add(cleaned);
-    });
+  const vueBindingRegex = /(?:\:class|v-bind:class)\s*=\s*(["'])([\s\S]*?)\1/g;
+  const vueObjectKeyRegex = /['"`]([^'"`]+)['"`]\s*:/g;
+
+  while ((match = vueBindingRegex.exec(content)) !== null) {
+    const bindingContent = match[2];
+    let keyMatch;
+
+    while ((keyMatch = vueObjectKeyRegex.exec(bindingContent)) !== null) {
+      addClassToken(keyMatch[1]);
+    }
   }
 
   const templateStringRegex = /`([^`]+)`/g;
@@ -62,14 +87,9 @@ function extractClassNames(content) {
 
     possibleClasses.forEach((cls) => {
       const cleaned = cls.trim();
-
-      if (
-        cleaned &&
-        /^[a-zA-Z0-9:_./-]+$/.test(cleaned) &&
-        /[-:]/.test(cleaned)
-      ) {
-        classNames.add(cleaned);
-      }
+      if (!cleaned) return;
+      if (!/[-:]/.test(cleaned)) return;
+      addClassToken(cleaned);
     });
   }
 

package/templates/showcase.html

@@ -149,7 +149,7 @@
       </div>
     </section>
 
-    <section id="buttons" class="bg-white rounded-lg shadow-md border border-neutral-20 p-6 mb-6 background-neutral-100">
+    <section id="buttons" class="bg-white rounded-lg shadow-md border border-neutral-20 p-6 mb-6">
       <h2 class="text-2xl font-bold mb-4">Buttons</h2>
 
       <div class="flex flex-wrap gap-3">