feat: rework css generation and project layout

.eslintrc.json

@@ -1,27 +0,0 @@
-{
-  "env": {
-    "node": true
-  },
-  "parserOptions": {
-    "sourceType": "module"
-  },
-  "extends": "eslint:recommended",
-  "rules": {
-    "comma-dangle": [
-      "error",
-      "always-multiline"
-    ],
-    "indent": [
-      "error",
-      2
-    ],
-    "quotes": [
-      "error",
-      "single"
-    ],
-    "semi": [
-      "error",
-      "always"
-    ]
-  }
-}

.gitignore

@@ -1,71 +1,83 @@
-# https://github.com/github/gitignore/blob/master/Node.gitignore
+# Logs
-# Logs
+logs
-logs
+*.log
-*.log
+npm-debug.log*
-npm-debug.log*
+yarn-debug.log*
-yarn-debug.log*
+yarn-error.log*
-yarn-error.log*
+
-
+# Runtime data
-# Runtime data
+pids
-pids
+*.pid
-*.pid
+*.seed
-*.seed
+*.pid.lock
-*.pid.lock
+
-
+# Directory for instrumented libs generated by jscoverage/JSCover
-# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
-lib-cov
+
-
+# Coverage directory used by tools like istanbul
-# Coverage directory used by tools like istanbul
+coverage
-coverage
+
-
+# nyc test coverage
-# nyc test coverage
+.nyc_output
-.nyc_output
+
-
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
-.grunt
+
-
+# Bower dependency directory (https://bower.io/)
-# Bower dependency directory (https://bower.io/)
+bower_components
-bower_components
+
-
+# node-waf configuration
-# node-waf configuration
+.lock-wscript
-.lock-wscript
+
-
+# Compiled binary addons (https://nodejs.org/api/addons.html)
-# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
-build/Release
+
-
+# Dependency directories
-# Dependency directories
+node_modules/
-node_modules/
+jspm_packages/
-jspm_packages/
+
-
+# TypeScript v1 declaration files
-# TypeScript v1 declaration files
+typings/
-typings/
+
-
+# Optional npm cache directory
-# Optional npm cache directory
+.npm
-.npm
+
-
+# Optional eslint cache
-# Optional eslint cache
+.eslintcache
-.eslintcache
+
-
+# Optional REPL history
-# Optional REPL history
+.node_repl_history
-.node_repl_history
+
-
+# Output of 'npm pack'
-# Output of 'npm pack'
+*.tgz
-*.tgz
+
-
+# Yarn Integrity file
-# Yarn Integrity file
+.yarn-integrity
-.yarn-integrity
+
-
+# dotenv environment variables file
-# dotenv environment variables file
+.env
-.env
+.env.test
-
+
-# next.js build output
+# parcel-bundler cache (https://parceljs.org/)
-.next
+.cache
-
+
-# vuepress build output
+# next.js build output
-.vuepress/dist
+.next
-
+
-# Serverless directories
+# nuxt.js build output
-.serverless
+.nuxt
-
+
-# Temporary css folder for development
+# vuepress build output
-temp
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# CSS Development folder
+temp/

.stylelintrc.json

@@ -1,8 +1,11 @@
-{
+{
-  "extends": "stylelint-config-recommended",
+  "extends": "stylelint-config-recommended",
-  "rules": {
+  "plugins": [
-    "indentation": 2,
+    "stylelint-scss"
-    "string-quotes": "single",
+  ],
-    "no-descending-specificity": null
+  "rules": {
-  }
+    "indentation": 2,
-}
+    "string-quotes": "single",
+    "no-descending-specificity": null
+  }
+}

README.md

