opensource/filament
3
0
Fork 0
mirror of https://github.com/filamentphp/filament.git synced 2026-09-24 15:42:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add PostCSS Nesting plugin

Browse Source
This commit is contained in:
Zep Fietje
2023-12-15 20:26:49 +01:00
parent 49eb9e8f46
commit 7264aad584
15 changed files with 97 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs-assets/app/package.json
+1
View File
@@ -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"
docs-assets/app/postcss.config.js
+1
View File
@@ -1,5 +1,6 @@
export default {
plugins: {
'tailwindcss/nesting': 'postcss-nesting',
tailwindcss: {},
autoprefixer: {},
},
package-lock.json
Generated
+71 -9
View File
@@ -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",
package.json
+1
View File
@@ -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",
packages/actions/docs/01-installation.md
+3 -2
View File
@@ -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: {},
},
packages/forms/docs/01-installation.md
+3 -2
View File
@@ -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: {},
},
packages/infolists/docs/01-installation.md
+3 -2
View File
@@ -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: {},
},
packages/notifications/docs/01-installation.md
+3 -2
View File
@@ -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: {},
},
packages/panels/docs/11-themes.md
+1 -1
View File
@@ -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:
packages/panels/src/Commands/MakeThemeCommand.php
+1 -1
View File
@@ -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');
packages/panels/stubs/ThemePostcssConfig.stub
+1
View File
@@ -1,5 +1,6 @@
export default {
plugins: {
'tailwindcss/nesting': 'postcss-nesting',
tailwindcss: {},
autoprefixer: {},
},
packages/support/src/Commands/InstallCommand.php
+1
View File
@@ -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',
packages/support/stubs/scaffolding/postcss.config.js
+1
View File
@@ -1,5 +1,6 @@
export default {
plugins: {
'tailwindcss/nesting': 'postcss-nesting',
tailwindcss: {},
autoprefixer: {},
},
packages/tables/docs/01-installation.md
+3 -2
View File
@@ -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: {},
},
packages/widgets/docs/01-installation.md
+3 -2
View File
@@ -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: {},
},