@stratawp/cli 2.1.1 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stratawp/cli",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "CLI tool for StrataWP - create and manage WordPress themes",
   "author": "Jon Imms",
   "license": "GPL-3.0-or-later",
@@ -64,8 +64,8 @@
     "simple-git": "^3.22.0",
     "ssh2-sftp-client": "^10.0.3",
     "validate-npm-package-name": "^5.0.0",
-    "@stratawp/explorer": "^0.7.1",
-    "@stratawp/sync": "^0.1.1"
+    "@stratawp/sync": "^0.1.1",
+    "@stratawp/explorer": "^0.7.1"
   },
   "devDependencies": {
     "@types/adm-zip": "^0.5.7",
@@ -74,12 +74,16 @@
     "@types/semver": "^7.5.8",
     "@types/validate-npm-package-name": "^4.0.2",
     "@vitest/coverage-v8": "^1.0.4",
+    "stylelint": "^16.0.0",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3",
-    "vitest": "^1.0.4"
+    "vitest": "^1.0.4",
+    "@stratawp/stylelint-config": "0.1.0"
   },
   "templateDependencies": {
-    "@stratawp/vite-plugin": "^0.2.1"
+    "@stratawp/vite-plugin": "^0.3.0",
+    "@stratawp/stylelint-config": "^0.1.0",
+    "@stratawp/testing": "^0.2.0"
   },
   "scripts": {
     "dev": "tsup --watch",

package/templates/advanced-theme/.stylelintignore

@@ -0,0 +1,3 @@
+dist
+vendor
+node_modules

package/templates/advanced-theme/e2e/smoke/layout.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('layout renders header, content and footer', async ({ page }) => {
+  await page.goto('/', { waitUntil: 'domcontentloaded' })
+  await expect(page.getByRole('banner')).toBeVisible()
+  await expect(page.locator('main').first()).toBeVisible()
+  await expect(page.getByRole('contentinfo')).toBeVisible()
+  // Patterns that fail to resolve render nothing, silently.
+  const text = (await page.locator('main').first().innerText()).trim()
+  expect(text.length).toBeGreaterThan(0)
+})

package/templates/advanced-theme/package.json

@@ -10,7 +10,9 @@
     "build": "vite build",
     "preview": "vite preview",
     "ai:setup": "node scripts/ai-setup.mjs",
-    "ai:check": "pnpm build"
+    "ai:check": "pnpm build",
+    "lint:css": "stylelint \"src/**/*.{css,scss}\"",
+    "test:e2e": "playwright test --config playwright.smoke.config.ts"
   },
   "dependencies": {
     "@wordpress/block-editor": "^12.19.0",
@@ -23,9 +25,13 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.58.2",
+    "@stratawp/stylelint-config": "workspace:*",
+    "@stratawp/testing": "workspace:*",
     "@stratawp/vite-plugin": "workspace:*",
     "@vitejs/plugin-react": "^4.2.1",
     "sass": "^1.94.2",
+    "stylelint": "^16.0.0",
     "typescript": "^5.3.3",
     "vite": "^5.0.10"
   }

package/templates/advanced-theme/playwright.smoke.config.ts

@@ -0,0 +1,3 @@
+import { createSmokeConfig } from '@stratawp/testing/config'
+
+export default createSmokeConfig({ testDir: './e2e/smoke' })

package/templates/advanced-theme/stylelint.config.js

@@ -0,0 +1 @@
+export { default } from '@stratawp/stylelint-config'

package/templates/advanced-theme/vendor/stratawp/core/src/Components/ImageSizes.php

@@ -29,6 +29,115 @@ class ImageSizes implements ComponentInterface {
 		add_filter( 'wp_get_attachment_image_attributes', array( $this, 'filter_post_thumbnail_sizes_attr' ), 10, 3 );
 	}
 
