Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 07:33

    ai on 8.3.8

    (compare)

  • 07:33

    ai on main

    Release 8.3.8 version (compare)

  • 07:32

    ai on main

    Update ChangeLog (compare)

  • 07:30

    ai on v7

    Remove eslint-ci (compare)

  • 07:29

    ai on v7

    Release 7.0.38 version (compare)

  • 07:29

    ai on 7.0.38

    (compare)

  • 07:28

    ai on main

    Rebase ChangeLog Update Nano Colors (compare)

  • 07:26

    ai on v7

    Remove development keys from pa… (compare)

  • 07:23

    ai on v7

    Release 7.0.37 version (compare)

  • 07:23

    ai on 7.0.37

    (compare)

  • 06:59

    ai on v7

    Add compilation step (compare)

  • 06:57

    ai on v7

    Move tests to GitHub Actions (compare)

  • 06:55

    ai on v7

    Replace chalk to nanocolors (compare)

  • Sep 22 06:09

    ai on main

    Reduce size limit (compare)

  • Sep 22 06:07

    ai on main

    Add missed author to ChangeLog Fix tests (compare)

  • Sep 22 06:02

    ai on main

    Fix types (compare)

  • Sep 22 05:54

    ai on 8.3.7

    (compare)

  • Sep 22 05:54

    ai on main

    Release 8.3.7 version (compare)

  • Sep 22 05:52

    ai on main

    Update dependencies (compare)

  • Sep 21 11:13

    ai on main

    Replace colorette to nanocolors (compare)

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?
Jon Uhlmann
@jonnitto

I want to change the params of an @import rule. My code looks like this:

const rebasePlugin = () => {
    return {
        postcssPlugin: "postcss-rebase",
        AtRule: {
            import: (atRule) => {
                if (!atRule[processed]) {
                    atRule.params = `"${resolvePath(parseQuoted(atRule.params))}"`;
                    atRule[processed] = true;
                    console.log(atRule);
                }
            },
        },
    };
};
rebasePlugin.postcss = true;

If I read the console.log output the params is correctly changed, but only in the final output. How do I do this that the following plugins take up the new value?

2 replies
Providence-Design
@Providence-Design
Hi all, please am getting this error when I run npm start "./src/index.css
Module build failed: Error: true is not a PostCSS plugin"
@tailwind base;
@tailwind components;
@tailwind utilities; this is what I have in my index.css file
Ryan Zimmerman
@RyanZim
Please post your postcss.config.js
Providence-Design
@Providence-Design
module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
}
Pat Cavit
@tivac
I have a plugin that needs to modify parts of the tree based on other elements in it, which could come before (easy to handle) or after the element. Is there a good pattern for this? I can shove nodes into a Set or something but that feels a little gross so I'm curious if there's a cleaner approach. Feels like something that must have an established pattern within the wider tree-walking world?
2 replies
Ivan Jeremic
@ivanjeremic
I use Vite and I want to write css in template literals color: red; my components are just js objects what do I need to do to generate a class and apply the styles is there something built into postcss I can use?
2 replies
Kevin He
@kevinxh
Hey postcss/cssnano team, we maintain a product that relies on cssnano@v4, for complex reasons, we cannot upgrade to v5, we want to make a contribution to cssnano@v4 to fix a security vulnerability, is that viable? can we still make changes to v4 and do patch releases? thanks for your help!
Kelly Sacks
@sklawren

I'm trying to use Tailwind with NextJS with postcss-nesting. NextJS requires that the postcss.config.js file not use "require" and the only example in Tailwind's docs I can find about how to set up postcss-nesting looks like this:

module.exports = {
    plugins: [
        require('tailwindcss/nesting')(require('postcss-nesting')),
        require('tailwindcss'), 
    ],
};

I don't know how to write the tailwindcss/nesting(postcss-nesting) line in a way that that doesn't use "require".

Can somebody please show me how?

1 reply
Thomas
@alpham8

Hi guys, I'm trying to compile bootstrap with my scss and apply then postcss. But the postcss part isn't working:

