rename to brandable_css

Author: ryankshaw

bin/brandable_css

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+
+// without this, node only uses 4 of the available cores on my MacBookPro
+// see: http://www.future-processing.pl/blog/on-problems-with-threads-in-node-js/
+process.env.UV_THREADPOOL_SIZE = 6
+
+require("babel/polyfill")
+require('../lib/cli')

bin/canvas_css

@@ -1,8 +1,7 @@
 {
-  "name": "canvas_css",
-  "version": "0.0.5",
-  "description": "This is what we use to compile sass in canvas with all our variants and brand_css",
-  "main": "index.js",
+  "name": "brandable_css",
+  "version": "0.0.1",
+  "description": "This is what we use to compile sass in canvas-lms with all our variants and custom theme editor css",
   "scripts": {
     "build": "./node_modules/.bin/babel src --stage 0 --out-dir lib",
     "dev": "npm run build -- --watch",
@@ -12,13 +11,13 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/ryankshaw/canvas_css.git"
+    "url": "https://github.com/ryankshaw/brandable_css.git"
   },
   "author": "Ryan Shaw <ryankshaw@gmail.com>",
   "license": "MIT",
-  "homepage": "https://github.com/ryankshaw/canvas_css",
+  "homepage": "https://github.com/ryankshaw/brandable_css",
   "bin": {
-    "canvas_css": "./bin/canvas_css"
+    "canvas_css": "./bin/brandable_css"
   },
   "dependencies": {
     "autoprefixer": "^5.1.1",
@@ -31,7 +30,6 @@
     "glob": "^5.0.6",
     "js-yaml": "^3.3.1",
     "lodash": "^3.8.0",
-    "mkdirp": "^0.5.1",
     "node-sass": "^3.1.0",
     "postcss": "^4.1.10",
     "postcss-url": "^3.2.0"

npm-shrinkwrap.json

@@ -1,32 +1,40 @@
 const debug = require('debug')('canvas_css')
 import _ from 'lodash'
-import {readJsonSync, outputJson} from './utils'
-import PATHS from './paths'
+import {readJsonSync} from './utils'
+import {paths as PATHS} from "./config"
+const outputJson = Promise.promisify(require('fs-extra').outputJson)
 
 const caches = ['file_checksums', 'bundles_with_deps']
 
 let cache = {
   saveAll(){
-    return caches.map(cacheName => this[cacheName].save())
+    return caches.map(cacheName => cache[cacheName].save())
   }
 }
 
 function initCache(name) {
-  const filename = PATHS['sass_' + name]
+  const filename = PATHS[name]
   let self = {
     data: readJsonSync(filename),
     isSaved: false,
+
     update(key, value) {
-      if (self.data[key] == value) return
+      if (_.isFunction(key)) throw new Error('cant use function as key' + key + value)
+      if (self.data[key] == value) return value
       debug('updating cache key', key, value)
       self.isSaved = false
-      self.data[key] = value
+      return self.data[key] = value
     },
-    save(data) {
+
+    save() {
       debug('saving', self.isSaved, filename)
       if (self.isSaved) return
       self.isSaved = true
       return outputJson(filename, self.data)
+    },
+
+    clearMatching(query) {
+      self.data = _.omit(self.data, (v, key) => key.match(query))
     }
   }
   cache[name] = self

package.json

@@ -1,19 +1,22 @@
 import crypto from 'crypto'
 import Promise from 'bluebird'
 import fs from 'fs'
+import path from 'path'
 import versions from './versions'
+import {paths as PATHS} from './config'
+
 
 function newHash() {
   let hash = crypto.createHash('md5')
   versions.forEach(::hash.update)
   return hash
 }
 
-export default function checksum (data) {
+export function checksum (data) {
   return newHash().update(data).digest('hex')
 }
 
-export async function ofFile(filename) {
+export function fileChecksum (filename) {
   return new Promise(function(resolve, reject){
     var hsh = newHash()
     var s = fs.ReadStream(filename)
@@ -23,7 +26,11 @@ export async function ofFile(filename) {
   })
 }
 
-export function ofFileSync(filename) {
+export function relativeFileChecksum(relativePath) {
+  return fileChecksum(path.join(PATHS.sass_dir, relativePath))
+}
+
+export function fileChecksumSync (filename) {
   try {
     return checksum(fs.readFileSync(filename))
   } catch(e) {}

src/cache.js

@@ -1,33 +1,15 @@
 import program from 'commander'
-import main from './main'
-import compileSingleBundle from './compile-bundle'
+import {checkAll, startWatcher} from './main'
+import {onError} from './utils'
 
 program
   .version(require('../package').version)
   .option('--watch', 'watch for changes')
-  .option('--bundle <bundle>', 'compile a specific bundle')
-  .option('--variant <variant>', 'the variant (legacy_high_contrast, new_styles_normal_contrast, etc) you want')
-  .option('--brand-variables-folder <brandVarablesFolder>', 'filesystem path to the folder that contains the _brand_variables.scss you want to use')
+  // .option('--brand-config-md5 <md5>', 'compile just the styles for a specific Brand Config')
 
 program.parse(process.argv)
 
-// if they specified the specific bundle they want, (eg: from the brand_css rails controller),
-// compile that one bundle and send it to stdout
-if (program.bundle) {
-  compileSingleBundle({
-    bundleName: program.bundle,
-    variant: program.variant,
-    brandVariablesFolder: program.brandVariablesFolder
-  })
-    .then(function(res){ console.log(res.css) })
-    .catch(main.onError)
-} else {
-  main.checkAll().catch(main.onError)
-  if (program.watch) {
-    main.watch()
-  }
-}
-
-
-
-
+checkAll().catch(onError)
+if (program.watch) {
+  startWatcher()
+}

src/checksum.js

@@ -1,39 +1,46 @@
+const debug = require('debug')('canvas_css:compile-bundle')
 import Promise from 'bluebird'
 const existsAsync = Promise.promisify(require('fs').stat)
 const sassRender = Promise.promisify(require('node-sass').render)
-const debug = require('debug')('canvas_css:compile-bundle')
 import path from 'path'
 import _ from 'lodash'
 import chalk from 'chalk'
 import url from 'url'
 import postcss from 'postcss'
 import autoprefixer from 'autoprefixer'
 import postcssUrl from 'postcss-url'
-import PATHS from './paths'
-import {ofFileSync} from './checksum'
+import {paths as PATHS} from "./config"
+import {BRANDABLE_VARIANTS} from './variants'
+import {fileChecksumSync} from './checksum'
 import supportedBrowsers from './browser-support'
 import cache from './cache'
-import {relativeSassPath} from './utils'
+import {relativeSassPath, folderForBrandId} from './utils'
+
+// If an image is in css source as url("/images/foo/bar.png"),
+// Rails-asset-pipeline makes it available at the url: "/assets/foo/bar-{md5}.png"
+function removeFirstDir(dir) {
+  return dir.split('/').slice(2).join('/')
+}
+function sprocketsFormattedUrl(originalUrl, md5) {
+  let parsedUrl = url.parse(originalUrl)
+  const {dir, name, ext} = path.posix.parse(parsedUrl.pathname)
+  parsedUrl.pathname = `/assets/${removeFirstDir(dir)}/${name}-${md5}${ext}`
+  return url.format(parsedUrl)
+}
 
-// Any logging from compileSingleBundle needs to go to stderr so we can use stdout to
-// send css to rails controller when we compile a single bundle
 function warn() {
   console.error(chalk.yellow('canvas_css warning', ...arguments))
 }
 
-export default async function compileSingleBundle ({bundleName, variant, brandVariablesFolder}) {
+export default async function compileSingleBundle ({bundleName, variant, brandId}) {
   const sassFile = path.join(PATHS.sass_dir, bundleName)
   let includePaths = [PATHS.sass_dir, path.join(PATHS.sass_dir, 'variants', variant)]
   // pull in 'config/brand_variables.scss' if we should
-  if (brandVariablesFolder) {
-    if (
-      (variant === 'new_styles_normal_contrast' || variant === 'k12_normal_contrast') &&
-      await existsAsync(path.join(brandVariablesFolder, '_brand_variables.scss'))
-    ) {
-      includePaths.unshift(brandVariablesFolder)
-    } else {
-      throw new Error('invalid brandVariablesFolder or you tried to include it in a legacy or high contrast bundle')
-    }
+  if (brandId) {
+    if (!BRANDABLE_VARIANTS.has(variant)) throw new Error(`${variant} is not brandable`)
+    const fileExists = await existsAsync(path.join(folderForBrandId(brandId), '_brand_variables.scss'))
+    if (!fileExists) throw new Error(`_brand_variables.scss file not found for ${brandId}`)
+    includePaths.unshift(folderForBrandId(brandId))
   }
 
   let urlsFoundInCss = new Set()
@@ -47,18 +54,15 @@ export default async function compileSingleBundle ({bundleName, variant, brandVa
     const relativePath = relativeSassPath(pathToFile)
     let md5 = cache.file_checksums.data[relativePath]
     if (!md5) {
-      md5 = ofFileSync(pathToFile)
+      md5 = fileChecksumSync(pathToFile)
       if (!md5) {
         warn(sassFile, variant, 'contains a url() to:', originalUrl, 'which doesn\'t exist on disk')
         return originalUrl
       }
       cache.file_checksums.update(relativePath, md5)
     }
     urlsFoundInCss.add(pathToFile)
-
-    const {dir, name, ext} = path.posix.parse(parsedUrl.pathname)
-    parsedUrl.pathname = `/assets${dir}/${name}-${md5}${ext}`
-    return url.format(parsedUrl)
+    return sprocketsFormattedUrl(originalUrl, md5)
   }
 
   const startTime = new Date()

src/cli.js

@@ -0,0 +1,4 @@
+import fs from 'fs'
+import yaml from 'js-yaml'
+
+export default Object.freeze(yaml.safeLoad(fs.readFileSync('config/brandable_css.yml')))