chore: create another postcss.config.js for RTL

assets/main/config/rtl/postcss.config.js

@@ -0,0 +1,12 @@
+const purgecss = require('../../../../purgecss.config.js').default;
+
+const autoprefixer = require('autoprefixer');
+const rtlcss = require('rtlcss');
+
+module.exports = {
+  plugins: [
+    autoprefixer,
+    purgecss,
+    rtlcss,
+  ]
+}

assets/main/scss/index.scss

@@ -1,4 +1,3 @@
-/*!rtl:begin:ignore*/
 // Base
 @import 'bootstrap';
 
@@ -41,5 +40,3 @@
 
 /*!purgecss end ignore*/
 @import 'faq';
-
-/*!rtl:end:ignore*/

layouts/partials/assets/main/css.html

@@ -1,14 +1,15 @@
+{{- $postCSSOptions := dict }}
 {{- $dir := "" }}
 {{- if eq .Site.Language.LanguageDirection "rtl" }}
+  {{- $postCSSOptions = merge $postCSSOptions (dict "config" "assets/main/config/rtl") }}
   {{- $dir = ".rtl" }}
 {{- end }}
-{{- /* Unable to use expanded style, to be fixed. */}}
-{{- $outputStyle := "compressed" }}
+{{- $outputStyle := "expanded" }}
 {{- if hugo.IsProduction }}{{ $outputStyle = "compressed" }}{{ end }}
 {{- $options := dict "targetPath" (printf "assets/main/bundle%s.min.css" $dir) "outputStyle" $outputStyle "includePaths" (slice "node_modules") }}
 {{- $config := resources.Get "main/scss/_config.scss" | resources.ExecuteAsTemplate "main/scss/_config.scss" . }}
-{{- $main := resources.Get (printf "main/scss/index%s.scss" $dir) }}
-{{- $style := slice $config $main | resources.Concat (printf "main/scss/main%s.css" $dir) | toCSS $options | resources.PostCSS |fingerprint | resources.PostProcess }}
+{{- $main := resources.Get "main/scss/index.scss" }}
+{{- $style := slice $config $main | resources.Concat (printf "main/scss/main%s.css" $dir) | toCSS $options | resources.PostCSS $postCSSOptions |fingerprint | resources.PostProcess }}
 <link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}" crossorigin="anonymous">
 {{- range .Site.Params.customCSS }}
 <link rel="stylesheet" href="{{ absURL . }}" crossorigin="anonymous">

postcss.config.js

@@ -1,51 +1,9 @@
-
-const stats = './hugo_stats.json';
-const fs = require('fs');
-fs.access(stats, fs.F_OK, (err) => {
-  if (err) {
-    throw new Error('Hugo stats file not found, please turn on the "build.writeStats". See also https://hbs.razonyang.com/v1/en/docs/getting-started/prerequisites/#configuration.')
-  }
-});
-
-const purgecss = require('@fullhuman/postcss-purgecss')({
-  content: [ stats, "./extra_stats.json" ],
-  defaultExtractor: (content) => {
-      let els = JSON.parse(content).htmlElements;
-      return els.tags.concat(els.classes, els.ids);
-  },
-  safelist: {
-    standard: [
-      'active',
-      'bottom-0',
-      'btn-primary', 'btn-outline-primary',
-      'col-lg-10',
-      'd-flex',
-      'end-0',
-      'fs-lg', 'fs-sm', 'fs-xl', 'fs-xs', 'fst-italic',
-      'justify-content-center',
-      'mb-0',
-      'offcanvas-backdrop',
-      'opacity-0', 'opacity-50', 'opacity-100',
-      'p-1', 'pe-3', 'pt-0', 'pt-1', 'px-3', 'py-2', 'position-absolute', 'position-fixed', 'position-relative', 'position-sticky',
-      'rounded', 'rounded-top',
-      'show',
-      'text-pre-wrap', 'text-uppercase', 'text-white', 'top-0', 'text-bg-secondary', 'text-success',
-      'user-select-all',
-      'w-100',
-      'was-validated',
-    ],
-    // deep: [/blue$/],
-    greedy: [/carousel-indicators$/]
-  },
-  dynamicAttributes: ['data-bs-popper', 'data-theme', 'data-palette', 'role']
-});
+const purgecss = require('./purgecss.config.js').default;
 
 const autoprefixer = require('autoprefixer');
-const rtlcss = require('rtlcss');
 
 module.exports = {
   plugins: [
-    rtlcss,
     autoprefixer,
     purgecss,
   ]

purgecss.config.js

@@ -0,0 +1,41 @@
+const stats = './hugo_stats.json';
+const fs = require('fs');
+fs.access(stats, fs.F_OK, (err) => {
+  if (err) {
+    throw new Error('Hugo stats file not found, please turn on the "build.writeStats". See also https://hbs.razonyang.com/v1/en/docs/getting-started/prerequisites/#configuration.')
+  }
+});
+const purgecss = require('@fullhuman/postcss-purgecss')({
+  content: [ stats, "./extra_stats.json" ],
+  defaultExtractor: (content) => {
+      let els = JSON.parse(content).htmlElements;
+      return els.tags.concat(els.classes, els.ids);
+  },
+  safelist: {
+    standard: [
+      'active',
+      'bottom-0',
+      'btn-primary', 'btn-outline-primary',
+      'col-lg-10',
+      'd-flex',
+      'end-0',
+      'fs-lg', 'fs-sm', 'fs-xl', 'fs-xs', 'fst-italic',
+      'justify-content-center',
+      'mb-0',
+      'offcanvas-backdrop',
+      'opacity-0', 'opacity-50', 'opacity-100',
+      'p-1', 'pe-3', 'pt-0', 'pt-1', 'px-3', 'py-2', 'position-absolute', 'position-fixed', 'position-relative', 'position-sticky',
+      'rounded', 'rounded-top',
+      'show',
+      'text-pre-wrap', 'text-uppercase', 'text-white', 'top-0', 'text-bg-secondary', 'text-success',
+      'user-select-all',
+      'w-100',
+      'was-validated',
+    ],
+    // deep: [/blue$/],
+    greedy: [/carousel-indicators$/]
+  },
+  dynamicAttributes: ['data-bs-popper', 'data-theme', 'data-palette', 'role']
+});
+
+exports.default = purgecss;