Hello,
I've installed the module +
"postcss": "^8.3.0", "postcss-import": "^13.0.0", "postcss-loader": "^4.3.0", "postcss-url": "^10.1.3", "css-loader": "^5.2.6",

And I still get these warnings when I do npm audit
Nuxt version is: 2.15.6

referenced in

Usage is pending for csstools/postcss-preset-env#191

We're trying to update CKEditor5 to v34 in our Nuxt apps. One of the major changes was a switch to PostCSS 8. Following the instructions for this package breaks our build in a peculiar way.

We had it working working with CKEditor5 v33 and PostCSS 7. Our current version of Nuxt is 2.15.8.

The only difference between our previous and current config is the addition of @nuxt/postcss8 in buildModules. Here is the relevant part in our current nuxt.config.ts:

const CKEditorWebpackPlugin = require("@ckeditor/ckeditor5-dev-webpack-plugin");
const { styles } = require("@ckeditor/ckeditor5-dev-utils");

export default {
  // ...
  build: {
    // ...
    transpile: [
      /ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/
    ],
    plugins: [
      new CKEditorWebpackPlugin({
        language: "en",
        additionalLanguages: ['fr'],
        buildAllTranslationsToSeparateFiles: true
      })
    ],
    postcss: styles.getPostCssConfig({
      themeImporter: {
        themePath: require.resolve("@ckeditor/ckeditor5-theme-lark")
      },
      minify: true
    }),
    extend(config) {
      config.module.rules.push({
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
        use: ["raw-loader"]
      });
    }
  },
  buildModules: [
    ["@nuxt/typescript-build", {
      ignoreNotFoundWarnings: true,
      typescript: {
        typeCheck: {
          memoryLimit: 150,
          workers: 1
        }
      }
    }],
    "@nuxtjs/moment",
    '@nuxtjs/gtm',
    "@nuxt/postcss8",
    'vue-browser-detect-plugin/nuxt'
  ],
  // ...
}

The error output when we run nuxt build:

FATAL  Cannot find module '0'
Require stack:
- [...]/platform/clients/event_website/node_modules/@nuxt/core/dist/core.js

  Require stack:
  - node_modules/@nuxt/core/dist/core.js
  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
  at Function.resolve (internal/modules/cjs/helpers.js:107:19)
  at _resolve (node_modules/jiti/dist/jiti.js:1:192841)
  at Resolver.jiti [as _require] (node_modules/jiti/dist/jiti.js:1:195025)
  at Resolver.requireModule (node_modules/@nuxt/core/dist/core.js:381:29)
  at node_modules/@nuxt/webpack/dist/webpack.js:792:58
  at Array.map (<anonymous>)
  at PostcssConfig.loadPlugins (node_modules/@nuxt/webpack/dist/webpack.js:791:10)
  at PostcssConfig.config (node_modules/@nuxt/webpack/dist/webpack.js:830:14)
  at StyleLoader.postcss (node_modules/@nuxt/webpack/dist/webpack.js:909:39)
  at StyleLoader.apply (node_modules/@nuxt/webpack/dist/webpack.js:969:12)
  at WebpackClientConfig.rules (node_modules/@nuxt/webpack/dist/webpack.js:1357:28)
  at WebpackClientConfig.config (node_modules/@nuxt/webpack/dist/webpack.js:1537:21)
  at WebpackClientConfig.config (node_modules/@nuxt/webpack/dist/webpack.js:1708:26)
  at WebpackBundler.getWebpackConfig (node_modules/@nuxt/webpack/dist/webpack.js:2016:19)
  at WebpackBundler.build (node_modules/@nuxt/webpack/dist/webpack.js:2023:12)

