sylvainpolletvillard / postcss-grid-kiss Goto Github PK

Great work. I was really impressed by this idea.

Feel free to send PR to postcss/postcss with your plugin in docs/plugins.md.

Absolutly loved your project. I use react-spring for animations. I was wondering can I compile at runtime or come up with some trick so the animations will work even with the fallback code?

Any thoughts on this?

PS: Love your OCR idea, myself worked in computer vision for 3yrs; I think if we use machine learning we can go step futher to read the titles as well :)

Thx

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] 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.

Should we align zone content based on position of the selector inside the zone ?

Proposed rules:

• selector on the first line of at least three : align-self: start
• selector on the last line of at least three: align-self: end
• selector with zero spaces left and at least two spaces right : justify-self: start
• selector with zero spaces right and at least two spaces left: justify-self: end

Advantages

• follow the same principle than for grid alignement ; less concepts to learn
• simplify the syntax
• < > ^ v are weird and ↓ ↑ ← → are hard to get on regular keyboards

Disadvantages

• how to differentiate align/justify-self: center and stretch ?
• require larger zones / possible redraws
• 3 rows are required at least to set vertical content alignement

Feedback needed

@sylvainpolletvillard

This plugin is very good. I tried to use today, found a small problem.The use of simple to describe my situation.

node.js version

v4.7.2

gulpfile.js config

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var cssnext = require('postcss-cssnext');
var gridkiss = require('postcss-grid-kiss');

var browserOptions = {
  browsers: [
  'last 3 versions',
  'ie >= 10',
  'ie_mob >= 10',
  'ff >= 30',
  'chrome >= 34',
  'safari >= 6',
  'opera >= 12.1',
  'ios >= 6',
  'android >= 4.4',
  'bb >= 10',
  ]
};

gulp.task('css', function(){
	var processors = [
		cssnext(browserOptions),
		gridkiss({fallback: true})
	];

	return gulp.src('./src/*.css')
		.pipe(postcss(processors))
		.pipe(gulp.dest('./dest'));
});

gulp.task('html', function (){
  	return gulp.src('./src/*.html')
    	.pipe(gulp.dest('./dest'));
});

gulp.task('watch', function (){
  	gulp.watch('./src/*.html', ['html']);
  	gulp.watch('./src/*.css', ['css']);
});

gulp.task('default', ['watch']);

run gulp in terminal, There will be an error message:

/Applications/XAMPP/xamppfiles/htdocs/workshop/postGrid/node_modules/postcss-grid-kiss/src/main.js:3
const {parse}             = require("./parse");
      ^

SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/Applications/XAMPP/xamppfiles/htdocs/workshop/postGrid/node_modules/postcss-grid-kiss/index.js:3:12)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)

Then I have updated the version of the node.js (v6.9.4). post-grid-kiss can run normally.

I want to say is that there are a lot of people use node 4. So many people can't use this plugin.Would you consider to repair this problem.

That line excludes the usage of single-quotes:

Thus the following does not work:

body {
	grid-kiss:
		'+-------------------------------+      '
		'|           header ↑            | 120px'
		'+-------------------------------+      '
		'                                       '
		'+-- 30% ---+  +--- auto --------+      '
		'| .sidebar |  |       main      | auto '
		'+----------+  +-----------------+      '
		'                                       '
		'+-------------------------------+      '
		'|              ↓                | 60px '
		'|         → footer ←            |      '
		'+-------------------------------+      '
}

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

http://codepen.io/rachelandrew/pen/BNXyQa

In most cases we want it to be repeating without designing the grid-area, can we do that with grid-kiss?

My current case is this grid which work perfectly:

grid-kiss:
  "+--------------------------+ --   "
  "| .header                  | 48px "
  "+--------------------------+ --   "
  "+--------+ +---------------+ --   "
  "| .aside | | .main         | auto "
  "+--------+ +---------------+ --   "
  "| 48px   | | auto          |      ";

But my current postcss chain transform it to:

grid-kiss: "+--------------------------+ --   " "| header                   | 48px " "+--------------------------+ --   " "+--------+ +---------------+ --   " "| aside  | | main          | auto " "+--------+ +---------------+ --   " "| 48px   | | auto          |      ";

In fact if we follow how css works, it should works too but here grid-kiss can't parse correctly

Technically, IE was the first browser, which support Grid :). His -ms- syntax is very limited. But I found that many features could be implemented. For example, grid-template-areas is not in -ms-, but it is just syntax sugar — you could use different grip properties to set grid child position.

@sylvainpolletvillard do you think it is possible to fallback your awesome plugin for IE using -ms- gird syntax?

Nice work.

I think you wrote really great tool. And a lot of stars show that many people agree with me.

