Use one stylesheet for all locales. Fixes #985

build.js

@@ -125,14 +125,6 @@ function buildLocale (source, locale) {
     .use(markdown(markedOptions))
     .use(githubLinks({ locale: locale }))
     .use(prism())
-    // Deletes Stylus partials since they'll be included in the main CSS file
-    // anyways.
-    .use(filterStylusPartials())
-    .use(stylus({
-      compress: true,
-      paths: [path.join(__dirname, 'layouts', 'css')],
-      use: [autoprefixer()]
-    }))
     // Set pretty permalinks, we don't want .html suffixes everywhere.
     .use(permalinks({
       relative: false
@@ -220,6 +212,37 @@ function githubLinks (options) {
   }
 }
 
+// This function builds the layouts folder for all the Stylus files.
+function buildLayouts () {
+  console.time('[metalsmith] build/layouts finished')
+
+  fs.mkdir(path.join(__dirname, 'build'), () => {
+    fs.mkdir(path.join(__dirname, 'build', 'layouts'), () => {
+      const metalsmith = Metalsmith(__dirname)
+      metalsmith
+          // Sets the build source as /layouts/css.
+          .source(path.join(__dirname, 'layouts', 'css'))
+          // Deletes Stylus partials since they'll be included in the main CSS
+          // file anyways.
+          .use(filterStylusPartials())
+          .use(stylus({
+            compress: true,
+            paths: [path.join(__dirname, 'layouts', 'css')],
+            use: [autoprefixer()]
+          }))
+          // Pipes the generated files into /build/layouts/css.
+          .destination(path.join(__dirname, 'build', 'layouts', 'css'))
+
+      // This actually executes the build and stops the internal timer after
+      // completion.
+      metalsmith.build((err) => {
+        if (err) { throw err }
+        console.timeEnd('[metalsmith] build/layouts finished')
+      })
+    })
+  })
+}
+
 // This function copies the rest of the static assets to their subfolder in the
 // build directory.
 function copyStatic () {
@@ -259,8 +282,10 @@ function getSource (callback) {
 // This is where the build is orchestrated from, as indicated by the function
 // name. It brings together all build steps and dependencies and executes them.
 function fullBuild () {
-  // Copies static files.
+  // Build static files.
   copyStatic()
+  // Build layouts
+  buildLayouts()
   getSource((err, source) => {
     if (err) { throw err }
 

layouts/css/_base.styl

@@ -0,0 +1,73 @@
+// Base styles
+body
+  box-sizing border-box
+  font 400 20px/1.5 'Source Sans Pro', Open Sans, Roboto, 'San Francisco', Helvetica, Arial, sans-serif
+  color $node-gray
+  margin 0
+  background-color $white
+
+header,
+#main,
+footer
+  display flex
+
+h1,
+h2,
+h3,
+h4,
+h5
+  font-weight 400
+
+a,
+a:link,
+a:active
+  color $node-green
+  text-decoration none
+  border-radius 2px
+
+a:hover
+  color $white
+  background-color $node-green
+
+a:hover
+  code
+    background-color transparent
+    color #fff
+
+a.imagelink:hover
+  background-color transparent
+
+strong,
+b
+  font-weight 600
+
+p
+  a
+    padded-link(2px)
+
+img
+  display block
+  max-width 100%
+
+  .logos &
+    // Fixes logo size on Firefox, see:
+    // https://github.com/nodejs/nodejs.org/issues/558
+    width 100%
+
+code
+  background-color $light-gray3
+  font-size 85%
+  padding 0.2em
+
+pre
+  background-color $node-gray
+  border-radius 3px
+  padding 0.75em 1.2em
+  font-size 0.8em
+  white-space pre-wrap
+  color $light-gray3
+  overflow-x auto
+
+  code
+    color $light-gray3
+    background-color inherit

layouts/css/base.styl → layouts/css/styles.styl

@@ -1,79 +1,5 @@
 @import '_variables'
-
-// Base styles
-body
-  box-sizing border-box
-  font 400 20px/1.5 'Source Sans Pro', Open Sans, Roboto, 'San Francisco', Helvetica, Arial, sans-serif
-  color $node-gray
-  margin 0
-  background-color $white
-
-header,
-#main,
-footer
-  display flex
-
-h1,
-h2,
-h3,
-h4,
-h5
-  font-weight 400
-
-a,
-a:link,
-a:active
-  color $node-green
-  text-decoration none
-  border-radius 2px
-
-a:hover
-  color $white
-  background-color $node-green
-
-a:hover
-  code
-    background-color transparent
-    color #fff
-
-a.imagelink:hover
-  background-color transparent
-
-strong,
-b
-  font-weight 600
-
-p
-  a
-    padded-link(2px)
-
-img
-  display block
-  max-width 100%
-
-  .logos &
-    // Fixes logo size on Firefox, see:
-    // https://github.com/nodejs/nodejs.org/issues/558
-    width 100%
-
-code
-  background-color $light-gray3
-  font-size 85%
-  padding 0.2em
-
-pre
-  background-color $node-gray
-  border-radius 3px
-  padding 0.75em 1.2em
-  font-size 0.8em
-  white-space pre-wrap
-  color $light-gray3
-  overflow-x auto
-
-  code
-    color $light-gray3
-    background-color inherit
-
+@import '_base'
 // Import specific page sections and layout parts
 @import 'layout/_sticky-footer'
 @import 'layout/_grid'

layouts/partials/html-head.hbs

@@ -17,7 +17,7 @@
   {{#each site.feeds}}
   <link rel="alternate" href="/{{ ../site.locale }}/{{ link }}" title="{{ text }}" type="application/rss+xml">
   {{/each}}
-  <link rel="stylesheet" href="/{{ site.locale }}/styles.css" media="all">
+  <link rel="stylesheet" href="/layouts/css/styles.css" media="all">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600">
   <script>
   document.querySelector('html').className += " has-js";