+	/**
+	 * Raster extensions the build pipeline produces AVIF/WebP siblings for.
+	 *
+	 * @var string[]
+	 */
+	private const RASTER_EXTENSIONS = array( 'jpg', 'jpeg', 'png' );
+
+	/**
+	 * Sibling formats in preference order (best compression first).
+	 *
+	 * @var array<string, string>
+	 */
+	private const SIBLING_TYPES = array(
+		'avif' => 'image/avif',
+		'webp' => 'image/webp',
+	);
+
+	/**
+	 * Attribute names the caller may not set (the helper owns them).
+	 *
+	 * @var string[]
+	 */
+	private const RESERVED_ATTRIBUTES = array( 'src', 'srcset', 'alt', 'type' );
+
+	/**
+	 * Find AVIF/WebP siblings of a theme image that exist on disk.
+	 *
+	 * @param string $relative_path Path relative to the theme directory (e.g. `dist/images/hero.jpg`).
+	 * @return array<int, array{type: string, srcset: string}> Sources, AVIF first.
+	 */
+	public function get_picture_sources( string $relative_path ): array {
+		$extension = strtolower( pathinfo( $relative_path, PATHINFO_EXTENSION ) );
+
+		if ( ! $this->is_safe_path( $relative_path ) || ! in_array( $extension, self::RASTER_EXTENSIONS, true ) ) {
+			return array();
+		}
+
+		$base    = substr( $relative_path, 0, -( strlen( $extension ) + 1 ) );
+		$sources = array();
+
+		foreach ( self::SIBLING_TYPES as $sibling_extension => $mime_type ) {
+			$sibling = $base . '.' . $sibling_extension;
+
+			if ( file_exists( get_theme_file_path( $sibling ) ) ) {
+				$sources[] = array(
+					'type'   => $mime_type,
+					'srcset' => get_theme_file_uri( $sibling ),
+				);
+			}
+		}
+
+		return $sources;
+	}
+
+	/**
+	 * Render a theme image as `<picture>` with AVIF/WebP sources when available.
+	 *
+	 * @param string               $relative_path Path relative to the theme directory.
+	 * @param string               $alt           Alternative text.
+	 * @param array<string,string> $attributes    Extra `<img>` attributes (names must be lowercase, no `on*` handlers).
+	 * @return string Markup, or an empty string when the path is unsafe or the original is missing.
+	 */
+	public function render_picture( string $relative_path, string $alt, array $attributes = array() ): string {
+		if ( ! $this->is_safe_path( $relative_path ) || ! file_exists( get_theme_file_path( $relative_path ) ) ) {
+			return '';
+		}
+
+		$attribute_html = '';
+		foreach ( $attributes as $name => $value ) {
+			$name = (string) $name;
+
+			if ( 1 !== preg_match( '/^[a-z][a-z0-9-]*$/', $name )
+				|| 0 === strpos( $name, 'on' )
+				|| in_array( $name, self::RESERVED_ATTRIBUTES, true )
+			) {
+				continue;
+			}
+
+			$attribute_html .= sprintf( ' %s="%s"', $name, esc_attr( (string) $value ) );
+		}
+
+		$sources = '';
+		foreach ( $this->get_picture_sources( $relative_path ) as $source ) {
+			$sources .= sprintf( '<source type="%s" srcset="%s">', esc_attr( $source['type'] ), esc_url( $source['srcset'] ) );
+		}
+
+		$image = sprintf(
+			'<img src="%s" alt="%s"%s>',
+			esc_url( get_theme_file_uri( $relative_path ) ),
+			esc_attr( $alt ),
+			$attribute_html
+		);
+
+		return '' === $sources ? $image : '<picture>' . $sources . $image . '</picture>';
+	}
+
+	/**
+	 * Reject empty, absolute, NUL-containing, or traversing paths.
+	 *
+	 * @param string $path Candidate theme-relative path.
+	 * @return bool
+	 */
+	private function is_safe_path( string $path ): bool {
+		return '' !== $path
+			&& false === strpos( $path, "\0" )
+			&& 0 !== strpos( $path, '/' )
+			&& 1 !== preg_match( '#(^|[\\\\/])\.\.([\\\\/]|$)#', $path );
+	}
+
 	/**
 	 * Tune the `sizes` attribute for content images.
 	 *

package/templates/basic-theme/.stylelintignore

@@ -0,0 +1,3 @@
+dist
+vendor
+node_modules

package/templates/basic-theme/e2e/smoke/layout.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('layout renders header, content and footer', async ({ page }) => {
+  await page.goto('/', { waitUntil: 'domcontentloaded' })
+  await expect(page.getByRole('banner')).toBeVisible()
+  await expect(page.locator('main').first()).toBeVisible()
+  await expect(page.getByRole('contentinfo')).toBeVisible()
+  // Patterns that fail to resolve render nothing, silently.
+  const text = (await page.locator('main').first().innerText()).trim()
+  expect(text.length).toBeGreaterThan(0)
+})

package/templates/basic-theme/package.json

@@ -10,7 +10,9 @@
     "build": "vite build",
     "preview": "vite preview",
     "ai:setup": "node scripts/ai-setup.mjs",
-    "ai:check": "pnpm build"
+    "ai:check": "pnpm build",
+    "lint:css": "stylelint \"src/**/*.{css,scss}\"",
+    "test:e2e": "playwright test --config playwright.smoke.config.ts"
   },
   "dependencies": {
     "@wordpress/block-editor": "^12.19.0",
@@ -23,9 +25,13 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.58.2",
+    "@stratawp/stylelint-config": "workspace:*",
+    "@stratawp/testing": "workspace:*",
     "@stratawp/vite-plugin": "workspace:*",
     "@vitejs/plugin-react": "^4.2.1",
     "sass": "^1.94.2",
+    "stylelint": "^16.0.0",
     "typescript": "^5.3.3",
     "vite": "^5.0.10"
   }

