feat(postcss-config): resolve the @sage styles path from the project layout

packages/postcss-config/README.md

@@ -19,8 +19,11 @@ const postcssSettings = require('@yardinternet/postcss-config');
 module.exports = postcssSettings(getPathToTheme(), __dirname);
 ```
 
-The default path to the styles is `web/app/themes/sage/resources/styles`.
-You can change this values by passing the paths as an parameter.
+The `@sage` import alias points at the default theme's
+`resources/styles`, resolved from the [project
+layout](../shared-utils/README.md#project-layout-detection). It falls back to
+`web/app/themes/sage/resources/styles` when the layout cannot be resolved.
+You can change this value by passing the path as a parameter.
 
 ```js
 const postcssSettings = require('@yardinternet/postcss-config');

packages/postcss-config/package.json

@@ -18,6 +18,7 @@
 	"author": "",
 	"license": "ISC",
 	"dependencies": {
+		"@yardinternet/shared-utils": "workspace:*",
 		"autoprefixer": "^10.6.1",
 		"cssnano": "^8.0.10",
 		"postcss": "^8.5.28",

packages/postcss-config/src/index.js

@@ -1,18 +1,35 @@
 const path = require( 'path' );
+const { tryResolveThemeContext } = require( '@yardinternet/shared-utils' );
+
+/**
+ * Styles of the parent theme the `@sage` import alias points at. Falls back to
+ * the historical sage path when the project layout cannot be resolved.
+ */
+const defaultStylesPath = ( basePath ) => {
+	const context = tryResolveThemeContext( { cwd: basePath } );
+
+	if ( ! context ) {
+		return 'web/app/themes/sage/resources/styles';
+	}
+
+	return path.join(
+		context.themeRelDir( context.defaultTheme ),
+		'resources',
+		'styles'
+	);
+};
+
+module.exports = ( pathToTheme, basePath, pathToStyles = null ) => {
+	const parentStylesPath = pathToStyles ?? defaultStylesPath( basePath );
 
-module.exports = (
-	pathToTheme,
-	basePath,
-	pathToStyles = 'web/app/themes/sage/resources/styles'
-) => {
 	// Add alias paths for PostCSS imports
 	const resolveAliasPaths = ( id ) => {
 		if ( id.startsWith( '@sage' ) ) {
 			const relativePath = id.replace( '@sage', '' ).trimStart( '/' );
 
 			const sageParentThemeStylesPath = path.join(
 				basePath,
-				pathToStyles
+				parentStylesPath
 			);
 			return path.join( sageParentThemeStylesPath, relativePath );
 		}