Hello all!
When using postcss-loader I'm getting "FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory"
My css files seem to be recompiling after any change in any file... Would that have something to do with the memory/postcss-loader?
I've no OOM error without postcss-loader, but alas, no css
1 reply
modules.export = { plugins [ ] but im not sure how to added options, as my postcss.config.js is: module.exports = {
plugins: [
require('tailwindcss'),
require('postcss-mixins'),
require('autoprefixer'),
require('postcss-rtl')
]
};
hello everyone!
Did somebody see error like this?
Thank you for attention ^___^
5 replies
5 replies
9 replies
I have trouble to setup postcss. I want to use scss syntax. How do I do that? What mis missing here?
fs.readFile(sourceFile, (err, css) => {
postcss([precss, autoprefixer, postcssDiscardDuplicates,])
.process(css, {
'from': sourceFile,
'to': destinationFile,
})
.then(result => {
fs.writeFile(destinationFile, result.css, () => true);
if (result.map) {
fs.writeFile(destinationFileMap, result.map.toString(), () => true);
}
});
});thx
21 replies
Newbie questions:
1️⃣ Is this a valid way to create a postcss plugin?
export default function postcssNesting() {
return {
postcssPlugin: 'postcss-nesting',
Once(root) {
/* ...functionality goes here */
}
}
}
postcssNesting.postcss = true2️⃣ Is there a valid way to use a class?
export default class PostcssNesting {
/* ...idk */
}Note: I’m using writing-a-plugin.md as a guide.
2 replies
postcss@8? Even some examples of existing plugins that modify a node and then early-out on the re-visit would be cool, I'm not sure what a good comparison would be for my use-case.
6 replies
Hello, I'm having some trouble using importFrom and exportTo with postcssPresetEnv. My custom-media.css file using @custom-mediais imported but not my __customProperties.css file
:root {
--color-grey-100: #f5f5f5;
}I also tried a json file but with no success.
Here is my config file
module.exports = {
preprocess: sveltePreprocess({
postcss: {
plugins: [
require('postcss-import')(),
require('postcss-mixins'),
require('autoprefixer'),
require('postcss-custom-media'),
require('postcss-custom-properties'),
postcssPresetEnv({
stage: 3,
features: {
'custom-media-queries': true,
'nesting-rules': true,
},
importFrom: [
'./src/assets/styles/__customMedia.css',
'./src/assets/styles/__customProperties.css',
'./src/assets/styles/customProperties.json'
],
exportTo: (customProperties, fileContent) => {
console.log(customProperties)
}
}),
require('postcss-nested')(),
require('postcss-global-nested')(),
require('cssnano')({
preset: 'default',
}),
],
},
typescript: {
tsconfigFile: './tsconfig.json',
},
}),
};
I have a pretty noob question... I am using webpack and typescript, and I want to use scss and css modules. I have that working with css-loader. I'm not sure what postcss is, nor do I know if I need to add it. Most all tutorials I find when doing the googles use it. I'm just not sure why. I read the description and it feels like a babel for css but... I don't know.
So in short my question is: when would I need postcss?
25 replies
Hi guys, I'm having issues with postcss-custom-media and postcss-each since PostCSS 8.0. Particularly, the following following CSS code does not seem to be properly processed:
@custom-media --mobile-only (max-width: 767px);
@custom-media --tablet-only (min-width: 768px) and (max-width: 959px);
@custom-media --desktop-only (min-width: 960px) and (max-width: 1151px);
@custom-media --widescreen-only (min-width: 1152px) and (max-width: 1343px);
@custom-media --ultra-widescreen-only (min-width: 1344px);
@each $item in widescreen, desktop, tablet, mobile {
@media (--$(item)-only) {
.hide-$(item) {
display: none;
}
}
}results in
@media (--widescreen-only) {
.hide-widescreen {
display: none;
}
}
@media (--desktop-only) {
.hide-desktop {
display: none;
}
}
@media (--tablet-only) {
.hide-tablet {
display: none;
}
}
@media (--mobile-only) {
.hide-mobile {
display: none;
}
}with only the two plugins mentioned and nothing else.
Has anyone had a similar issue and does anyone happen to know a workaround?
1 reply
Hello, I'm having some question about https://github.com/csstools/postcss-preset-env. In the documentation, I did not find how to throw an error if the code is not valid.
Example, there is no ampersand near the button tag:
.wrapper {
button {
display: flex;
}
}But postcss-preset-env still build invalid code :(
2 replies
2 replies
I cannot find the PostCSS8.0.0 or 8.1.0. Has anyone met the same error and sovled it?
result.css and then use fs.writeFile() to modify the source. But, is there a better approach?
3 replies
postcss-modules generates to use by another postcss plugin? I have a plugin which is a polyfill for flex gap, but currently it generates rules from class name before it is scoped, and therefore it's failing. I’m testing using Next.js which has css modules built-in.
2 replies
Hi there, let's say I have a source from file like the following:
@import './one.css'
@import './two.css'Is there a way only load one.css conditionally? For example, does the postcss JS API function's from property support an array? Or it looks like I might be able to just generate a string that only conditionally contains the @import './one.css part and pass it in as the first argument to the postcss function?
1 reply