Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 17:29
    r-wells commented #1753
  • 16:51
    r-wells edited #1753
  • 16:51
    r-wells opened #1753
  • 05:28
    ai closed #1752
  • 05:27
    ai commented #1752
  • 05:24
    vikaskaliramna commented #1752
  • 05:04
    ai commented #1752
  • 05:01

    ai on main

    Update depenencies Avoid type changes (compare)

  • 04:48
    vikaskaliramna commented #1752
  • May 25 14:32
    ai commented #1752
  • May 25 06:54
    vikaskaliramna commented #1752
  • May 25 05:35
    ai commented #1752
  • May 25 05:34
    vikaskaliramna opened #1752
  • May 24 17:43
    ai closed #1751
  • May 24 17:43
    ai commented #1751
  • May 24 17:30
    unilimpio edited #1751
  • May 24 17:28
    unilimpio opened #1751
  • May 24 01:22
    ai closed #1750
  • May 24 01:22
    ai commented #1750
  • May 24 01:20
    neilnaveen opened #1750
Dai Siyao
@daisybaicai
image.png
Andy Ford
@andyford
Hello, I feel like I should know this, but is there some way to control the prefix/suffix applied to selectors (of CSS Modules)?
2 replies
Tyler Primmer
@tylerprimmer
Trying to install postcss 8 but it keeps saying PostCSS plugin tailwindcss requires PostCSS 8
any idea?
Andrey Sitnik
@ai
Seems like PostCSS 7 is locked in your system. For instance, CRA does it because this project has no update
Mason
@maboesanman

hello! I'm wondering if there's a way to have postcss read image urls as js modules which export paths, and resolve to those paths.

i run my images through file-loader, which makes the images like this:

// my-image.svg
module.exports = __webpack_public_path__ + "img/my-image.818a79a9.svg";

