@caweb/cli 1.4.4 → 1.5.0

package/bin/css-audit/src/audits/alphas.js

@@ -1,70 +0,0 @@
-/**
- * External dependencies
- */
-const { parse } = require( 'postcss' );
-const { parse: parseValue } = require( 'postcss-values-parser' );
-
-/**
- * Internal dependencies
- */
-const getValuesCount = require( '../utils/get-values-count' );
-
-module.exports = function ( files = [] ) {
-	const alphas = [];
-	const colors = [];
-
-	files.forEach( ( { content, name } ) => {
-		const root = parse( content, { from: name } );
-		root.walkDecls( function ( { value } ) {
-			try {
-				const valueRoot = parseValue( value, {
-					ignoreUnknownWords: true,
-				} );
-
-				valueRoot.walkFuncs( ( node ) => {
-					if ( node.isColor && node.nodes.length ) {
-						const values = node.nodes
-							.filter( ( n ) => 'numeric' === n.type )
-							.map( ( n ) => Number( n.value ) );
-						if ( values.length === 4 ) {
-							alphas.push( values[ 3 ] );
-							colors.push( node.toString() );
-						}
-					}
-				} );
-			} catch ( error ) {}
-		} );
-	} );
-
-	const uniqAlphas = [ ...new Set( alphas ) ];
-	const alphasByCount = getValuesCount( alphas );
-	const uniqColors = [ ...new Set( colors ) ];
-
-	return {
-		audit: 'alphas',
-		name: 'Opacities',
-		template: 'alpha',
-		results: [
-			{
-				id: 'unique',
-				label: 'Number of unique alphas',
-				value: uniqAlphas.length,
-			},
-			{
-				id: 'unique-colors',
-				label: 'Number of colors with opacity',
-				value: uniqColors.length,
-			},
-			{
-				id: 'all-alphas',
-				label: 'List of all alphas',
-				value: alphasByCount,
-			},
-			{
-				id: 'all-colors',
-				label: 'List of all colors with opacity',
-				value: uniqColors.sort(),
-			},
-		],
-	};
-};

package/bin/css-audit/src/audits/colors.js

@@ -1,83 +0,0 @@
-/**
- * External dependencies
- */
-const { parse } = require( 'postcss' );
-const { parse: parseValue } = require( 'postcss-values-parser' );
-const tinycolor2 = require( 'tinycolor2' );
-
-/**
- * Internal dependencies
- */
-const getValuesCount = require( '../utils/get-values-count' );
-
-module.exports = function ( files = [] ) {
-	const colors = [];
-
-	files.forEach( ( { content, name } ) => {
-		const root = parse( content, { from: name } );
-		root.walkDecls( function ( { value } ) {
-			try {
-				const valueRoot = parseValue( value, {
-					ignoreUnknownWords: true,
-				} );
-
-				valueRoot.walkWords( ( node ) => {
-					if ( node.isColor ) {
-						colors.push( node.value );
-					}
-				} );
-
-				valueRoot.walkFuncs( ( node ) => {
-					if ( node.isColor ) {
-						colors.push( node.toString() );
-					}
-				} );
-			} catch ( error ) {}
-		} );
-	} );
-
-	const uniqColors = [ ...new Set( colors ) ];
-	const colorsByCount = getValuesCount( colors );
-
-	const uniqOpaqueColors = [
-		...new Set(
-			uniqColors.map( ( colorStr ) => {
-				const color = tinycolor2( colorStr );
-				return color.toHexString();
-			} )
-		),
-	];
-
-	return {
-		audit: 'colors',
-		name: 'Colors',
-		template: 'colors',
-		results: [
-			{
-				id: 'unique',
-				label: 'Number of unique colors',
-				value: uniqColors.length,
-			},
-			{
-				id: 'unique-opaque',
-				label: 'Number of unique colors (ignoring opacity)',
-				value: uniqOpaqueColors.length,
-			},
-			{
-				id: 'all-colors',
-				label: 'List of all colors',
-				value: uniqColors,
-			},
-			{
-				id: 'top-10-colors',
-				label: 'Top 10 most-used colors',
-				value: colorsByCount.slice( 0, 10 ),
-			},
-			{
-				id: 'bottom-10-colors',
-				label: 'Top 10 least-used colors',
-				value: colorsByCount.slice( -10 ).reverse(),
-			},
-		],
-	};
-};

