Skip to content

Commit 7f9248f

Browse files
XhmikosRXhmikosR
committed
Switch to Sass.
Also: * switch to double quotes * remove leading zeros * use double colon pseudo selectors * merge a few selectors * restored prism-tomorrow.css and moved it in vendor
1 parent 71f0eb1 commit 7f9248f

31 files changed

+4484
-1594
lines changed

Diff for: ‎.stylelintignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/build/
2+
**/vendor/

Diff for: ‎.stylelintrc

+122
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
{
2+
"extends": [
3+
"stylelint-config-standard",
4+
"stylelint-config-recommended-scss"
5+
],
6+
"plugins": [
7+
"stylelint-scss"
8+
],
9+
"rules": {
10+
"at-rule-empty-line-before": [
11+
"always",
12+
"ignore": [
13+
"after-comment",
14+
"blockless-after-same-name-blockless",
15+
"inside-block"
16+
]
17+
],
18+
"at-rule-name-space-after": "always",
19+
"at-rule-no-unknown": null,
20+
"at-rule-no-vendor-prefix": true,
21+
"at-rule-semicolon-space-before": "never",
22+
"block-closing-brace-empty-line-before": "never",
23+
"block-closing-brace-newline-after": "always",
24+
"block-opening-brace-space-before": "always",
25+
"color-hex-length": "short",
26+
"color-named": "never",
27+
"declaration-block-semicolon-newline-after": "always-multi-line",
28+
"declaration-block-semicolon-newline-before": "never-multi-line",
29+
"declaration-block-semicolon-space-after": "always-single-line",
30+
"declaration-empty-line-before": [
31+
"always",
32+
"except": [
33+
"after-comment",
34+
"after-declaration",
35+
"first-nested"
36+
]
37+
],
38+
"declaration-no-important": null,
39+
"font-family-name-quotes": "always-where-recommended",
40+
"font-weight-notation": [
41+
"numeric",
42+
{
43+
"ignore": [
44+
"relative"
45+
]
46+
}
47+
],
48+
"function-url-no-scheme-relative": true,
49+
"function-url-quotes": "always",
50+
"indentation": 2,
51+
"length-zero-no-unit": true,
52+
"max-empty-lines": 2,
53+
"max-line-length": null,
54+
"media-feature-name-no-unknown": true,
55+
"media-feature-name-no-vendor-prefix": true,
56+
"media-feature-parentheses-space-inside": "never",
57+
"media-feature-range-operator-space-after": "always",
58+
"media-feature-range-operator-space-before": "never",
59+
"no-descending-specificity": null,
60+
"no-duplicate-selectors": true,
61+
"number-leading-zero": "never",
62+
"property-no-vendor-prefix": true,
63+
"rule-empty-line-before": [
64+
"always",
65+
{
66+
"except": [
67+
"first-nested"
68+
],
69+
"ignore": [
70+
"after-comment"
71+
]
72+
}
73+
],
74+
"scss/at-function-named-arguments": null,
75+
"scss/at-function-parentheses-space-before": "never",
76+
"scss/at-import-no-partial-leading-underscore": true,
77+
"scss/at-mixin-argumentless-call-parentheses": null,
78+
"scss/at-mixin-named-arguments": null,
79+
"scss/at-mixin-parentheses-space-before": "never",
80+
"scss/at-rule-no-unknown": true,
81+
"scss/dollar-variable-colon-space-after": "at-least-one-space",
82+
"scss/dollar-variable-colon-space-before": "never",
83+
"scss/dollar-variable-no-missing-interpolation": true,
84+
"scss/media-feature-value-dollar-variable": null,
85+
"scss/no-duplicate-dollar-variables": [
86+
true,
87+
{
88+
"ignoreInsideAtRules": [
89+
"if",
90+
"mixin"
91+
]
92+
}
93+
],
94+
"scss/operator-no-newline-after": true,
95+
"scss/operator-no-newline-before": true,
96+
"scss/operator-no-unspaced": true,
97+
"selector-attribute-quotes": "always",
98+
"selector-list-comma-newline-after": "always",
99+
"selector-list-comma-newline-before": "never-multi-line",
100+
"selector-list-comma-space-after": "always-single-line",
101+
"selector-list-comma-space-before": "never-single-line",
102+
"selector-max-attribute": 1,
103+
"selector-max-class": 4,
104+
"selector-max-combinators": 3,
105+
"selector-max-compound-selectors": 4,
106+
"selector-max-empty-lines": 1,
107+
"selector-max-id": 1,
108+
"selector-max-specificity": null,
109+
"selector-max-type": 3,
110+
"selector-max-universal": 1,
111+
"selector-no-qualifying-type": null,
112+
"selector-no-vendor-prefix": true,
113+
"shorthand-property-no-redundant-values": true,
114+
"string-quotes": "double",
115+
"unicode-bom": "never",
116+
"value-keyword-case": "lower",
117+
"value-list-comma-newline-after": "never-multi-line",
118+
"value-list-comma-newline-before": "never-multi-line",
119+
"value-list-comma-space-after": "always",
120+
"value-no-vendor-prefix": true
121+
}
122+
}

