Incorrect warning/error when @layer is used before @import

[tounsoo]

Describe the bug

I'm using @layer on my .css file but to have enforce the order of layer properly, the layers have to be defined before its use. When I put @layer order defined above @import, I'm getting the follow error which indicates that it should work but still gives the error.

It says aside from @charset and @layer statement which is my case but error keeps showing up. You can check out the reproduction for more testing.

Reproduction

https://stackblitz.com/edit/vitejs-vite-osezjn?file=style.css

Steps to reproduce

Run npm install and npm run dev

System Info

Not sure why but above code to output did not work for me

Used Package Manager

pnpm

Logs

Click to expand!

  vite:config bundled config file loaded in 444.25ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'vite:build-metadata',
  vite:config     'vite:watch-package-data',
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:react-babel',
  vite:config     'vite:react-refresh',
  vite:config     'vite:dts',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm-helper',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:wasm-fallback',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:force-systemjs-wrap-complete',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'vite:dynamic-import-vars',
  vite:config     'vite:import-glob',
  vite:config     'vite:lib-inject-css',
  vite:config     'vite:build-import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter',
  vite:config     'vite:load-fallback'
  vite:config   ],
  vite:config   css: { transformer: 'lightningcss', lightningcss: { targets: [Object] } },
  vite:config   build: {
  vite:config     target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: true,
  vite:config     rollupOptions: { external: [Array], output: [Object], onwarn: [Function: onwarn] },
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     copyPublicDir: true,
  vite:config     manifest: false,
  vite:config     lib: { entry: [Object], name: 'MyLib', fileName: 'my-lib' },
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     ssrEmitAssets: true,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     cssMinify: 'lightningcss',
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
  vite:config     modulePreload: { polyfill: true }
  vite:config   },
  vite:config   optimizeDeps: {
  vite:config     holdUntilCrawlEnd: true,
  vite:config     exclude: [ 'storybook' ],
  vite:config     esbuildOptions: { preserveSymlinks: false, jsx: 'automatic' },
  vite:config     include: [
  vite:config       'react',
  vite:config       'react/jsx-dev-runtime',
  vite:config       'react/jsx-runtime',
  vite:config       'react/compiler-runtime'
  vite:config     ]
  vite:config   },
  vite:config   esbuild: { jsxDev: false, jsx: 'automatic', jsxImportSource: undefined },
  vite:config   resolve: {
  vite:config     mainFields: [ 'browser', 'module', 'jsnext:main', 'jsnext' ],
  vite:config     conditions: [],
  vite:config     extensions: [
  vite:config       '.mjs',  '.js',
  vite:config       '.mts',  '.ts',
  vite:config       '.jsx',  '.tsx',
  vite:config       '.json'
  vite:config     ],
  vite:config     dedupe: [ 'react', 'react-dom' ],
  vite:config     preserveSymlinks: false,
  vite:config     alias: [ [Object], [Object] ]
  vite:config   },
  vite:config   configFile: '/Users/ben/Projects/pretty3a/vite.config.ts',
  vite:config   configFileDependencies: [ '/Users/ben/Projects/pretty3a/vite.config.ts' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     build: {}
  vite:config   },
  vite:config   root: '/Users/ben/Projects/pretty3a',
  vite:config   base: '/',
  vite:config   rawBase: '/',
  vite:config   publicDir: '/Users/ben/Projects/pretty3a/public',
  vite:config   cacheDir: '/Users/ben/Projects/pretty3a/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   ssr: {
  vite:config     target: 'node',
  vite:config     optimizeDeps: { noDiscovery: true, esbuildOptions: [Object] }
  vite:config   },
  vite:config   isWorker: false,
  vite:config   mainConfig: null,
  vite:config   bundleChain: [],
  vite:config   isProduction: true,
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     sourcemapIgnoreList: [Function: isInNodeModules$1],
  vite:config     middlewareMode: false,
  vite:config     fs: {
  vite:config       strict: true,
  vite:config       allow: [Array],
  vite:config       deny: [Array],
  vite:config       cachedChecks: undefined
  vite:config     }
  vite:config   },
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: undefined,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   envDir: '/Users/ben/Projects/pretty3a',
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   packageCache: Map(1) {
  vite:config     'fnpd_/Users/ben/Projects/pretty3a' => {
  vite:config       dir: '/Users/ben/Projects/pretty3a',
  vite:config       data: [Object],
  vite:config       hasSideEffects: [Function: hasSideEffects],
  vite:config       webResolvedImports: {},
  vite:config       nodeResolvedImports: {},
  vite:config       setResolvedCache: [Function: setResolvedCache],
  vite:config       getResolvedCache: [Function: getResolvedCache]
  vite:config     },
  vite:config     set: [Function (anonymous)]
  vite:config   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   worker: { format: 'iife', plugins: '() => plugins', rollupOptions: {} },
  vite:config   appType: 'spa',
  vite:config   experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false },
  vite:config   getSortedPlugins: [Function: getSortedPlugins],
  vite:config   getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config } +15ms
