postcss/postcss

Transforming CSS with JS plugins

Jonathan Neal

@jonathantneal

I’m on my phone, so I’m sorry about the formatting and lack of threading.

Nikolay Latyshev

@DenyVeyten

@jonathantneal Thank you for the response! Unfortunately, it does not matter how I pass Declaration to rule, it just does not adding it in result css

Jonathan Neal

@jonathantneal

I’m updating more plugins today. Please thread any plugins you want me to prioritize. 🧵

3 replies

Jonathan Neal

@jonathantneal

I’m really excited about the potential for class plugins, @ai. Another advantage I didn’t immediately realize for class components is the ability to extend other plugins using the native extends functionality of classes. I’ve updated my PR description with more details, and I will address the current responses after a short walk.

8 replies

Jonathan Neal

@jonathantneal

Oh, postcss-values-parser hasn’t been updated to use PostCSS 8 :(

Jonathan Neal

@jonathantneal

After many attempts and some soul searching, I am stuck. I need to finish the parser to complete plugins that touch values.

Jonathan Neal

@jonathantneal

What is the difference between the isClean and isComplete symbol in PostCSS?

3 replies

Jonathan Neal

@jonathantneal

I have a local repo with visitors working through values. But it can’t be done without making a custom cut of PostCSS, namely due to what is going on in TYPE_TO_CLASS_NAME and prepareVisitors.

Andrey Sitnik

@ai

What is a problem with prepareVisitors?

Jonathan Neal

@jonathantneal

It is not extendable, which is a fine design choice. However, for plugins that rely on changes to values within a declaration, it means I need to create a separate visitor system.

It’s difficult that PostCSS Values Parser relies so heavily on PostCSS, which I know you have asked them not to do. I spent a lot of time getting a visitor system into that tool locally, but if the author rejects it (as my previous PRs have been, because they do not want to manage more complexity, which is also a fine maintainer choice) then I’m left to fork.

9 replies

Jonathan Neal

@jonathantneal

A few alternatives included forking both PostCSS and PostCSS Values Parser and combining them. But I feel like that would be a nightmare to maintain. This is why I’m refocusing my efforts on the CSS Parser. I can use that to replace PostCSS Values Parser. I can then integrate a visitor system in a more maintainable project. Perhaps that tokenizer/parser can even get ported into PostCSS itself (which I think is a vision we both want?).

Jonathan Neal

@jonathantneal

To be clear, none of these issues are actual problems that PostCSS has tried to solve before, and are therefore out of scope. I should probably not vent them here. They are issues with the ecosystem around PostCSS, namely with the values parser.

Jonathan Neal

@jonathantneal

Good news. With permission, I quit my job this morning, so I can now commit to the PostCSS ecosystem full time this week! :tada: Background: Last month, some of us (including me) were told we were being laid off at my company, and our last day was going to be this Wednesday, but we no longer had any assignments. I’m sharing that so you don’t think I’m giving the middle finger to my friends at work. I have a new position starting next week, and my wife gave me permission to adjust the finances to make this happen.

Evilebot Tnawi

@evilebottnawi

A lot of TypeError: node.getIterator is not a function in tests after update postcss in css-loader, somebody say about this something?

8 replies

Ryan Zimmerman

@RyanZim

postcss-cli is ready, but npm registry is down, so I can't publish. :frowning:

Ryan Zimmerman

@RyanZim

https://twitter.com/RyanZim4/status/1308144695181299712 cc @ai

1 reply

Evilebot Tnawi

@evilebottnawi

@ai What is the faster way to convert all plugins, using RootExit? I would like to make improvements in speed later

126 replies

007design

@007design

am i right in thinking that something is up with postcss 8 plugins that's causing it to not pass modified AST to the next plugin? i'm experimenting with creating a simple plugin compatible with v8 but no matter what modifications i seem to make to the tree the output does not include said modifications.

7 replies

Ronn

@ronnross

Hi I'm using the postcss-loader https://github.com/webpack-contrib/postcss-loader. My hope it compile out css custom props so my app will work on IE11. So far no luck. What is strange is despite having configured a plugin when I build webpack outputs that no plugins have been configured for postcss, but I feel I have

I have a configuration like :

{
        test: /\.css$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'postcss-preset-env',
                    {
                      stage: 4,
                      custom-properties: false
                    },
                  ],
                ],
              },
            },
          },
        ],
      },