which clearly isn't an actual image.
the css loaders i have right now can't resolve this, so I'm hoping postcss can help me transform url(my-image.svg) into url(img/my-image.818a79a9.svg

1 reply
Kirsten Cassidy
@mantismamita
Hello, I was having trouble updating postcss-preset-env. I decided to add the packages individually in the end but does anyone know if there is a migration guide I could have folllowed. I'm juste curious why I was getting errors like No matching version found for postcss-color-hex-alpha@^8.0.1.
5 replies
Antonio Laguna
@Antonio-Laguna
Id be curious if it didn’t. Happy to check any repro repo you might have and see what could be going on
1 reply
James Murphy
@liquidlovemonster:matrix.org
[m]

Hey forum, I've just found you guy's through google.

I want to pose some questions but my description of my position may be off putting to some.

I've just spent six years in jail and a few years before my incarceration I was using Lamp, PHP and JavaScript including Jquery.

I was attacked, defended myself and the other guy came off worse (he's still alive). Anyhow my point being, i'm not a criminal. However, I've come out after six years and done one year out here just getting re-orientated, now I see multiple frameworks, node, ember, angular, rails etc; What's going on? How do I take my experience of javascript, jQuery, php , sql and move on? What framework is the easiest for me to migrate to? What is Angular, ember, etc are they script libraries like JQuery? Where do I start, what framework should I use and what's the easiest way for me to get up to scratch on web application development taking my existing skills?

1 reply
I know it's a strange question but I've been out the loop a while (not internet or news of development). I am legit and desperate to get back to work but confuse with all the many frameworks and don't know where to start.
Correction > (no internet or news of development)
James Murphy
@liquidlovemonster:matrix.org
[m]
I posted here becuase this is the only channel it seems not affiliated with one framework
Дмитрий Тимошенко
@dmitrycosmos93_gitlab

Hello guys! Could you help me with WARN in all files where using <style lang="postcss">

WARN  in ./components/Cabinet/CabinetSidebar/CabinetSidebarMenu.vue?vue&type=style&index=0&lang=postcss&                                                                                                      friendly-errors 18:24:59

Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):                                                                                                                                               friendly-errors 18:24:59
Warning

(99:2) Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin *before* Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting

file nuxt.config.js

import 'reflect-metadata'
import { join } from 'path'
const isProd = process.env.NODE_ENV === 'production'
export default {
    // Global page headers: https://go.nuxtjs.dev/config-head
    head: {
        title: 'zoo',
        htmlAttrs: {},
        meta: [
            { charset: 'utf-8' },
            {
                name: 'viewport',
                content:
                    'width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no',
            },
            { hid: 'description', name: 'description', content: 'Zoo' },
        ],
        link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
    },

    // Global CSS: https://go.nuxtjs.dev/config-css
    css: ['~assets/css/styles.css'],
    loading: false,
    // pageTransition: {
    //     name: 't-fade',
    //     mode: 'out-in',
    // },
    // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
    plugins: [
        { src: '@/plugins/reflect-metadata', mode: 'client' },
        { src: '@/plugins/app-axios' },
        { src: '@/plugins/app-init' },
        { src: '@/plugins/app-helpers' },
        { src: '@/plugins/app-url' },
        {
            src: '@/plugins/vue-range-slider',
        },
        {
            src: '@/plugins/vue-select',
        },
        {
            src: '@/plugins/vue-date-filter',
        },
        {
            src: '@/plugins/vue-awesome-swiper',
            mode: 'client',
        },
        {
            src: '@/plugins/vue-paginate',
            mode: 'client',
        },
        {
            src: '@/plugins/vue-scrollbar',
        },
        {
            src: '@/plugins/vue-click-outside',
            mode: 'client',
        },
        {
            src: '@/plugins/vue-sticky',
            mode: 'client',
        },
        {
            src: '@/plugins/vue-mask',
            mode: 'client',
        },
    ],

    // Auto import components: https://go.nuxtjs.dev/config-components
    components: {
        dirs: ['~/components', '~/components/Base'],
    },

    // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
    buildModules: [
        // https://go.nuxtjs.dev/typescript
        '@nuxt/typescript-build',
        'nuxt-typed-vuex',
        // https://go.nuxtjs.dev/tailwindcss
        '@nuxtjs/router-extras',
        '@nuxtjs/tailwindcss',
        '@nuxtjs/composition-api/module',
        // '@nuxtjs/google-analytics'
    ],
    tailwindcss: {
        configPath: 'tailwind.config.js',
        cssPath: '~/assets/css/tailwind.css',
        // jit: true,
        exposeConfig: true,
        config: {},
    },
    modules: [
        // 'nuxt-ssr-cache',
        // 'nuxt-lazy-load',
        'vue-scrollto/nuxt',
        '@nuxtjs/axios',
        'nuxt-i18n',
        '@nuxtjs/svg',
        'cookie-universal-nuxt',
        '@nuxtjs/toast',
        '@nuxtjs/google-analytics'
    ],
    googleAnalytics: {
        id: 'UA-22127715-1'
    },
    cache: {
        store: {
            type: 'memory',

            // maximum number of pages to store in memory
            // if limit is reached, least recently used page
            // is removed.
            max: 100,

            // number of seconds to store this page in cache
            ttl: 60,
        },
    },
    i18n: {
        detectBrowserLanguage: {
            useCookie: true,
            cookieKey: 'i18n_redirected',
            onlyOnRoot: true,
        },
        locales: [
            {
                iso: 'ru-RU',
                code: 'ru',
                file: 'ru.ts',
            },
            {
                iso: 'ua-UA',
                code: 'ua',
                file: 'ua.ts',
            },
        ],
        lazy: true,
        langDir: 'lang/',
        defaultLocale: 'ru',
        seo: true,
    },
    router: {
        trailingSlash: true,
    },
    // Axios module configuration: https://go.nuxtjs.dev/config-axios
    axios: {},
    server: { host: '0.0.0.0' },
    // Build Configuration: https://go.nuxtjs.dev/config-build
    build: {
        postcss: {
            plugins: {
                'postcss-import': true,
                'postcss-nested': {},
            },
Дмитрий Тимошенко
@dmitrycosmos93_gitlab
use Nuxt v2.15.8 + Tailwind
Дмитрий Тимошенко
@dmitrycosmos93_gitlab
solved by adding 'tailwindcss/nesting': {} in build -> postcss -> plugins
5 replies
mashorbit
@mashorbit
Screen Shot 2022-01-05 at 12.29.47 PM.png
3 replies
Hi all, I have followed this doc https://tailwindcss.com/docs/upgrade-guide to upgrade my current tailwind CSS from v2 to v3.0.10 and all installation was successful but while it comes to loading my app, I am getting this error I am not able to understand and I need help please...
Here is my potscss.config files
module.exports = { plugins: [ require("postcss-import"), require("postcss-flexbugs-fixes"), require("postcss-preset-env")({ autoprefixer: { flexbox: "no-2009" }, stage: 3 }), require("tailwindcss")("./tailwind.config.js"), require("autoprefixer") ] };
Auri Collings
@Aurailus
Hi there! I was wondering if I could get a little help with a plugin I've written. It's incredibly simple, I'll post the whole thing below.
/* eslint-disable */

function declConvert(decl, postcss) {
    if (decl.value.trim().startsWith('@theme')) {
        decl.replaceWith(postcss.parse(`${decl.prop}: /*${decl.value}*/;`));
    }
}

module.exports = (opts = {}) => {
    return {
        postcssPlugin: 'auriserve-theme',
        prepare() {
            console.log('prepare');
            return {
                AtRule(atRule, postcss) {
                    console.log('atrule');
                    if (
                        atRule.name === 'if' ||
                        atRule.name === 'elseif' ||
                        atRule.name === 'else'
                    ) {
                        const next = atRule.next();
                        const atEnd =
                            next.type != 'atrule' || (next.name !== 'elseif' && next.name !== 'else');

                        atRule.walkDecls((decl) => declConvert(decl, postcss));

                        const toInsert = atRule.nodes;
                        if (atEnd) toInsert.push(postcss.parse('/*@endif*/'));
                        for (const node of toInsert.reverse()) atRule.after(node);
                        atRule.replaceWith(postcss.parse(`/*@${atRule.name}${atRule.params}*/`));
                    }
                },
                Declaration(decl, postcss) {
                    declConvert(decl, postcss);
                },
            };
        },
    };
};

module.exports.postcss = true;
For some reason, when I try to run PostCSS in my terminal directly, the plugin runs as expected, my CSS is transformed, and if --verbose is on, I see the console.log statements.
But when I try to run it from an npm script with the exact same command, it only prints 'prepare', and doesn't find any at rules or transform anything
Both my local and global postcss versions are the latest ones on NPM
and other plugins seem to work, just not mine.
It's strange because the fact that 'prepare' is printed shows the plugin is loaded, but then it just doesn't run the AtRulepart :/
1 reply
ajbura
@ajbura:matrix.org
[m]
Hi, is there an alternative of postcss-extend that’s compatible with postcss 8.x?
3 replies
ajbura
@ajbura:matrix.org
[m]
Don’t have time/energy to fork and maintain. I guess i’ll just go with standard syntax too.
Olu Niyi-Awosusi
@oluoluoxenfree
Hey, I'm working on a plugin; is the AST explorer the best way to work out how to target specific declarations? I can't quite work out how to use it
2 replies
olu
@olu:memoryandthought.me
[m]
I'm trying to target cascade layers; in my code so far I've just targeted an at layer but I can't work out how to replicate it in the AST explorer
it doesn't highlight the same part
7 replies
olu
@olu:memoryandthought.me
[m]
oh sorry, same person different device lol
olu
@olu:memoryandthought.me
[m]
ah thanks so much
Levi Wheatcroft
@leviwheatcroft

Trying to figure out how to get webpack to work with both less-loader and postcss-loader...

module: {
    rules: [
      {
        test: /\.(css|less)$/i,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              url: false
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                config: join(__dirname, 'postcss.front.js')
              }
            }
          },
          'less-loader'
        ]
      },
  ]
}

