kit
kit copied to clipboard
CSS variables (with PostCSS) don't seem to work in lib files
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;
Please include an actual reproduction, as requested in the issue template
Closing due to inactivity and lack of a proper reproduction.