Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Oct 10 15:41
    BondarenkoAlex synchronize #1291
  • Oct 10 15:39
    BondarenkoAlex synchronize #1291
  • Oct 08 17:31
    shellscape commented #1298
  • Oct 08 17:18
    ai commented #1298
  • Oct 08 17:17
    ai commented #1298
  • Oct 08 12:16
    shellscape commented #1298
  • Oct 08 06:02
    lauriii commented #1298
  • Oct 08 05:59
    ai closed #1298
  • Oct 08 05:59
    ai commented #1298
  • Oct 08 05:57
    lauriii commented #1298
  • Oct 08 05:57
    lauriii commented #1298
  • Oct 08 04:06
    ai commented #1298
  • Oct 07 19:46
    lauriii edited #1298
  • Oct 07 19:46
    lauriii edited #1298
  • Oct 07 19:29
    lauriii opened #1298
  • Oct 02 08:29
    BondarenkoAlex synchronize #1291
  • Oct 02 03:41
    ai commented #1297
  • Oct 01 20:40
    jwerre edited #1297
  • Oct 01 20:39
    jwerre opened #1297
  • Sep 29 12:00
    ai closed #1296
Bohdan Ptyts
@bohdanbirdie
Snippet from my .babelrc
[
      "react-css-modules",
      {
      "handleMissingStyleName": "warn",
      "generateScopedName": "[local]___[hash:base64:5]",
      "filetypes": {
        ".scss": {
          "syntax": "postcss-scss",
          "plugins": [
            ["postcss-import-sync2", {
              "path": ["lib/scss"],
            }],
            [
              "postcss-nested",
              { "preserveEmpty": true }
            ]
          ]
        }
      }
    }],
Evilebot Tnawi
@evilebottnawi
@jonathantneal under api parser exists, you can get rules and property and values, and some other stuff
Bohdan Ptyts
@bohdanbirdie
And from the webpack SCSS match
{
                        loader: 'postcss-loader?parser=postcss-scss',
                        options: {
                            plugins: [
                                autoprefixer,
                                cssnano(),
                            ],
                        },
                    },
Eric
@sliceofbytes
I have these rules but for some reason it's still removing the items I've listed in ignore
    rules: [
      {
        test   : /\.scss$/,
        loader : 'postcss-loader',
        options: {
          ident  : 'postcss',
          plugins: () => [
            require('postcss-short')(),
            require('postcss-uncss')({
              report:true,
              html: ['src/**/*.html'],
              ignore: ['.scrubBar', '.active', '.locked', '.completed', '.activity-topics-item.active']
            }),
          ]
        }
      }
    ]