Using this set up less complains about any @apply at-rules.

3 replies
rooshan1234
@rooshan1234
Hey all, I had a question. Without using recursion, is it possible to check if a rule belongs to an at-rule?
1 reply
Robert Clark
@rbclark

Hey all, I just had a question regarding sourcemaps. My sourcemaps are all working properly inline until I use the postcss-import extension and pull in a file from a package such as

@import "dropzone/dist/dropzone";

Since dropzone has a sourceMappingURL at the end of it's CSS, this causes postcss to generate an external map file in my output directory. Without this line all of the sourcemaps generate inline. Is there anything I can do to force the generation of inline sourcemaps?

6 replies
Robert Clark
@rbclark
And it looks like my understanding of inline source maps was somewhat flawed so back to the drawing board here.
Question: I am trying to get sourcemaps working properly within my app, the problem is the path that the browser needs to use to access them is incorrect, I need to prepend some path information. Is that at all possible with the postcss-cli?
4 replies
Sana Javed
@sanajaved7

Hi y'all :wave: - I am working on the plugin for layers with @oluoluoxenfree and I had a question regarding when the plugin needs to do multiple walks of the rules. Specifically, in the first walk, I insert some nodes but when I do a second walk I do not see the node has been inserted. I am using postcss-tape tests and the AST explorer to see that the insertion is actually working but it doesn't seem to be modifying the root and the changes are not carried over for the subsequent walks. Any advice on how to tackle this?