let sass = require('sass');
let fs = require('fs');
let path = require('path');
let autoprefixer = require('autoprefixer');
let postcss = require('postcss');
let cssOut = path.join(__dirname + '/../../public/css') + '/all.css';
let cssOutMap = path.join(__dirname + '/../../public/css') + '/all.map';
console.log('cssOut', cssOut);
if (fs.existsSync(path.join(__dirname + '/../../public/css'))) {
    console.log('Directory exists!');
} else {
    console.log('Directory not found.');
}
console.log('after return statement');
let retObj = sass.renderSync(
    {
        file: path.join(__dirname + '/scss') + '/all.scss',
        includePaths: [
            path.join(__dirname + '/node_modules/bootstrap/scss/bootstrap')
        ],
        sourceMap: true,
        outputStyle: 'compressed',
        outFile: cssOut
    }
);
if (retObj instanceof Error) {
    console.warn(retObj.formatted);
} else {
    fs.writeFileSync(cssOut, retObj.css.toString());
    fs.writeFileSync(cssOutMap, retObj.map.toString());
    let postcssPromise = postcss([autoprefixer({grid: 'autoplace', flexbox: false, remove: false})])
        .process(cssOut, {from: undefined});
    postcssPromise.then(result => {
        result.warnings().forEach(warn => {
            console.warn(warn.toString())
        });
        // TODO: Write to disc:
        console.log(result.css)
    }).catch(error => {
        console.warn(error);
    });
}

But if I run:

node sass.js --trace-warnings

It always gives me errors like this:

cssOut /var/www/html/public/css/all.css 
Directory exists! 
after return statement 
CssSyntaxError: <css input>:1:1: Unknown word 
   at Input.error (/var/www/html/templates/assets/node_modules/postcss/lib/input.js:123:16) 
   at Parser.unknownWord (/var/www/html/templates/assets/node_modules/postcss/lib/parser.js:518:22) 
   at Parser.other (/var/www/html/templates/assets/node_modules/postcss/lib/parser.js:149:12) 
   at Parser.parse (/var/www/html/templates/assets/node_modules/postcss/lib/parser.js:59:16) 
   at parse (/var/www/html/templates/assets/node_modules/postcss/lib/parse.js:11:12) 
   at new LazyResult (/var/www/html/templates/assets/node_modules/postcss/lib/lazy-result.js:133:16) 
   at Processor.process (/var/www/html/templates/assets/node_modules/postcss/lib/processor.js:36:12) 
   at Object.<anonymous> (/var/www/html/templates/assets/sass.js:36:102) 
   at Module._compile (internal/modules/cjs/loader.js:1068:30) 
   at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10) { 
 reason: 'Unknown word', 
 source: '/var/www/html/public/css/all.css', 
 line: 1, 
 column: 1, 
 input: { line: 1, column: 1, source: '/var/www/html/public/css/all.css' } 
}

Any idea why? Or do you know how could I maybe do it better? I like that nodejs style instead of putting console commands inside package.json in order to be more cross platform compatible

Or may you tell me please what's the difference between my script and this postcss-cli call?

./node_modules/postcss-cli/bin/postcss --replace ../../public/css/all.css --use autoprefixer --map

Because the above postcss command works with the same produced css file

14 replies
Kirsten Cassidy
@mantismamita
I'm using postcss with vite in svletekit and my postcss.config.js (written in CommonJs) is contradictory to vite's best practices Since Vite uses JavaScript modules it's preferable that dependencies use JavaScript modules as well. While most modern JS packages provide this, some older packages may only provide CommonJS modules. I would prefer therefore to use another config format for plugins rater than renaming the file to cjs and adding technical debt to the project. Preventing this is postcss-cli which has a dependancy in cjs. Can anyone think of another way around this than to create an issue for postcss-cli ?
Kai Blin
@kblin
hi folks. I'm in the process of migrating a website to using tailwindcss, and I thought it'd be neat to also ditch the sass dependency for some custom styles that aren't coming in via tailwind
so I'm trying to use postcss-mixins to build some css definitions, but for all I can see in the resulting css file, the @mixin calls aren't being expanded
Kai Blin
@kblin

So

