kit icon indicating copy to clipboard operation
kit copied to clipboard

CSS variables (with PostCSS) don't seem to work in lib files

Open ishanloya opened this issue 3 years ago • 1 comments

Describe the bug

I'm trying to replace SASS with PostCSS. I have a PostCSS file that contains my CSS variables (e.g. colors, custom media queries etc.). I'm using postcssPresetEnv to enable the following future CSS features: nesting-rules, custom-media-queries and media-query-ranges.

The issue is that CSS variables related to custom media queries work fine in the files present in my routes directory (+page.svelte files) but don't work for files present in the lib directory (components mainly). Also, everything works in dev mode but not in production. Other CSS variables for color work in all files. Not sure if this is a SvelteKit issue, PostCSS issue or something wrong with my config.

Reproduction

Install latest sveltekit and use the PostCSS Svelte adder along with postcssPresetEnv with the following config:

import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-auto';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter()
	},

	preprocess: [
		preprocess({
			postcss: true
		})
	]
};

export default config;

Additionally, I've added lang = "postcss" to all my style tags

Logs

No response

System Info

System:
    OS: macOS 12.5.1
    CPU: (8) x64 Apple M1 Pro
    Memory: 256.03 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.15.1/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
  Browsers:
    Brave Browser: 105.1.43.93
    Firefox: 104.0.2
    Safari: 16.0
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.75
    @sveltejs/kit: next => 1.0.0-next.484
    svelte: ^3.44.0 => 3.50.1
    vite: ^3.1.0 => 3.1.2

Additional Information

postcss.config.cjs:

const autoprefixer = require('autoprefixer');
const postcssPresetEnv = require('postcss-preset-env');

const config = {
	plugins: [
		postcssPresetEnv({
			stage: 3,
			features: {
				'nesting-rules': true,
				'custom-media-queries': true,
				'media-query-ranges': true
			}
		}),
		autoprefixer
	]
};

module.exports = config;

ishanloya avatar Sep 19 '22 16:09 ishanloya

Please include an actual reproduction, as requested in the issue template

Rich-Harris avatar Sep 19 '22 21:09 Rich-Harris

Closing due to inactivity and lack of a proper reproduction.

dummdidumm avatar Jan 10 '23 13:01 dummdidumm