Refactor styling to drop PostCSS (#424)

Update custom_css logic (ensure retrocompat)

Fixes #423

README.md

@@ -148,40 +148,29 @@ And a list of background colors [here](https://github.com/tachyons-css/tachyons/
 _n.b. in future versions we will likely separate the typeface and other body classes._
 
 
-### Custom CSS
+### CSS
 
-You can override the built-in css by using your own. Just put your own css files in the `static` directory of your website (the one in the theme directory also works but is not recommended) and modify the `custom_css` parameter in your config file. The path referenced in the parameter should be relative to the `static` folder. These css files will be added through the `header` partial after the built-in css file.
+Ananke stylesheet is built with Hugo Pipes's [Asset Bundling](https://gohugo.io/hugo-pipes/bundling/#readout) alone to maximize compatibiliy. The theme simply bundles its several files into one minified and fingerprinted (in production) CSS file.
 
-For example, if your css files are `static/css/custom.css` and `static/css/custom2.css` then add the following to the config file:
+Ananke uses [Tachyon.io](http://tachyons.io/) utility class library.
+
+#### Custom CSS
+
+In order to complement the default CSS with your own, you can add custom css files to the project. 
+
+1. Just add a `assets/ananke/css` directory to your project and add the file(s) in it.
+2. Register the files using the `custom_css` key in your site's parameter. The path referenced in the parameter should be relative to the `assets/ananke/css` folder. 
+
+The css files will be added in their registered order to final `main.css` file.
+
+For example, if your css files are `assets/ananke/css/custom.css` and `assets/ananke/special.css` then add the following to the config file:
 
 ```
   [params]
-      custom_css = ["css/custom.css","css/custom2.css"]
+    custom_css = ["custom.css","special.css"]
 ```
 
-### Processed CSS
+__Note on retrocompatibiliy for custom css__: If the files registered through the `custom_css` setting are not found in `assets/ananke/css` the theme will expect them to live at the given path relative to the static directory and load them as <link> requests.
-
-By default, Ananke will read a preprocessed stylesheet from `/assets/ananke/dist/main.[hash].css`. If you want to have Hugo process the stylesheet for you thus allowing better customisation using Hugo's unison file system, you need to:
-
-1. From the root of your project: `$ hugo mod npm pack`.  
-This will generate a `package.json` for your project, or append the npm packages required by the theme to your existing `package.json`.
-2. Still from the root of your project: `$ npm install`
-3. Set the following site Parameter to true:
-
-```
-    [params]
-      ananke_process_css = true
-```
-
-You're all set an can run Hugo.
-
-#### Overwrite some imported file
-
-To have your own `_code.css` imported and processed by the theme. Add `/assets/ananke/css/_code.css` to your project.
-
-#### Add a new import
-
-Create your own `/assets/ananke/css/` directory at the root of your project, drop your files in there, and create your own `/main.css` with your own import statements. Don't forget to include the existing import statement from the theme's own `main.css`.
 
 ### Show Reading Time and Word Count
 

assets/ananke/css/main.css

@@ -1,5 +0,0 @@
-@import '_tachyons';
-@import '_code';
-@import '_hugo-internal-templates';
-@import '_social-icons';
-@import '_styles';

layouts/partials/func/style/GetMainCSS.html

@@ -0,0 +1,50 @@
+{{/*
+  style/GetMainCSS
+  Process the main css stylesheet and return as resource
+
+  @author @regisphilibert
+
+  @context Any (.)
+
+  @returns Resource
+
+  @uses
+     - func/style/GetResource
+*/}}
+{{ $main_style := dict }}
+
+{{/* We prepare a slice of resources to be concatenated as one */}}
+{{ $assets_to_concat := slice }}
+{{/* We add locale css files to the slice in the proper order */}}
+{{ range slice "_tachyons.css" "_code.css" "_hugo-internal-templates.css" "_social-icons.css" "_styles" }}
+  {{ with partialCached "func/style/GetResource" . . }}
+    {{ $assets_to_concat = $assets_to_concat | append . }}
+  {{ end }}
+{{ end }}
+
+{{/* We look for any custom css files registered by the user under `site.params.custom_css and if found in the theme's 
+css asset directory we add to aforementioned slice */}}
+{{ with site.Params.custom_css }}
+  {{ range . }}
+    {{ with partialCached "func/style/GetResource" . . }}
+      {{ $assets_to_concat = $assets_to_concat | append . }}
+    {{ end }}
+  {{ end }}
+{{ end }}
+
+{{ with $assets_to_concat }}
+  {{/* We proceed to concatenate the $assets_to_concat */}}
+  {{ $style := . | resources.Concat "ananke/css/main.css" }}
+
+  {{/* We then use toCSS to add sourceMap and minify */}}
+  {{ $options := dict "enableSourceMap" true "precision" 6 }}
+  {{ $style = $style | resources.ToCSS $options | minify }}
+  {{/* We fingerprint in production for cache busting purposes */}}
+  {{ if eq (getenv "HUGO_ENV") "production" }}
+    {{ $style = . | fingerprint }}
+  {{ end }}
+  {{/* We're ready to set returning variable with resulting resource */}}
+  {{ $main_style = $style }}
+{{ end }}
+
+{{ return $main_style }}

layouts/partials/func/style/GetResource.html

@@ -0,0 +1,19 @@
+{{/*
+  style/GetResource
+  Get a style asset stored at `/assets/ananke/css`
+
+  @author @regisphilibert
+
+  @context String (.)
+
+  @access private
+
+  @returns Resource
+
+*/}}
+{{ $resource := dict }}
+{{ with resources.Get (print "/ananke/css/" .) }}
+  {{ $resource = . }}
+{{ end }}
+
+{{ return $resource }}

layouts/partials/site-style.html

@@ -1,27 +1,9 @@
-{{/* We only process CSS if below setting is true */}}
+{{ with partialCached "func/style/GetMainCSS" "style/GetMainCSS" }}
-{{ if site.Params.ananke_process_css }}
-  {{ with resources.Get "/ananke/css/main.css" }}
-    {{/* We use ToCSS on non sass to make sure node_modules paths are included and imported
-    Then we can run PostCSS on the resulting asset.
-    `use` setting allow us to skip the postcss.config file.
-     */}}
-    {{ $options := (dict "targetPath" "/ananke/css/main.css" "enableSourceMap" true "precision" 6 "includePaths" (slice "node_modules")) }}
-    {{ $style := . | resources.ToCSS $options | resources.PostCSS (dict "use" "postcss-cssnext") | minify }}
-    {{/* We fingerprint in production to ensure cache busting */}}
-    {{ if eq (getenv "HUGO_ENV") "production" }}
-      {{ $style = . | fingerprint }}
-    {{ end }}
-    {{ with $style }}
 <link rel="stylesheet" href="{{ .RelPermalink }}" >
 {{ end }}
-  {{ end }}
-{{ else }}
-  {{/* If processing is turned off, we use the assets/dist/main.?.css commited to the repo. */}}
-  {{ with resources.GetMatch "/ananke/dist/main.*.css" }}
-    <link rel="stylesheet" href="{{ .RelPermalink }}" >
-  {{ end }}
-{{ end }}
 
-{{ range .Site.Params.custom_css }}
+{{ range site.Params.custom_css }}
+  {{ with partialCached "func/style/GetResource" . . }}{{ else }}
     <link rel="stylesheet" href="{{ relURL (.) }}">
   {{ end }}
+{{ end }}