postcss / postcss-safe-parser

Fault tolerant CSS parser for PostCSS
MIT License
120 stars 12 forks source link

Doesn't walk incomplete declaration #9

Open knownasilya opened 5 years ago

knownasilya commented 5 years ago
.container {
  max-width: rem(800px);
  margin: 3rem auto 5rem;
  padding: 0 2rem;
  font-size

  @media (max-width: rem(800px)) {
    flex-direction: column;
    margin-top: 0.5rem;
  }
}

It ignores font-size (with or without :, no difference). Mainly I'm using this for autocomplete. My code is here: https://github.com/subsetcss/parser/blob/master/src/index.ts#L42

walked declarations go from padding to flex-direction.

ai commented 5 years ago

Yeap, because font-size doesn't looks like declaration for the parser. Parser has no list of the declarations, as result it can't detect that it is properties or nested rule selector.

If you have an idea how to detect it, feel free to send PR.

knownasilya commented 5 years ago

What about an option to walkDecls like walkUnknowns: true so it parses the line but if it can't decide what type it is it simply returns the value and line number and type: 'unknown'?

ai commented 5 years ago

Hm. We can do it without adding a new type (since it could brake many plugins). We can generate nodes as now, but set Node#raws.safeParserUnknown (or use Symbol to avoid parser name in prefix).

You will be able to find it by walking through Node#nodes manually (since it will be hard to change PostCSS core AST for non-standard extension). It will not be hard.

But you will need to send PR for it.

knownasilya commented 5 years ago

@ai where would I start to implement this? would I have to completely reimplement decls here ins safe parser (based on the normal decls)?

ai commented 5 years ago

We should try to change only postcss-safe-parser

tycan1193 commented 11 months ago
.container {
  max-width: rem(800px);
  margin: 3rem auto 5rem;
  padding: 0 2rem;
  font-size

  @media (max-width: rem(800px)) {
    flex-direction: column;
    margin-top: 0.5rem;
  }
}

Nó bỏ qua font-size(có hoặc không có :, không có sự khác biệt). Chủ yếu tôi đang sử dụng tính năng này để tự động hoàn thành. Mã của tôi ở đây: https://github.com/subsetcss/parser/blob/master/src/index.ts#L42

khai báo đã đi từ paddingđến flex-direction.

.container { max-width: rem(800px); margin: 3rem auto 5rem; padding: 0 2rem; font-size

@media (max-width: rem(800px)) { flex-direction: column; margin-top: 0.5rem; } }