Any help would be appreciate.

3 replies

Sylvain Pollet-Villard

@sylvainpolletvillard

Hi everyone. I'm currently trying to migrate postcss-grid-kiss to Postcss 8 and Visitor API. So far so good, but I wonder how do I remove postcss as devDependency if I need it for tests ? In https://github.com/postcss/postcss-mixins/blob/master/test/index.test.js @ai still imports PostCSS for testing purposes of the plugin

7 replies

I notice that postcss is declared both as devDependency and peerDependency for this plugin. It doesn't look right

Sylvain Pollet-Villard

@sylvainpolletvillard

okay migration complete, thanks @ai for the very helpful guide and your answer to my question

John Winston

@winston0410

Hi guys, is there any API method for creating media-queries? What is the best way for creating such rules in PostCSS?

5 replies

Juan Gonzalez

@juancpgo

Hey there.. I want to "turn" Tailwind's class naming scheme from this

<h3 class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">

Into something more succinct that I came up with:

<h3 class="mt2 t(z7 h8 w7 t2 ca9) s:t(z8 h10)">

(as you see I'll also need to implement a class nesting thing, to nest related classes inside parenthesis)

Is PostCSS the right tool for this job? Should I create a plugin? Can anyone suggest a good PostCSS guide for this type of thing?

5 replies

Shekhar Ramola

@shekharramola

1 reply

I am a bottom bar with position fixed

but background shadow is coming on button

how to prevent that?

Simon Fremaux

@dievardump

Hi, I'm adding an AtRule to a Declaration node with a plugin, and this AtRule is not seen by later plugins when they use css.walkAtRules();

Is there anything I should do after adding my AtRule so the tree is regenerated/updated?

Simon Fremaux

@dievardump

        let atRule = new AtRule({ name, params: value });
        node.parent.append(atRule);
        node.remove();

AtRule is added this way in a Declaration()

Oh it seems the order in which the plugins are executed is not right. The plugin that should find the added AtRule is declared after but executed before.

Simon Fremaux

@dievardump

Is this a bug or a feature :

if my plugin returns an object { postcssPlugin: 'pluginName', Declaration(node) {} } it is not executed in order of declaration
if my plugin return a function (root) { root.walkDcls(node => {}) is is executed in order

7 replies

The first looks a lot cleaner, I find strange that it would be executed later just because it has this form

WZT

@Genuifx

decl.parent.insertAfter(i, decl.clone({ value: value })); this usage doesn't work in Postcss8

21 replies

it always insert before the i decl

Ryan Zimmerman

@RyanZim

If somebody has a Windows box handy to test this, would be much appreciated: postcss/postcss-import#432

Jonathan Neal

@jonathantneal

Have any PostCSS tools integrated something like continuous benchmarking for pull requests?

1 reply

Evilebot Tnawi

@evilebottnawi

@ai How to work with vendors prefixes, for example @-webkit-keyframes using visitor API? I don't known all possible vendors/do want to specify all of them

1 reply

Yvain Liechti

@ryuran

Hello here I try to update a plugin to postcss8. I encounter an issue.
https://stackoverflow.com/questions/64279693/how-to-replace-walkdecls-with-a-regex-with-postcss8-api-declaration

3 replies

Yvain Liechti

@ryuran

Following the previous issue. I don't get "How to edit a value into Declaration without making an infinite loop?" https://stackoverflow.com/questions/64319279

rickyrocker

@rickyrocker

Hi I'm trying to get basic postcss to work and failing epicly. Steps are:

npm install postcss-preset-env --save-dev --global
npx babel /my/dir/test.css --plugins=/usr/lib/node_modules/postcss-preset-env

and I get the following:

Error: [BABEL] /my/dir/test.css: Plugin/Preset did not return an object.
at /usr/lib/node_modules/@babel/core/lib/config/full.js:210:11
....
Can anyone possibly help??

5 replies

nikitATX

@nikitATX

Hi guys, I'm looking to convert a custom function into a plugin because I need to create a full ruleset instead of transforming a value. I realize creating rulesets from scratch isn't a normal use case, but I'm trying to create custom color palettes based on vars defined in webpack. Pseudo function:

function createPalette(varName, hue, saturation, light) {
    return `--${varName}: hsl(${hue}, ${saturation}, ${light});`
};

I plan on populating :root{} with the output. I was wondering if anyone can point me in the right direction? I'm not totally sure how to get started.

3 replies

Ludovico Fischer

@ludofischer

Hi, is there a reason that Postcss 8 does not export the tokenize() function at the top level like it exports parse()? I am asking because I am porting postcss-less which requires postcss/lib/tokenize in a few places.

3 replies

Ryan Zimmerman

@RyanZim

https://twitter.com/RyanZim4/status/1318966806942547968

Attn @ai ^

Dan Lemon

@dan2k3k4

I'm in the process of updating a bunch of package.json dependencies and now after I build the following CSS:

.events-paragraph {
  &__events {
    @mixin component-margin-bottom;

    display: flex;
    flex-wrap: wrap;
    margin: calc(-1 * var(--space-100));
  }
}

.two-columns-section__column {
  .events-teaser {
    @media (--tablet-up) {
      width: 50%;
    }
  }
}

It ends up as:

.events-paragraph__events {
    margin-bottom: 40px;
    margin-bottom: var(--space-500);
    @media (min-width: 1024px) {
    margin-bottom: 80px;
    margin-bottom: var(--space-1000);
  }

    display: flex;
    flex-wrap: wrap;
    margin: calc(-1 * 8px);
    margin: calc(-1 * var(--space-100));
  }
@media (min-width: 768px) {
  .two-columns-section__column .events-teaser {
      width: 50%
  }
    }

Whereas before, it would be:

.events-paragraph__events {
    margin-bottom: 40px;
    margin-bottom: var(--space-500);
    display: flex;
    flex-wrap: wrap;
    margin: calc(-1 * 8px);
    margin: calc(-1 * var(--space-100));
}

@media (min-width: 1024px) {
    .events-paragraph__events {
        margin-bottom:80px;
        margin-bottom: var(--space-1000);
    }
}

@media (min-width: 768px) {
    .two-columns-section__column .events-teaser {
        width:50%
    }
}

My postcss config file (which I did not change):

module.exports = {
  plugins: {
    'postcss-easy-import': {},
    'postcss-preset-env': {
      stage: 0,
    },
    'postcss-url': {
      url: 'inline',
    },
    'postcss-mixins': {},
    'postcss-nested': {},
  },
  module: true,
  url: false,
};

But various postcss modules were upgraded:

-    "postcss-easy-import": "^3.0.0",
+    "postcss-easy-import": "https://github.com/univers-agency/postcss-easy-import",

-    "postcss-loader": "^3.0.0",
+    "postcss-loader": "^4.0.3",

-    "postcss-mixins": "^6.2.1",
+    "postcss-mixins": "^7.0.1",

-    "postcss-nested": "^4.1.2",
+    "postcss-nested": "^5.0.1",

-    "postcss-preset-env": "^6.6.0",
+    "postcss-preset-env": "^6.7.0",

+    "postcss": "^8.1.1",

Oh mmm maybe I should not have v8 of postcss?

17 replies

Ryan Zimmerman

@RyanZim

Any ideas what's happening here? postcss/postcss-import#435

2 replies

Ludovico Fischer

@ludofischer

Hi, I want to switch to PostCSS 8 event listeners a few plugins which cache the transformation results to re-use them if they encounter an identical declaration value in the same tree. Is it correct to use prepare() to pass the cache to the various Declaration function invocations, like this ludofischer/cssnano@60d8d6a ?

2 replies

Where communities thrive

People

Repo info

Activity