roots / palette-webpack-plugin

Generate a JSON file containing your color palette from existing Sass maps and/or Tailwind.
MIT License
46 stars 7 forks source link

Support for gradient presets #14

Closed Levdbas closed 2 years ago

Levdbas commented 3 years ago

Summary

Add the ability to fill the editor-gradient-presets in similar way as the color palette via this plugin.

Motivation

Having to manage your brand colors in once place instead of 2 is great! I use it every single day in my new gutenberg era way of work. As there is now gradient support in a very easy way in custom blocks I would love to see this supported by the pallete-webpack-plugin.

Additional context

Gradient presets also have three parts to be filled.

add_theme_support(
      'editor-gradient-presets',
      [
         [
            'name'     => Red to transparent,
            'gradient' => 'linear-gradient(180deg,#263e45 0,rgba(38,62,69,.8) 10%,rgba(38,62,69,0)',
            'slug'     => 'red-to-transparent',
         ],
      ]
   );

So i think the output function almost can be the same but then outputs to a gradients.json? I'd love to hear what you think.

Log1x commented 3 years ago

I'm definitely for this idea and have thought about it.

I mainly just don't know how we'd process this properly, specifically in Tailwind. What the user puts in the config doesn't give us much to play with gradient-wise given all the properties are set with CSS Vars.

After that comes SASS Maps which we still need to figure out a way to ditch sass-export so we can get rid of this plugin annoyingly bringing in node-sass.

I'm open to brainstorming for sure, but right now I'm not sure if there's a steady approach.

Levdbas commented 3 years ago

I looked into the tailwind docs and I cannot find a smart way to incorporate this. Regarding sass-export. I am hoping that my PR https://github.com/plentycode/sass-export/pull/63 to at least update all the dependencies gets accepted. I even have a commit ready that ditches node-sass for dart sass. So hopefully at some point this gives us one less thing to worry about.

Levdbas commented 3 years ago

Stage one of my effort to get sass-export updated is completed. They just released an updated version with all the dependencies bumped: https://github.com/plentycode/sass-export/releases/tag/1.0.7

I just made a new PR for ditching node-sass in favor of dart sass. So hopefully I can get the momentum going over there. https://github.com/plentycode/sass-export/pull/64

Levdbas commented 3 years ago

V2 of sass-export is out now with dart-sass instead of node-sass: https://github.com/plentycode/sass-export/releases/tag/2.0.0