Tailwindcss: Does tailwind automatically use stylelinter?

[terryupton]

Does tailwind automatically use stylelinter? I seem to have come across an issue in my gulp setup with postcss. Having done some debugging and tracking down it seems to be tailwind within my postcss processes causing the issue;

So here is my postcss process code;
``` var processes = [
tailwindcss('tailwind.js'),
autoprefixer({browsers:['last 2 versions', 'IE 9', 'Safari 8']}),
csssort({
"properties-order": "alphabetical",
})
];

I have a work-in-progress .stylelintrtc file that contains a few comments and I wasn’t ready to use it, hence nothing else in gulp setup requests stylelint etc. but I am getting the following error, I believe becuase my .stylelintrtc file contains comments.

Sure I can remove these, but I wondered as to why it was even finding the file, when there is no mention to use it within my gulp config.

After trial and error

AMLException: end of the stream or a document separator is expected in "/Users/terryupton/Dropbox/Amasci/Websites/ZZZ_boilerplate-tailwind/boilerplate-tailwind.loc/.stylelintrc" at line 171, column 1:
`` I found by removing thetailwindcss('tailwind.js'),` from the processes the error didn’t occur.

An easy fix as I can either remove the comments or rename the .stylelintrtc file until I am ready, but wanted understand as to why this is occurring? Anyone able to shed some light?

Thanks.

[adamwathan]

Yeah we run stylefmt on everything by default because PostCSS generates some really annoyingly formatted code :/

This is probably a dumb idea, so I'm going to remove it and only run it against our CDN builds.

[terryupton]

Thanks for confirming @adamwathan - if you do keep it in, then it might be just worth a mention in the docs. It's not necessarily a bad idea, perhaps the .stylelint config file could be part of the package so people can choose to use it as default or rollout their own? I'm not sure if there would be any conflicts with both being used, I am pretty new to using stylelint myself...

[m1guelpf]

@adamwathan How about a config option to enable/disable stylelint?

[adamwathan]

Easier to just add it yourself to your PostCSS plugin list IMO.

[terryupton]

On a side note, i'd be interested to see what your stylelint config rules are...?

[adamwathan]

Literally nothing, we just stick stylefmt onto the end of the plugin chain with whatever the defaults are 😄

[adamwathan]

We're not actually trying to enforce any specific style, just clean up the absolutely horrid non-formatting you get out of the box :/

[terryupton]

@adamwathan just a further point on this it seems like stylfmt is a little outdated and I am also seeing this issue -> https://github.com/stylelint/stylelint/issues/3042 when using my own . stylelintrtc, which now I have set up.

[damiani]

FWIW, I'm getting warnings when building w/ Webpack and Laravel Mix...

Could not find "stylelint-config-recommended-scss". Do you need a `configBasedir`?

...which don't seem to be affecting compilation, and which I think are dealt with in a more recent version of stylelint than what stylefmt uses.

[adamwathan]

I hacked on removing stylelint from Tailwind completely a while ago, in hopes that I could find some very simple formatter that could just be applied to our generated code as well as our CDN builds but I literally couldn't find anything that worked properly. Inserting new nodes into the tree with PostCSS results in incredibly unpredictable formatting which is super annoying, so I'd really like to be able to format this stuff somehow.

I would love a PR from someone that removes stylelint from our main PostCSS plugin list but still manages to format the generated utilities nicely, and also keeps the non-minified CDN builds nicely formatted!

[evenfrost]

Got same Undefined rule font-family-no-missing-generic-family-keyword error and dead-ended here. As mentioned above, this is because stylefmt uses older version of stylelint which does not have this rule. But I still quite don't understand why it gets picked up.

[adamwathan]

Again PRs welcome :) Don't have time to dive into this myself until at least next week.

[damiani]

I was just about to PR a change from stylefmt to perfectionist—which in my testing, worked very well—but then I saw that @reinink has a branch here https://github.com/tailwindcss/tailwindcss/commit/ca2ad4c3efa4d0cd7eaffe299bcc3900c093caa4 that does the same thing.

Any reason not to use that?

[damiani]

As far as I can tell, a PostCSS plugin for prettier doesn't exist? It was on a issue thread in postCSSs repo where I came across the recommendation to use perfectionist, since they didn't seem to want to support prettier. I could be wrong.

Plus, the branch with the perfectionist fix already exists :)

[adamwathan]

@damiani I can't remember honestly where we got stuck there, if you're up for pulling that branch down and seeing where it's at, I'd gladly take a PR that finished it off.

@aparajita I tried Prettier as well but ran into issues, can't remember what they were unfortunately.

In a perfect world we would only run something like this during our build process for the dist builds, but when we generate new CSS with PostCSS the formatting is completely unpredictable and hard to control and looks just bad enough to drive me crazy, so I'd really like for Tailwind's generated code to also get formatted in a reasonable way so people aren't forced to use their own formatter to fix our crap.

[damiani]

Will do...In my testing, I just used the built-in {format: 'compact'} option and it yielded this, which seems like a reasonable result:

or expanded:

I'll check out the options that @reinink used in his branch, see if we can get the output to be close to what you have from stylefmt, and then post a PR this afternoon.

[adamwathan]

Dropped our stylefmt dependency for Perfectionist and tagged v0.4.1 (thanks Keith!)

I'd still like to improve this eventually and have it only apply to code Tailwind actually generates instead of to your entire CSS tree, but this is still better than what we had, and if someone wants to enforce a different style it's of course easy to just drop their own prettifier onto the end of the chain.