package/templates/basic-theme/playwright.smoke.config.ts

@@ -0,0 +1,3 @@
+import { createSmokeConfig } from '@stratawp/testing/config'
+
+export default createSmokeConfig({ testDir: './e2e/smoke' })

package/templates/basic-theme/stylelint.config.js

@@ -0,0 +1 @@
+export { default } from '@stratawp/stylelint-config'

package/templates/basic-theme/vendor/stratawp/core/src/Components/ImageSizes.php

@@ -29,6 +29,115 @@ class ImageSizes implements ComponentInterface {
 		add_filter( 'wp_get_attachment_image_attributes', array( $this, 'filter_post_thumbnail_sizes_attr' ), 10, 3 );
 	}
 
+	/**
+	 * Raster extensions the build pipeline produces AVIF/WebP siblings for.
+	 *
+	 * @var string[]
+	 */
+	private const RASTER_EXTENSIONS = array( 'jpg', 'jpeg', 'png' );
+
+	/**
+	 * Sibling formats in preference order (best compression first).
+	 *
+	 * @var array<string, string>
+	 */
+	private const SIBLING_TYPES = array(
+		'avif' => 'image/avif',
+		'webp' => 'image/webp',
+	);
+
+	/**
+	 * Attribute names the caller may not set (the helper owns them).
+	 *
+	 * @var string[]
+	 */
+	private const RESERVED_ATTRIBUTES = array( 'src', 'srcset', 'alt', 'type' );
+
+	/**
+	 * Find AVIF/WebP siblings of a theme image that exist on disk.
+	 *
+	 * @param string $relative_path Path relative to the theme directory (e.g. `dist/images/hero.jpg`).
+	 * @return array<int, array{type: string, srcset: string}> Sources, AVIF first.
+	 */
+	public function get_picture_sources( string $relative_path ): array {
+		$extension = strtolower( pathinfo( $relative_path, PATHINFO_EXTENSION ) );
+
+		if ( ! $this->is_safe_path( $relative_path ) || ! in_array( $extension, self::RASTER_EXTENSIONS, true ) ) {
+			return array();
+		}
+
+		$base    = substr( $relative_path, 0, -( strlen( $extension ) + 1 ) );
+		$sources = array();
+
+		foreach ( self::SIBLING_TYPES as $sibling_extension => $mime_type ) {
+			$sibling = $base . '.' . $sibling_extension;
+
+			if ( file_exists( get_theme_file_path( $sibling ) ) ) {
+				$sources[] = array(
+					'type'   => $mime_type,
+					'srcset' => get_theme_file_uri( $sibling ),
+				);
+			}
+		}
+
+		return $sources;
+	}
+
+	/**
+	 * Render a theme image as `<picture>` with AVIF/WebP sources when available.
+	 *
+	 * @param string               $relative_path Path relative to the theme directory.
+	 * @param string               $alt           Alternative text.
+	 * @param array<string,string> $attributes    Extra `<img>` attributes (names must be lowercase, no `on*` handlers).
+	 * @return string Markup, or an empty string when the path is unsafe or the original is missing.
+	 */
+	public function render_picture( string $relative_path, string $alt, array $attributes = array() ): string {
+		if ( ! $this->is_safe_path( $relative_path ) || ! file_exists( get_theme_file_path( $relative_path ) ) ) {
+			return '';
+		}
+
+		$attribute_html = '';
+		foreach ( $attributes as $name => $value ) {
+			$name = (string) $name;
+
+			if ( 1 !== preg_match( '/^[a-z][a-z0-9-]*$/', $name )
+				|| 0 === strpos( $name, 'on' )
+				|| in_array( $name, self::RESERVED_ATTRIBUTES, true )
+			) {
+				continue;
+			}
+
+			$attribute_html .= sprintf( ' %s="%s"', $name, esc_attr( (string) $value ) );
+		}
+
+		$sources = '';
+		foreach ( $this->get_picture_sources( $relative_path ) as $source ) {
+			$sources .= sprintf( '<source type="%s" srcset="%s">', esc_attr( $source['type'] ), esc_url( $source['srcset'] ) );
+		}
+
+		$image = sprintf(
+			'<img src="%s" alt="%s"%s>',
+			esc_url( get_theme_file_uri( $relative_path ) ),
+			esc_attr( $alt ),
+			$attribute_html
+		);
+
+		return '' === $sources ? $image : '<picture>' . $sources . $image . '</picture>';
+	}
+
+	/**
+	 * Reject empty, absolute, NUL-containing, or traversing paths.
+	 *
+	 * @param string $path Candidate theme-relative path.
+	 * @return bool
+	 */
+	private function is_safe_path( string $path ): bool {
+		return '' !== $path
+			&& false === strpos( $path, "\0" )
+			&& 0 !== strpos( $path, '/' )
+			&& 1 !== preg_match( '#(^|[\\\\/])\.\.([\\\\/]|$)#', $path );
+	}
+
 	/**
 	 * Tune the `sizes` attribute for content images.
 	 *

package/templates/store-theme/.stylelintignore

@@ -0,0 +1,3 @@
+dist
+vendor
+node_modules

package/templates/store-theme/e2e/smoke/layout.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('layout renders header, content and footer', async ({ page }) => {
+  await page.goto('/', { waitUntil: 'domcontentloaded' })
+  await expect(page.getByRole('banner')).toBeVisible()
+  await expect(page.locator('main').first()).toBeVisible()
+  await expect(page.getByRole('contentinfo')).toBeVisible()
+  // Patterns that fail to resolve render nothing, silently.
+  const text = (await page.locator('main').first().innerText()).trim()
+  expect(text.length).toBeGreaterThan(0)
+})

package/templates/store-theme/package.json

@@ -10,7 +10,9 @@
     "build": "vite build",
     "preview": "vite preview",
     "ai:setup": "node scripts/ai-setup.mjs",
-    "ai:check": "pnpm build"
+    "ai:check": "pnpm build",
+    "lint:css": "stylelint \"src/**/*.{css,scss}\"",
+    "test:e2e": "playwright test --config playwright.smoke.config.ts"
   },
   "dependencies": {
     "@wordpress/block-editor": "^12.19.0",
@@ -23,9 +25,13 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.58.2",
+    "@stratawp/stylelint-config": "workspace:*",
+    "@stratawp/testing": "workspace:*",
     "@stratawp/vite-plugin": "workspace:*",
     "@vitejs/plugin-react": "^4.2.1",
     "sass": "^1.94.2",
+    "stylelint": "^16.0.0",
     "typescript": "^5.3.3",
     "vite": "^5.0.10"
   }

