boxwood 0.60.2 → 0.61.0

package/src/linters/html/import.js

@@ -1,35 +0,0 @@
-const { duplicates } = require('pure-utilities/array')
-const { getAssetPaths, isImageNode } = require('../../utilities/node')
-const { isImportTag } = require('../../utilities/string')
-const { getComponentNames } = require('../../utilities/attributes')
-
-function verifyImports (imports, options) {
-  const warnings = []
-  const allNames = []
-  let allPaths = []
-  imports.forEach(node => {
-    if (isImportTag(node.tagName)) {
-      const names = getComponentNames(node.attributes)
-      names.forEach(name => {
-        if (allNames.includes(name)) {
-          warnings.push({ message: `Component name duplicate: ${name}`, type: 'COMPONENT_NAME_DUPLICATE' })
-        } else {
-          allNames.push(name)
-        }
-      })
-    }
-  })
-  imports.forEach(node => {
-    let assetPaths = getAssetPaths(node)
-    if (isImageNode(node, options)) {
-      assetPaths = assetPaths.filter(item => !assetPaths.includes(item))
-    }
-    allPaths = allPaths.concat(assetPaths)
-  })
-  duplicates(allPaths).forEach(duplicate => {
-    warnings.push({ message: `Component path duplicate: ${duplicate}`, type: 'COMPONENT_PATH_DUPLICATE' })
-  })
-  return warnings
-}
-
-module.exports = { verifyImports }

package/src/linters/html/index.js

@@ -1,19 +0,0 @@
-'use strict'
-
-const { parse } = require('../../utilities/html')
-const { verifyBrackets } = require('./bracket')
-const { verifyTags } = require('./tag')
-const { verifyComponents } = require('./component')
-const { verifyImports } = require('./import')
-
-function lint (source, imports = [], options = {}) {
-  const tree = parse(source)
-  return [
-    ...verifyBrackets(source),
-    ...verifyTags(tree),
-    ...verifyComponents(tree),
-    ...verifyImports(imports, options)
-  ]
-}
-
-module.exports = { lint }

package/src/linters/html/tag.js

@@ -1,36 +0,0 @@
-const walk = require('himalaya-walk')
-const { analyze } = require('./component')
-
-const ANCHOR_TAG = 'a'
-const IMAGE_TAG = 'img'
-
-function isExternalUrl (url) {
-  if (!url) { return false }
-  return url.startsWith('http://') || url.startsWith('https://')
-}
-
-function verifyTags (tree) {
-  const warnings = []
-  const { components } = analyze(tree)
-  walk(tree, node => {
-    if (node.tagName === ANCHOR_TAG && !components.includes(ANCHOR_TAG)) {
-      const href = node.attributes.find(attribute => attribute.key === 'href')
-      if (href && isExternalUrl(href.value)) {
-        const rel = node.attributes.find(attribute => attribute.key === 'rel')
-        if (!rel) {
-          warnings.push({ message: `${ANCHOR_TAG} tag with external href should have a rel attribute (e.g. rel="noopener")`, type: 'REL_ATTRIBUTE_MISSING' })
-        }
-      }
-    }
-
-    if (node.tagName === IMAGE_TAG && !components.includes(IMAGE_TAG)) {
-      const alt = node.attributes.find(attribute => attribute.key === 'alt' || attribute.key.startsWith('alt|'))
-      if (!alt) {
-        warnings.push({ message: `${IMAGE_TAG} tag should have an alt attribute`, type: 'ALT_ATTRIBUTE_MISSING' })
-      }
-    }
-  })
-  return warnings
-}
-
-module.exports = { verifyTags }

package/src/optimizers/html.js

@@ -1,15 +0,0 @@
-const { minify } = require('html-minifier')
-
-function optimize (html) {
-  return minify(html.trim(), {
-    collapseWhitespace: true,
-    conservativeCollapse: true,
-    removeComments: true,
-    sortAttributes: true,
-    sortClassName: true,
-    minifyCSS: true,
-    minifyJS: true
-  })
-}
-
-module.exports = { optimize }

