Expand import order and add style groups in Prettier config (#28)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Expanded support for additional import path alias formats in code
formatting.
- Added new style-related import groups for improved import order
handling.

- **Chores**
- Updated documentation to clarify usage of Prettier configurations for
CommonJS and ES Module projects.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: TheCodeDestroyer

.changeset/eighty-jeans-train.md

@@ -0,0 +1,6 @@
+---
+'@tcd-devkit/prettier-config-react': minor
+'@tcd-devkit/prettier-config': minor
+---
+
+Update README with better info

.changeset/polite-teeth-change.md

@@ -0,0 +1,5 @@
+---
+'@tcd-devkit/prettier-config': patch
+---
+
+Add more alternative for import order path aliases and add styles aliases

packages/prettier/prettier-config-react/README.md

@@ -43,19 +43,30 @@ Alternatively, you can create a Prettier configuration file (e.g., `.prettierrc.
 
 **`.prettierrc.js` (or `prettier.config.js`)**
 
-This package exports both CommonJS (CJS) and ES Module (ESM) formats. You can import it accordingly:
+This package exports both CommonJS (CJS) and ES Module (ESM) formats. Choose the appropriate example based on your project's module system:
+
+> **Note**: You can also use `prettier.config.cjs` to force CommonJS format even in projects with `"type": "module"` in package.json.
+
+For CommonJS (`.js` files without `"type": "module"` in package.json):
 
 ```javascript
-// For CommonJS (e.g., if your prettier.config.js is a .js file treated as CJS)
-// const prettierConfigReact = require('@tcd-devkit/prettier-config-react');
+const prettierConfigReact = require('@tcd-devkit/prettier-config-react');
+
+module.exports = {
+  ...prettierConfigReact,
+  // Your custom overrides can be added here
+  // For example, if you have custom Tailwind settings:
+  // tailwindConfig: './tailwind.config.js',
+};
+```
 
-// For ES Modules (e.g., if your prettier.config.js is a .mjs file or package.json has "type": "module")
-// import prettierConfigReact from '@tcd-devkit/prettier-config-react';
+For ES Modules (`.mjs` files or `.js` files with `"type": "module"` in package.json):
+
+```javascript
+import prettierConfigReact from '@tcd-devkit/prettier-config-react';
 
-// Then spread the imported config:
 export default {
-  // ...prettierConfigReact, // Choose one of the import methods above
-  ...require('@tcd-devkit/prettier-config-react'), // Defaulting to require for wider compatibility in basic .js files
+  ...prettierConfigReact,
   // Your custom overrides can be added here
   // For example, if you have custom Tailwind settings:
   // tailwindConfig: './tailwind.config.js',

packages/prettier/prettier-config/README.md

@@ -47,21 +47,32 @@ Alternatively, you can create a Prettier configuration file (e.g., `.prettierrc.
 
 **`.prettierrc.js` (or `prettier.config.js`)**
 
-This package exports both CommonJS (CJS) and ES Module (ESM) formats. You can import it accordingly:
+This package exports both CommonJS (CJS) and ES Module (ESM) formats. Choose the appropriate example based on your project's module system:
+
+> **Note**: You can also use `prettier.config.cjs` to force CommonJS format even in projects with `"type": "module"` in package.json.
+
+For CommonJS (`.js` files without `"type": "module"` in package.json):
 
 ```javascript
-// For CommonJS (e.g., if your prettier.config.js is a .js file treated as CJS)
-// const prettierConfig = require('@tcd-devkit/prettier-config');
+const prettierConfig = require('@tcd-devkit/prettier-config');
 
-// For ES Modules (e.g., if your prettier.config.js is a .mjs file or package.json has "type": "module")
-// import prettierConfig from '@tcd-devkit/prettier-config';
+module.exports = {
+  ...prettierConfig,
+  // Your custom overrides can be added here
+  // For example:
+  // printWidth: 100,
+};
+```
+
+For ES Modules (`.mjs` files or `.js` files with `"type": "module"` in package.json):
+
+```javascript
+import prettierConfig from '@tcd-devkit/prettier-config';
 
-// Then spread the imported config:
 export default {
-  // ...prettierConfig, // Choose one of the import methods above
-  ...require('@tcd-devkit/prettier-config'), // Defaulting to require for wider compatibility in basic .js files
+  ...prettierConfig,
   // Your custom overrides can be added here
-  // مثلا:
+  // For example:
   // printWidth: 100,
 };
 ```

packages/prettier/prettier-config/src/base.formatter.ts

@@ -45,19 +45,21 @@ const baseFormatter = {
     '',
     '^(@tcd-devkit)(/.*)$',
     '',
-    '^(@/shared|#shared)(/.*)$',
+    '^(@shared|@/shared|#shared)(/.*)$',
     '',
-    '^(@/server|#server)(/.*)$',
-    '^(@/actions|#actions)(/.*)$',
+    '^(@server|@/server|#server)(/.*)$',
+    '^(@actions|@/actions|#actions)(/.*)$',
     '',
-    '^(@/client|#client)(/.*)$',
+    '^(@client|@/client|#client)(/.*)$',
     '',
-    '^(@/components|#components)(/.*)$',
+    '^(@components|@/components|#components)(/.*)$',
     '',
-    '^(@/public|#public)(/.*)$',
+    '^(@public|@/public|#public)(/.*)$',
     '',
     '^#([^/].*)$',
     '',
+    '^(@global-styles?|@/global-styles?|#global-styles?)(/.*)$',
+    '^(@styles?|@/styles?|#styles?)(/.*)$',
     '(?:\\.s?css)',
     '',
     '^[./]',