package/bin/css-audit/src/audits/display-none.js

@@ -1,39 +0,0 @@
-/**
- * External dependencies
- */
-const { parse } = require( 'postcss' );
-
-module.exports = function ( files = [] ) {
-	const instances = [];
-
-	files.forEach( ( { name, content } ) => {
-		const root = parse( content, { from: name } );
-		root.walkDecls( function ( { parent, prop, value } ) {
-			if ( 'display' === prop ) {
-				if ( 'none' === value ) {
-					instances.push( {
-						file: name,
-						selector: parent.selector,
-					} );
-				}
-			}
-		} );
-	} );
-
-	return {
-		audit: 'display-none',
-		name: 'Display: None',
-		results: [
-			{
-				id: 'count',
-				label: 'Number of times `display: none` is used',
-				value: instances.length,
-			},
-			{
-				id: 'instances',
-				label: 'Places where `display: none` is used',
-				value: instances,
-			},
-		],
-	};
-};

package/bin/css-audit/src/audits/important.js

@@ -1,60 +0,0 @@
-/**
- * External dependencies
- */
-const { parse } = require( 'postcss' );
-
-/**
- * Internal dependencies
- */
-const getValuesCount = require( '../utils/get-values-count' );
-
-module.exports = function ( files = [] ) {
-	let count = 0;
-	const properties = [];
-	const fileInstances = [];
-
-	files.forEach( ( { name, content } ) => {
-		let fileCount = 0;
-		const root = parse( content, { from: name } );
-		root.walkDecls( function ( { important, prop } ) {
-			if ( important ) {
-				count++;
-				fileCount++;
-				properties.push( prop );
-			}
-		} );
-		fileInstances.push( {
-			name,
-			count: fileCount,
-			// Get a ratio of !important per line.
-			perLine: fileCount / content.split( '\n' ).length,
-		} );
-	} );
-
-	const propertiesByCount = getValuesCount( properties );
-	const instancesPerFile = fileInstances
-		.filter( ( row ) => row.count > 0 )
-		.sort( ( a, b ) => b.count - a.count );
-
-	return {
-		audit: 'important',
-		name: 'Important Overrides',
-		results: [
-			{
-				id: 'count',
-				label: 'Number of times `!important` is used',
-				value: count,
-			},
-			{
-				id: 'count-per-file',
-				label: 'Number of times `!important` is used per file',
-				value: instancesPerFile,
-			},
-			{
-				id: 'top-10-properties',
-				label: 'Top properties that use !important',
-				value: propertiesByCount.slice( 0, 10 ),
-			},
-		],
-	};
-};

package/bin/css-audit/src/audits/media-queries.js

