Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jun 18 05:19
    ai commented #1606
  • Jun 18 05:15
    justinfagnani commented #1606
  • Jun 18 05:13
    ai closed #1606
  • Jun 18 05:13
    ai commented #1606
  • Jun 18 05:12
    ai commented #1606
  • Jun 18 05:09
    ai commented #1605
  • Jun 18 05:08

    ai on main

    Fix duplicate changelog Merge pull request #1605 from m… (compare)

  • Jun 18 05:08
    ai closed #1605
  • Jun 18 03:13
    justinfagnani opened #1606
  • Jun 18 01:21
    megos opened #1605
  • Jun 17 10:57
    ignat commented #1455
  • Jun 17 10:30
    ignat commented #1455
  • Jun 17 03:25

    ai on 8.3.5

    (compare)

  • Jun 17 03:25

    ai on main

    Release 8.3.5 version (compare)

  • Jun 17 03:23

    ai on main

    Update dependencies (compare)

  • Jun 17 03:19

    ai on main

    Set my flag after changing prot… (compare)

  • Jun 17 01:57
    wzjiscode commented #1604
  • Jun 16 15:14
    ai closed #1604
  • Jun 16 15:14
    ai commented #1604
  • Jun 16 11:42
    wzjiscode opened #1604
Jonathan Neal
@jonathantneal
@RyanZim, I maintain postcss-browser-comments. I recently updated the plugin to work with PostCSS v8.
Jonathan Neal
@jonathantneal

How does one use PostCSS v8 plugins in NextJS? Is it possible?

I’m seeing PostCSS v8 warnings if a plugin uses postcss.plugin, yet v8-style plugins throw over plugin.postcss being true instead of a v7-style function.

