@gravityforms/gulp-tasks/src/scripts/utils/tokens/cssselector.js

Configurable Gulp tasks for use in Gravity Forms projects.

const { Token } = require( './token' );

class cssSelector extends Token {
	typeText = 'cssselector';

	endCondition( text ) {
		if ( text.indexOf( 'cssselector' ) !== -1 ) {
			return false;
		}

		return true;
	}

	tokenCondition( text ) {
		if ( text.indexOf( 'cssselector' ) !== -1 ) {
			return true;
		}

		return false;
	}

	processSelector( selector ) {
		// This mimics JSDocs method name markup and styling, applying them to css selectors.
		let output = '';
		for ( let i = 0; i < selector.length; i++ ) {
			const currentChar = selector.charAt( i );
			if ( /[~@#$%^&*()+=,.[-\]{}\\|;:'"<>\?/]/g.test( currentChar ) ) {
				output += `<span class="type-signature">${ currentChar }</span>`;
			} else {
				output += currentChar;
			}
		}
		return output;
	}

	createLinkableHash( text ) {
		// This creates a readable anchor hash for a css selector by:
		// 1. Removing the first character from the selector if it is a special character
		// 2. Replacing all special characters in the selector with dashes
		return text.replace( /^[~@#$%^&()+=,.[-\]{}\\|;:'"<>\?/]/, '' ).replace( /[^\w-]/g, '-' ).toLowerCase();
	}

	getContent() {
		let content = this.lines.join( "\n" ).trim();
		content = content.replace( '@cssselector', '' ).trimStart();
		const hash = this.createLinkableHash( content );
		return `<h3 class="name has-anchor" id="~${ hash }">${ this.processSelector( content ) }</h3>`;
	}
}

module.exports = { cssSelector };