{"id":579,"date":"2019-11-13T11:35:53","date_gmt":"2019-11-13T11:35:53","guid":{"rendered":"http:\/\/nicholshayes.co.uk\/blog\/?p=579"},"modified":"2019-12-19T15:19:09","modified_gmt":"2019-12-19T15:19:09","slug":"enabling-postcss-with-rails-6","status":"publish","type":"post","link":"http:\/\/nicholshayes.co.uk\/blog\/?p=579","title":{"rendered":"Enabling PostCSS with Rails 6"},"content":{"rendered":"\n

PostCSS<\/a> is a tool for transforming CSS with JavaScript. To enable it in a Rails application, I needed to make the following changes to my app. Please note that my app does not use turbolinks.<\/p>\n\n\n\n

\/app\/views\/layouts\/application.html.erb<\/strong><\/p>\n\n\n\n

Update so that the style sheet directive in the header uses stylesheet_pack_tag<\/em>. That is, replace:<\/p>\n\n\n\n

\n\n
&lt;%= stylesheet_link_tag 'application', media: 'all' %><\/div><\/div>\n\n<\/pre>\n\n\n\n
With:<\/p>\n\n\n\n
\n\n
&lt;%= stylesheet_pack_tag 'application', media: 'all' %><\/div><\/div>\n\n<\/pre>\n\n\n\n
Sorry  – opening brackets aren’t rendering nicely using the code include I’m using in this blog. Both declarations should start with a less than chevron.<\/p>\n\n\n\n
\/package.json<\/strong><\/p>\n\n\n\n
Add postcss dependencies to package.json:<\/p>\n\n\n\n
\n\n
{
\n  "name": "my_app",
\n  "private": true,
\n  "dependencies": {
\n    "@rails\/actioncable": "^6.0.0-alpha",
\n    "@rails\/activestorage": "^6.0.0-alpha",
\n    "@rails\/ujs": "^6.0.0-alpha",
\n    "@rails\/webpacker": "^4.0.7",
\n    "polyfill-nodelist-foreach": "^1.0.1",
\n    "postcss-browser-reporter": "^0.6.0",
\n    "postcss-import": "^12.0.1",
\n    "postcss-inline-svg": "^4.1.0",
\n    "postcss-preset-env": "^6.7.0",
\n    "postcss-reporter": "^6.0.1",
\n    "postcss-svgo": "^4.0.2"
\n  },
\n  "version": "0.1.0",
\n  "devDependencies": {
\n    "webpack-dev-server": "^3.9.0"
\n  }
\n}<\/div><\/div>\n\n<\/pre>\n\n\n\n
\/postcss.config.js<\/strong><\/p>\n\n\n\n
Add the following content to a file called\n\n
postcss.config.js<\/div><\/div>\n\nin  the root of the app:<\/p>\n\n\n\n
\n\n
module.exports = () => ({
\n  plugins: [
\n    require("postcss-import"),
\n    require("postcss-preset-env")({
\n      autoprefixer: {},
\n      features: {
\n        "focus-within": true,
\n        "nesting-rules": true,
\n        "color-mod-function": {
\n          unresolved: "warn"
\n        },
\n        "custom-properties": {
\n          preserve: false,
\n          warnings: true
\n        }
\n      }
\n    }),
\n    require("postcss-browser-reporter"),
\n    require("postcss-reporter")
\n  ]
\n});<\/div><\/div>\n\n<\/pre>\n\n\n\n
I believe that the rails webpacker stack already contains the PostCSS packages, but you may have to install them via yarn. I didn’t but then I have been trying to get this to work for a couple of days and may have installed them via another mechanism.<\/p>\n\n\n\n
With the the above changes in place, I was then able to load PostCSS files. Note that it was simplest to do this via the javascript<\/em> folder as they needed to be accessed relative to packs application.js<\/em> file. <\/p>\n\n\n\n
So as an example, I created the following file:<\/p>\n\n\n\n
\/app\/javascript\/packs\/test.css<\/strong><\/p>\n\n\n\n
\n\n
html,
\nbody {
\n  background: lightyellow;
\n}<\/div><\/div>\n\n<\/pre>\n\n\n\n
Then to enable it I had to modify \/app\/javascript\/packs\/application.js<\/em> by adding the following line:<\/p>\n\n\n\n
\n\n
import '.\/test.css'<\/div><\/div>\n\n<\/pre>\n\n\n\n
When I ran my app, the background turned yellow as expected.<\/p>\n\n\n\n
One thing to note is that once these changes have been put in place, the sass stylesheets in \/app\/stylesheets<\/em> are no longer loaded by the app.<\/p>\n","protected":false},"excerpt":{"rendered":"
PostCSS is a tool for transforming CSS with JavaScript. To enable it in a Rails application, I needed to make the following changes to my app. Please note that my app does not use turbolinks. \/app\/views\/layouts\/application.html.erb Update so that the style … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"http:\/\/nicholshayes.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/posts\/579"}],"collection":[{"href":"http:\/\/nicholshayes.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/nicholshayes.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/nicholshayes.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"http:\/\/nicholshayes.co.uk\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=579"}],"version-history":[{"count":6,"href":"http:\/\/nicholshayes.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/posts\/579\/revisions"}],"predecessor-version":[{"id":587,"href":"http:\/\/nicholshayes.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/posts\/579\/revisions\/587"}],"wp:attachment":[{"href":"http:\/\/nicholshayes.co.uk\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=579"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/nicholshayes.co.uk\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=579"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/nicholshayes.co.uk\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}