17 replies
Error: [object Object] is not a PostCSS plugin on nexjs
- react version: 16.13.1
- NVM: 14.15.0
- Next.js: 10.0.0
- typescript: 4.1.5
next.config.js
const path = require('path')
const withSass = require('@zeit/next-sass');
const withImages = require('next-images')
module.exports = withSass({
/* bydefault config option Read For More Optios
here https://github.com/vercel/next-plugins/tree/master/packages/next-sass*/
cssModules: true
})
module.exports = {
/* Add Your Scss File Folder Path Here */
sassOptions: {
includePaths: [path.join(__dirname, 'styles')],
},
}
module.exports = withImages()
"@testing-library/jest-dom": "^5.12.0",
"@testing-library/react": "^11.2.6",
"@testing-library/user-event": "^13.1.8",
"postcss": "^8.2.15",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
Once (root) approach, once it works I'll try to make it more efficient
Hi I,m writing a plugin where a declaration basekick: Inter 12 5 is being replaced by some other properties. Besides that I also want to add a pseudo selector 'after' to the node that contains the declaration with some properties. It's this part where I'm actually stuck. I have the functionality below. How do I get the the pseudo part working?
Declaration: {
basekick: (node) => {
if (node.parent.some(node => node.prop === 'basekick')) {
node.cloneAfter({
prop: 'margin-bottom',
value:${values[1] 2}px})
node.cloneAfter({
prop: 'padding-top',
value:${values[1] 2}px})
node.remove()
}
}
}
10 replies
I have a problem with postcss in npm, adding # to rules where not needed.
For example, this:
.s-bottom-svg
stroke-dashoffset: 400
stroke-dasharray: 398 400
animation: s-bottom-draw 200ms ease-in-out
animation-delay: 0s
animation-iteration-count: infinite
.s-top-svg
stroke-dashoffset: 400
stroke-dasharray: 398 400
animation: s-top-draw 200ms ease-in-out
animation-delay: 0s
animation-iteration-count: infiniteAfter being processes by postcss, give this:
.s-bottom-svg{animation:s-bottom-draw 2s ease-in-out;animation-delay:0s;animation-iteration-count:infinite}
.s-bottom-svg,.s-top-svg{
stroke-dashoffset:#400;
stroke-dasharray:#398 #400
}
.s-top-svg{animation:s-top-draw 2s ease-in-out;animation-delay:0s;animation-iteration-count:infinite}Using this command:sass ./sass/test.sass ./sass/test.css && postcss ./sass/test.css --replace true
As you can see postcss added a # before each number in the rules stroke-dashoffset and stroke-dasharray.
Any idea what i could do ?
8 replies
3 replies
I have created a plugin in which I have used Declaration event to make some modifications. Then in onceExit event I get the resultant CSS using root.toResult().css. But the problem is the resultant CSS is the stringified version (also includes hashes which my build applies). Is there a way to just get the CSS with just the modified changes (like we get in root.source.input.css)?
I am using rollup-plugin-postcss to run my plugin.
Sample output of root.toResult().css:
".foo__Wkir0 {\n --danger-font: var(--color-red, #ff0000);\n color: var(--danger-font);\n}\n"
}Expected output:
.foo {
--danger-font: var(--color-red, #ff0000);
color: var(--danger-font);
}
Hi, I'm having some build problems when I update caniuse-light.
Unknown error from PostCSS plugin. Your current PostCSS version is 8.1.6, but postcss-preset-env uses 7.0.35. Perhaps this is the source of the error below.
internal/process/promises.js:213
triggerUncaughtException(err, true /* fromPromise */);
^Has anyone else encountered a similar problem?
5 replies
Hello, I am trying to change my postcss.config.js to use module syntax instead of commonjs for use in sveltekit (which requires module syntax). I thought I would just rewrite my postcss.config.js like so
import * as postcssPresetEnv from 'postcss-preset-env';
import * as postcssImport from 'postcss-import';
import * as autoprefixer from 'autoprefixer';
import * as postcssCustomProperties from 'postcss-custom-properties';
import * as postcssNested from 'postcss-nested';
import * as postcssGlobalNested from 'postcss-global-nested';
import * as postcssMixins from 'postcss-mixins';
import * as postcssCustomMedia from 'postcss-custom-media';
import * as cssnano from 'cssnano';
export default {
plugins: [
postcssImport(),
postcssMixins,
autoprefixer,
postcssCustomMedia({
importFrom: [
'./src/assets/styles/__customMedia.css',
]
}),
postcssCustomProperties(),
postcssPresetEnv({
stage: 3,
features: {
'custom-media-queries': true,
'nesting-rules': true,
},
}),
postcssNested(),
postcssGlobalNested(),
cssnano({
preset: 'default',
}),
],
};but I keep getting a ReferenceError: require is not defined when building. Presumably its because the individual plugins use require in turn. Is there an easy way around this that I'm missing ?
8 replies
.foo {
height: 10px;
}
.bar {
width: 15px;
}
div.myclass > .combined {
@include .foo
@include .bar
}
4 replies
style: {
height: "60px",
backgroundColor: "blue",
padding: "10px",
}, the components are client side rendered and the inline styles are that way injected, can I use postcss to grad that style object of each component and build the css? Thanks
3 replies
