Writing a PostCSS Syntax for Angular

[blyedev]

Hi,

I am developing a custom syntax for PostCSS to enable Stylelint to run within Angular components. The existing postcss-angular project has a few edge cases that I encountered, which necessitated this development.

While I have made enough progress to run Stylelint and fix issues and have gotten rid of my edge cases, I believe I'm close to a "correct" implementation. Therefore, I have a few questions that I couldn't find answers to in the documentation:

1. Difference Between Document and Root

   The documentation describes both Document and Root as representations of a CSS file. However, postcss-html seems to use Document as the root node and Root instances to store raw information about the file. Beyond that, I don't understand why Document should be used instead of Root. I am also not sure how Input's should be managed

• I've noticed that Stylelint does not mark the source as empty when it receives a Document.
• I also don't understand what happens with inputs when I push a Root to a Document and how that differs from pushing it directly to nodes.

2. Optional: Multifile sources

   Angular components can have both inline and separate file stylesheets. I would like Stylelint to recognize them as a single document to, for example, check for duplicate selectors across all styles applicable in a component. However, this is a niche use case and extremely low priority. I mention it only for the sake of completeness.

Any insights or guidance on these questions would be greatly appreciated!

[ai]

Hi! Welcome to the community.

Difference Between Document and Root

Root is CSS file. But if you have non-CSS file, where it could be multiple CSS blocks (like many <style> in HTML, or many styled blocks in React’s CSS-in-JS) we can use Document to wrap multiple Root together.

I also don't understand what happens with inputs when I push a Root to a Document and how that differs from pushing it directly to nodes.

It is better to set input manually to all new nodes

Optional: Multifile sources

You can create a single Document with Root for every inline style and separate file stylesheets. Of course, those Root‘s will have a different input, since filename of separate file stylesheets will be different.

At least, it should work in theory, but I am not really familiar with how exactly Stylelint works with edge cases (we can ask them to change something).

Feel free to ask any other questions.

[blyedev]

Wow that was quick! Thank you very much, glad to be able to help. I'll be publishing the repo soon.

It is better to set input manually to all new nodes

Optional: Multifile sources

You can create a single Document with Root for every inline style and separate file stylesheets. Of course, those Root‘s will have a different input, since filename of separate file stylesheets will be different.

I have a vague memory that Inputs can be anonymous too, as in be parsed with no filename.

So I have 2 possible understandings of what can be done

- Document
  - input: actual input
  - root (inline)
    - input: anon css as parsed by the postcss.parse
    - codeBefore/After: surrouding ts
  - root (outer stylesheet)
    - input: original stylesheet with different path

or

- Document
 - input: actual input
 - root (inline)
   - input: original ts component with appropriate ts
   - codeBefore/After: surrouding ts
 - root (outer stylesheet)
   - input: original stylesheet with different path

I think I will delay the outer stylesheet feature though as there's a few considerations that make this quite a bit of work.

EDIT: Nevermind I figured that out

[ai]

Just try to create input instance only once and then re-use it for all nodes from that source.

input: anon css as parsed by the postcss.parse
input: original ts component with appropriate ts

It is always better to have some real file name. Stylelint will need some file to blame.

[blyedev]

Thank you for all you help.

Now if this is not too big of an ask and you had a spare moment I would be extremely grateful if you could look over the code to see if I'm making any obvious offenses against constructs of PostCSS.

postcss-angular-inline Only parser-angular.js and parser-styles.js are relevant code, once I have this working I can do everything else properly myself.

It's still very much a work in progress and I'm still having some issues with source positions so don't mind that.

[ai]

Why do you need to patch Root#toString?

[blyedev]

Oh, I forgot that was in there. That was a relic from when I was adapting the codebase from postcss-html. Here it actually just does nothing. I will remove it thank you.