package/templates/store-theme/playwright.smoke.config.ts

@@ -0,0 +1,3 @@
+import { createSmokeConfig } from '@stratawp/testing/config'
+
+export default createSmokeConfig({ testDir: './e2e/smoke' })

package/templates/store-theme/src/scss/_woocommerce.scss

@@ -255,10 +255,10 @@
 
             .cart {
                 margin-bottom: 2rem;
+            }
 
-                .quantity {
-                    margin-right: 1rem;
-                }
+            .cart .quantity {
+                margin-right: 1rem;
             }
         }
     }

package/templates/store-theme/stylelint.config.js

@@ -0,0 +1 @@
+export { default } from '@stratawp/stylelint-config'

package/templates/store-theme/vendor/stratawp/core/src/Components/ImageSizes.php

@@ -29,6 +29,115 @@ class ImageSizes implements ComponentInterface {
 		add_filter( 'wp_get_attachment_image_attributes', array( $this, 'filter_post_thumbnail_sizes_attr' ), 10, 3 );
 	}
 
+	/**
+	 * Raster extensions the build pipeline produces AVIF/WebP siblings for.
+	 *
+	 * @var string[]
+	 */
+	private const RASTER_EXTENSIONS = array( 'jpg', 'jpeg', 'png' );
+
+	/**
+	 * Sibling formats in preference order (best compression first).
+	 *
+	 * @var array<string, string>
+	 */
+	private const SIBLING_TYPES = array(
+		'avif' => 'image/avif',
+		'webp' => 'image/webp',
+	);
+
+	/**
+	 * Attribute names the caller may not set (the helper owns them).
+	 *
+	 * @var string[]
+	 */
+	private const RESERVED_ATTRIBUTES = array( 'src', 'srcset', 'alt', 'type' );
+
+	/**
+	 * Find AVIF/WebP siblings of a theme image that exist on disk.
+	 *
+	 * @param string $relative_path Path relative to the theme directory (e.g. `dist/images/hero.jpg`).
+	 * @return array<int, array{type: string, srcset: string}> Sources, AVIF first.
+	 */
+	public function get_picture_sources( string $relative_path ): array {
+		$extension = strtolower( pathinfo( $relative_path, PATHINFO_EXTENSION ) );
+
+		if ( ! $this->is_safe_path( $relative_path ) || ! in_array( $extension, self::RASTER_EXTENSIONS, true ) ) {
+			return array();
+		}
+
+		$base    = substr( $relative_path, 0, -( strlen( $extension ) + 1 ) );
+		$sources = array();
+
+		foreach ( self::SIBLING_TYPES as $sibling_extension => $mime_type ) {
+			$sibling = $base . '.' . $sibling_extension;
+
+			if ( file_exists( get_theme_file_path( $sibling ) ) ) {
+				$sources[] = array(
+					'type'   => $mime_type,
+					'srcset' => get_theme_file_uri( $sibling ),
+				);
+			}
+		}
+
+		return $sources;
+	}
+
+	/**
+	 * Render a theme image as `<picture>` with AVIF/WebP sources when available.
+	 *
+	 * @param string               $relative_path Path relative to the theme directory.
+	 * @param string               $alt           Alternative text.
+	 * @param array<string,string> $attributes    Extra `<img>` attributes (names must be lowercase, no `on*` handlers).
+	 * @return string Markup, or an empty string when the path is unsafe or the original is missing.
+	 */
+	public function render_picture( string $relative_path, string $alt, array $attributes = array() ): string {
+		if ( ! $this->is_safe_path( $relative_path ) || ! file_exists( get_theme_file_path( $relative_path ) ) ) {
+			return '';
+		}
+
+		$attribute_html = '';
+		foreach ( $attributes as $name => $value ) {
+			$name = (string) $name;
+
+			if ( 1 !== preg_match( '/^[a-z][a-z0-9-]*$/', $name )
+				|| 0 === strpos( $name, 'on' )
+				|| in_array( $name, self::RESERVED_ATTRIBUTES, true )
+			) {
+				continue;
+			}
+
+			$attribute_html .= sprintf( ' %s="%s"', $name, esc_attr( (string) $value ) );
+		}
+
+		$sources = '';
+		foreach ( $this->get_picture_sources( $relative_path ) as $source ) {
+			$sources .= sprintf( '<source type="%s" srcset="%s">', esc_attr( $source['type'] ), esc_url( $source['srcset'] ) );
+		}
+
+		$image = sprintf(
+			'<img src="%s" alt="%s"%s>',
+			esc_url( get_theme_file_uri( $relative_path ) ),
+			esc_attr( $alt ),
+			$attribute_html
+		);
+
+		return '' === $sources ? $image : '<picture>' . $sources . $image . '</picture>';
+	}
+
+	/**
+	 * Reject empty, absolute, NUL-containing, or traversing paths.
+	 *
+	 * @param string $path Candidate theme-relative path.
+	 * @return bool
+	 */
+	private function is_safe_path( string $path ): bool {
+		return '' !== $path
+			&& false === strpos( $path, "\0" )
+			&& 0 !== strpos( $path, '/' )
+			&& 1 !== preg_match( '#(^|[\\\\/])\.\.([\\\\/]|$)#', $path );
+	}
+
 	/**
 	 * Tune the `sizes` attribute for content images.
 	 *