Am I configuring this correctly, it seems to be working great for removing the unused css that it can see in the dom, the ignored classes are not visible by just parsing the html alone
Alex Hutton
@alex-hutton
Hi, I'm looking for an example using rollup to define some variables for colour hex codes to be injected into a css file.
UmbrellaC0rp
@UmbrellaC0rp
Does this still use LostGrid
.. With floats, or is there a similar mixin that takes the fraction and outputs css using the new css grid system?
Anjul
@anjultramp_twitter
Hi could some please share the HTML or CSS for a scenario where I can adjust the size the of Logo and header together . And they automatically change their size as per the Browser Window Size.
Means they are responsive
Gavin McFarland
@limitlessloop
Hi, quick question regarding postcss-import if I want to reference several files from a node module do I just use an array inside package.json. For example:
{
  "style": [“dist/main.css”, “dist/typography.css”, “dist/colors.css”],
}
@import 'main'
@import 'typography'
@import 'colors'
SumitKKundu
@SumitKKundu
Hi guys!
this is Sumit and I am new in PostCSS
Can u pls help me to set up PostCSS with Parceljs
Andrey Sitnik
@ai
@SumitKKundu what problem do you have?
padevone
@padevone
Hi! How I can use color-mod/color function in postcss-prest-env? Early I used this from cssnext, but now this is deprecated. For examle: color-mod(#ebeeef lightness(52%)).
Andrey Sitnik
@ai
@padevone unfortunatelly, csswg removed color-mod function, so we can’t polyfill it anymore since there is no standard :(
but you can use color-mod() function (as non-standard function) by manually adding this plugin https://github.com/postcss/postcss-color-function
padevone
@padevone
@ai Okey! Thanks for replay.
Scott Christianson
@Archer70
Anyone have an idea why postcss-present-env custom media queries wouldn't be working?
I have preset-env set to stage 0
Actual code is simple enough:
--mobile-min: 600px;
@custom-media --mobile-up (min-width: var(--mobile-min));
@media (--mobile-up) {
    .Links {
        margin-right: 280px;
    }
}
postcss.config.js
module.exports = {
    plugins: {
        'postcss-preset-env': {
            stage: 0,
            browsers: ['ie > 10', 'last 2 versions'],
        },
....
I know the config is loading, because I have postcss-import below that, and my aliases are working.
Andrey Sitnik
@ai
@Archer70 maybe CSSWG cancel the proposal? Check postcss-preset-env for the feature. If it was canceled you can still use this feature by adding plugin manually
Scott Christianson
@Archer70
I don't think it's expired. Also, I tried adding the plugin manually as well.. Maybe it's the plugin itself.
bonjour-residences
@bonjour-residences
Hi, I try to use postcss in standalone js script in order to take generated css with penthouse and modify assets URLs in order to define an absolute url for the use of a cdn. There some extension I can you for this?
Jonathan Neal
@jonathantneal
@Archer70, I’m not sure if your code got cut off, but you cannot use var functions outside of regular properties and values.
Put another way:
/* there is no syntax yet for declaring custom global variables like this */
--mobile-min: 600px;
hua-lu
@hua-lu
I'm using 'postcss-cli' and 'postcss-preset-env', but somehow 'custom-properties' doean't work. bellowing is my css source code: .wrapper { --some-length: 32px; height: var(--some-length); } and it seems --some-length will never be transformed
I passed no parameters to postcss-preset-env plugin inside of postcss.config.js, like
plugins: [postcssPresetEnv()]
any help?
Andrey Sitnik
@ai
@hua-lu call npx browserslist, maybe all your target browsers already support Custom Properties?
hua-lu
@hua-lu
Hi Andrey, according to the docs of postcss-preset-env,
Without any configuration options, PostCSS Preset Env enables Stage 2 features and supports `all browsers`.
hua-lu
@hua-lu
I did it on purpose to specify the browserslist to contain 'IE 10' only, but still not transformed
hua-lu
@hua-lu
it seems only this works:
:root {
  --some-length: 32px;
}

.wrapper {
  height: var(--some-length)
}
Andrey Sitnik
@ai
ouh, .wrapper { --some-length: 32px; height: var(--some-length); } doesn’t work in polyfill because it works only with :root
there is no correct way to support all features of Custom Properties in IE 10
Gavin McFarland
@limitlessloop
Hello. I’m using VuePress with PostCSS which uses posts-loader. If I want to avoid having to @import the same file in each of my components is there a way I can set this file using the PostCSS webpack loader? I think I’ve seen this in other webpack loaders known as a ‘dependency'.
hua-lu
@hua-lu
thanks @ai
Andrey Sitnik
@ai
@limitlessloop sorry, have no idea
Evilebot Tnawi
@evilebottnawi
@limitlessloop open issue in postcss-loader, i will implement this feature, you will can use this.loaderContext.getResolver(options): Promise<string>
Gavin McFarland
@limitlessloop
@evilebottnawi Ok thank you.
Abdullah Arık
@abdullaharik_twitter

Hi, I can't remove comments. What is the problem?

// module.exports = {
// plugins: [
// require('postcss-import'),
// require('tailwindcss'),
// require('autoprefixer'),
// ]
// }
const cssNanoConfig = {
preset: [
'default',
{
discardComments: {
removeAll: true
}
}
]
}
const uncssConfig = {
html: [
// html/*.html,
'atasehir.html'
//'http://example.test'
// Your entire sitemap added manually
// or some other way if you’re clever (wget is handy for this).
]
}

module.exports = ctx => ({
map: ctx.options.map,
parser: ctx.options.parser,
plugins: {
'postcss-import': { root: ctx.file.dirname },
tailwindcss: true,
cssnano: ctx.env === 'production' ? cssNanoConfig : false,
autoprefixer: ctx.env === 'production' ? {} : false,
'postcss-uncss': ctx.env === 'production' ? uncssConfig : false,
'postcss-uncss': uncssConfig
}
})

Jonathan Neal
@jonathantneal

Heya @ai, it’s been a while. I’ve had some questions on my mind that I’d love to chat with you about. A while back you mentioned the visitor-enabled PostCSS can be built locally. Is that right? And is that how you’d recommend I develop new versions of plugins for it?

Also, would you have any interest in producing “next” builds of it for npm? I imagine visitor rewrites will give me impressive performance gains and code simplicity.

Finally, can the visitor API be extended to funnel down into selectors or values? If so, is there an example of this somewhere?

Svetlana
@Riccu67_gitlab
Hello!
Help me pls with grid
image.png
how can I make the last element always occupy the last seagull in a row?