@@ -1,96 +0,0 @@
-/**
- * External dependencies
- */
-const csstree = require( 'css-tree' );
-
-/**
- * Internal dependencies
- */
-const getValuesCount = require( '../utils/get-values-count' );
-
-module.exports = function ( files = [] ) {
-	const allQueries = [];
-	const allSizes = [];
-	const nonWidthQueries = [];
-	files.forEach( ( { content } ) => {
-		const ast = csstree.parse( content );
-		csstree.walk( ast, {
-			visit: 'MediaQuery',
-			enter( node ) {
-				if ( node.children ) {
-					allQueries.push( csstree.generate( node ) );
-				}
-				csstree.walk( node, {
-					visit: 'MediaFeature',
-					enter( sizeNode ) {
-						if (
-							sizeNode.name === 'max-width' ||
-							sizeNode.name === 'min-width'
-						) {
-							if (
-								sizeNode.value &&
-								sizeNode.value.type === 'Dimension'
-							) {
-								allSizes.push(
-									csstree.generate( sizeNode.value )
-								);
-							}
-						} else {
-							nonWidthQueries.push(
-								csstree.generate( sizeNode )
-							);
-						}
-					},
-				} );
-			},
-		} );
-	} );
-
-	const uniqQueries = [ ...new Set( allQueries ) ];
-	const uniqSizes = [ ...new Set( allSizes ) ];
-	const queriesByCount = getValuesCount( allQueries );
-	const sizesByCount = getValuesCount( allSizes );
-	const nonWidthByCount = getValuesCount( nonWidthQueries );
-
-	return {
-		audit: 'media-queries',
-		name: 'Media Queries',
-		results: [
-			{
-				id: 'count',
-				label: 'Number of total media queries',
-				value: allQueries.length,
-			},
-			{
-				id: 'count-unique-queries',
-				label: 'Number of seemingly-unique media queries',
-				value: uniqQueries.length,
-			},
-			{
-				id: 'top-10-queries',
-				label: 'Top 10 most-used media queries',
-				value: queriesByCount.slice( 0, 10 ),
-			},
-			{
-				id: 'count-unique-sizes',
-				label: 'Number of unique breakpoint sizes',
-				value: uniqSizes.length,
-			},
-			{
-				id: 'top-10-sizes',
-				label: 'Top 10 most-used breakpoint sizes',
-				value: sizesByCount.slice( 0, 10 ),
-			},
-			{
-				id: 'bottom-10-sizes',
-				label: 'Top 10 least-used breakpoint sizes',
-				value: sizesByCount.slice( -10 ).reverse(),
-			},
-			{
-				id: 'non-width',
-				label: 'Non-width related media queries',
-				value: nonWidthByCount,
-			},
-		],
-	};
-};

package/bin/css-audit/src/audits/property-values.js

@@ -1,65 +0,0 @@
-/**
- * External dependencies
- */
-const { parse } = require( 'postcss' );
-
-/**
- * Internal dependencies
- */
-const getValuesCount = require( '../utils/get-values-count' );
-
-module.exports = function ( files = [], properties = [] ) {
-	const values = [];
-	if ( ! Array.isArray( properties ) ) {
-		properties = Array( properties );
-	}
-	// Skip out if no properties are passed in.
-	if ( ! properties.length ) {
-		return { results: [] };
-	}
-
-	files.forEach( ( { content, name } ) => {
-		const root = parse( content, { from: name } );
-		root.walkDecls( function ( { prop, value } ) {
-			if ( -1 !== properties.indexOf( prop ) ) {
-				values.push( value );
-			}
-		} );
-	} );
-
-	const uniqueValues = [ ...new Set( values ) ];
-	const valuesByCount = getValuesCount( values );
-
-	return {
-		audit: 'property-values',
-		name: `Property Values: ${ properties.join( ', ' ) }`,
-		results: [
-			{
-				id: 'count',
-				label: `Number of values for ${ properties.join( ', ' ) }`,
-				value: values.length,
-			},
-			{
-				id: 'count-unique',
-				label: `Number of unique values for ${ properties.join(
-					', '
-				) }`,
-				value: uniqueValues.length,
-			},
-			{
-				id: 'top-10-values',
-				label: `Top 10 most-used values for ${ properties.join(
-					', '
-				) }`,
-				value: valuesByCount.slice( 0, 10 ),
-			},
-			{
-				id: 'bottom-10-values',
-				label: `Top 10 least-used values for ${ properties.join(
-					', '
-				) }`,
-				value: valuesByCount.slice( -10 ).reverse(),
-			},
-		],
-	};
-};

package/bin/css-audit/src/audits/selectors.js