package/src/plugins/BoxModelPlugin/index.js

@@ -1,109 +0,0 @@
-'use strict'
-
-const { isCurlyTag, getTagValue, isImportTag, isPartialTag } = require('../../utilities/string')
-const { findAttributeByKey, removeAttributeByKey } = require('../../utilities/attributes')
-const { isNumeric } = require('pure-conditions')
-const AbstractSyntaxTree = require('abstract-syntax-tree')
-const Plugin = require('../Plugin')
-const { hyphenate, capitalize } = require('pure-utilities/string')
-
-const ATTRIBUTES = ['padding', 'margin', 'border']
-const DIRECTIONS = ['top', 'right', 'bottom', 'left']
-const BOX_MODEL_ATTRIBUTES = Array.from(ATTRIBUTES)
-for (const attribute of ATTRIBUTES) {
-  for (const direction of DIRECTIONS) {
-    const boxModelAttribute = attribute.concat(capitalize(direction))
-    BOX_MODEL_ATTRIBUTES.push(boxModelAttribute, hyphenate(boxModelAttribute))
-  }
-}
-
-function convert (value) {
-  if (isCurlyTag(value)) {
-    value = value.replace(/\s+/g, '')
-    value = getTagValue(value)
-    const { expression } = new AbstractSyntaxTree(`(${value})`).body[0]
-    if (expression.type === 'ObjectExpression') {
-      return AbstractSyntaxTree.serialize(expression)
-    }
-    return expression.value
-  }
-  return value
-}
-
-function getStyles (attributeKey, key, value, variables = {}) {
-  if (value in variables) {
-    value = variables[value]
-  }
-  if (attributeKey === 'border') {
-    return `border: ${value};`
-  }
-  let styles = ''
-  if (typeof value === 'object') {
-    for (const property in value) {
-      if (variables[value[property]]) {
-        value[property] = variables[value[property]]
-      }
-      const suffix = getSuffix(value[property])
-      styles += `${key}-${property}: ${value[property]}${suffix} `
-    }
-    styles = styles.trim()
-  } else {
-    const suffix = getSuffix(value)
-    styles = `${hyphenate(key)}: ${value}${suffix}`
-  }
-  return styles
-}
-
-function getSuffix (value) {
-  return (isNumeric(value) && Number(value) !== 0) ? 'px;' : ';'
-}
-
-function appendStyles (attributes, value) {
-  const attribute = findAttributeByKey(attributes, 'style')
-  if (attribute) {
-    attribute.value += ` ${value}`
-  } else {
-    attributes.push({ key: 'style', value })
-  }
-}
-
-class BoxModelPlugin extends Plugin {
-  constructor (options = {}) {
-    super()
-    if (options.style) {
-      this.variables = options.style.variables
-    }
-  }
-
-  beforeprerun () {
-    this.components = []
-  }
-
-  prerun ({ tag, keys, fragment }) {
-    const variables = this.variables
-    function transform (key) {
-      const attribute = findAttributeByKey(fragment.attributes, key)
-      if (attribute) {
-        attribute.value = convert(attribute.value)
-        const inlineStyles = getStyles(key, attribute.key, attribute.value, variables)
-        appendStyles(fragment.attributes, inlineStyles)
-        removeAttributeByKey(fragment.attributes, key)
-      }
-    }
-    if (isImportTag(tag)) {
-      const name = keys[0]
-      this.components.push(name)
-    }
-    if (!this.components.includes(tag) && !isPartialTag(tag)) {
-      BOX_MODEL_ATTRIBUTES.forEach(transform)
-    }
-  }
-
-  afterprerun () {
-    this.components = []
-  }
-
-  run () {}
-}
-
-module.exports = BoxModelPlugin

package/src/plugins/CurlyStylesPlugin/index.js