For more context on what I'm trying to do or to see the draft PR: https://github.com/csstools/postcss-plugins/pull/244#issuecomment-1072470718

2 replies
Lucas
@lelukas

Hey everyone, I'm trying to write my very first plugin, so I'm still experimenting and trying to figure out how postcss works. How can I type each function inside the return? (like Root, Declaration, ...)

At the end of the generated file from template there's

/**
 * @type {import('postcss').PluginCreator}
 */

What would be the type for Declaration, for instace?

2 replies
Laureano Ruiz
@laureanorp

Hello everyone! Asking here because I found nothing on stack/github for days. Summary: Postcss is working when I use postcss-cli, but not when I run it as a flask-assets plugin.

So, if I run postcss static/src/main.css -o static/dist/main.css my CSS is correctly processed

But if I run my flask app, that uses postcss as a filter (css = Bundle("src/main.css", output="dist/main.css", filters="postcss")) my CSS is not correctly processed. I used this tutorial as reference: https://testdriven.io/blog/flask-htmx-tailwind/

Thank you in advance!

Laureano Ruiz
@laureanorp
No one with experience on flask-assets + postcss? :(
1 reply
tarumam
@tarumam

Hey Guys,
I've just join to this chat, so I'm not sure if here is the right place to get help...
I am facing the following problem when trying to import a css file from node_modules:

C:/myapp/node_modules/swiper/swiper-bundle.min.css Error: No PostCSS Config found in: C:myapp\node_modules\swiper

my postcss.config.js is:

 module.exports = {
    options: {
        ident: 'postcss',
        import: true,
    },
    plugins: {
        'postcss-flexbugs-fixes': {},
        'postcss-normalize': {},
        'postcss-preset-env':
        {
            autoprefixer: {
                flexbox: 'no-2009',
            },
            stage: 3,
        },
    },
}

It's located like:

|-config
|---webpack.config.js
|
|-postcss.config.js

I've tried to inform the postcss.config.js path on webpack like:

{
   loader: require.resolve('postcss-loader'),
   options: {
          path:"../postcss.config.js"
   }
}

But when I do that, I receive a console message saying:
You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.

Does anyone have a clue? Thank you guys

2 replies
codepilotsf
@codepilotsf
Is it possible to generate sourcemaps with postcss-cli? If I just add -m flag, postcss command fails with:
Input Error: Did not receive any STDIN
ERROR: "postcss" exited with 1
11 replies
Senior Web & Mobile Developer
@zmeditation
image.png
I have urgent problem
I don't know well about postcss
Why does this error occur?
1 reply
please help
Benjamin Leonard
@benjaminleonard

Hey, I've made a private plugin according to this: https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md
But when I try and load it in the postcss.config.js I get the following error:

Error: Loading PostCSS Plugin failed: Cannot find module 'postcss-wide-gamut-color'

Is there something else I need to do to use it?

7 replies
fiveNinePlusR
@fiveNinePlusR
trying to use tailwind and i'm getting an error from caniuse-lite even though it's in the node_modules any insight?
Unknown error from PostCSS plugin. Your current PostCSS version is 8.4.12, but cssnano uses 7.0.35. Perhaps this is the source of the error below.
node:internal/modules/cjs/loader:933
  const err = new Error(message);
              ^

Error: Cannot find module 'caniuse-lite/dist/unpacker/feature'
fiveNinePlusR
@fiveNinePlusR
nevermind. I can't tell you how upset i am that node decides that global packages should be used first instead of letting local packages overshadow the globals. whomever thought that was a good idea i'm not a fan of even a little bit.