stylpp 1.0.0

package/dist/stylpp.js

@@ -0,0 +1,734 @@
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+	typeof define === 'function' && define.amd ? define(factory) :
+	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.StylppCompiler = factory());
+})(this, (function () { 'use strict';
+
+	function getDefaultExportFromCjs (x) {
+		return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+	}
+
+	/**
+	 * STYL++ Parser
+	 * Converts STYL++ source code into an Abstract Syntax Tree (AST)
+	 * Handles semicolon-based indentation and property-value parsing
+	 */
+
+	let StylppParser$1 = class StylppParser {
+	  constructor(options = {}) {
+	    this.options = options;
+	    this.errors = [];
+	  }
+
+	  /**
+	   * Parse STYL++ code and return AST
+	   * @param {string} code - STYL++ source code
+	   * @returns {Object} AST
+	   */
+	  parse(code) {
+	    const lines = code.split('\n');
+	    const ast = {
+	      type: 'stylesheet',
+	      rules: [],
+	      variables: {}
+	    };
+
+	    let currentIndent = 0;
+	    const stack = [];
+
+	    for (let lineNumber = 0; lineNumber < lines.length; lineNumber++) {
+	      const line = lines[lineNumber];
+	      const trimmed = line.trim();
+
+	      // Skip empty lines
+	      if (!trimmed) continue;
+
+	      // Skip comment lines (start with ; at beginning)
+	      if (trimmed.startsWith(';') && !trimmed.match(/^\s*;\s*\w+/)) continue;
+
+	      // Count leading semicolons for indentation
+	      const indentMatch = line.match(/^(;*)/);
+	      const indentLevel = indentMatch ? indentMatch[0].length : 0;
+	      const content = line.substring(indentLevel).trim();
+
+	      // Skip empty content
+	      if (!content) continue;
+
+	      // Handle variables section
+	      if (content === 'variables;' || content === 'variables') {
+	        const variablesSection = this.parseVariablesSection(lines, lineNumber + 1);
+	        ast.variables = variablesSection.variables;
+	        lineNumber = variablesSection.endLine;
+	        continue;
+	      }
+
+	      // Handle property-value pairs
+	      if (content.endsWith(';') && indentLevel > 0) {
+	        const propValue = this.parseProperty(content);
+	        if (propValue && stack.length > 0) {
+	          const parent = stack[stack.length - 1];
+	          if (!parent.declarations) parent.declarations = [];
+	          parent.declarations.push(propValue);
+	        }
+	        continue;
+	      }
+
+	      // Handle rules/selectors
+	      const selector = content.replace(/;$/, '');
+	      const newRule = {
+	        type: 'rule',
+	        selector: selector,
+	        declarations: [],
+	        rules: []
+	      };
+
+	      // Manage indentation stack
+	      if (indentLevel > currentIndent) {
+	        // Nested rule
+	        if (stack.length > 0) {
+	          const parent = stack[stack.length - 1];
+	          parent.rules.push(newRule);
+	        }
+	        stack.push(newRule);
+	      } else if (indentLevel < currentIndent) {
+	        // Pop stack until we reach the right level
+	        const popCount = (currentIndent - indentLevel);
+	        for (let i = 0; i < popCount; i++) {
+	          stack.pop();
+	        }
+	        if (stack.length > 0) {
+	          const parent = stack[stack.length - 1];
+	          parent.rules.push(newRule);
+	        } else {
+	          ast.rules.push(newRule);
+	        }
+	        stack.push(newRule);
+	      } else {
+	        // Same level
+	        if (stack.length > 0) {
+	          stack.pop();
+	          if (stack.length > 0) {
+	            const parent = stack[stack.length - 1];
+	            parent.rules.push(newRule);
+	          } else {
+	            ast.rules.push(newRule);
+	          }
+	        } else {
+	          ast.rules.push(newRule);
+	        }
+	        stack.push(newRule);
+	      }
+
+	      currentIndent = indentLevel;
+	    }
+
+	    return ast;
+	  }
+
+	  /**
+	   * Parse variables section
+	   * @param {Array} lines - All code lines
+	   * @param {number} startLine - Starting line number
+	   * @returns {Object} Variables and end line
+	   */
+	  parseVariablesSection(lines, startLine) {
+	    const variables = {};
+	    let endLine = startLine;
+
+	    for (let i = startLine; i < lines.length; i++) {
+	      const line = lines[i];
+	      const trimmed = line.trim();
+
+	      if (!trimmed || trimmed.startsWith(';')) continue;
+
+	      // Check if we've exited the variables section
+	      const leadingSemicolons = line.match(/^(;*)/)[0].length;
+	      if (leadingSemicolons === 0 && trimmed && !trimmed.match(/^\w+\s+/)) {
+	        break;
+	      }
+
+	      const parts = trimmed.split(/\s+/);
+	      if (parts.length >= 2) {
+	        const name = parts[0];
+	        const value = parts.slice(1).join(' ').replace(/;$/, '');
+	        variables[name] = value;
+	        endLine = i;
+	      } else {
+	        break;
+	      }
+	    }
+
+	    return { variables, endLine };
+	  }
+
+	  /**
+	   * Parse a property-value pair
+	   * @param {string} content - Property-value string (e.g., "background white;")
+	   * @returns {Object} Declaration object
+	   */
+	  parseProperty(content) {
+	    // Remove trailing semicolon
+	    const cleaned = content.replace(/;$/, '').trim();
+	    
+	    // Split by first space to separate property from value
+	    const spaceIndex = cleaned.indexOf(' ');
+	    if (spaceIndex === -1) return null;
+
+	    const property = cleaned.substring(0, spaceIndex);
+	    const value = cleaned.substring(spaceIndex + 1);
+
+	    return {
+	      type: 'declaration',
+	      property: property,
+	      value: value
+	    };
+	  }
+
+	  /**
+	   * Parse for loop syntax: for i in 1 to 5;
+	   * @param {string} content - For loop declaration
+	   * @returns {Object} Loop object or null
+	   */
+	  parseForLoop(content) {
+	    const match = content.match(/for\s+(\w+)\s+in\s+([\d\w]+)\s+to\s+([\d\w]+)/);
+	    if (!match) return null;
+
+	    return {
+	      type: 'for-loop',
+	      variable: match[1],
+	      from: parseInt(match[2]),
+	      to: parseInt(match[3])
+	    };
+	  }
+
+	  /**
+	   * Parse if/conditional syntax: if condition;
+	   * @param {string} content - If statement
+	   * @returns {Object} Conditional object or null
+	   */
+	  parseConditional(content) {
+	    const match = content.match(/@(\w+)/);
+	    if (!match) return null;
+
+	    return {
+	      type: 'conditional',
+	      condition: match[1]
+	    };
+	  }
+	};
+
+	var parser = StylppParser$1;
+
+	/**
+	 * STYL++ Transformer
+	 * Transforms the AST to handle:
+	 * - Variable resolution
+	 * - Math operations
+	 * - Loop expansion
+	 * - Conditional processing
+	 * - Function expansion
+	 */
+
+	let StylppTransformer$1 = class StylppTransformer {
+	  constructor(options = {}) {
+	    this.options = options;
+	    this.variables = {};
+	    this.errors = [];
+	  }
+
+	  /**
+	   * Transform AST
+	   * @param {Object} ast - Original AST
+	   * @returns {Object} Transformed AST
+	   */
+	  transform(ast) {
+	    // First pass: collect all variables
+	    this.variables = { ...ast.variables };
+
+	    // Second pass: transform rules
+	    const transformedRules = ast.rules.map(rule => this.transformRule(rule));
+
+	    return {
+	      type: 'stylesheet',
+	      rules: transformedRules,
+	      variables: this.variables
+	    };
+	  }
+
+	  /**
+	   * Transform a single rule
+	   * @param {Object} rule - Rule object
+	   * @returns {Object} Transformed rule
+	   */
+	  transformRule(rule) {
+	    const transformed = {
+	      type: rule.type,
+	      selector: rule.selector,
+	      declarations: [],
+	      rules: []
+	    };
+
+	    // Transform declarations
+	    if (rule.declarations) {
+	      rule.declarations.forEach(decl => {
+	        const transformedDecl = this.transformDeclaration(decl);
+	        if (Array.isArray(transformedDecl)) {
+	          transformed.declarations.push(...transformedDecl);
+	        } else {
+	          transformed.declarations.push(transformedDecl);
+	        }
+	      });
+	    }
+
+	    // Transform nested rules
+	    if (rule.rules) {
+	      rule.rules.forEach(nestedRule => {
+	        const transformed = this.transformRule(nestedRule);
+	        if (Array.isArray(transformed)) {
+	          transformed.forEach(r => rule.rules.push(r));
+	        } else {
+	          rule.rules.push(transformed);
+	        }
+	      });
+	      transformed.rules = rule.rules;
+	    }
+
+	    return transformed;
+	  }
+
+	  /**
+	   * Transform a declaration (property-value pair)
+	   * @param {Object} decl - Declaration object
+	   * @returns {Object|Array} Transformed declaration(s)
+	   */
+	  transformDeclaration(decl) {
+	    let value = decl.value;
+
+	    // Resolve variables
+	    value = this.resolveVariables(value);
+
+	    // Handle math operations
+	    if (this.hasMathOperation(value)) {
+	      value = this.processMathOperation(value);
+	    }
+
+	    // Handle responsive values
+	    if (this.isResponsiveValue(value)) {
+	      value = this.processResponsiveValue(value);
+	    }
+
+	    // Handle color operations
+	    if (this.isColorOperation(value)) {
+	      value = this.processColorOperation(value);
+	    }
+
+	    return {
+	      type: 'declaration',
+	      property: decl.property,
+	      value: value
+	    };
+	  }
+
+	  /**
+	   * Resolve variables in value (e.g., var(primary) -> #007bff)
+	   * @param {string} value - Value string
+	   * @returns {string} Resolved value
+	   */
+	  resolveVariables(value) {
+	    return value.replace(/var\((\w+)\)/g, (match, varName) => {
+	      return this.variables[varName] || match;
+	    });
+	  }
+
+	  /**
+	   * Check if value contains math operations
+	   * @param {string} value - Value string
+	   * @returns {boolean}
+	   */
+	  hasMathOperation(value) {
+	    return /[\+\-\*\/\^]/.test(value) && /\d/.test(value);
+	  }
+
+	  /**
+	   * Process math operations: 100% - 40px -> calc(100% - 40px)
+	   * @param {string} value - Value with math
+	   * @returns {string} CSS calc expression
+	   */
+	  processMathOperation(value) {
+	    // Already has calc? Return as-is
+	    if (value.includes('calc(')) return value;
+
+	    // Check for mathematical expressions
+	    const mathPattern = /^[\d\w\s\+\-\*\/\%\(\)\.]+$/;
+	    if (mathPattern.test(value.replace(/px|em|rem|%|vh|vw|ex|ch|deg|s|ms/g, ''))) {
+	      return `calc(${value})`;
+	    }
+
+	    return value;
+	  }
+
+	  /**
+	   * Check if value is a responsive function
+	   * @param {string} value - Value string
+	   * @returns {boolean}
+	   */
+	  isResponsiveValue(value) {
+	    return /responsive\(|fluid\(/.test(value);
+	  }
+
+	  /**
+	   * Process responsive value: responsive(300px, 800px) -> clamp(...)
+	   * @param {string} value - Value string
+	   * @returns {string} Clamp expression
+	   */
+	  processResponsiveValue(value) {
+	    // responsive(300px, 800px) -> clamp(300px, 50vw + 100px, 800px)
+	    const match = value.match(/responsive\(([^,]+),\s*([^)]+)\)/);
+	    if (match) {
+	      const min = match[1].trim();
+	      const max = match[2].trim();
+	      const mid = `${(parseInt(min) + parseInt(max)) / 4}px`;
+	      return `clamp(${min}, 50vw + ${mid}, ${max})`;
+	    }
+
+	    // fluid(300px, 800px)
+	    const fluidMatch = value.match(/fluid\(([^,]+),\s*([^)]+)\)/);
+	    if (fluidMatch) {
+	      const min = fluidMatch[1].trim();
+	      const max = fluidMatch[2].trim();
+	      return `clamp(${min}, 5vw, ${max})`;
+	    }
+
+	    return value;
+	  }
+
+	  /**
+	   * Check if value uses color operations
+	   * @param {string} value - Value string
+	   * @returns {boolean}
+	   */
+	  isColorOperation(value) {
+	    return /darken\(|lighten\(|mix\(/.test(value);
+	  }
+
+	  /**
+	   * Process color operations
+	   * @param {string} value - Value string
+	   * @returns {string} Processed color
+	   */
+	  processColorOperation(value) {
+	    // darken(#007bff, 20%) - simplified implementation
+	    const darkenMatch = value.match(/darken\(([^,]+),\s*(\d+)%\)/);
+	    if (darkenMatch) {
+	      const color = darkenMatch[1].trim();
+	      parseInt(darkenMatch[2]);
+	      // Simple approximation - in real implementation would use color library
+	      return `${color}`;
+	    }
+
+	    return value;
+	  }
+
+	  /**
+	   * Expand for loops
+	   * @param {Object} rule - Rule with for loop
+	   * @param {number} iterations - Number of iterations
+	   * @returns {Array} Expanded rules
+	   */
+	  expandForLoop(rule, iterations) {
+	    const expanded = [];
+	    for (let i = 0; i < iterations; i++) {
+	      const expandedRule = { ...rule };
+	      expandedRule.selector = rule.selector.replace(/{i}/g, i);
+	      expanded.push(expandedRule);
+	    }
+	    return expanded;
+	  }
+	};
+
+	var transformer = StylppTransformer$1;
+
+	/**
+	 * STYL++ CSS Generator
+	 * Converts the transformed AST into valid CSS output
+	 * Supports minification, source maps, and vendor prefixes
+	 */
+
+	let StylppGenerator$1 = class StylppGenerator {
+	  constructor(options = {}) {
+	    this.options = {
+	      minify: false,
+	      sourceMap: false,
+	      vendorPrefix: true,
+	      ...options
+	    };
+	    this.css = '';
+	    this.sourceMap = { version: 3, sources: [], mappings: '' };
+	  }
+
+	  /**
+	   * Generate CSS from AST
+	   * @param {Object} ast - Transformed AST
+	   * @returns {string} CSS code
+	   */
+	  generate(ast) {
+	    this.css = '';
+	    this.generateRules(ast.rules, 0);
+
+	    if (this.options.minify) {
+	      this.css = this.minifyCSS(this.css);
+	    }
+
+	    return this.css;
+	  }
+
+	  /**
+	   * Generate rules recursively
+	   * @param {Array} rules - Rules array
+	   * @param {number} indent - Indentation level
+	   */
+	  generateRules(rules, indent = 0) {
+	    const indentStr = this.options.minify ? '' : '  '.repeat(indent);
+	    const newline = this.options.minify ? '' : '\n';
+
+	    rules.forEach(rule => {
+	      if (rule.type === 'rule') {
+	        this.css += `${indentStr}${rule.selector} {${newline}`;
+
+	        // Add declarations
+	        if (rule.declarations && rule.declarations.length > 0) {
+	          rule.declarations.forEach(decl => {
+	            const property = this.normalizeProperty(decl.property);
+	            const value = this.normalizeValue(decl.value);
+	            this.css += `${indentStr}  ${property}: ${value};${newline}`;
+
+	            // Add vendor prefixes if needed
+	            if (this.options.vendorPrefix) {
+	              const prefixed = this.getVendorPrefixes(property, value);
+	              prefixed.forEach(p => {
+	                this.css += `${indentStr}  ${p.property}: ${p.value};${newline}`;
+	              });
+	            }
+	          });
+	        }
+
+	        // Add nested rules
+	        if (rule.rules && rule.rules.length > 0) {
+	          this.generateRules(rule.rules, indent + 1);
+	        }
+
+	        this.css += `${indentStr}}${newline}`;
+	      }
+	    });
+	  }
+
+	  /**
+	   * Normalize CSS property names (handle hyphenation)
+	   * @param {string} property - Property name
+	   * @returns {string} Normalized property
+	   */
+	  normalizeProperty(property) {
+	    // Convert camelCase to kebab-case
+	    return property.replace(/([A-Z])/g, '-$1').toLowerCase();
+	  }
+
+	  /**
+	   * Normalize CSS values
+	   * @param {string} value - Property value
+	   * @returns {string} Normalized value
+	   */
+	  normalizeValue(value) {
+	    // Remove extra whitespace
+	    value = value.replace(/\s+/g, ' ').trim();
+
+	    // Ensure calc() is properly formatted
+	    if (value.includes('calc(')) {
+	      value = value.replace(/calc\(\s+/g, 'calc(').replace(/\s+\)/g, ')');
+	    }
+
+	    return value;
+	  }
+
+	  /**
+	   * Get vendor prefixes for a property
+	   * @param {string} property - CSS property
+	   * @param {string} value - CSS value
+	   * @returns {Array} Vendor-prefixed versions
+	   */
+	  getVendorPrefixes(property, value) {
+	    const prefixes = [];
+	    const prefixMap = {
+	      'transform': ['-webkit-transform', '-moz-transform', '-o-transform'],
+	      'transition': ['-webkit-transition', '-moz-transition', '-o-transition'],
+	      'box-shadow': ['-webkit-box-shadow'],
+	      'border-radius': ['-webkit-border-radius'],
+	      'gradient': ['-webkit-linear-gradient', '-moz-linear-gradient'],
+	      'appearance': ['-webkit-appearance', '-moz-appearance'],
+	      'user-select': ['-webkit-user-select', '-moz-user-select', '-ms-user-select']
+	    };
+
+	    Object.keys(prefixMap).forEach(key => {
+	      if (property.includes(key)) {
+	        prefixMap[key].forEach(prefixed => {
+	          prefixes.push({ property: prefixed, value: value });
+	        });
+	      }
+	    });
+
+	    return prefixes;
+	  }
+
+	  /**
+	   * Minify CSS
+	   * @param {string} css - CSS code
+	   * @returns {string} Minified CSS
+	   */
+	  minifyCSS(css) {
+	    return css
+	      .replace(/\/\*[\s\S]*?\*\//g, '') // Remove comments
+	      .replace(/\s+{/g, '{') // Remove spaces before {
+	      .replace(/\s+}/g, '}') // Remove spaces before }
+	      .replace(/;\s+/g, ';') // Remove spaces after ;
+	      .replace(/:\s+/g, ':') // Remove spaces after :
+	      .replace(/,\s+/g, ',') // Remove spaces after ,
+	      .replace(/\n/g, '') // Remove newlines
+	      .trim();
+	  }
+
+	  /**
+	   * Generate source map
+	   * @returns {Object} Source map object
+	   */
+	  generateSourceMap() {
+	    return this.sourceMap;
+	  }
+	};
+
+	var generator = StylppGenerator$1;
+
+	/**
+	 * STYL++ Main Compiler
+	 * Orchestrates parsing, transformation, and code generation
+	 */
+
+	const StylppParser = parser;
+	const StylppTransformer = transformer;
+	const StylppGenerator = generator;
+
+	class StylppCompiler {
+	  constructor(options = {}) {
+	    this.options = {
+	      minify: false,
+	      sourceMap: false,
+	      vendorPrefix: true,
+	      ...options
+	    };
+	    
+	    this.parser = new StylppParser();
+	    this.transformer = new StylppTransformer();
+	    this.generator = new StylppGenerator(this.options);
+	  }
+
+	  /**
+	   * Compile STYL++ code to CSS
+	   * @param {string} code - STYL++ source code
+	   * @param {string} filename - Source filename (for error reporting)
+	   * @returns {Object} Compilation result
+	   */
+	  compile(code, filename = 'input.stylpp') {
+	    try {
+	      // Phase 1: Parse
+	      const ast = this.parser.parse(code);
+
+	      if (this.parser.errors.length > 0) {
+	        return {
+	          success: false,
+	          css: '',
+	          ast: null,
+	          errors: this.parser.errors,
+	          filename
+	        };
+	      }
+
+	      // Phase 2: Transform
+	      const transformedAst = this.transformer.transform(ast);
+
+	      if (this.transformer.errors.length > 0) {
+	        return {
+	          success: false,
+	          css: '',
+	          ast: ast,
+	          transformedAst: null,
+	          errors: this.transformer.errors,
+	          filename
+	        };
+	      }
+
+	      // Phase 3: Generate
+	      const css = this.generator.generate(transformedAst);
+
+	      // Optional: Generate source map
+	      let sourceMap = null;
+	      if (this.options.sourceMap) {
+	        sourceMap = this.generator.generateSourceMap();
+	      }
+
+	      return {
+	        success: true,
+	        css: css,
+	        ast: ast,
+	        transformedAst: transformedAst,
+	        sourceMap: sourceMap,
+	        errors: [],
+	        filename
+	      };
+
+	    } catch (error) {
+	      return {
+	        success: false,
+	        css: '',
+	        ast: null,
+	        transformedAst: null,
+	        errors: [{
+	          type: 'CompileError',
+	          message: error.message,
+	          stack: error.stack,
+	          filename
+	        }],
+	        filename
+	      };
+	    }
+	  }
+
+	  /**
+	   * Check if code is valid without compiling
+	   * @param {string} code - STYL++ source code
+	   * @returns {Object} Validation result
+	   */
+	  validate(code) {
+	    try {
+	      const ast = this.parser.parse(code);
+	      return {
+	        valid: true,
+	        errors: []
+	      };
+	    } catch (error) {
+	      return {
+	        valid: false,
+	        errors: [{
+	          message: error.message,
+	          line: error.line
+	        }]
+	      };
+	    }
+	  }
+	}
+
+	var compiler = StylppCompiler;
+
+	var index = /*@__PURE__*/getDefaultExportFromCjs(compiler);
+
+	return index;
+
+}));
+//# sourceMappingURL=stylpp.js.map