@@ -1,39 +0,0 @@
-'use strict'
-
-const AbstractSyntaxTree = require('abstract-syntax-tree')
-const Plugin = require('../Plugin')
-const { isCurlyTag, getTagValue } = require('../../utilities/string')
-const { convertObjectToStyleString } = require('../../utilities/style')
-
-class CurlyStylesPlugin extends Plugin {
-  constructor () {
-    super()
-    this.scopes = []
-  }
-
-  prerun ({ keys, fragment, attrs }) {
-    function inline (name) {
-      if (keys.includes(name)) {
-        const attr = attrs.find(attr => attr.key === name)
-        if (isCurlyTag(attr.value)) {
-          try {
-            const expression = getTagValue(attr.value)
-            const tree = new AbstractSyntaxTree(`(${expression})`)
-            const object = AbstractSyntaxTree.serialize(tree.first('ObjectExpression'))
-            attr.key = 'style'
-            attr.value = convertObjectToStyleString(object)
-          } catch (exception) {
-            // TODO implement
-          }
-        } else {
-          attr.key = 'style'
-        }
-      }
-    }
-
-    inline('style')
-    inline('css')
-  }
-}
-
-module.exports = CurlyStylesPlugin

package/src/plugins/DataPlugin/index.js

@@ -1,53 +0,0 @@
-const Plugin = require('../Plugin')
-const { parseData, getDataFormat } = require('../../utilities/data')
-const { isPlainObject } = require('pure-conditions')
-const { optimizeNode } = require('../../utilities/optimize')
-const { createTranslationError } = require('../../utilities/errors')
-const CODE_TAGS = ['style', 'script']
-
-class DataPlugin extends Plugin {
-  beforeprerun () {
-    this.variables = []
-  }
-
-  prerun ({ tag, fragment, keys, errors, stack, pass }) {
-    if (pass !== 'renderer') return null
-    // TODO right data must be defined above usage
-    // consider changing interface of plugins
-    // to allow having 2 passes of walk instead of just one
-    // it could be declarative, e.g. new Plugin({ passes: 2 })
-    if (tag === 'data') {
-      if (keys.length > 0) {
-        const format = getDataFormat(keys)
-        const { content } = fragment.children[0]
-        const data = parseData(format, content)
-        if (isPlainObject(data)) {
-          for (const key in data) {
-            if (Object.prototype.hasOwnProperty.call(data, key)) {
-              const value = data[key]
-              this.variables.push({ key, value })
-            }
-          }
-        }
-      } else {
-        errors.push(createTranslationError('Data tag must specify a format (js, json or yaml).', stack))
-      }
-    }
-
-    if (CODE_TAGS.includes(tag)) {
-      fragment.children.forEach(node => {
-        node.skipDataOptimization = true
-      })
-    }
-
-    if (this.variables.length > 0 && !fragment.skipDataOptimization) {
-      optimizeNode(fragment, this.variables, [], true)
-    }
-  }
-
-  afterrun () {
-    this.variables = []
-  }
-}
-
-module.exports = DataPlugin

package/src/plugins/InlinePlugin/css.js