@@ -1,67 +0,0 @@
-/**
- * External dependencies
- */
-const { parse } = require( 'postcss' );
-
-const { getSpecificityArray } = require( '../utils/get-specificity' );
-
-module.exports = function ( files = [] ) {
-	// let longest = 0;
-	const selectors = [];
-
-	files.forEach( ( { name, content } ) => {
-		const root = parse( content, { from: name } );
-		root.walkRules( function ( { selector } ) {
-			const selectorList = selector.split( ',' );
-			selectorList.forEach( ( selectorName ) => {
-				// Remove excess whitespace from selectors.
-				selectorName = selectorName.replace( /\s+/g, ' ' ).trim();
-				const [ a, b, c ] = getSpecificityArray( selectorName );
-				const sum = 100 * a + 10 * b + c; // eslint-disable-line no-mixed-operators
-				selectors.push( {
-					file: name,
-					selector: selectorName,
-					a,
-					b,
-					c,
-					sum,
-				} );
-			} );
-		} );
-	} );
-
-	// Reverse sort to be highest -> lowest.
-	selectors.sort( ( a, b ) => b.sum - a.sum );
-	const selectorsByLength = [ ...selectors ].sort(
-		( a, b ) => b.selector.length - a.selector.length
-	);
-
-	const selectorsWithIds = selectors.filter( ( { a } ) => a > 0 );
-
-	return {
-		audit: 'selectors',
-		name: 'Selectors',
-		results: [
-			{
-				id: 'count',
-				label: 'Total number of selectors',
-				value: selectors.length,
-			},
-			{
-				id: 'count-with-ids',
-				label: 'Number of selectors with IDs',
-				value: selectorsWithIds.length,
-			},
-			{
-				id: 'top-10-selectors',
-				label: 'Top 10 selectors with the highest specificity',
-				value: selectors.slice( 0, 10 ),
-			},
-			{
-				id: 'bottom-10-selectors',
-				label: 'Top 10 selectors by length',
-				value: selectorsByLength.slice( 0, 10 ),
-			},
-		],
-	};
-};

package/bin/css-audit/src/audits/typography.js

@@ -1,41 +0,0 @@
-/**
- * Internal dependencies
- */
-const propertyValues = require( './property-values' );
-
-/**
- * Run the property values audit with specific properties
- * as a single audit.
- *
- * @param {array} files
- *
- * @returns Object containing audit data.
- */
-module.exports = function ( files = [] ) {
-	const properties = [
-		'font-family',
-		'font-size',
-		'font-style',
-		'font-weight',
-		'line-height',
-		'letter-spacing',
-		'text-align',
-		'text-decoration',
-		'text-indent',
-		'text-overflow',
-		'text-shadow',
-		'text-transform',
-		'white-space',
-		'word-break',
-	];
-
-	const results = properties.map( ( property ) => {
-		return propertyValues( files, property ).results;
-	} );
-
-	return {
-		audit: 'typography',
-		name: `Typography`,
-		results: results.flat(),
-	};
-};

package/bin/css-audit/src/formats/cli-table.js