@@ -1,22 +1,22 @@
-# Bauke's Styles
+# Bauke's Styles
-
+
-> Collection of my user styles for various websites.
+> Collection of my user styles for various websites.
-
+
-## Collection
+## Collection
-
+
-| Name | Version | Applies To | User CSS |
+| Name | Version | Applies To | User CSS |
-|------|---------|------------|----------|
+|------|---------|------------|----------|
-| Tildes Compact | 1.0.6 | [tildes.net](https://tildes.net) | [Click](https://gitlab.com/Bauke/styles/raw/master/css/tildes-compact/tildes-compact.user.css) |
+| Tildes Compact | 1.0.7 | [tildes.net](https://tildes.net) | [Click](https://gitlab.com/Bauke/styles/raw/master/css/tildes-compact/tildes-compact.user.css) |
-| Tildes Dracula | 2.1.4 | [tildes.net](https://tildes.net) | [Click](https://gitlab.com/Bauke/styles/raw/master/css/tildes-dracula/tildes-dracula.user.css) |
+| Tildes Dracula | 2.1.5 | [tildes.net](https://tildes.net) | [Click](https://gitlab.com/Bauke/styles/raw/master/css/tildes-dracula/tildes-dracula.user.css) |
-
+
-## Installing
+## Installing
-
+
-Refer to [the Wiki](https://gitlab.com/Bauke/styles/wikis/Installing-Styles) for installation guidelines.
+Refer to [the Wiki](https://gitlab.com/Bauke/styles/wikis/Installing-Styles) for installation guidelines.
-
+
-## Building
+## Building
-
+
-If you'd like to build the CSS yourself, refer to [the Wiki](https://gitlab.com/Bauke/styles/wikis/Building-Styles) for building guidelines.
+If you'd like to build the CSS yourself, refer to [the Wiki](https://gitlab.com/Bauke/styles/wikis/Building-Styles) for building guidelines.
-
+
-## License
+## License
-
+
-Licensed under MIT.
+Licensed under MIT.

build.js

@@ -0,0 +1,88 @@
+// Builds all styles into `css` as `*.css` and `*.user.css` files.
+
+const { execSync } = require('child_process');
+const { join } = require('path');
+const { moveSync, mkdirpSync, readdirSync, readFileSync, removeSync, writeFileSync } = require('fs-extra');
+const { create } = require('usercss-creator');
+
+if (!process.env.STYLE_ENV) {
+  throw new Error('Environment variable STYLE_ENV is not set.');
+}
+
+const tempPath = join(__dirname, 'temp');
+const logMeta = process.env.STYLE_ENV === 'dev' ? '[build]'.padEnd(10) : '[build] ';
+
+// If we're in prod then clear the temp folder to avoid unwanted files going into `css`
+if (process.env.STYLE_ENV === 'prod') {
+  console.log(logMeta + 'building for production, see `css/` for output');
+  removeSync(tempPath);
+}
+
+console.log(`${logMeta}reading \`${join(__dirname, 'src')}\` files`);
+let cssFiles = readdirSync(join(__dirname, 'src'));
+
+// Generate all the SCSS using the CLI
+console.log(logMeta + 'generating SASS/SCSS -> CSS');
+for (const cssFile of cssFiles) {
+  execSync(`npx node-sass src/${cssFile}/ --output-style compressed -o ${tempPath}`);
+  console.log(`${logMeta}✔ ${cssFile}`);
+}
+
+console.log(`${logMeta}reading \`${tempPath}\` files`);
+cssFiles = readdirSync(tempPath);
+
+console.log(logMeta + 'generating CSS -> UserCSS');
+for (const cssFile of cssFiles) {
+  // Only generate non-usercss files
+  if (cssFile.endsWith('.user.css')) {
+    continue;
+  }
+
+  const cssPath = join(tempPath, cssFile);
+  // This uses the css file's name to resolve the appropriate `package.json`
+  // All CSS files have the same name as their directory
+  const packagePath = join(__dirname, 'src', cssFile.substring(0, cssFile.indexOf('.')), 'package.json');
+  const { usercss } = JSON.parse(readFileSync(packagePath, 'UTF8'));
+  // We don't specify an output path because we just want it generated next to the regular CSS file
+  create(cssPath, usercss);
+}
+
+cssFiles = readdirSync(tempPath);
+// Add `@-moz-document domain(...)` to all the `.user.css` files
+for (const cssFile of cssFiles) {
+  if (!cssFile.endsWith('.user.css')) {
+    continue;
+  }
+
+  const cssPath = join(tempPath, cssFile);
+  const packagePath = join(__dirname, 'src', cssFile.substring(0, cssFile.indexOf('.')), 'package.json');
+  const { usercss } = JSON.parse(readFileSync(packagePath, 'UTF8'));
+  let css = readFileSync(cssPath, 'UTF8');
+  const usercssIndex = css.indexOf('==/UserStyle== */');
+  const usercssLength = '==/UserStyle== */'.length;
+  css =
+    css.substring(0, usercssIndex + usercssLength) +
+    `\n@-moz-document domain(${usercss.namespace}) {\n  ` +
+    css.substring(usercssIndex + usercssLength + 1, css.length) +
+    '}\n';
+  writeFileSync(cssPath, css);
+  console.log(`${logMeta}✔ ${cssFile} v${usercss.version}`);
+}
+
+// If we're in prod, we now wanna move all the files into `css`
+if (process.env.STYLE_ENV === 'prod') {
+  cssFiles = readdirSync(tempPath);
+  console.log(`${logMeta}moving ${cssFiles.length} generated files`);
+  for (const cssFile of cssFiles) {
+    const cssPath = join(tempPath, cssFile);
+    const prodPath = join(__dirname, 'css');
+    const dirPath = join(prodPath, cssFile.substring(0, cssFile.indexOf('.')));
+    // `mkdir -p <path>` to create any directories that don't exist yet
+    mkdirpSync(dirPath);
+    moveSync(cssPath, join(dirPath, cssFile), { overwrite: true });
+  }
+
+  removeSync(tempPath);
+}
+
+console.log(logMeta + 'finished 😁');

bump.js

@@ -1,53 +0,0 @@
-// Bumps a specified style's version
-
-const fs = require('fs');
-const path = require('path');
-
-/**
- * @function bump
- * @param {string} jsonPath - Path to the .json file
- * @param {string} incrementType - Which semver type to increment: "major", "minor" or "patch"
- */
-
-function bump(jsonPath, incrementType) {
-  if (!fs.existsSync(jsonPath))
-    throw Error(`File ${jsonPath} does not exist.`);
-  if (path.extname(jsonPath) !== '.json')
-    throw Error(`File ${jsonPath} does not end in "json".`);
-  if (typeof incrementType === 'undefined')
-    throw Error('No valid increment type was included. Valid: "major", "minor" or "patch".');
-  if (incrementType !== 'major' && incrementType !== 'minor' && incrementType !== 'patch')
-    throw Error(`Increment type ${incrementType} does not equal "major", "minor" or "patch".`);
-
-  const jsonFile = require(jsonPath);
-
-  if (typeof jsonFile.options.version === 'undefined')
-    throw Error(`${jsonFile} does not include a "version" property.`);
-
-  const incrementTypes = {
-    'major': 0,
-    'minor': 1,
-    'patch': 2,
-  };
-
-  const oldVersion = jsonFile.options.version.split('.');
-  let bumped = parseInt(oldVersion[incrementTypes[incrementType]]) + 1;
-  let newVersion;
-  switch (incrementType) {
-  case 'major':
-    newVersion = `${bumped}.0.0`;
-    break;
-  case 'minor':
-    newVersion = `${oldVersion[0]}.${bumped}.0`;
-    break;
-  case 'patch':
-    newVersion = `${oldVersion[0]}.${oldVersion[1]}.${bumped}`;
-    break;
-  }
-
-  jsonFile.options.version = newVersion;
-  
-  fs.writeFileSync(jsonPath, JSON.stringify(jsonFile, null, 2));
-}
-
-exports.bump = bump;

css/tildes-compact/tildes-compact.css

@@ -1,35 +1 @@
-.topic-listing .topic-text-excerpt,.post-listing .topic-text-excerpt {
+.topic-listing .topic-text-excerpt,.post-listing .topic-text-excerpt{display:none !important}.topic-listing .topic-metadata,.post-listing .topic-metadata{display:inline-flex !important;height:1.3em !important;max-width:200px !important;overflow:hidden !important;white-space:nowrap !important}.topic-listing .topic-metadata .topic-tags li,.post-listing .topic-metadata .topic-tags li{display:none !important}.topic-listing .topic-metadata .topic-tags li:nth-child(-n+3),.post-listing .topic-metadata .topic-tags li:nth-child(-n+3){display:inherit !important}.topic-listing .topic-info,.post-listing .topic-info{width:500px !important}.topic-listing .topic-info .user-label,.post-listing .topic-info .user-label{display:none !important}.post-listing .btn-post,.post-listing .comment-votes{display:none !important}.post-listing>li{margin-bottom:unset !important}
-  display: none !important;
-}
-
-.topic-listing .topic-metadata,.post-listing .topic-metadata {
-  display: inline-flex !important;
-  height: 1.3em !important;
-  max-width: 200px !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-}
-
-.topic-listing .topic-metadata .topic-tags li,.post-listing .topic-metadata .topic-tags li {
-  display: none !important;
-}
-
-.topic-listing .topic-metadata .topic-tags li:nth-child(-n+3),.post-listing .topic-metadata .topic-tags li:nth-child(-n+3) {
-  display: inherit !important;
-}
-
-.topic-listing .topic-info,.post-listing .topic-info {
-  width: 500px !important;
-}
-
-.topic-listing .topic-info .user-label,.post-listing .topic-info .user-label {
-  display: none !important;
-}
-
-.post-listing .btn-post,.post-listing .comment-votes {
-  display: none !important;
-}
-
-.post-listing>li {
-  margin-bottom: unset !important;
-}

css/tildes-compact/tildes-compact.user.css

@@ -1,47 +1,13 @@
 /* ==UserStyle==
 @name        Tildes Compact
 @namespace   tildes.net
-@version     1.0.6
+@version     1.0.7
 @author      Bauke
 @description Removes some elements and changes some sizes to make the Tildes.net layout a little more compact.
 @homepageURL https://gitlab.com/Bauke/styles
 @supportURL  https://gitlab.com/Bauke/styles/issues
 @license     MIT
 ==/UserStyle== */
-@-moz-document domain('tildes.net') {
+@-moz-document domain(tildes.net) {
-.topic-listing .topic-text-excerpt,.post-listing .topic-text-excerpt {
+  .topic-listing .topic-text-excerpt,.post-listing .topic-text-excerpt{display:none !important}.topic-listing .topic-metadata,.post-listing .topic-metadata{display:inline-flex !important;height:1.3em !important;max-width:200px !important;overflow:hidden !important;white-space:nowrap !important}.topic-listing .topic-metadata .topic-tags li,.post-listing .topic-metadata .topic-tags li{display:none !important}.topic-listing .topic-metadata .topic-tags li:nth-child(-n+3),.post-listing .topic-metadata .topic-tags li:nth-child(-n+3){display:inherit !important}.topic-listing .topic-info,.post-listing .topic-info{width:500px !important}.topic-listing .topic-info .user-label,.post-listing .topic-info .user-label{display:none !important}.post-listing .btn-post,.post-listing .comment-votes{display:none !important}.post-listing>li{margin-bottom:unset !important}
-  display: none !important;
 }
-
-.topic-listing .topic-metadata,.post-listing .topic-metadata {
-  display: inline-flex !important;
-  height: 1.3em !important;
-  max-width: 200px !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-}
-
-.topic-listing .topic-metadata .topic-tags li,.post-listing .topic-metadata .topic-tags li {
-  display: none !important;
-}
-
-.topic-listing .topic-metadata .topic-tags li:nth-child(-n+3),.post-listing .topic-metadata .topic-tags li:nth-child(-n+3) {
-  display: inherit !important;
-}
-
-.topic-listing .topic-info,.post-listing .topic-info {
-  width: 500px !important;
-}
-
-.topic-listing .topic-info .user-label,.post-listing .topic-info .user-label {
-  display: none !important;
-}
-
-.post-listing .btn-post,.post-listing .comment-votes {
-  display: none !important;
-}
-
-.post-listing>li {
-  margin-bottom: unset !important;
-}
-}

gulpfile.js

@@ -1,113 +0,0 @@
-const beautify = require('gulp-cssbeautify');
-const gulp = require('gulp');
-const eslint = require('gulp-eslint');
-const fs = require('fs');
-const stylelint = require('gulp-stylelint');
-const sass = require('gulp-sass');
-
-gulp.task('lint:js', () => {
-  return gulp.src(['**/*.js','!node_modules/**'])
-    .pipe(eslint())
-    .pipe(eslint.format());
-});
-
-gulp.task('lint:sass', () => {
-  const options = {
-    reporters: [{formatter: 'string', console: true}],
-  };
-  return gulp.src('sass/**/*.s*')
-    .pipe(stylelint(options));
-});
-
-gulp.task('build:dev', () => {
-  const options = {
-    outputStyle: 'compressed',
-  };
-  const bOptions = {
-    indent: '  ',
-    autosemicolon: true,
-  };
-  return gulp.src('sass/**/*.s*')
-    .pipe(sass(options).on('error', sass.logError))
-    .pipe(beautify(bOptions))
-    .pipe(gulp.dest('temp'));
-});
-
-gulp.task('build:prod', () => {
-  const options = {
-    outputStyle: 'compressed',
-  };
-  const bOptions = {
-    indent: '  ',
-    autosemicolon: true,
-  };
-  return gulp.src('sass/**/*.s*')
-    .pipe(sass(options).on('error', sass.logError))
-    .pipe(beautify(bOptions))
-    .pipe(gulp.dest('css'));
-});
-
-gulp.task('generate', ['lint:js', 'lint:sass', 'build:dev', 'build:prod'], () => {
-  // Generates all *.user.css styles.
-  const { bump } = require('./bump.js');
-  const klawSync = require('klaw-sync');
-  const path = require('path');
-  const userCss = require('usercss-creator');
-
-  // Define constants
-  const stylesDirectory = path.join(__dirname, 'sass');
-  const cssDirectory = path.join(__dirname, 'temp');
-
-  // Walk recursively through styles directory
-  let files = klawSync(stylesDirectory, {nodir: true});
-
-  // Filter out any files that aren't .json files
-  files = files.filter(file => path.extname(file.path) === '.json');
-
-  let style;
-  let incrementType;
-
-  for (const arg of process.argv) {
-    if (arg.includes('--bump')) {
-      style = arg.substring('--bump='.length, arg.length);
-    }
-    switch (arg) {
-    case '--major':
-      incrementType = 'major';
-      break;
-    case '--minor':
-      incrementType = 'minor';
-      break;
-    case '--patch':
-      incrementType = 'patch';
-      break;
-    }
-  }
-
-  // Iterate through all .json files
-  for (const file of files) {
-    // Requiring the .json file as the descriptor of the style
-    const descriptor = require(file.path);
-    // If --bump=all then bump every style
-    if (style === 'all') {
-      bump(file.path, incrementType);
-    }
-    // Test if the style we want to bump is the one currently generating
-    else if (style === descriptor.folder) {
-      // Bump the style's .json with the increment type
-      bump(file.path, incrementType);
-    }
-    // Create the css path and generate the .user.css file with the options
-    const cssPath = path.join(cssDirectory, descriptor.folder, descriptor.entry);
-    const outPath = path.join(__dirname, 'css', descriptor.folder);
-    let styleFile = `@-moz-document domain('${descriptor.options.namespace}') {\n`;
-    styleFile += fs.readFileSync(cssPath, {encoding: 'UTF-8'});
-    styleFile += '}';
-    fs.writeFileSync(cssPath, styleFile, {encoding: 'UTF-8'});
-    userCss.create(cssPath, descriptor.options, outPath);
-  }
-});
-
-gulp.task('watch', () => {
-  gulp.watch('sass/**/*.s*', ['lint:js', 'lint:sass', 'build:dev']);
-});

package.json

@@ -1,34 +1,34 @@
-{
+{
-  "name": "bauke-styles",
+  "name": "bauke-styles",
-  "repository": "https://gitlab.com/Bauke/styles",
+  "repository": "https://gitlab.com/Bauke/styles",
-  "version": "1.0.0",
+  "version": "1.0.0",
-  "author": {
+  "author": "Bauke <me@bauke.xyz>",
-    "name": "Bauke",
+  "main": "build.js",
-    "email": "me@bauke.xyz"
+  "license": "MIT",
-  },
+  "private": true,
-  "license": "MIT",
+  "workspaces": [
-  "scripts": {
+    "scss/*"
-    "watch": "gulp watch",
+  ],
-    "generate": "gulp generate",
+  "scripts": {
-    "build:dev": "gulp build:dev",
+    "build": "yarn lint && STYLE_ENV=prod node ./build.js",
-    "build:prod": "gulp build:prod",
+    "watch": "STYLE_ENV=dev nodemon ./build.js --watch src/ --ext sass,scss",
-    "lint": "yarn lint:js && yarn lint:sass",
+    "lint": "xo && stylelint src/**/*.scss && stylelint src/**/*.sass"
-    "lint:js": "gulp lint:js",
+  },
-    "lint:css": "gulp lint:sass"
+  "dependencies": {},
-  },
+  "devDependencies": {
-  "dependencies": {
+    "fs-extra": "^7.0.1",
-    "klaw-sync": "^4.0.0",
+    "node-sass": "^4.11.0",
-    "node-sass": "^4.9.0",
+    "nodemon": "^1.18.10",
-    "usercss-creator": "^1.2.0"
+    "stylelint": "^9.10.1",
-  },
+    "stylelint-config-recommended": "^2.1.0",
-  "devDependencies": {
+    "stylelint-scss": "^3.5.4",
-    "eslint": "^4.19.1",
+    "usercss-creator": "^1.2.0",
-    "gulp": "^3.9.1",
+    "xo": "^0.24.0"
-    "gulp-cssbeautify": "^1.0.0",
+  },
-    "gulp-eslint": "^4.0.2",
+  "xo": {
-    "gulp-sass": "^4.0.1",
+    "rules": {
-    "gulp-stylelint": "^7.0.0",
+      "object-curly-spacing": ["error", "always"]
-    "stylelint": "^9.2.1",
+    },
-    "stylelint-config-recommended": "^2.1.0"
+    "space": true
-  }
+  }
-}
+}

src/tildes-compact/package.json

@@ -1,14 +1,14 @@
 {
-  "entry": "tildes-compact.css",
+  "name": "tildes-compact",
-  "folder": "tildes-compact",
+  "version": "1.0.7",
-  "options": {
+  "usercss": {
     "name": "Tildes Compact",
     "namespace": "tildes.net",
-    "version": "1.0.6",
+    "version": "1.0.7",
     "author": "Bauke",
     "description": "Removes some elements and changes some sizes to make the Tildes.net layout a little more compact.",
     "homepageURL": "https://gitlab.com/Bauke/styles",
     "supportURL": "https://gitlab.com/Bauke/styles/issues",
     "license": "MIT"
   }
-}
+}

src/tildes-dracula/package.json

@@ -1,14 +1,14 @@
 {
-  "entry": "tildes-dracula.css",
+  "name": "tildes-dracula",
-  "folder": "tildes-dracula",
+  "version": "2.1.5",
-  "options": {
+  "usercss": {
     "name": "Tildes Dracula",
     "namespace": "tildes.net",
-    "version": "2.1.4",
+    "version": "2.1.5",
     "author": "Bauke",
     "description": "Dracula theme for Tildes.net",
     "homepageURL": "https://gitlab.com/Bauke/styles",
     "supportURL": "https://gitlab.com/Bauke/styles/issues",
     "license": "MIT"
   }
-}
+}