8 replies
Jonathan Neal
@jonathantneal
:point_up: Just want to let everyone know that my issue was that I was using NextJS 9. Switching to NextJS 10 solved my issue.
Jack McNicol
@jackmcpickle
Just published - https://github.com/jackmcpickle/postcss-include-media managed to get it written all in TS, Although it was painful to find the right plugin types in Postcss.
pm64
@pm64
Hey friends. I'm using gulp-postcss, and from what I can tell, it doesn't seem possible to use gulp-postcss to launch PostCSS in "watch mode" (as when passing the "-w" switch to postcss-cli). Can anyone confirm this limitation?
3 replies
Jonathan Neal
@jonathantneal
Is there a guide for using PostCSS in the browser?
pm64
@pm64
@jonathantneal
I'm not aware of any guide like that, but is there a specific thing you're trying to do?
Andrey Sitnik
@ai
There is no guide like this since it is rare use case. For my taste (as author of NanoID) PostCSS is too big for client size bundle (20 KB)
Jonathan Neal
@jonathantneal
I understand. This would be for plugin demonstration. There’s no other tool that comes close to PostCSS. :smile:
Ryan Zimmerman
@RyanZim
@jonathantneal I built a plugin demonstrator awhile back: https://github.com/RyanZim/postcss-repl
Haven't updated it to postcss v8, though, so I don't know how that changes things
BTW, if somebody wants to step up and maintain that, happy to give access.
pm64
@pm64
@RyanZim that looks awesome, is there a demo published anywhere?
1 reply
alexgagnon
@alexgagnon
@ai (or anyone!), I'm taking a look at updating that custom-media plugin to use AtRule instead of Once. One thing I'm not sure of is that in this case it seems we'd need to do a first pass to store the 'custom-media' values, and then we can apply that using AtRule: {media: {...}} (I think). If that's true, how do I do that first pass?
17 replies
Dorian
@Dorianslavov
Guys, any idea why postcss plugins might not be working on vue-cli-3 project. I've registered them & imported index.css ( which imports other .pcss files ) in main.js but nothing seems to make it work.
1 reply
Tyler Greene
@19D
postcss is breaking sonarqube and impacting a react application. is there any updates that can help?
1 reply
Mohammed Khellafi
@mohakhlf

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()
1 reply
Ghost
@ghost~609b7ab96da03739847c6c18
seeing 80 vulnerabilities after npm install and npm audit. It says moderate vulnerabilties for postcss versions 7.0.0 to 8.2.9. However I have upgraded postcss version to 8.2.15.
9 replies
How do I fix these vulnerabilities?
Following are the dependencies:
"dependencies": {
"@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"
node version: 14.16.1
npm version: 7.12.0
Ricky11
@ricky11
hI all does postcss-preset-env cover postcss-custom-properties? so i dont need to install both just the -present-env ?
Tyler Greene
@19D
npm-force-resolutions doesn't seem to work on postcss. ugh.
Jesus The Hun
@JesusTheHun
hi, I'm writing a plugin and when I walk on a rule that have several selectors a, h1 {}, the rule has no property selectors. Should I parse the string myself or is there a reason the selectors prop does not exist ?
4 replies
Right now I'm using the Once (root) approach, once it works I'll try to make it more efficient
Jesus The Hun
@JesusTheHun
It would be nice if using walkRules with a regex passed the matching string to the callback
Maarten Dings
@mdings

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
Maarten Dings
@mdings
for some reason I can't get the pseudo element to be appended to the parent selector
any thoughts?
victordc55
@victordc55
Hi,
victordc55
@victordc55

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: infinite

After 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
Ludovico Fischer
@ludofischer
Since I've learnt that sylelint are considering using the PostCSS 8 visitor API, I am wondering what would be the best way to ensure that groups of plugins run in a certain order. Suppose someone used both Stylelint and cssnano and both used the visitor API. Then sometimes Stylelint rules would run again after cssnano modified the tree, but that makes no sense as you never want to lint the minifier output. So I was thinking of an API where you could define multiple passes over the AST and assign group of plugins to each pass, so plugins in a group would only run after the plugins in the other group are not changing the AST any more. Does anyone else feel this is a problem? What would be alternative solutions?
3 replies
Abhinav Preetu
@abhinavpreetu

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);
}
13 replies
Jonathan Neal
@jonathantneal
What is the minimum recommended NodeJS compatibility for PostCSS plugins? v12? v14?
5 replies
Kirsten Cassidy
@mantismamita

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
Kirsten Cassidy
@mantismamita

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
pm64
@pm64
Hey folks, I'm using PostCSS in my project, in order to power Tailwind CSS
I'd like to define some classes in the following manner (ignore the syntax, this is just pseudocode):
.foo {
    height: 10px;
}

.bar {
    width: 15px;
}

div.myclass >  .combined {
    @include .foo
    @include .bar
}
Basically combining the styles from existing classes .. Is this possible out of the box with PostCSS? If not, what is the easiest way to achieve such functionality?
17 replies
pm64
@pm64
@ai see reply in thread
pm64
@pm64
https://github.com/csstools/postcss-extend-rule doesn't appear to be under active development. What's the preferred way of adding @extend support to PostCSS?
4 replies
Mike Botsko
@viveleroi
I'm using postcss for tailwind with parcel v2. The output css is complete but classnames are all changed, bg-indigo-900 becomes _bg-indigo-900_697b24, but our html isn't modified so none of the css applies. I'm not sure what I could be missing
8 replies
Ivan Jeremic
@ivanjeremic
Hi all, I have in my mini framework js objects that currently make inline styles for each component they look like this 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
Arsalan
@rajaarsal
Hi all, I am really stuck --watch is not working with --replace.
"post-css": "postcss src/*/.{css,scss,sass} --watch --replace",
7 replies
any suggestion
Denis Muhortov
@MukhortovDenis
Hi, I was given a specific task to find analogs of PostCSS for Golang, I found https://github.com/ysugimoto/gssp but this repository is very old, as far as it is possible to use it in comparison with postcss?