vite v5.2.12 building for production...
✓ 16 modules transformed.
x Build failed in 689ms
error during build:
[vite:css] @import rules must precede all rules aside from @charset and @layer statements
file: /Users/ben/Projects/pretty3a/lib/ThemeProvider/ThemeProvider.module.css:5:8
SyntaxError: @import rules must precede all rules aside from @charset and @layer statements
 ELIFECYCLE  Command failed with exit code 1.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-osezjn (Open reproduction)

[bluwy]

I'm not getting the same error with the repro:

[vite:css] @import must precede all other statements (besides @charset or empty @layer)
3  |  @layer reset, base, variant, state, component;
4  |  
5  |  @import url(./tester.css) layer(base);
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
6  |  
7  |  :root {

I get this warning, and the wording is slightly different from what you're showing. Is there some other configuration that causes it?

[tounsoo]

@bluwy Not sure why the wording is different and its just a warning and not an error, but it seems like its the one.

[tounsoo]

Here's the full error when I run Vite build on my local

> tsc && vite build

vite v5.2.13 building for production...
✓ 11 modules transformed.
x Build failed in 730ms
error during build:
[vite:css] @import rules must precede all rules aside from @charset and @layer statements
file: /Users/ben/Projects/pretty3a/lib/ThemeProvider/ThemeProvider.module.css:4:8
SyntaxError: @import rules must precede all rules aside from @charset and @layer statements
 ELIFECYCLE  Command failed with exit code 1.

[tounsoo]

@bluwy Did above help?

[bluwy]

Not much unfortunately. I don't know the code that could have trigger the error instead of a warning for me. It's hard to debug from there on.

[tounsoo]

@bluwy The warning is also incorrect. I'm assuming it could be something on my config that is considering that same warning as an error but it looks like its from the same issue where the [vite:css]'s logic considers using @layer above @import to be incorrect, although it says it can be.

Here's my config for reference:

import { resolve } from 'path'
import { defineConfig } from 'vite'
import { libInjectCss } from 'vite-plugin-lib-inject-css'
import dts from 'vite-plugin-dts'
import react from '@vitejs/plugin-react'

const ReactCompilerConfig = {
  sources: (filename: string) => {
    return filename.indexOf('src/path/to/dir') !== -1;
  },
};

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          ["babel-plugin-react-compiler", ReactCompilerConfig],
        ],
      },
    }),
    libInjectCss(),
    dts({
      exclude: ['**/*.stories.tsx']
    })
  ],
  css: {
    transformer: 'lightningcss',
  },
  build: {
    sourcemap: true,
    cssMinify: 'lightningcss',
    lib: {
      // Could also be a dictionary or array of multiple entry points
      entry: {
        index: resolve(__dirname, 'lib/main.ts'),
        button: resolve(__dirname, 'lib/Button/index.ts'),
      },
      name: 'MyLib',
      // the proper extensions will be added
      fileName: 'my-lib',
    },
    rollupOptions: {
      // make sure to externalize deps that shouldn't be bundled
      // into your library
      external: ['react'],
      output: {
        // Put chunk files at <output>/chunks
        chunkFileNames: 'chunks/[name].[hash].[format]',
        // Put chunk styles at <output>/assets
        assetFileNames: 'assets/[name][extname]',
        entryFileNames: '[name].[format]',
        // Provide global variables to use in the UMD build
        // for externalized deps
        globals: {
          react: 'React',
        },
      },
    },
  },
  optimizeDeps: {
    exclude: ['storybook']
  }
})

[tounsoo]

@bluwy I tried to see if I can find where the error handling was but seems like vite:css is not pubic and I can't check them out. Let me know if there's anything else I can provide to fix the incorrect warning/error.

[tounsoo]

bump!

[sapphi-red]

By adding css.transformer: 'lightningcss' to the config, the error was reproduced. Please make sure the reproduction actually reproduces next time.

These warning/error messages are incorrect (postcss/postcss-import#566, parcel-bundler/lightningcss#803), but your CSS code is incorrect as well.

The spec disallows having @layer between @import.

I'm not familiar with CSS layers but probably the following CSS would achieve what you want to do.

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@100;200;300;400;500;600;700&display=swap') layer(font);
@import url(./tester.css) layer(base);

@layer font, reset, base, variant, state, component;

Closing as this is not a bug in Vite.

[tounsoo]

I needed the @import url(./tester.css) layer(base); to be after @layer rule so following worked

@layer reset, base, variant, state, component;
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@100;200;300;400;500;600;700&display=swap');
@import url(./tester.css) layer(base);

Fyi, I was able to reproduce the warning without having css.transformer being set to lightningcss, I'm not sure why it didn't reproduce for you. Might be another issue.

Also, I think the warning message is helpful in finding out how to fix the issue. I would suggest making the message clearer or even just adding the spec link would have helped me resolve.