@riotjs/compiler - npm Package Compare versions

Comparing version 6.3.2 to 6.4.0

package.json

		{
		"name": "@riotjs/compiler",
		"version": "6.3.2",
		"version": "6.4.0",
		"description": "Compiler for riot .tag files",
		@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/generators/css/index.js

		@@ -7,2 +7,5 @@ import {builders, types} from '../../utils/build-types'

		const HOST = ':host'
		const DISABLED_SELECTORS = ['from', 'to']

		/**
		@@ -30,2 +33,40 @@ * Matches valid, multiline JavaScript comments in almost all its forms.
		/**
		* Matches the list of css selectors excluding the pseudo selectors
		* @const {RegExp}
		*/

		const CSS_SELECTOR_LIST = /([^,]+):\w+(?:[\s\|\S]*?\))?\|([^,]+)/g

		/**
		* Scope the css selectors prefixing them with the tag name
		* @param {string} tag - Tag name of the root element
		* @param {string} selectorList - list of selectors we need to scope
		* @returns {string} scoped selectors
		*/
		export function addScopeToSelectorList(tag, selectorList) {
		return selectorList.replace(CSS_SELECTOR_LIST, (match, selector) => {
		const trimmedMatch = match.trim()
		const trimmedSelector = selector ? selector.trim() : trimmedMatch

		// skip selectors already using the tag name
		if (trimmedSelector.indexOf(tag) === 0) {
		return match
		}

		// skips the keywords and percents of css animations
		if (!trimmedSelector \|\| DISABLED_SELECTORS.indexOf(trimmedSelector) > -1 \|\| trimmedSelector.slice(-1) === '%') {
		return match
		}

		// replace the `:host` pseudo-selector, where it is, with the root tag name;
		// if `:host` was not included, add the tag name as prefix, and mirror all `[is]`
		if (trimmedSelector.indexOf(HOST) < 0) {
		return `${tag} ${trimmedMatch},[is="${tag}"] ${trimmedMatch}`
		} else {
		return `${trimmedMatch.replace(HOST, tag)},${trimmedMatch.replace(HOST, `[is="${tag}"]`)}`
		}
		})
		}

		/**
		* Parses styles enclosed in a "scoped" tag
		@@ -38,37 +79,12 @@ * The "css" string is received without comments or surrounding spaces.
		*/
		function scopedCSS(tag, css) {
		const host = ':host'
		const selectorsBlacklist = ['from', 'to']

		return css.replace(CSS_SELECTOR, function(m, p1, p2) {
		export function generateScopedCss(tag, css) {
		return css.replace(CSS_SELECTOR, function(m, cssChunk, selectorList) {
		// skip quoted strings
		if (!p2) return m
		if (!selectorList) return m

		// we have a selector list, parse each individually
		p2 = p2.replace(/[^,]+/g, function(sel) {
		const s = sel.trim()
		const scopedSelectorList = addScopeToSelectorList(tag, selectorList)

		// skip selectors already using the tag name
		if (s.indexOf(tag) === 0) {
		return sel
		}

		// skips the keywords and percents of css animations
		if (!s \|\| selectorsBlacklist.indexOf(s) > -1 \|\| s.slice(-1) === '%') {
		return sel
		}

		// replace the `:host` pseudo-selector, where it is, with the root tag name;
		// if `:host` was not included, add the tag name as prefix, and mirror all
		// `[data-is]`
		if (s.indexOf(host) < 0) {
		return `${tag} ${s},[is="${tag}"] ${s}`
		} else {
		return `${s.replace(host, tag)},${
		s.replace(host, `[is="${tag}"]`)}`
		}
		})

		// add the danling bracket char and return the processed selector list
		return p1 ? `${p1} ${p2}` : p2
		return cssChunk ? `${cssChunk} ${scopedSelectorList}` : scopedSelectorList
		})
		@@ -107,3 +123,3 @@ }
		const cssCode = (options.scopedCss ?
		scopedCSS(escapedCssIdentifier, escapeBackslashes(normalizedCssCode)) :
		generateScopedCss(escapedCssIdentifier, escapeBackslashes(normalizedCssCode)) :
		escapeBackslashes(normalizedCssCode)
		@@ -110,0 +126,0 @@ ).trim()

dist/compiler.essential.esm.js