oficiodesign / initial-css

MIT License
4 stars 1 forks source link

We are missing unit rules in stylelint #113

Open Eduruiz opened 2 years ago

Eduruiz commented 2 years ago

I just wrote a padding value in px and found no errors :) think we need this added, but I'm not really sure what we should accept for what.

robsonsobral commented 2 years ago

I agree! We need to convert the rules from the old dead sass-lint. However, the right property for stylelint is declaration-property-unit-allowed-list:

{
  "/*/": [
    "em",
    "rem",
    "%"
  ],
   "/^animation/": [
      "ms",
      "s"
   ],
   "/^border/": [
      "px"
   ],
   "border-radius": [
      "%",
      "px"
   ],
   "box-shadow": [
      "px"
   ],
   "font-size": [
      "em",
      "rem"
   ],
   "height": [
      "em",
      "rem",
      "%",
      "vh",
      "vw",
      "vmin",
      "vmax"
   ],
   "line-height": [
      "",
      "rem"
   ],
   "margin": [
      "em",
      "%",
      "rem"
   ],
   "max-height": [
      "em",
      "rem",
      "%",
      "px",
      "vh",
      "vw",
      "vmin",
      "vmax"
   ],
   "max-width": [
      "em",
      "rem",
      "%",
      "px",
      "vh",
      "vw",
      "vmin",
      "vmax"
   ],
   "min-height": [
      "em",
      "rem",
      "%",
      "px",
      "vh",
      "vw",
      "vmin",
      "vmax"
   ],
   "min-width": [
      "em",
      "rem",
      "%",
      "px",
      "vh",
      "vw",
      "vmin",
      "vmax"
   ],
   "outline": [
      "px"
   ],
   "outline-offset": [
      "px"
   ],
   "padding": [
      "em",
      "rem"
   ],
   "text-indent": [
      "em",
      "ex"
   ],
   "transition": [
      "ms",
      "s"
   ],
   "width": [
      "em",
      "rem",
      "%",
      "vh",
      "vw",
      "vmin",
      "vmax"
   ]
}

Do you mind to try these, please?

Eduruiz commented 2 years ago

It's complaining about the first regex with Invalid regular expression: /*/: Nothing to repeat, I changed it to /.*/ which doesn't give any error but also allow em/rem/% to everything including borders and transition xD

robsonsobral commented 2 years ago

Perfect! I coded in the dark! Does it block px on everything else?

Eduruiz commented 2 years ago

yes, but it unexpectedly also block px in max-height and border for example.

robsonsobral commented 2 years ago

Ok, try to move the first rule to the end of the JSON, @Eduruiz .

Eduruiz commented 2 years ago

looks like it works! going to use it today and see if I don't find anything else! thanks!

Eduruiz commented 2 years ago

we are missing clip-path and grid stuff, gonna keep checking

robsonsobral commented 2 years ago

Submit the missing rules to https://github.com/stormwarning/stylelint-config-recess-order

Eduruiz commented 2 years ago

we have the order, we don't have the right unit rules for it, like fr for grid and px/vw/vh for clip-path, I'm adding what I find and will send a PR later.