Switch to Sass and Stylelint

.stylelintignore

@@ -0,0 +1,2 @@
+/build/
+**/vendor/

.stylelintrc

@@ -0,0 +1,122 @@
+{
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-recommended-scss"
+  ],
+  "plugins": [
+    "stylelint-scss"
+  ],
+  "rules": {
+    "at-rule-empty-line-before": [
+      "always",
+      "ignore": [
+        "after-comment",
+        "blockless-after-same-name-blockless",
+        "inside-block"
+      ]
+    ],
+    "at-rule-name-space-after": "always",
+    "at-rule-no-unknown": null,
+    "at-rule-no-vendor-prefix": true,
+    "at-rule-semicolon-space-before": "never",
+    "block-closing-brace-empty-line-before": "never",
+    "block-closing-brace-newline-after": "always",
+    "block-opening-brace-space-before": "always",
+    "color-hex-length": "short",
+    "color-named": "never",
+    "declaration-block-semicolon-newline-after": "always-multi-line",
+    "declaration-block-semicolon-newline-before": "never-multi-line",
+    "declaration-block-semicolon-space-after": "always-single-line",
+    "declaration-empty-line-before": [
+      "always",
+      "except": [
+        "after-comment",
+        "after-declaration",
+        "first-nested"
+      ]
+    ],
+    "declaration-no-important": null,
+    "font-family-name-quotes": "always-where-recommended",
+    "font-weight-notation": [
+      "numeric",
+      {
+        "ignore": [
+          "relative"
+        ]
+      }
+    ],
+    "function-url-no-scheme-relative": true,
+    "function-url-quotes": "always",
+    "indentation": 2,
+    "length-zero-no-unit": true,
+    "max-empty-lines": 2,
+    "max-line-length": null,
+    "media-feature-name-no-unknown": true,
+    "media-feature-name-no-vendor-prefix": true,
+    "media-feature-parentheses-space-inside": "never",
+    "media-feature-range-operator-space-after": "always",
+    "media-feature-range-operator-space-before": "never",
+    "no-descending-specificity": null,
+    "no-duplicate-selectors": true,
+    "number-leading-zero": "never",
+    "property-no-vendor-prefix": true,
+    "rule-empty-line-before": [
+      "always",
+      {
+        "except": [
+          "first-nested"
+        ],
+        "ignore": [
+          "after-comment"
+        ]
+      }
+    ],
+    "scss/at-function-named-arguments": null,
+    "scss/at-function-parentheses-space-before": "never",
+    "scss/at-import-no-partial-leading-underscore": true,
+    "scss/at-mixin-argumentless-call-parentheses": null,
+    "scss/at-mixin-named-arguments": null,
+    "scss/at-mixin-parentheses-space-before": "never",
+    "scss/at-rule-no-unknown": true,
+    "scss/dollar-variable-colon-space-after": "at-least-one-space",
+    "scss/dollar-variable-colon-space-before": "never",
+    "scss/dollar-variable-no-missing-interpolation": true,
+    "scss/media-feature-value-dollar-variable": null,
+    "scss/no-duplicate-dollar-variables": [
+      true,
+      {
+        "ignoreInsideAtRules": [
+          "if",
+          "mixin"
+        ]
+      }
+    ],
+    "scss/operator-no-newline-after": true,
+    "scss/operator-no-newline-before": true,
+    "scss/operator-no-unspaced": true,
+    "selector-attribute-quotes": "always",
+    "selector-list-comma-newline-after": "always",
+    "selector-list-comma-newline-before": "never-multi-line",
+    "selector-list-comma-space-after": "always-single-line",
+    "selector-list-comma-space-before": "never-single-line",
+    "selector-max-attribute": 1,
+    "selector-max-class": 4,
+    "selector-max-combinators": 3,
+    "selector-max-compound-selectors": 4,
+    "selector-max-empty-lines": 1,
+    "selector-max-id": 1,
+    "selector-max-specificity": null,
+    "selector-max-type": 3,
+    "selector-max-universal": 1,
+    "selector-no-qualifying-type": null,
+    "selector-no-vendor-prefix": true,
+    "shorthand-property-no-redundant-values": true,
+    "string-quotes": "double",
+    "unicode-bom": "never",
+    "value-keyword-case": "lower",
+    "value-list-comma-newline-after": "never-multi-line",
+    "value-list-comma-newline-before": "never-multi-line",
+    "value-list-comma-space-after": "always",
+    "value-no-vendor-prefix": true
+  }
+}

