Postcss - Color Function Plugin - "Unable to Parse Color from String"

Postcss - color function plugin - Unable to parse color from string

The error, although not descriptive, is indicating that the , is unneeded. This follows future CSS (proposed) spec, but can be a nasty habit to drop if you come from any other language.

The solution is simply to remove the ,'s:

& a {
    color: color(var(--blue) l(-20%));
    &:hover {
        color: color(var(--blue) l(0%));
    }
}

Should postcss plugins reference postcss as a peer dependency?

Postcss-sass-color-functions is no longer maintained as mentioned in their repository.

You can use postcss-preset-env instead with color-mod-function enabled to do the same.

You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser after Angular 12 update

For those of you finding this right after updating to Angular 12 be sure to carefully read the Angular 12 Update Guide.

The relevant section is :

Critical CSS inlining is now enabled by default. To turn this off, set
inlineCritical to false. See PR #20096 and the Style preprocessor
options section of Angular workspace configuration.

What it's doing is actually looking at your index.html file and inspecting stylesheet entries, then trying to include them in the source.

As some others have said setting optimization: false can solve the problem - but I'm guessing you didn't do your bundle size any favors with that one!

Instead you can change inlineCritical to false which you can do by setting something like this. See the full configuration for optimization.

"optimization": {
  "scripts": true,
  "styles": {
    "minify": true,
    "inlineCritical": false
  },
  "fonts": true
}

Another possibly relevant change in Angular 12 is the inlineStyleLanguage option.

CSSNext postcss-custom-media - unable to import medias from file with 'importFrom' option

Okay so as per postcss-custom-media CHANGELOG importFrom was added only in 7.0.0 while my cssnext uses 6.0.0. As CSSNext is deprecated I will switch to postcss-preset-env

NextJS - Not Able To Use Custom Colors In Tailwind CSS In

In order to use the arbitrary value syntax (with the square brackets), you need to enable JIT mode and ensure you are on Tailwind 2.1 or greater. This will compile the CSS on-demand, which allows you to use the square bracket syntax and "break out" of your design system.

See the Tailwind docs for more info on JIT mode.

To enable JIT mode:

// tailwind.config.js
module.exports = {
  mode: 'jit', // add this
  purge: [
  // ...
  ],
  theme: {
    // ...
  }
  // ...
}

Unable to build Nuxt due to a problem with PostCSS when using Bulma and Buefy (nuxt-buefy)

Extreme forensic Googling lead us to this GitHub post here: https://github.com/jgthms/bulma/issues/1190#issuecomment-356672849

It contains nice detail about how the error occurred, and the solution is quite simple.

You have two choices.

1. Suppress the build warning in your Nuxt config;

2. Disable variable-columns in Bulma.

We recommend suppressing the build warning in your Nuxt config because it allows variable-columns to still work, and this option is good unless you require to support old browsers that don't support scoped CSS variables. Read the above GitHub post to learn more.

To disable the warning, modify your nuxt.config.js file like this:

  build: {
    transpile: ['vee-validate'],
    postcss: {
      plugins: {
        "postcss-custom-properties": false
      },
    },
  }

If you must support older browsers, it could be better to modify your main.scss file like this:

// bulma/buefy overrides
$family-sans-serif: "Open Sans", "Arial", sans-serif !important;

$input-border-color: white;
$input-shadow: none;
$input-radius: 0px;

$variable-columns: false;

// Import bulma styles
@import "~bulma";

// Import buefy styles
@import "~buefy/src/scss/buefy";

Error: PostCSS plugin tailwindcss requires PostCSS 8

You're integrating Tailwind with a tool that relies on an older version of PostCSS. You can use this doc https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

---

Related Topics