postcss/postcss

Transforming CSS with JS plugins

Scott Christianson

@Archer70

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

how can I make the last element always occupy the last seagull in a row?

cell in row*

my grid styles

Andrey Sitnik

@ai

@jonathantneal yeap, we will recommend new visitor based API for new plugins

but it is not urgent, you can use DOM like API right now

Gavin McFarland

@limitlessloop

Hi does anyone know if there is a PostCSS plugin which can create breakpoint variants of utility classes? Saving me having to copy and repeat each utility class with a prefix for each breakpoint?

Jonathan Neal

@jonathantneal

Could you show me an example of the code you would expect to see in the end, @limitlessloop?

Gavin McFarland

@limitlessloop

It’s for scenarios where you have something like this:

.red {
  color: red;
}

and you want to automatically create a prefix for each breakpoint in your design system

@media screen and (min-width: 480px) {
    .red-sm {
        color: red;
    }
}

@media screen and (min-width: 768px) {
    .red-md {
        color: red;
    }
}

@media screen and (min-width: 1024px) {
    .red-lg {
        color: red;
    }
}

Ideally I feel like there should be something in th spec that allows you to do this natively but there isn’t. This is partly why I asked a while ago about binding classes dynamically using js.

Jonathan Neal

@jonathantneal

Okay. That sounds like a good idea.

Let me draft up a plug-in for this, time permitting, maybe tonight.

VSCode users. Would anyone be willing to volunteer a few minutes of their time to open up a file utilizing PostCSS and try something for me?

Gavin McFarland

@limitlessloop

@jonathantneal sounds interesting would be interesting to see what you come up with.

I use VSCode if you need me to try anything.

Shafiq Sarwar

@ShafiqSarwar8_twitter

Hii i have using "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%232e3141%3B' /%3E%3C/svg%3E how can we change color of this?

Jonathan Neal

@jonathantneal

@ai I wrote a language extension for VSCode that covers everything in PostCSS Preset Env and CSS Modules. https://marketplace.visualstudio.com/items?itemName=csstools.postcss

Andrey Sitnik

@ai

@jonathantneal awesome. I added your plugin to PostCSS docs and will try to make a tweet about your plugins

@ShafiqSarwar8_twitter you can try this plugin https://github.com/TrySound/postcss-inline-svg

if not, you can write your own plugin (it i very easy) https://github.com/postcss/postcss/blob/master/docs/writing-a-plugin.md

Jonathan Neal

@jonathantneal

Is there a build of PostCSS for the browser? Or, @ai, would you be open to having a browser dist in the next release if I made a PR?

Andrey Sitnik

@ai

@jonathantneal no, we don’t have it, since it will be very big to recommend it for everyone

Jonathan Neal

@jonathantneal

@ai thanks for the postcss language support shout out!

Where communities thrive

People

Repo info

Activity