If "@nuxt/postcss8" or the postcss configuration postcss: styles.getPostCssConfig({ are removed the error disappears.

The only changes to the dependancies are @nuxt/postcss8 and the various CKEditor5 packages updated to latest. May be worth noting that the exact same error occurs with CKEditor5 v33 as soon as @nuxt/postcss8 is added.

Not sure who needs to fix this, but I posted an issue for it here too: nuxt-modules/storybook#361

The official storybook docs explain how to get PostCSS8 working with Storybook, but I suspect that approach conflicts with this plugin: https://storybook.js.org/addons/@storybook/addon-postcss

Hi,

I am, adding tailwind v.3 to my nuxt2 project. I follow the instruction https://tailwindcss.com/docs/guides/nuxtjs but the thing is that I don't want to have tailwind.config.js file inside my nuxt2 project, but import it from the other repository (above the nuxt project) I'm struggling how and where to pass a proper path.

I need something like with a css example here: css: [require.resolve('@myrepo/design/assets/main.css')],

Can you guide me with this?

 ERROR  (node:34262) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /node_modules/@nuxt/postcss8/node_modules/postcss/package.json.
Update this package.json to use a subpath pattern like "./*".

Related with postcss/postcss#1455

And fixed in the latest postcss: postcss/postcss#1455 (comment)

Resolution would be to update @nuxt/postcss8 to the latest postcss version.

TL;DR; Temporary Fix

You're likely experiencing this issue if you're:

• On Nuxt 2.15.4 or later;
• Using PostCSS 8 (if you're using @nuxtjs/tailwindcss 4, your are).

Disabling icss compile type in your build options should fix the issue (but might introduce others if you're relying on SASS, see: nuxt/nuxt#9014):

// nuxt.config.js
export default {
	/* ... */

	build: {
		loaders: {
			css: {
				modules: false,
			},
		},
	}
}

Versions

• nuxt: v2.15.4 and above (tested on v2.15.8 also)
• node: v16.13.0

About

Hey there, this is a compilation of the following issues (I'm pretty sure they all relate to this one, although debunking may happen):

• nuxt/nuxt#5550 (only comments after this one: nuxt/nuxt#5550 (comment))
• nuxt-modules/tailwindcss#357

Basically what's happening is that HMR is broken on Nuxt builds relying on PostCSS 8 since the change to css-loader compile type on Nuxt 2.15.4:

• Related PR: nuxt/nuxt#9014
• Changelog: https://github.com/nuxt/nuxt.js/releases/tag/v2.15.4

Disabling icss brings HMR back to life.

Reproduction

minimal.zip

Steps to reproduce

1. Download zip and extract
2. Install dependencies with npm (or Yarn, but they are already resolved with npm 😉)
3. Launch dev server
4. Try editing the div's text in ~/pages/index.vue
5. HMR doesn't work

   Testing temporary fix:

6. Uncomment lines 17-23 inside nuxt.config.js
7. Try editing the div's text again in ~/pages/index.vue
8. HMR works

What is Expected?

HMR should be working~

What is actually happening?

HMR doesn't work 😱

Let me know if anything!

Hello,

currently have a lot of postcss-preset-env warnings in dev mode.

With postcss-preset-env@7 the warnings are removed.
Is this a correct fix?

.

This version of postcss-preset-env is not optimised to work with PostCSS 8.
Please update to version 7 of PostCSS Preset Env.

If you find issues, you can report it at: https://github.com/csstools/postcss-plugins/issues/new/choose

Behavior can be recreated with:

1. create new nuxt project (e.g. npm init nuxt-app… )
2. install @nuxt/postcss8
3. update postcss config
4. start dev

nuxt-config.js

export default {
  // Target: https://go.nuxtjs.dev/config-target
  target: 'static',

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'test-postcss',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    "@nuxt/postcss8"
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
  ],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    postcss: {
      plugins: {
        'postcss-preset-env': {
          preserve: true,
          stage: 0
        }
      },
      order: 'cssnanoLast'
    }
  }
}

package.json

{
  "name": "test-postcss",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "core-js": "^3.15.1",
    "nuxt": "^2.15.7"
  },
  "devDependencies": {
    "@nuxt/postcss8": "^1.1.3"
  }
}

Normally when saving a global CSS file in Nuxt the styles are updated via a "hot reload." However, when using the @nuxt/postcss8 module this does not happen and the web page is fully reloaded instead.

Reproduction

1. Clone https://github.com/bradlc/nuxt-postcss8-bug
2. Run npm install
3. Run npm run dev
4. Change the background color in assets/css/main.css
5. Notice that the web page does a full reload instead of a hot reload

Warnings logged in the browser when updating the CSS file

Ignored an update to unaccepted module ./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js?!./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js?!./assets/css/main.css -> ./assets/css/main.css -> ./.nuxt/App.js -> ./.nuxt/index.js -> ./.nuxt/client.js -> 0

[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See https://webpack.js.org/concepts/hot-module-replacement/ for more details.

[HMR]  - ./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--3-oneOf-1-2!./assets/css/main.css

[HMR] Reloading page

Hi, on Nuxt 3.0.0-rc.4,

when trying to install @nuxt/postcss8 I had the following npm error :
npm ERR! code E404 npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types/eslint/-/eslint-8.4.4.tgz - Not found npm ERR! 404 npm ERR! 404 '@types/eslint@https://registry.npmjs.org/@types/eslint/-/eslint-8.4.4.tgz' is not in this registry. npm ERR! 404 You should bug the author to publish it (or use the name yourself!) npm ERR! 404 npm ERR! 404 Note that you can also install from a npm ERR! 404 tarball, folder, http url, or git url.

Test basic fixture

Array syntax for postcss plugins is not supported with v3. Please use the object syntax: https://nuxtjs.org/guides/configuration-glossary/configuration-build#postcss

Action to run tests and lint

I have my files in:

/assets
     /fonts/font.woff
     /styles/fonts.css

Then in nuxt.config.js
css: [ { src: '~assets/styles/fonts.css' } ]

and in my fonts.css:

@font-face {
  font-weight: normal;
  font-family: 'FontName';
  font-style: normal;
  src:
    url('~assets/fonts/font.woff') format('woff');
  font-display: block;
}

and on nuxt dev or nuxt build, I get an error that ./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js cannot resolve ~assets/fonts/font.woff

My workaround has to just put fonts in my /static dir and point to there instead, but I'd rather the fonts get bundled, compressed, and served with gzip.

What am I doing wrong in terms of the pathing? Is the postcss8 module conflicting with nuxt's path resolution?

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

• WARN: Using npm packages for Renovate presets is now deprecated. Please migrate to repository-based presets instead.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): replace devdependency standard-version with commit-and-tag-version ^9.5.0
• chore(deps): update all non-major dependencies (autoprefixer, css-loader, defu, eslint, nuxt, postcss, semver)
• chore(deps): update dependency postcss-import to v16
• chore(deps): update devdependency @nuxtjs/eslint-config-typescript to v12
• chore(deps): update devdependency eslint to v9
• chore(deps): update devdependency nuxt to v3
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update dependency css-loader to v7

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository