sylvainpolletvillard / postcss-grid-kiss

A PostCSS plugin to keep CSS grids stupidly simple
https://sylvainpolletvillard.github.io/grid-kiss-playground/index.html
MIT License
1.32k stars 53 forks source link

How to use min/min-content? Suggest: add example #11

Closed harobed closed 6 years ago

harobed commented 6 years ago

Add examples for this options:

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'
sylvainpolletvillard commented 6 years ago

min/max-content are not supported by the fallback, as stated here : https://github.com/sylvainpolletvillard/postcss-grid-kiss#fallback-for-older-browsers

If you disable the fallback option, it works properly.

I'm going to add an additional check on the fallback code to avoid this error and get a nicer message

sylvainpolletvillard commented 6 years ago

done in v1.4.2