@@ -1,81 +0,0 @@
-const colors = require( 'colors' );
-const Table = require( 'cli-table3' );
-
-const tableSettings = {
-	chars: {
-		top: '-',
-		'top-mid': '-',
-		'top-left': ' ',
-		'top-right': ' ',
-		bottom: '-',
-		'bottom-mid': '-',
-		'bottom-left': ' ',
-		'bottom-right': ' ',
-		left: '|',
-		'left-mid': '|',
-		mid: '-',
-		'mid-mid': '|',
-		right: '|',
-		'right-mid': '|',
-		middle: '│',
-	},
-};
-
-/**
- * Convert the report data to a JSON string.
- *
- * The report value can be as a plain string, an array, or an array of objects
- * to be rendered by `Table`. This expects the cli supports color output.
- *
- * @param {Object} report An indvidual audit result.
- * @param {string} report.label A human-readable string describing the results.
- * @param {string|string[]|Object[]} report.value The result for this audit.
- * @return {string} A formatted string for output on cli.
- */
-function formatReport( { label, value } ) {
-	let valueString = value;
-
-	if ( Array.isArray( value ) && value.length ) {
-		let table = '';
-		if ( 'object' === typeof value[ 0 ] ) {
-			tableSettings.head = Object.keys( value[ 0 ] );
-			table = new Table( tableSettings );
-			value.forEach( ( row ) => {
-				table.push(
-					Object.values( row ).map( ( item ) => {
-						item = String( item );
-						if ( item.length > 80 ) {
-							return item.slice( 0, 80 ) + '…';
-						}
-						return item;
-					} )
-				);
-			} );
-		} else {
-			table = new Table( tableSettings );
-			value.forEach( ( row ) => {
-				table.push( [ row ] );
-			} );
-		}
-
-		valueString = table.toString();
-	}
-
-	return `${ colors.green.bold( label ) }:\n${ valueString }\n\n`;
-}
-
-/**
- * Convert the report data to a JSON string.
- *
- * @param {Array<Array<Object>>} reports The list of report data.
- * @return {string} reports as a JSON string.
- */
-module.exports = function ( reports ) {
-	reports.map( ( { results } ) => results );
-	return reports.map( ( { name, results } ) => {
-		return (
-			`${ colors.magenta.bold( name ) }\n\n` +
-			results.map( formatReport ).join( '' )
-		);
-	} );
-};

package/bin/css-audit/src/formats/html/_audit-alpha.twig

@@ -1,23 +0,0 @@
-{% for item in data.results %}
-	{% if item.value is iterable %}
-		<h3>{{item.label}}</h3>
-		<ul>
-		{% for value in item.value %}
-
-			{% if value.name or value.name == '0' %}
-				<li class="chip is-transparent" style="--chip-bg-color:{{value.name}};">
-					<span class="count">{{value.count}}</span>
-					{{value.name}}
-				</li>
-			{% else %}
-				<li class="chip is-transparent" style="--chip-bg-color:{{value}};">
-					{{value}}
-				</li>
-			{% endif %}
-
-		{% endfor %}
-		</ul>
-	{% else %}
-		<h3>{{ item.label}}: {{ item.value }}</h3>
-	{% endif %}
-{% endfor %}

package/bin/css-audit/src/formats/html/_audit-colors.twig

@@ -1,23 +0,0 @@
-{% for item in data.results %}
-	{% if item.value is iterable %}
-		<h3>{{item.label}}</h3>
-		<ul>
-		{% for value in item.value %}
-
-			{% if value.name %}
-				<li class="chip" style="--chip-bg-color:{{value.name}};">
-					<span class="count">{{value.count}}</span>
-					{{value.name}}
-				</li>
-			{% else %}
-				<li class="chip" style="--chip-bg-color:{{value}};">
-					{{value}}
-				</li>
-			{% endif %}
-
-		{% endfor %}
-		</ul>
-	{% else %}
-		<h3>{{ item.label}}: {{ item.value }}</h3>
-	{% endif %}
-{% endfor %}

package/bin/css-audit/src/formats/html/_audit-default.twig

@@ -1,24 +0,0 @@
-{% for item in data.results %}
-	{% if item.value is iterable %}
-		<h3>{{item.label}}</h3>
-		<ol>
-		{% for value in item.value %}
-			{% if value.name %}
-				<li>
-					<span class="count">{{value.count}}</span>
-					<em>{{value.name}}</em>
-				</li>
-			{% endif %}
-
-			{% if value.file %}
-				<li>
-					<code>{{value.selector}}</code><br />
-					<em>{{value.file}}</em>
-				</li>
-			{% endif %}
-		{% endfor %}
-		</ol>
-	{% else %}
-		<h3>{{item.label}}: <span class="count">{{item.value}}</span></h3>
-	{% endif %}
-{% endfor %}