Option to change grid-kiss property

[YPetremann]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch postcss-grid-kiss@3.0.3 for the project I'm working on.

I added a property option that permit to change the default "grid-kiss" with "grid-template-kiss" which is more compliant with prettier

Here is the diff that solved my problem:

diff --git a/node_modules/postcss-grid-kiss/lib/main.js b/node_modules/postcss-grid-kiss/lib/main.js
index cf45395..1bc08ac 100644
--- a/node_modules/postcss-grid-kiss/lib/main.js
+++ b/node_modules/postcss-grid-kiss/lib/main.js
@@ -13,6 +13,7 @@ const
    getFallback = require("./fallback");

 const DEFAULTS_OPTIONS = {
+   property: "grid-kiss",
    optimize: true
 }

@@ -30,7 +31,7 @@ module.exports = function (options) {
    return {
        postcssPlugin: 'postcss-grid-kiss',
        Declaration: {
-           "grid-kiss": (decl, { result, Rule, AtRule }) => {
+           [options.property]: (decl, { result, Rule, AtRule }) => {
                const
                    { rows, cols, zones, rowIndexes, colIndexes } = parse(decl, options),
                    grid = { props: new Map, rule: decl.parent },

This issue body was partially generated by patch-package.

[sylvainpolletvillard]

Should it be a patch for prettier instead ? I don't see how grid-template-kiss is more compliant, both are non standard properties.

[YPetremann]

the reason is that for prettier every css property starting with grid-template has a special treatment, grid-template are official properties, but grid-kiss is not 😢, here what is renderer :

body {
  grid-kiss: "+---------------------+      " "|        header       | 120px"
    "+---------------------+      " "+-- 30% --+  +- auto -+      "
    "|  aside  |  |  main  | auto " "+---------+  +--------+      "
    "+---------------------+      " "|        footer       | 60px "
    "+---------------------+      ";
  grid-template-kiss:
    "+---------------------+      "
    "|        header       | 120px"
    "+---------------------+      "
    "+-- 30% --+  +- auto -+      "
    "|  aside  |  |  main  | auto "
    "+---------+  +--------+      "
    "+---------------------+      "
    "|        footer       | 60px "
    "+---------------------+      ";
}

prettier.io/playground

The patch keep the default behaviour (using grid-kiss as a property) but allow to change this to the name we'd like.

(grid-kiss is so awesome that it made me work on a "flex-kiss")

[sylvainpolletvillard]

Interesting choice from Prettier team. It comes from here: https://github.com/prettier/prettier/blob/b429cee27367ceed1d276271f94c13672c09660b/src/language-css/printer-postcss.js#L524

In that case, I wonder if I should add an alias for "grid-template-kiss", no configuration needed. That would be helpful for all Prettier users, and documented.

Good luck with flex-kiss project. I tried to do it once and failed to find a syntax that is actually better than the standard.

[sylvainpolletvillard]

Added grid-template-kiss as an alias in v3.1.0. No configuration needed 👍