@define-mixin secmet $fg $bg $highlight {
    background-color: $bg;
    a, a:link, a:visited {
        color: $fg;
    }
    rect& {
        fill: $bg;
        stroke: $highlight
    }
}

.hybrid {
    @mixin secmet midnightblue, lightsteelblue, midnightblue;
}

.pks {
    @mixin secmet purple sandybrown purple;
}

basically ends up in the output css file unchanged.

7 replies
Xavier Zalawa
@7studio
Hi all, I'm stuck with postcss and cssnano. I don't know how to remove the sourcemap comment (e.g.: /*# sourceMappingURL=client-design-system.css.map) in my source to avoid the generation of a sourcemap for the minified version...
I understood that postcss-discard-comments doesn't handle the sourcemap comment but it's seems postcss hasn't no way to remove it too. I tried to pass --map false to the cli but it doesn't work. Can someone help me to solve my problem?
Thank you.
Andrey Sitnik
@ai
@7studio you need --no-map option
Xavier Zalawa
@7studio
@ai I'm sure I tried this option yesterday in my command but it works very well today 😁 Thank you 🙏
Simon
@crydotsnake
Bildschirmfoto 2021-07-30 um 20.55.42.png
1 reply
Hello! Do you guys have any idea what this error could be?
Bonfas-68
@Bonfas-68
Hi guys I am a beginner and I have a problem in installing postcss inorder to add prefixes in my code and I need help
2 replies
warrior
@vin1992
hi guys, I am looking for the document for postcss version 7 , but I cant find it , who can help me
1 reply
please
강동윤
@kdy1
Hi. Is there any postcss plugin that modifies the value of a property?
I want to see how can I modify the value of a property.
2 replies
Kirsten Cassidy
@mantismamita
Hello, I'm working on stylelinting a project and noticed that rgba compiles into the short form of hex colors. Does anyone know which plugin is responsible for this? I'm using postcss-preset-env stage 3. Aternatively, I wouldn't mind all the colors compiling into short form on build as it would mean less css. Any ideas?
3 replies
ppmathis
@ppmathis:snapserv.net
[m]

Hi everyone. I'm trying to use postcss-import, postcss-mixins and tailwindcss together (and called in this order) with Laravel Mix, but unfortunately I am unable to use mixin variables with @apply, as Tailwind will still error out with a message like The text-$(color)-700 class does not exist [...], meaning that Tailwind does not see the processed version where mixins were already handled. I found this issue https://github.com/tailwindlabs/tailwindcss/issues/3931#issuecomment-861411300 at their tracker where a fix was suggested by creating a custom plugin combining postcss-import and postcss-mixins. I applied this fix in my project and Tailwind no longer receives any unprocessed mixins as an input, so this does work per se.

This however causes file watching to no longer properly work in imported files, resulting in changes only being applied when fully restarting Laravel Mix. Is there any better way of grouping plugins together and ensuring that Tailwind always sees the preprocessed output of postcss-mixins where variables have been resolved?

2 replies
Paul
@PurpleVsGreen
Hey guise, sorry if this isn't the right place to ask... I'm trying to convert level 4 :is selectors to level 1 descendant selectors. Is this possible?
Found the relevant issue... csstools/postcss-preset-env#155 okay not /yet/
veeracse519
@veeracse519
Hi I am veera, i am going to change gatsby version 2 to gatsby version 3 . I am getting post-css error
2 replies
John Hildenbiddle
@jhildenbiddle

Hello, PostCSS experts. I have a PostCSS 7 plugin that I planned on updating to leverage PostCSS 8. I'm unsure of the best path forward, so I'm hoping someone can answer the following questions:

1) Does PostCSS v8 support v7 plugins? I assumed the answer was "no" given that I've had other v7 plugins fail when upgrading PostCSS to v8, but I was surprised to see that my plugin worked without issue after the upgrade. I'd much rather leave my plugin as-is and support both v7 and v8 if possible.

2) Is it possible to author a PostCSS plugin as an ES module instead of a CommonJS module? For example, instead of using the recommended boilerplate:

module.exports = (opts = {}) => {
  return {
    postcssPlugin: 'PLUGIN_NAME',
    // ...
  }
}
module.exports.postcss = true

My plugin currently imports other ES6 modules and is then transpiled to ES5 using rollup.js, so I'd like to leave it as an ES6 module. If possible, I'm assuming it would look something like this:

import a from 'path/to/a';
import b from 'path/to/b';

export default (opts = {}) => {
 return {
    postcssPlugin: 'PLUGIN_NAME',
    // ...
  }
}
// ISSUE: How do I handle the next line?
// module.exports.postcss = true

3) If the answer is "no" to the above, I can continue to use rollup.js to transpile my ES module to a CommonJS module, but I am unsure of how to get the following line from the boilerplate added to the output of rollup.js:

module.exports.postcss = true;

Thanks!

3 replies
James Ramm
@JamesRamm

Hello!
Using postcss with rollup & css modules. I am having trouble to pass a style as props. For example:

MyComponent.jsx:

import styles from './MyComponent.module.css'
function MyComponent({ className, ...props }) {
   return <div className={cn(styles.root, className)} />
}

App.jsx:

import MyComponent from './MyComponent';
import generalStyles from './general.module.css';
function App(props) {
    return <MyComponent className={generalStyles['spacing-md']} />;
}

The class passed to MyComponent (generalStyles['spacing-md']) is simply ignored by the build and doesn't appear in the output. Any idea how I can pass a style down to other custom components?

My postcss plugin in rollup looks likes this:

      postcss({
         extract: 'index.css',
         modules: { root: '.' },
         plugins: [postcssPresetEnv({
            stage: 2,
            importFrom: './src/styles/theme.css'
         }), values]
      }),
2 replies
Jonathan Neal
@jonathantneal
Is there a migration guide for updating a PostCSS plugin pack to PostCSS v8+?
7 replies
Ryan Zimmerman
@RyanZim
@ai I am working on a postcss-cli major release, are you OK with me dropping Node 10 support in the new major release?
Andrey Sitnik
@ai
Sure. I dropped it too in some of projects
schwarzeszeux
@schwarzeszeux

Hi there,

I've been following https://dev.to/43081j/using-tailwind-at-build-time-with-web-components-1bhm but I've been running into a problem:
TypeError: Cannot read property 'append' of undefined
at Document.append (C:\workspace\Tailwind\node_modules\postcss-syntax\document.js:16:13)
at C:\workspace\Tailwind\node_modules\tailwindcss\lib\lib\substituteTailwindAtRules.js:91:11
at LazyResult.runOnRoot (C:\workspace\Tailwind\node_modules\postcss\lib\lazy-result.js:339:16)
at LazyResult.runAsync (C:\workspace\Tailwind\node_modules\postcss\lib\lazy-result.js:391:26)
at LazyResult.async (C:\workspace\Tailwind\node_modules\postcss\lib\lazy-result.js:221:30)
at LazyResult.then (C:\workspace\Tailwind\node_modules\postcss\lib\lazy-result.js:206:17)

Now, I'm not sure where exactly the problem is and where to look.
Has anyone run into a similar problem or can point me in the right direction?

schwarzeszeux
@schwarzeszeux

Ok, I figured it out, the problem was that esbuild is minifying my code, renaming the lit's css-function.
However, the function name is used in postcss-css-in-js to determine if it should work its magic or not.
That check is done against a string ("css" in my case), which obviously fails.

For now I'll see if I can convince esbuild to not rename the css-function

postcss-cli v9.0.0 is released, with support for postcss dir-dependency messages.

This release also drops Node v10 support and changes the way --use works with local plugins. Get the full CHANGELOG here: https://github.com/postcss/postcss-cli/blob/master/CHANGELOG.md#900--2021-09-24

Julian
@julzmon
Could someone please help. I can't get postcss-nesting to work in any of the imported files using postcss-import. Any ideas?
module.exports = {
  plugins: [
    require('postcss-nesting').default,
    require('postcss-import'),
    require(`tailwindcss`)(`./src/styles/tailwind.config.js`),
    require(`stylelint`),
    require(`autoprefixer`),
  ]
};
1 reply