filament: After update to 2.12.6 npm run dev fails with error

Package

filament/forms

Package Version

2.12.6

Laravel Version

9.12.2 (with Jetstream)

Livewire Version

2.10.5

PHP Version

8.1.5

Bug description

Upgraded composer deps, currently running latest filament/forms package. When running npm run dev after upgrade it throws an exception:

/vendor/filament/forms/dist/module.esm.css The 'border-primary-600' class does not exist.

Steps to reproduce

No response

Relevant log output

npm run dev

> dev
> npm run development


> development
> mix


✖ Mix
  Compiled with some errors in 1.60s


warn - The RTL features in Tailwind CSS are currently in preview.
warn - Preview features are not covered by semver, and may be improved in breaking ways at any time.
ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(1638:3) /Users/madsem/Sites/valhalla/vendor/filament/forms/dist/module.esm.css The `border-primary-600` class does not exist. If `border-primary-600` is a custom class, make sure it is defined within a `@layer` directive.

  1636 | .is-focused .choices__inner,
  1637 | .is-open .choices__inner {
> 1638 |   @apply border-primary-600 ring-1 ring-inset ring-primary-600;
       |   ^
  1639 | }
  1640 | .choices__list {

    at processResult (/Users/madsem/Sites/valhalla/node_modules/webpack/lib/NormalModule.js:758:19)
    at /Users/madsem/Sites/valhalla/node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/madsem/Sites/valhalla/node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /Users/madsem/Sites/valhalla/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/Users/madsem/Sites/valhalla/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/Users/madsem/Sites/valhalla/node_modules/postcss-loader/dist/index.js:140:7)

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 1
Comments: 21 (11 by maintainers)

Most upvoted comments

Done

danharrin on May 27, 2022

All these colors all of a sudden… lol

it probably looks good now 😂

danharrin on May 12, 2022

I only worked it out by pasting your code into my own and working out which bit broke it

danharrin on May 12, 2022

today’s lesson: if something feels wrong it probably is

how this has not thrown errors before now is bizarre to me lol

danharrin on May 12, 2022

const colors = require("tailwindcss");

needs to be

const colors = require("tailwindcss/colors");

danharrin on May 12, 2022

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ]);

if (mix.inProduction()) {
    mix.version();
}

@import '../../vendor/filament/forms/dist/module.esm.css';

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

.bg-primary-500 {
    background: #2182BF;
}

[x-cloak] { display: none !important; }

madsem on May 12, 2022