CSS STRUCTURE

by João Vitor Scheuermann

JavaScript

class CSS {
	constructor (config = {}) {
    this.rule = null
    this.name = ''
    this.properties = []
    Object.assign(this, config)
  }
  
  get string () {
  	let properties = this.properties.map(property => !property.hasOwnProperty('compute') || property.compute ? property.string : '')
    return `${this.rule}${this.name}{${properties.join(' ')}}`
  }
}

class Property {
	constructor (config = {}) {
  	this.name = ''
    this.values = []   
    this.defaults = []
  	Object.assign(this, config)
  }
  
  get string () {    
    let values = this.values.map(value => value instanceof Property ? value.prop : value.string)
  	return `${this.name}:${values.join(' ')};`
  }
  
  get prop () {  	
  	let values = this.values.map(value => value.string)
    return this.compute ? `${this.name}(${values.join(', ')})` : ``
  }
}

class Value {
	constructor (config = {}) {
  	this.value = null
    this.unit = ''
    this.default = 0
  	Object.assign(this, config)
  }
  
  get string () {
  	return `${this.value}${this.unit}`
  }
}

let css = new CSS({
  rule: '.',
  name: 'batata',
  properties: [
    new Property({compute: true, name: 'opacity', values: [ new Value({value: 1})]}),
    new Property({name: 'width', values: [ new Value({value: 10, unit: 'px'})]}),
    new Property({name: 'transform', values: [
      new Property({
      	compute: false,
        name: 'translateX',
        values: [ new Value({value: 10, unit: 'px'})]
      }),
      new Property({
        name: 'translateY',
        values: [ new Value({value: 10, unit: 'px'})]
      }),
      
    ]})
  ]
})

console.log(css.string)