Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 10:45
    deadcoder0904 commented #1519
  • 10:37
    karlhorky commented #1519
  • 10:34
    jaydenseric commented #1519
  • 10:33
    ai commented #1519
  • 10:30
    deadcoder0904 commented #1519
  • 10:26
    ai commented #1519
  • 10:25
    deadcoder0904 commented #1519
  • 10:19
    ai closed #1519
  • 10:19
    ai commented #1519
  • 10:19
    deadcoder0904 commented #1564
  • 10:18
    ai commented #1564
  • 10:18
    ai closed #1564
  • 09:50
    deadcoder0904 commented #1519
  • 09:41
    deadcoder0904 commented #1564
  • 08:57
    marcofranssen opened #1564
  • Apr 22 15:54
    ai closed #1562
  • Apr 22 15:54
    ai commented #1562
  • Apr 22 15:54
    czue commented #1561
  • Apr 22 15:52
    jsg2021 opened #1562
  • Apr 22 15:51
    ai commented #1561
Adir Dee
@dirad
Hey! Im using Parcel to pack some css, very simple setup. but i dont understand why my font-face urls are being changed to root, with some identifying string. How do i control this?
src: url('../../fonts/NBE-Regular.eot'); --> src: url("/NBE-Regular.f90b15ca.eot");
7 replies
xkem
@xkem

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
KimSeonghyeon
@seonghyeonkimm
Hello. I am using tailwind with postcss. postcss-preset-env ( stage: 0 option is enabled) does not make fallback of css variables. is there anyone who experiences this like me? \
2 replies
Adir Dee
@dirad
:wave: how should i make postcss-rtl work using parcel? i added it to my 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')
    ]
  };
2 replies
Gavin McFarland
@limitlessloop
Hello PostCSS community. Long time no see. I have a question. Is it possible to get the file name of the current CSS file being processed from the PostCSS plugin API?
5 replies
Tatyana.M
@tanyamelesh_gitlab
image.png
7 replies

hello everyone!
Did somebody see error like this?

Thank you for attention ^___^

I use tailwindcss 2.0.3 and postcss 8.1.10
Jelmer
@jelmerdemaat
Hi! I am interested in developing a postcss plugin (similar to https://github.com/SassNinja/postcss-extract-media-query/ but custom to my own liking). I'm trying to find out how I can create multiple output files from 1 input file, but it seems this is not a standard thing to do. Are the any up-to-date resources/examples that do such a thing via the postcss API?
5 replies
Vance
@vancerbtw_twitter
image.png
I am getting a strange error
daniel g. siegel
@dgsiegel
Hi, I've installed postcss-cli and postcss-preset-env globally. When I want to use it, it fails with "Error: Cannot find module 'postcss-preset-env'". However, when I install postcss-preset-env in the local directory, it works. Any hints on what the issue could be?
5 replies
Carey Hoffman
@th3coop
Hello all, has anyone else come across an issue where installing the Postcss language server in VS code causes all other CSS completions to no longer work?
2 replies
majo44
@majo44
Hello, just want to notify about release of postcss-es-modules, postcss plugin which transform css files in to the .js/.ts css modules. https://majo44.github.io/postcss-es-modules/ . Few examples of usage within the repo/docs. Best regards :) .
9 replies
iniatse
@iniatse
hello

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
Jonathan Neal
@jonathantneal
Is there a PostCSS discord?
5 replies
Jonathan Neal
@jonathantneal

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 = true

2️⃣ 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
Jonathan Neal
@jonathantneal

I see that PostCSS supports Node v10. Is it recommended that plugins also supports Node v10? Or can they support the current LTS v14 and still be considered in good standing?

NodeJS Releases

2 replies
Wojciech Smoliński
@wojsmol
How to convert this plugin to postcss 8?
// PostCSS plugin to append !important to every CSS rule
const veryimportant = postcss.plugin("veryimportant", function () {
    return function (css) {
        css.walkDecls(function (decl) {
            decl.important = true;
        });
    };
});
12 replies
Igor Spasić
@igr
const p = postcss().use(autoprefixer);
const cssProcessor = cssnano({
  preset: ['default', SpigConfig.config.cssnano],
})
p.use(cssProcessor);
why this does not work?
it used to work
Andrey Sitnik
@ai
Sorry, have no idea
Igor Spasić
@igr
Its something with new TS, saying that cssProcessor is not ApprovedPlugin
Pat Cavit
@tivac
Is there a recommended pattern for avoiding infinite loops when using the new visitor APIs in 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
Gavin McFarland
@limitlessloop
Hi with posts-load-config is there a way to avoid it erroring if a config file can’t be found?
5 replies
Roneryo
@Roneryo
im really new with postcss
10 replies
Where can I start?
and at gitter too heh
Mikhail Menshikov
@ixth
Hi, guys! I'm writing a postcss plugin. How bad is it to use require('postcss/lib/list') in it?
4 replies
Mikhail Menshikov
@ixth
Another question related to plugins. My plugin always adds some rules at the end of file, so, when combined, css bundles has many repeated rules. What’s the common workaround for that?
1 reply
Kirsten Cassidy
@mantismamita

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',
    },
  }),
};
46 replies
Roberto Wesley Overdijk
@RWOverdijk

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
Also for context I am building a widget that uses preact and shadow dom. I want to either embed the css in my index file or load it dynamically. Is using css modules the best approach here? How would you do it? This is day 5 of a doubt riddled search for a solution and I don't know anymore. :sweat_smile:
Roberto Wesley Overdijk
@RWOverdijk
Okay I think I have everything working (sass and css modules). Now I need to redirect all that css into a single file. Would that be mini-css-extract-plugin?
3 replies
Markus
@kuserich

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
John
@JohnBabenko

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
Niklas Keller
@kelunik
Hey, I want to write a plugin to collect all colors and include them into a living styleguide. I've based it on https://github.com/SlexAxton/css-colorguard and converted it to the new API. I've included it in our webpack build, but is there a standard way to write files or should I just use the standard Node APIs to write such an additional file?
2 replies
Allelujahhh
@Allelujahhh
图片.png
3 replies
Hi, I'm new to postcss, and there is an error when I was installing postcss-cli:
I cannot find the PostCSS8.0.0 or 8.1.0. Has anyone met the same error and sovled it?
Jonathan Neal
@jonathantneal
I’m going to try again today.
Eric Chen
@Airkro
how to create a preset in PostCSS8.x
1 reply
Abhinav Preetu
@abhinavpreetu
Hello, I'm building a plugin which modifies a declaration based on a condition. Can someone please suggest the best way to modify the source file after making changes to the declaration. One way is to add the updated CSS to result.css and then use fs.writeFile() to modify the source. But, is there a better approach?
3 replies
Vera
@potatbut
image.png
5 replies
Hello! Can anyone help with this issue? :(
Vera
@potatbut
image.png
Ryan Zimmerman
@RyanZim
Who maintains postcss-browser-comments? csstools/postcss-browser-comments#4
1 reply
Gavin McFarland
@limitlessloop
Hi, does anyone know how to get the scoped class name that 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
alexgagnon
@alexgagnon

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