diff --git a/docs-assets/app/package.json b/docs-assets/app/package.json index 647c06fc39..5810b560bc 100644 --- a/docs-assets/app/package.json +++ b/docs-assets/app/package.json @@ -11,6 +11,7 @@ "autoprefixer": "^10.4.7", "laravel-vite-plugin": "^0.7.2", "postcss": "^8.4.14", + "postcss-nesting": "^12.0.1", "tailwindcss": "^3.1", "tippy.js": "^6.3.7", "vite": "^4.5.1" diff --git a/docs-assets/app/postcss.config.js b/docs-assets/app/postcss.config.js index d41ad63557..9fab088488 100644 --- a/docs-assets/app/postcss.config.js +++ b/docs-assets/app/postcss.config.js @@ -1,5 +1,6 @@ export default { plugins: { + 'tailwindcss/nesting': 'postcss-nesting', tailwindcss: {}, autoprefixer: {}, }, diff --git a/package-lock.json b/package-lock.json index d3c4eb1efd..5811629381 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,6 +40,7 @@ "luxon": "^3.4.3", "npm-run-all": "^4.1.5", "postcss": "^8.4.4", + "postcss-nesting": "^12.0.1", "prettier": "^2.7.1", "prettier-plugin-blade": "^1.5.3", "prettier-plugin-tailwindcss": "^0.3.0", @@ -4883,9 +4884,9 @@ "dev": true }, "node_modules/electron-to-chromium": { - "version": "1.4.613", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.613.tgz", - "integrity": "sha512-r4x5+FowKG6q+/Wj0W9nidx7QO31BJwmR2uEo+Qh3YLGQ8SbBAFuDFpTxzly/I2gsbrFwBuIjrMp423L3O5U3w==", + "version": "1.4.614", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.614.tgz", + "integrity": "sha512-X4ze/9Sc3QWs6h92yerwqv7aB/uU8vCjZcrMjA8N9R1pjMFRe44dLsck5FzLilOYvcXuDn93B+bpGYyufc70gQ==", "dev": true }, "node_modules/elliptic": { @@ -5492,9 +5493,9 @@ } }, "node_modules/filepond": { - "version": "4.30.4", - "resolved": "https://registry.npmjs.org/filepond/-/filepond-4.30.4.tgz", - "integrity": "sha512-FCwsMvG9iiEs6uobdDrTaKsCgsqys0NuLgPPD8n37AYVYBiiDkrPkk9MSIU5rT2FahYcL1bScYI9huIPtlzqyA==", + "version": "4.30.5", + "resolved": "https://registry.npmjs.org/filepond/-/filepond-4.30.5.tgz", + "integrity": "sha512-+uZrwbZmqkqONl5ApWAE8zsonipXEm6yAX6B71TUuYWRogmJ2nYJCt9E7KiOHtphyChyKKNJTKuV52gn0oQihw==", "dev": true }, "node_modules/filepond-plugin-file-validate-size": { @@ -5543,9 +5544,9 @@ } }, "node_modules/filepond-plugin-image-preview": { - "version": "4.6.11", - "resolved": "https://registry.npmjs.org/filepond-plugin-image-preview/-/filepond-plugin-image-preview-4.6.11.tgz", - "integrity": "sha512-0EmQ9HnOb/X0xc5rLcNRhhmdUbp7oiicRwQrcr90ZfVmPJOOZoX3ZGUEsEPj7luMI55huguhcVozdESxtqnuRw==", + "version": "4.6.12", + "resolved": "https://registry.npmjs.org/filepond-plugin-image-preview/-/filepond-plugin-image-preview-4.6.12.tgz", + "integrity": "sha512-Y8ETX5QVV0mbPB0586UH8AUmG9tZg8PuN5bdEAIlZVJFTct5ebViJ7+Am94/VhTPjLqZjBf1zmDq5JU6XRsZKw==", "dev": true, "peerDependencies": { "filepond": ">=4.x <5.x" @@ -8657,6 +8658,67 @@ "node": ">=4" } }, + "node_modules/postcss-nesting": { + "version": "12.0.1", + "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.0.1.tgz", + "integrity": "sha512-6LCqCWP9pqwXw/njMvNK0hGY44Fxc4B2EsGbn6xDcxbNRzP8GYoxT7yabVVMLrX3quqOJ9hg2jYMsnkedOf8pA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "dependencies": { + "@csstools/selector-specificity": "^3.0.0", + "postcss-selector-parser": "^6.0.13" + }, + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/postcss-nesting/node_modules/@csstools/selector-specificity": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.0.tgz", + "integrity": "sha512-hBI9tfBtuPIi885ZsZ32IMEU/5nlZH/KOVYJCOh7gyMxaVLGmLedYqFN6Ui1LXkI8JlC8IsuC0rF0btcRZKd5g==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "postcss-selector-parser": "^6.0.13" + } + }, + "node_modules/postcss-nesting/node_modules/postcss-selector-parser": { + "version": "6.0.13", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", + "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", + "dev": true, + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/postcss-normalize-charset": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz", diff --git a/package.json b/package.json index 638b3eb6d6..b1a3d6b701 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "luxon": "^3.4.3", "npm-run-all": "^4.1.5", "postcss": "^8.4.4", + "postcss-nesting": "^12.0.1", "prettier": "^2.7.1", "prettier-plugin-blade": "^1.5.3", "prettier-plugin-tailwindcss": "^0.3.0", diff --git a/packages/actions/docs/01-installation.md b/packages/actions/docs/01-installation.md index 86daaefd61..17ab5fa5f9 100644 --- a/packages/actions/docs/01-installation.md +++ b/packages/actions/docs/01-installation.md @@ -50,7 +50,7 @@ php artisan filament:install --actions Run the following command to install Tailwind CSS with the Tailwind Forms and Typography plugins: ```bash -npm install tailwindcss @tailwindcss/forms @tailwindcss/typography postcss autoprefixer --save-dev +npm install tailwindcss @tailwindcss/forms @tailwindcss/typography postcss postcss-nesting autoprefixer --save-dev ``` Create a new `tailwind.config.js` file and add the Filament `preset` *(includes the Filament color scheme and the required Tailwind plugins)*: @@ -78,11 +78,12 @@ Add Tailwind's CSS layers to your `resources/css/app.css`: @tailwind utilities; ``` -Create a `postcss.config.js` file in the root of your project and register Tailwind CSS and Autoprefixer as plugins: +Create a `postcss.config.js` file in the root of your project and register Tailwind CSS, PostCSS Nesting and Autoprefixer as plugins: ```js export default { plugins: { + 'tailwindcss/nesting': 'postcss-nesting', tailwindcss: {}, autoprefixer: {}, }, diff --git a/packages/forms/docs/01-installation.md b/packages/forms/docs/01-installation.md index e2b6fdf02e..e905af2f43 100644 --- a/packages/forms/docs/01-installation.md +++ b/packages/forms/docs/01-installation.md @@ -50,7 +50,7 @@ php artisan filament:install --forms Run the following command to install Tailwind CSS with the Tailwind Forms and Typography plugins: ```bash -npm install tailwindcss @tailwindcss/forms @tailwindcss/typography postcss autoprefixer --save-dev +npm install tailwindcss @tailwindcss/forms @tailwindcss/typography postcss postcss-nesting autoprefixer --save-dev ``` Create a new `tailwind.config.js` file and add the Filament `preset` *(includes the Filament color scheme and the required Tailwind plugins)*: @@ -78,11 +78,12 @@ Add Tailwind's CSS layers to your `resources/css/app.css`: @tailwind utilities; ``` -Create a `postcss.config.js` file in the root of your project and register Tailwind CSS and Autoprefixer as plugins: +Create a `postcss.config.js` file in the root of your project and register Tailwind CSS, PostCSS Nesting and Autoprefixer as plugins: ```js export default { plugins: { + 'tailwindcss/nesting': 'postcss-nesting', tailwindcss: {}, autoprefixer: {}, }, diff --git a/packages/infolists/docs/01-installation.md b/packages/infolists/docs/01-installation.md index a517716a35..829b362b83 100644 --- a/packages/infolists/docs/01-installation.md +++ b/packages/infolists/docs/01-installation.md @@ -50,7 +50,7 @@ php artisan filament:install --infolists Run the following command to install Tailwind CSS with the Tailwind Forms and Typography plugins: ```bash -npm install tailwindcss @tailwindcss/forms @tailwindcss/typography postcss autoprefixer --save-dev +npm install tailwindcss @tailwindcss/forms @tailwindcss/typography postcss postcss-nesting autoprefixer --save-dev ``` Create a new `tailwind.config.js` file and add the Filament `preset` *(includes the Filament color scheme and the required Tailwind plugins)*: @@ -78,11 +78,12 @@ Add Tailwind's CSS layers to your `resources/css/app.css`: @tailwind utilities; ``` -Create a `postcss.config.js` file in the root of your project and register Tailwind CSS and Autoprefixer as plugins: +Create a `postcss.config.js` file in the root of your project and register Tailwind CSS, PostCSS Nesting and Autoprefixer as plugins: ```js export default { plugins: { + 'tailwindcss/nesting': 'postcss-nesting', tailwindcss: {}, autoprefixer: {}, }, diff --git a/packages/notifications/docs/01-installation.md b/packages/notifications/docs/01-installation.md index 8ed40a0d71..26f803444d 100644 --- a/packages/notifications/docs/01-installation.md +++ b/packages/notifications/docs/01-installation.md @@ -48,7 +48,7 @@ php artisan filament:install --notifications Run the following command to install Tailwind CSS with the Tailwind Forms and Typography plugins: ```bash -npm install tailwindcss @tailwindcss/forms @tailwindcss/typography postcss autoprefixer --save-dev +npm install tailwindcss @tailwindcss/forms @tailwindcss/typography postcss postcss-nesting autoprefixer --save-dev ``` Create a new `tailwind.config.js` file and add the Filament `preset` *(includes the Filament color scheme and the required Tailwind plugins)*: @@ -76,11 +76,12 @@ Add Tailwind's CSS layers to your `resources/css/app.css`: @tailwind utilities; ``` -Create a `postcss.config.js` file in the root of your project and register Tailwind CSS and Autoprefixer as plugins: +Create a `postcss.config.js` file in the root of your project and register Tailwind CSS, PostCSS Nesting and Autoprefixer as plugins: ```js export default { plugins: { + 'tailwindcss/nesting': 'postcss-nesting', tailwindcss: {}, autoprefixer: {}, }, diff --git a/packages/panels/docs/11-themes.md b/packages/panels/docs/11-themes.md index bde4fb824a..40e0bb908b 100644 --- a/packages/panels/docs/11-themes.md +++ b/packages/panels/docs/11-themes.md @@ -109,7 +109,7 @@ $panel->font( Filament allows you to change the CSS used to render the UI by compiling a custom stylesheet to replace the default one. This custom stylesheet is called a "theme". -Themes use [Tailwind CSS](https://tailwindcss.com), the Tailwind Forms plugin, the Tailwind Typography plugin, and [Autoprefixer](https://github.com/postcss/autoprefixer). +Themes use [Tailwind CSS](https://tailwindcss.com), the Tailwind Forms plugin, the Tailwind Typography plugin, the [PostCSS Nesting plugin](https://www.npmjs.com/package/postcss-nesting), and [Autoprefixer](https://github.com/postcss/autoprefixer). To create a custom theme for a panel, you can use the `php artisan make:filament-theme` command: diff --git a/packages/panels/src/Commands/MakeThemeCommand.php b/packages/panels/src/Commands/MakeThemeCommand.php index 368bdae6fd..7d72a34266 100644 --- a/packages/panels/src/Commands/MakeThemeCommand.php +++ b/packages/panels/src/Commands/MakeThemeCommand.php @@ -38,7 +38,7 @@ class MakeThemeCommand extends Command default => "{$pm} install", }; - exec("{$installCommand} tailwindcss @tailwindcss/forms @tailwindcss/typography postcss autoprefixer --save-dev"); + exec("{$installCommand} tailwindcss @tailwindcss/forms @tailwindcss/typography postcss postcss-nesting autoprefixer --save-dev"); $panel = $this->argument('panel'); diff --git a/packages/panels/stubs/ThemePostcssConfig.stub b/packages/panels/stubs/ThemePostcssConfig.stub index d41ad63557..9fab088488 100644 --- a/packages/panels/stubs/ThemePostcssConfig.stub +++ b/packages/panels/stubs/ThemePostcssConfig.stub @@ -1,5 +1,6 @@ export default { plugins: { + 'tailwindcss/nesting': 'postcss-nesting', tailwindcss: {}, autoprefixer: {}, }, diff --git a/packages/support/src/Commands/InstallCommand.php b/packages/support/src/Commands/InstallCommand.php index 4d8113337b..9322404258 100644 --- a/packages/support/src/Commands/InstallCommand.php +++ b/packages/support/src/Commands/InstallCommand.php @@ -134,6 +134,7 @@ class InstallCommand extends Command '@tailwindcss/typography' => '^0.5.4', 'autoprefixer' => '^10.4.7', 'postcss' => '^8.4.14', + 'postcss-nesting' => '^12.0.1', 'tailwindcss' => '^3.1', ...Arr::except($packages, [ 'axios', diff --git a/packages/support/stubs/scaffolding/postcss.config.js b/packages/support/stubs/scaffolding/postcss.config.js index d41ad63557..9fab088488 100644 --- a/packages/support/stubs/scaffolding/postcss.config.js +++ b/packages/support/stubs/scaffolding/postcss.config.js @@ -1,5 +1,6 @@ export default { plugins: { + 'tailwindcss/nesting': 'postcss-nesting', tailwindcss: {}, autoprefixer: {}, }, diff --git a/packages/tables/docs/01-installation.md b/packages/tables/docs/01-installation.md index 307b1aaf5e..363b9365cc 100644 --- a/packages/tables/docs/01-installation.md +++ b/packages/tables/docs/01-installation.md @@ -50,7 +50,7 @@ php artisan filament:install --tables Run the following command to install Tailwind CSS with the Tailwind Forms and Typography plugins: ```bash -npm install tailwindcss @tailwindcss/forms @tailwindcss/typography postcss autoprefixer --save-dev +npm install tailwindcss @tailwindcss/forms @tailwindcss/typography postcss postcss-nesting autoprefixer --save-dev ``` Create a new `tailwind.config.js` file and add the Filament `preset` *(includes the Filament color scheme and the required Tailwind plugins)*: @@ -78,11 +78,12 @@ Add Tailwind's CSS layers to your `resources/css/app.css`: @tailwind utilities; ``` -Create a `postcss.config.js` file in the root of your project and register Tailwind CSS and Autoprefixer as plugins: +Create a `postcss.config.js` file in the root of your project and register Tailwind CSS, PostCSS Nesting and Autoprefixer as plugins: ```js export default { plugins: { + 'tailwindcss/nesting': 'postcss-nesting', tailwindcss: {}, autoprefixer: {}, }, diff --git a/packages/widgets/docs/01-installation.md b/packages/widgets/docs/01-installation.md index 5a85071c2a..8f63751ab7 100644 --- a/packages/widgets/docs/01-installation.md +++ b/packages/widgets/docs/01-installation.md @@ -50,7 +50,7 @@ php artisan filament:install --widgets Run the following command to install Tailwind CSS with the Tailwind Forms and Typography plugins: ```bash -npm install tailwindcss @tailwindcss/forms @tailwindcss/typography postcss autoprefixer --save-dev +npm install tailwindcss @tailwindcss/forms @tailwindcss/typography postcss postcss-nesting autoprefixer --save-dev ``` Create a new `tailwind.config.js` file and add the Filament `preset` *(includes the Filament color scheme and the required Tailwind plugins)*: @@ -78,11 +78,12 @@ Add Tailwind's CSS layers to your `resources/css/app.css`: @tailwind utilities; ``` -Create a `postcss.config.js` file in the root of your project and register Tailwind CSS and Autoprefixer as plugins: +Create a `postcss.config.js` file in the root of your project and register Tailwind CSS, PostCSS Nesting and Autoprefixer as plugins: ```js export default { plugins: { + 'tailwindcss/nesting': 'postcss-nesting', tailwindcss: {}, autoprefixer: {}, },