docs: Add Webpack example that uses PostCSS instead of Sass

bridgetownrb / bridgetown

A next-generation progressive site generator & fullstack framework, powered by Ruby

https://www.bridgetownrb.com

MIT License

1.16k stars 112 forks source link

docs: Add Webpack example that uses PostCSS instead of Sass #29

Closed jaredcwhite closed 3 years ago

jaredcwhite commented 4 years ago

Our default Webpack config comes with sass-loader, partially to ease migrations from Jekyll and partially because I personally use Sass. :) But I know PostCSS is popular with a lot of folks now, so I'd like to include an example in the documentation of how to swap out Sass for PostCSS.

jaredcwhite commented 4 years ago

Oof, I'm gonna need some assistance with this one. Apparently there are over 200 PostCSS plugins and you can mix and match your preferred config. 🤪

Time to find a PostCSS expert… (which I'm not LOL)

jaredcwhite commented 4 years ago

Looks like this is definitely the way to go: https://preset-env.cssdb.org/

Thanks to @budparr and @jescalan for the helpful tip!

jaredcwhite commented 4 years ago

Woohoo, the community is stepping up! https://andrewm.codes/posts/build-and-deploy-a-static-site-with-ruby-bridgetown-tailwindcss-and-netlify-3934/

andrewmcodes commented 4 years ago

@jaredcwhite Is there something you'd still like to happen here? I'm pretty comfortable with postcss in Bridgetown so I can step in here.

jaredcwhite commented 4 years ago

I think there are good examples out in the wild now with automations and so forth…we should probably just do a better job of surfacing that in the docs for anyone trying to figure it out.

ayushn21 commented 3 years ago

I made a bridgetown starter template that uses PostCSS. I've also changed a bunch of other stuff from the default bridgetown new site. I've posted on the community forum about it but thought I'd cross post here as well:

https://community.bridgetownrb.com/t/a-starter-template-that-integrates-postcss/36

If you like any of the ideas I've put forward, I'm happy to spend some time on a PR to update the bridgetown new site structure and/or the documentation. Let me know :)

jaredcwhite commented 3 years ago

@ayushn21 Thanks, it was a fun read and lots of cool ideas!

I'd definitely be open to a PR that makes PostCSS configuration the default, with an optional flag to set up with Sass instead (or in addition?). It seems by and large like the industry's heading in that direction.

I think changing the directory structure from what we have now would be a harder sell, but that should be something that's easy to facilitate if people want an alternative (you could probably write an automation that would turn bridgetown new output into the directory structure you prefer).

ayushn21 commented 3 years ago

Cheers @jaredcwhite!

The directory structure was obviously just something I adjusted to my preference; completely agree that it wouldn't necessarily make sense for Bridgetown to officially adopt that.

I'll try to put together a PR that configures PostCSS in the default bridgetown new site. Should get some time over the next couple of weeks!

If the PostCSS configuration contains a SASS plugin (as it does in my setup), do you think it's still necessary to have a separate SASS option? In theory, with a SASS plugin, there should be no changes needed from using traditional SASS. Theory doesn't always match up to reality though. What do you think?

jaredcwhite commented 3 years ago

If the Sass plugin supports Bulma, I'm cool with it. 😋

ayushn21 commented 3 years ago

Cool, I'll look into it! :)

jaredcwhite commented 3 years ago

That bit from your article about the module resolution is pretty cool as well! Maybe we could toss in something like this:

modules: [
  path.resolve(__dirname, "frontend', "javascript"),
  path.resolve(__dirname, "frontend", "styles"),
  path.resolve(__dirname, "frontend"),
  path.resolve(__dirname, "src", "_components"),
  path.resolve("./node_modules")
]

ayushn21 commented 3 years ago

Yup for sure, will create a separate PR for this once I've done the PostCSS integration :)

ayushn21 commented 3 years ago

After a brief investigation into configuring PostCSS as a default and using the official Bridgetown website as a guinea-pig, here's what I found:

Most SASS functionality works as-is with the PostCSS SASS plugin.
@import "~framework/framework" syntax doesn't work. For Bulma I had to import it as @import "bulma/css/bulma.css".
There's other issues around @imports behaving weirdly with relative paths etc.
I can't seem to get the SASS plugin to look in src/_components.

Due to this, the approach I'm looking at taking for my PR is:

Setup PostCSS by default on bridgetown new.
Add a --use-sass flag that will create a new project as it is today.
In the PostCSS setup, autoload CSS files in frontend/styles and src/_components as described in my blog post.

What do you think @jaredcwhite? I haven't started work on this yet so just making sure the approach aligns with your project goals. Happy to make any alterations as you see fit!

jaredcwhite commented 3 years ago

@ayushn21 That sounds good as a first draft, and we can test out potential edge cases once the PR is up. Thanks!