simple css asset import bundling

Author: sinclairzx81

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "typescript-bundle",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": " A zero configuration bundling tool for TypeScript.",
   "scripts": {
     "clean": "node tasks clean",

package.json

@@ -100,13 +100,14 @@ $ tsc-bundle ./src/tsconfig.json --outFile ./bundle.js
 ```typescript
 import Content from 'text!./file.txt'
 ```
-TypeScript-Bundle can automatically bundle files with a special import scheme similar to WebPack's [ts-loader](https://github.com/TypeStrong/ts-loader). It supports `text`, `json`, `base64`,  and `buffer` directives that inform the bundler how to embed the asset.
+TypeScript-Bundle automatically bundles files with a special import scheme similar to WebPack's [ts-loader](https://github.com/TypeStrong/ts-loader). It supports `text`, `json`, `base64`, `buffer` and `css` directives that inform the bundler how to embed the asset.
 
 ```typescript
 import Text   from 'text!./file.txt'    // as 'string'
 import Base64 from 'base64!./image.png' // as 'string | base64 encoded'
 import Obj    from 'json!./file.json'   // as 'any'
 import Buf    from 'buffer!./file.dat'  // as 'Uint8Array'
+import Css    from 'css!./file.css'     // as 'string | @import concat'
 ```
 
 ### Declarations
@@ -129,6 +130,10 @@ declare module '*.buf' {
  const value: Uint8Array
   export default value
 }
+declare module '*.css' {
+ const value: string
+  export default value
+}
 ```
 You can either add this declaration to your `tsconfig.json` or as a `/// <reference path='extensions.d.ts' />` directive if bundling from script.
 

readme.md

@@ -30,6 +30,7 @@ import { asBase64 }            from './templates/index'
 import { asBuffer }            from './templates/index'
 import { asJson }              from './templates/index'
 import { asText }              from './templates/index'
+import { asCss }               from './templates/index'
 import { join, dirname }       from 'path'
 
 // ------------------------------------------------------------------------------
@@ -48,7 +49,7 @@ import { join, dirname }       from 'path'
 //
 // ------------------------------------------------------------------------------
 
-type Directive = 'text' | 'json' | 'base64' | 'buffer'
+type Directive = 'text' | 'json' | 'base64' | 'buffer' | 'css'
 type Define = Module | Resource
 interface Module {
   type: 'module'
@@ -86,7 +87,12 @@ class AMDReader {
       const dependencies = unmapped.map(dependency => {
         if(dependency.includes('!')) {
           const split = dependency.split('!').map(n => n.trim())
-          if(split.length === 2 && (split[0] === 'text' || split[0] === 'json' || split[0] === 'base64' || split[0] === 'buffer')) {
+          if(split.length === 2 && 
+              (split[0] === 'text'   || 
+               split[0] === 'json'   || 
+               split[0] === 'base64' || 
+               split[0] === 'buffer' || 
+               split[0] === 'css')) {
             const directive = split[0]
             const absoluteName = join(module_root, split[1])
             const resource = `${directive}!${absoluteName}`
@@ -149,7 +155,7 @@ export class Resources {
     // Rewrites Module Resource Dependencies
     for(const key of Object.keys(result.remaps)) {
       for(const dependency of result.remaps[key]) {
-        const pattern = new RegExp(dependency)
+        const pattern = new RegExp(dependency, 'g')
         code = code.replace(pattern, key)    
       }
     }
@@ -162,6 +168,7 @@ export class Resources {
         case 'json': return asJson(resource.name, path)
         case 'base64': return asBase64(resource.name, path)
         case 'buffer': return asBuffer(resource.name, path)
+        case 'css': return asCss(resource.name, path)
         default: throw Error(`unknown directive '${resource.directive}'`)
       }
     })

src/bundler/resources/resources.ts

@@ -0,0 +1,156 @@
+/*--------------------------------------------------------------------------
+
+typescript-bundle
+
+The MIT License (MIT)
+
+Copyright (c) 2019 Haydn Paterson (sinclair) <haydn.developer@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+---------------------------------------------------------------------------*/
+
+import { resolve, join, dirname }   from 'path'
+import { readFileSync, existsSync } from 'fs'
+import { render } from './render'
+
+// ------------------------------------------------------------------------------
+//
+// CssReader
+//
+// Reads Css files and resolves their internal @imports. Detects both
+// 'file-not-found' and 'cyclic import' errors and throws in either
+// case.
+//
+// ------------------------------------------------------------------------------
+
+class CssFileNotFoundError extends Error {
+  constructor(filePath: string) {
+    super(`bundler: css file '${filePath}' not found.`)
+  }
+}
+
+class CssCyclicReadError extends Error {
+  constructor(stack: string[]) {
+    super('')
+    const buffer = ['bundler: cyclic css @import detected.']
+    stack.forEach((item, index) => {
+      const padding = Array.from({length: index + 1}).join('x').replace(/x/g, ' ')
+      buffer.push(`${padding} ↪ ${item}`)
+    })
+    this.message = buffer.join('\n')
+  }
+}
+
+interface CssFile {
+  filePath: string
+  content:  string
+  includes: string[]
+}
+
+class CssReader {
+  private resolving: {[key: string]: string }
+  private resolved:  {[key: string]: CssFile }
+  private filePath:  string
+  constructor(filePath: string) {
+    this.filePath  = resolve(filePath)
+    this.resolved  = {}
+    this.resolving = {}
+  }
+
+  /** Parses the contents of the CSS file. */
+  private parseCssFile(filePath: string): CssFile {
+    filePath = resolve(filePath)
+    const imports   = [] as {includePattern: string, includePath: string}[]
+    if(!existsSync(filePath)) {
+      throw new CssFileNotFoundError(filePath)
+    }
+    const contentRaw = readFileSync(filePath, 'utf8')
+    const pattern    = /@import\s*["'](.*)["'];?/g
+    // Parse @import's from document
+    while(true) {
+      const result = pattern.exec(contentRaw)
+      if(!result) {
+        break
+      }
+      const includePattern = result[0]
+      const includePathRaw = result[1]
+      const dirPath     = dirname(filePath)
+      const includePath = resolve(join(dirPath, includePathRaw))
+      imports.push({includePattern, includePath})
+    }
+
+    // Build includes array and replace @import strings.
+    const includes = imports.map(_import => _import.includePath)
+    const content  = imports.reduce((content, include) => {
+      return content.replace(new RegExp(include.includePattern, 'g'), '')
+    }, contentRaw)
+    return { filePath, content, includes }
+  }
+
+  /** Loads file recursively and store in resolved cache. */
+  private loadCssFile(filePath: string) {
+    filePath = resolve(filePath)
+    if(this.resolved[filePath]) {
+      return
+    }
+    if(this.resolving[filePath]) {
+      const stack = [...Object.keys(this.resolving), filePath]
+      throw new CssCyclicReadError(stack)
+    }
+    this.resolving[filePath] = filePath
+    const file = this.parseCssFile(filePath)
+    for(const include of file.includes) {
+      this.loadCssFile(include)
+    }
+    delete this.resolving[filePath]
+    this.resolved[filePath] = file
+  }
+
+  /** Reads the CSS document concats its imports. */
+  public read(): string {
+    this.loadCssFile(this.filePath)
+    return Object.keys(this.resolved)
+      .map(key => this.resolved[key]!.content)
+      .join('\n')
+  }
+}
+
+function get(filePath: string): string {
+  try {
+    const reader = new CssReader(filePath)
+    const content = reader.read()
+    const lines = content.split('\n').map(line => {
+      const text = line
+        .replace(/\r/g, '')
+        .replace(/\\/g, '\\\\"')
+        .replace(/"/g, '\\"')
+      return `    "${text}"`
+    }).join(',\n')
+    return `[\n${lines}\n  ].join('\\n')`
+  } catch(error) {
+    // todo: consider better ways to notify error.
+    console.log(error.message + '\n')
+    return '""'
+  }
+}
+
+export function asCss(moduleName: string, filePath: string) {
+  return render(moduleName, get(filePath))
+}

src/bundler/resources/templates/css.ts

@@ -30,4 +30,5 @@ export { asText }   from './text'
 export { asJson }   from './json'
 export { asBase64 } from './base64'
 export { asBuffer } from './buffer'
+export { asCss }    from './css'
 

src/bundler/resources/templates/index.ts

@@ -36,7 +36,7 @@ import { writeFileSync }                 from 'fs'
 /** Writes usage information */
 async function info() {
 
-  console.log(`Version 1.0.6
+  console.log(`Version 1.0.7
 
 Examples: tsc-bundle index.ts
           tsc-bundle tsconfig.json