https://github.com/adrienpoly/sprockets-less-rails6
Playground Rails6 application with Webpacker
https://github.com/adrienpoly/sprockets-less-rails6
purgecss rails6 sprocketless webpacker
Last synced: 8 months ago
JSON representation
Playground Rails6 application with Webpacker
- Host: GitHub
- URL: https://github.com/adrienpoly/sprockets-less-rails6
- Owner: adrienpoly
- Created: 2019-09-01T08:28:04.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2021-06-16T09:17:37.000Z (almost 5 years ago)
- Last Synced: 2025-01-14T11:14:13.492Z (over 1 year ago)
- Topics: purgecss, rails6, sprocketless, webpacker
- Language: Ruby
- Homepage: https://sprockets-less-rails6.herokuapp.com/
- Size: 7.77 MB
- Stars: 8
- Watchers: 3
- Forks: 1
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Sprockets Less Playground
Looking as some optimisation when moving all assets to Webpacker
## Part 1 : Inline Critical CSS with Purges CSS
Read more [dev.to](https://dev.to/adrienpoly/critical-css-with-rails-and-webpacker-sprocketsless-part-1-2bck)
Key take away the PostCSS config
```js
// postcss.config.js
const environment = ctx => ({
plugins: [
require("postcss-import"),
require("postcss-flexbugs-fixes"),
require("postcss-preset-env")({
autoprefixer: {
flexbox: "no-2009"
},
stage: 3
}),
purgeCss(ctx)
]
});
const purgeCss = ({ file }) => {
return require("@fullhuman/postcss-purgecss")({
content: htmlFilePatterns(file.basename),
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [],
extractors: [
{
extractor: require("purgecss-from-html"),
extensions: ["html"]
}
]
});
};
const htmlFilePatterns = filename => {
switch (filename) {
case "critical.scss":
return [
"./app/views/pages/index.html.erb",
"./app/views/shared/_navbar.html.erb",
"./app/views/layouts/application.html.erb"
];
default:
return [
"./app/**/*.html.erb",
"./config/initializers/simple_form_bootstrap.rb",
"./app/helpers/**/*.rb",
"./app/javascript/**/*.js"
];
}
};
module.exports = ctx => environment(ctx);
```