README.md

@@ -32,7 +32,7 @@ If you want to submit a new feature or a bugfix, the best way is to create the c
 * Page templates are in `/layouts`
 * Global styles are in `/layouts/css`
 * Global static files are in `/static`
-* All content and localization specific styles are in `/locale`
+* All content is in `/locale`
   * Initial development usually happens in English: `/locale/en`
   * `/locale/{{locale}}/site.json` is where global localization information lives.
   * All content is in Markdown and is per locale.

TRANSLATION.md

@@ -53,7 +53,7 @@ would like to contribute to the translation of nodejs.org, please refer to the f
 
   * `site.json` (this contains the basic settings and navigation structure for the website)
   * `index.md` (this contains the Markdown translation for the home page.)
-  * `styles.styl` (this imports the necessary Stylus files)
+  * `styles.scss` (this imports the necessary Sass files)
   * All files and files in subfolders that end in `.md` are content pages and should be translated.
 
 * Prefix your PR with the localization group's name (e.g. `nodejs-no`). If you are only translating one of the above files, please mention them in your PR's subject as well, e.g.:

build.js

@@ -17,9 +17,10 @@ const prism = require('metalsmith-prism')
 const permalinks = require('metalsmith-permalinks')
 const pagination = require('metalsmith-yearly-pagination')
 const defaultsDeep = require('lodash.defaultsdeep')
-const autoprefixer = require('autoprefixer-stylus')
+const autoprefixer = require('autoprefixer')
 const marked = require('marked')
-const stylus = require('stylus')
+const postcss = require('postcss')
+const sass = require('node-sass')
 const ncp = require('ncp')
 const junk = require('junk')
 
@@ -213,39 +214,45 @@ function withPreserveLocale (preserveLocale) {
   }
 }
 
-// This function builds the static/css folder for all the Stylus files.
+// This function builds the static/css folder for all the Sass files.
 function buildCSS () {
-  console.log('[stylus] static/css started')
-  const labelForBuild = '[stylus] static/css finished'
+  console.log('[sass] static/css started')
+  const labelForBuild = '[sass] static/css finished'
   console.time(labelForBuild)
 
+  const src = path.join(__dirname, 'layouts/css/styles.scss')
+  const dest = path.join(__dirname, 'build/static/css/styles.css')
+
+  const sassOpts = {
+    file: src,
+    outFile: dest,
+    outputStyle: process.env.NODE_ENV !== 'development' ? 'compressed' : 'expanded',
+    precision: 6
+  }
+
   fs.mkdir(path.join(__dirname, 'build/static/css'), { recursive: true }, (err) => {
     if (err) {
       throw err
     }
 
-    fs.readFile(path.join(__dirname, 'layouts/css/styles.styl'), 'utf8', (err, data) => {
-      if (err) {
-        throw err
+    sass.render(sassOpts, (error, result) => {
+      if (error) {
+        throw error
       }
 
-      stylus(data)
-        .set('compress', process.env.NODE_ENV !== 'development')
-        .set('paths', [path.join(__dirname, 'layouts/css')])
-        .use(autoprefixer())
-        .render((error, css) => {
-          if (error) {
-            throw error
-          }
+      postcss([autoprefixer]).process(result.css, { from: src }).then(res => {
+        res.warnings().forEach(warn => {
+          console.warn(warn.toString())
+        })
 
-          fs.writeFile(path.join(__dirname, 'build/static/css/styles.css'), css, (err) => {
-            if (err) {
-              throw err
-            }
+        fs.writeFile(dest, res.css, (err) => {
+          if (err) {
+            throw err
+          }
 
-            console.timeEnd(labelForBuild)
-          })
+          console.timeEnd(labelForBuild)
         })
+      })
     })
   })
 }