But for my experience, good tools = good code + good marketing :).

We need to promote you :). I think current plan could be:

1. Reddit post (I could do it tomorrow).
2. IE support.
3. CSS Tricks article.

CSS Trick is very open for new ideas. And they have no good tools article for a time. So they could accept. Just write them and ask it (explain why it is important and how people like your project, mention that your already have React port).

CSS Tricks article was a first booster for Autoprefixer promotion :).

I think your project is in very good time for promotion, because many people really want to use Grids. But they need a 3 months for even Chrome support.

You have a pure-CSS fallback and awesome syntax. It you will promote your project in December you could become much more popular. In the end of December will be a dead season, so I highly recommend to post CSS Tricks article in the beginning of December. This could be time sensitive, because right now people thought that “Chrome support will in next year”.

More a question than an issue, but is it possible to have zones overlap? Love the idea of this, but need to be able to have things overlap. :)

We need to go deeper. I propose to introduce a text recognition nodejs plugin. Imagine how would be cool to put a layout drawn on a napkin.

I was trying out this plugin as it seemed pretty darn awesome and decided to try out those IE claims myself. The first thing I ran into almost immediately is that kiss generates nested calcs for some of the CSS grid fallbacks. This isn't supported in IE (or really many browsers).

https://sylvainpolletvillard.github.io/grid-kiss-playground/index.html with the justify-* removed, for example, generates top: calc(120px + calc(100% - 120px - 60px)); for the footer div.

Currently, you can input something like:

"+-----------------------------+"
"|                             |"
"+-----------------------------+"
"| calc(var(--my-cool-length)) |"

to get CSS properties to work. This is pretty clumsy, and verbose, but it does work just fine.

Which probably means a syntax like:

"+-----------------------+"
"|                       |"
"+-----------------------+"
"| var(--my-cool-length) |"

// or:
"+---------------------+"
"|                     |"
"+---------------------+"
"| v(--my-cool-length) |"

// my favorite:
"+-------------------+"
"|                   |"
"+-------------------+"
"| v(my-cool-length) |"

should technically work without any issues. I did take a look at the dimension parser and it looks like basically a copy paste of the calc regex. It would probably be fine to enforce one var input pattern. This would be nice feature to have!

There is the matter of Sass, Less, and other non-persistent variables (which are using @ and '$', usually). I also figure these wouldn't be too difficult to add.

One thing you could potentially do to avoid all these issues is to simply allow an escaped dimension, maybe like:

"+----------------+"
"|                |"
"+----------------+"
"| /$cool-length/ |"

// or:
"+----------------+"
"|                |"
"+----------------+"
"| ($cool-length) |"

// or, perhaps resembling 'interpolation' the most:
"+----------------+"
"|                |"
"+----------------+"
"| {$cool-length} |"

That way, custom functions, variables, etc. would be easily supported.

Add examples for this options:

• max or max-content: a keyword representing the largest maximal content contribution of the grid items occupying the grid track

• min or min-content: a keyword representing the largest minimal content contribution of the grid items occupying the grid track

When I use "min" keyword, I have an error:

grid-kiss:
"+-------------------------------+      "
"|              ↓                |      "
"|         → header ←            | 60px "
"|              ↑                |      "
"+-------------------------------+      "
"+-- 30% ---+  +--- auto --------+ ---- "
"|     ↑    |  |       ↑         |      "
"| .sidebar |  |       .main     | auto "
"|     ↓    |  |       ↓         |      "
"+----------+  +-----------------+ ---  "
"+-------------------------------+ --- "
"|         ← footer →            | min "
"+-------------------------------+ --- "

Error:

Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js??ref--0-2!node_modules/postcss-loader/lib/index.js!css/main.css:
       [0] ./node_modules/css-loader?{"importLoaders":1}!./node_modules/postcss-loader/lib!./css/main.css 4.58 kB {0} [built] [failed] [1 error]

    ERROR in ./node_modules/css-loader?{"importLoaders":1}!./node_modules/postcss-loader/lib!./css/main.css
    Module build failed: Error: Parse error on line 1:
    100% - 60px - min-content
    --------------^
    Expecting 'SUB', 'LPAREN', 'NESTED_CALC', 'NUMBER', 'CSS_VAR', 'LENGTH', 'ANGLE', 'TIME', 'FREQ', 'RES', 'EMS', 'EXS', 'CHS', 'REMS', 'VHS', 'VWS', 'VMINS', 'VMAXS', 'PERCENTAGE', got 'PREFIX'

Let’ remove old hacks and use Autoprefixer Grid for IE 10-11 support. New Autoprefixer with grid: true supports even grid-gap and grid-template-area.