Diff for: ‎.stylintrc

-122
This file was deleted.

Diff for: ‎README.md

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

Diff for: ‎TRANSLATION.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ would like to contribute to the translation of nodejs.org, please refer to the f
5353

5454
* `site.json` (this contains the basic settings and navigation structure for the website)
5555
* `index.md` (this contains the Markdown translation for the home page.)
56-
* `styles.styl` (this imports the necessary Stylus files)
56+
* `styles.scss` (this imports the necessary Sass files)
5757
* All files and files in subfolders that end in `.md` are content pages and should be translated.
5858

5959
* 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.:

Diff for: ‎build.js

+29-22
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,10 @@ const prism = require('metalsmith-prism')
1717
const permalinks = require('metalsmith-permalinks')
1818
const pagination = require('metalsmith-yearly-pagination')
1919
const defaultsDeep = require('lodash.defaultsdeep')
20-
const autoprefixer = require('autoprefixer-stylus')
20+
const autoprefixer = require('autoprefixer')
2121
const marked = require('marked')
22-
const stylus = require('stylus')
22+
const postcss = require('postcss')
23+
const sass = require('node-sass')
2324
const ncp = require('ncp')
2425
const junk = require('junk')
2526

@@ -213,39 +214,45 @@ function withPreserveLocale (preserveLocale) {
213214
}
214215
}
215216

216-
// This function builds the static/css folder for all the Stylus files.
217+
// This function builds the static/css folder for all the Sass files.
217218
function buildCSS () {
218-
console.log('[stylus] static/css started')
219-
const labelForBuild = '[stylus] static/css finished'
219+
console.log('[sass] static/css started')
220+
const labelForBuild = '[sass] static/css finished'
220221
console.time(labelForBuild)
221222

223+
const src = path.join(__dirname, 'layouts/css/styles.scss')
224+
const dest = path.join(__dirname, 'build/static/css/styles.css')
225+
226+
const sassOpts = {
227+
file: src,
228+
outFile: dest,
229+
outputStyle: process.env.NODE_ENV !== 'development' ? 'compressed' : 'expanded',
230+
precision: 6
231+
}
232+
222233
fs.mkdir(path.join(__dirname, 'build/static/css'), { recursive: true }, (err) => {
223234
if (err) {
224235
throw err
225236
}
226237

227-
fs.readFile(path.join(__dirname, 'layouts/css/styles.styl'), 'utf8', (err, data) => {
228-
if (err) {
229-
throw err
238+
sass.render(sassOpts, (error, result) => {
239+
if (error) {
240+
throw error
230241
}
231242

232-
stylus(data)
233-
.set('compress', process.env.NODE_ENV !== 'development')
234-
.set('paths', [path.join(__dirname, 'layouts/css')])
235-
.use(autoprefixer())
236-
.render((error, css) => {
237-
if (error) {
238-
throw error
239-
}
243+
postcss([autoprefixer]).process(result.css, { from: src }).then(res => {
244+
res.warnings().forEach(warn => {
245+
console.warn(warn.toString())
246+
})
240247

241-
fs.writeFile(path.join(__dirname, 'build/static/css/styles.css'), css, (err) => {
242-
if (err) {
243-
throw err
244-
}
248+
fs.writeFile(dest, res.css, (err) => {
249+
if (err) {
250+
throw err
251+
}
245252

246-
console.timeEnd(labelForBuild)
247-
})
253+
console.timeEnd(labelForBuild)
248254
})
255+
})
249256
})
250257
})
251258
}

0 commit comments

Comments
 (0)