@@ -1,131 +0,0 @@
-const { parse, walk, generate } = require('css-tree')
-const { getExtension, getBase64Extension } = require('../../utilities/string')
-const { findAsset, isFileSupported } = require('../../utilities/files')
-
-function getBase64String (base64, path, options, isFont) {
-  const extension = getExtension(path)
-  const dataType = isFont ? 'data:application/font-' : 'data:image/'
-  return [
-    `${dataType}${getBase64Extension(extension)}`,
-    isFont && 'charset=utf-8',
-    `base64,${base64}`
-  ].filter(Boolean).join(';')
-}
-
-function convertElementValueToBase64 ({ element, value, assets, options, isFont }) {
-  if (!isFileSupported(value)) return
-  const asset = findAsset(value, assets, options)
-  if (!asset) return
-  element.value = getBase64String(asset.base64, asset.path, options, isFont)
-}
-
-function inlineUrls (tree, assets, options) {
-  walk(tree, node => {
-    if (node.type === 'Url') {
-      let { type, value } = node.value
-      value = value.replace(/'|"/g, '')
-      convertElementValueToBase64({ element: node.value, value, assets, options, isFont: type === 'Raw' })
-    }
-  })
-  return tree
-}
-
-function cutStyles (tree) {
-  const styles = []
-  walk(tree, {
-    visit: 'Rule',
-    enter: node => {
-      walk(node.prelude, leaf => {
-        if (leaf.type === 'TypeSelector' || leaf.type === 'ClassSelector') {
-          const { name } = leaf
-          const block = generate(node.block)
-          if (name && block) {
-            const declaration = block
-              .replace(/^{/, '')
-              .replace(/}$/, '')
-              .replace(/"/g, "'")
-            styles.push({ type: leaf.type, name: leaf.name, declaration })
-            node.used = true
-          }
-        }
-      })
-    }
-  })
-  walk(tree, {
-    enter: (node, item, list) => {
-      if (item && item.data && item.data.used) {
-        list.remove(item)
-      }
-    }
-  })
-  return { styles, tree }
-}
-
-function updateStyleAttribute (fragment, declaration) {
-  const styleAttribute = fragment.attributes.find(attribute => attribute.key === 'style')
-  if (styleAttribute) {
-    if (!styleAttribute.value.includes(declaration)) {
-      fragment.attributes = fragment.attributes.map(attribute => {
-        if (attribute.key === 'style') {
-          attribute.value += ';'.concat(declaration)
-        }
-        return attribute
-      })
-    }
-  } else {
-    fragment.attributes.push({ key: 'style', value: declaration })
-  }
-}
-
-function applyStylesInFragment (fragment, styles) {
-  styles.filter(({ type }) => type === 'TypeSelector').forEach(style => {
-    if (style.name === fragment.tagName) {
-      const { declaration } = style
-      updateStyleAttribute(fragment, declaration)
-    }
-  })
-
-  const classAttribute = fragment.attributes.find(attribute => attribute.key === 'class')
-  if (classAttribute) {
-    const localStyles = classAttribute.value.split(/\s/).filter(Boolean) || []
-    fragment.attributes = fragment.attributes
-      .map(attribute => {
-        if (attribute.key === 'class') {
-          styles.filter(({ type }) => type === 'ClassSelector').forEach(({ name }) => {
-            attribute.value = attribute.value.replace(name, '')
-            attribute.value = attribute.value.replace(/\s+/, '')
-            return attribute.value ? attribute : null
-          })
-        }
-        return attribute
-      })
-      .filter(attribute => attribute.value)
-    styles
-      .filter(({ name, type }) => type === 'ClassSelector' && localStyles.includes(name))
-      .forEach(({ declaration }) => {
-        updateStyleAttribute(fragment, declaration)
-      })
-  }
-}
-
-function prepareStyles (css, assets, options) {
-  let tree = parse(css)
-  tree = inlineUrls(tree, assets, options)
-  const result = cutStyles(tree)
-  return { styles: result.styles, output: generate(result.tree) }
-}
-
-function removeEmptyStyleTag (fragment) {
-  if (fragment.tagName === 'style' &&
-    fragment.attributes.find(({ key }) => key === 'inline') &&
-    fragment.children &&
-    fragment.children.length === 1 &&
-    fragment.children[0].content === ''
-  ) {
-    fragment.type = 'text'
-    fragment.content = ''
-    fragment.children = []
-  }
-}
-
-module.exports = { prepareStyles, applyStylesInFragment, removeEmptyStyleTag, convertElementValueToBase64 }

package/src/plugins/InlinePlugin/index.js

@@ -1,39 +0,0 @@
-'use strict'
-
-const Plugin = require('../Plugin')
-const { convertElementValueToBase64, prepareStyles, applyStylesInFragment, removeEmptyStyleTag } = require('./css')
-
-class InlinePlugin extends Plugin {
-  constructor () {
-    super()
-    this.styles = []
-  }
-
-  beforeprerun () {
-    this.styles = []
-  }
-
-  prerun ({ fragment, keys, assets, options }) {
-    if (fragment.tagName === 'style' && keys.includes('inline')) {
-      const child = fragment.children[0]
-      const { styles, output } = prepareStyles(child.content, assets, options)
-      styles.forEach(style => this.styles.push(style))
-      child.content = output
-    }
-  }
-
-  run ({ fragment, keys, assets, options }) {
-    if (fragment.tagName === 'font' && keys.includes('inline')) {
-      const attribute = fragment.attributes.find(attribute => attribute.key === 'from')
-      convertElementValueToBase64({ element: attribute, value: attribute.value, assets, options, isFont: true })
-    }
-    if (fragment.type === 'element' && fragment.tagName !== 'style' && this.styles.length) {
-      applyStylesInFragment(fragment, this.styles)
-    }
-    if (fragment.tagName === 'style') {
-      removeEmptyStyleTag(fragment)
-    }
-  }
-}
-
-module.exports = InlinePlugin

package/src/plugins/InternationalizationPlugin/index.js

@@ -1,111 +0,0 @@
-'use strict'
-
-const Plugin = require('../Plugin')
-const { findAsset } = require('../../utilities/files')
-const hash = require('string-hash')
-const { parseData, getDataFormat } = require('../../utilities/data')
-const { createTranslationError } = require('../../utilities/errors')
-
-function validateTranslations (value, translations, languages, errors, stack) {
-  if (value.includes('{') || value.includes('}')) return translations
-  if (!translations[value]) {
-    errors.push(createTranslationError(`There is no translation for the ${value} key`, stack))
-    return translations
-  }
-  languages.forEach((language, index) => {
-    if (!translations[value][index] && !translations[value][language]) errors.push(createTranslationError(`There is no translation for the ${value} key in ${language} language.`, stack))
-  })
-  return translations
-}
-
-function getExtension (path) {
-  const values = path.split('.')
-  return values[values.length - 1]
-}
-
-function isI18nTag (tag, keys) {
-  return (tag === 'script' && keys.includes('i18n')) || tag === 'i18n'
-}
-
-function isDataTag (tag) {
-  return tag === 'data'
-}
-
-function hasTranslateModifier (attribute) {
-  return attribute.key.endsWith('|translate')
-}
-
-function getTranslationKey (key) {
-  if (key.includes('|')) {
-    return `${key.split('|')[0]}`
-  }
-  return key
-}
-
-class InternationalizationPlugin extends Plugin {
-  constructor ({ translations, filters, errors }) {
-    super()
-    this.translations = translations
-    this.filters = filters
-    this.errors = errors
-  }
-
-  prerun ({ source, tag, attrs, keys, fragment, assets, stack, options }) {
-    const id = `__scope_${hash(source)}`
-    if (isI18nTag(tag, keys)) {
-      fragment.used = true
-      let leaf = fragment.children[0]
-      if (keys.includes('from')) {
-        const { value: path } = attrs.find(attr => attr.key === 'from')
-        const asset = findAsset(path, assets, options)
-        if (!asset) return
-        leaf = { content: asset.source }
-        leaf.used = true
-        keys.push(getExtension(path))
-      } else if (!leaf || !leaf.content || !leaf.content.trim()) {
-        return this.errors.push(createTranslationError('The translation script cannot be empty', stack))
-      }
-      leaf.used = true
-      const format = getDataFormat(keys)
-      const data = parseData(format, leaf.content)
-      for (const key in data) {
-        if (this.translations[key]) { return this.errors.push(createTranslationError('Translation already exists', stack)) }
-        this.translations[`${key}_${id}`] = data[key]
-      }
-    } else if (isDataTag(tag)) {
-      const format = getDataFormat(keys)
-      const leaf = fragment.children[0]
-      const data = parseData(format, leaf.content)
-      const { i18n } = data
-      for (const key in i18n) {
-        if (this.translations[key]) { return this.errors.push(createTranslationError('Translation already exists', stack)) }
-        this.translations[`${key}_${id}`] = i18n[key]
-      }
-    }
-    attrs.forEach(attr => {
-      if (hasTranslateModifier(attr)) {
-        attr.key = attr.key.substring(0, attr.key.indexOf('|translate'))
-        attr.value = `{"${attr.value}_${id}"|translate(language)}`
-      }
-    })
-  }
-
-  run ({ source, tag, attrs, options, stack, fragment }) {
-    const id = `__scope_${hash(source)}`
-    if (tag === 'translate' && !fragment.scopedTranslations) {
-      fragment.scopedTranslations = true
-      const { languages } = options
-      const attribute = attrs[0]
-      if (attribute) {
-        const { key } = attribute
-        this.filters.push('translate')
-        this.translations = validateTranslations(`${getTranslationKey(key)}_${id}`, this.translations, languages, this.errors, stack)
-        attribute.key = `${key}_${id}`
-      } else {
-        this.errors.push(createTranslationError('Translate tag must define a key', stack))
-      }
-    }
-  }
-}
-
-module.exports = InternationalizationPlugin

package/src/plugins/Plugin.js

@@ -1,22 +0,0 @@
-'use strict'
-
-class Plugin {
-  constructor () {
-    this.depth = 0
-  }
-
-  prerun (options) {}
-  run (options) {}
-  postrun (options) {}
-
-  beforeprerun (options) {}
-  afterprerun (options) {}
-
-  beforerun (options) {}
-  afterrun (options) {}
-
-  beforepostrun (options) {}
-  afterpostrun (options) {}
-}
-
-module.exports = Plugin

package/src/plugins/ScopedStylesPlugin/css.js

@@ -1,56 +0,0 @@
-'use strict'
-
-const { parse, walk, generate } = require('css-tree')
-const { hash } = require('../../utilities/string')
-const { normalizeNewline } = require('../../utilities/string')
-
-function addScopeToCssSelectors (input, scopes) {
-  const content = normalizeNewline(input).trim()
-  const id = hash(content)
-  const tree = parse(content)
-  const keyframes = {}
-  walk(tree, node => {
-    if (node.type === 'Atrule' && node.name === 'keyframes') {
-      const child = node.prelude.children.first()
-      const marker = `${child.name}-${id}`
-      keyframes[child.name] = marker
-      child.name = marker
-    }
-    if (node.type === 'SelectorList') {
-      node.children.forEach(child => {
-        if (child.type === 'Selector') {
-          let hasScope = false
-          child.children.forEach(leaf => {
-            if (leaf.type === 'ClassSelector' && !hasScope) {
-              scopes.push({ type: 'class', name: leaf.name, id })
-              hasScope = true
-            } else if (leaf.type === 'TypeSelector' && !hasScope) {
-              scopes.push({ type: 'tag', name: leaf.name, id })
-              hasScope = true
-            }
-          })
-          if (hasScope) {
-            const node = child.children.first()
-            if (node.type === 'TypeSelector') { child.children.shift() }
-            child.children.unshift({ type: 'ClassSelector', loc: null, name: id })
-            if (node.type === 'TypeSelector') { child.children.unshift(node) }
-          }
-        }
-      })
-    }
-  })
-  function isAnimationProperty (property) {
-    return property === 'animation' || property === 'animation-name'
-  }
-  walk(tree, node => {
-    if (node.type === 'Declaration' && isAnimationProperty(node.property)) {
-      const child = node.value.children.first()
-      if (keyframes[child.name]) {
-        child.name = keyframes[child.name]
-      }
-    }
-  })
-  return generate(tree)
-}
-
-module.exports = { addScopeToCssSelectors }