stylpp 1.0.0

package/dist/stylpp.esm.js

@@ -0,0 +1,726 @@
+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);
+
+export { index as default };
+//# sourceMappingURL=stylpp.esm.js.map