feat: publish v0.0.1

Change-Id: Ic7e03778dbf8b4c0a0f89f8e27c8f420eb1c81d2

Author: dongxu.shelton

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.{json,yml}]
+indent_size = 2

CHANGELOG.md

@@ -0,0 +1,3 @@
+# Change Log
+# v0.0.1
+### Publish v0.0.1

LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright 2017 shelton dong <dongxu2048@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.

README.md

@@ -0,0 +1,145 @@
+# PostCSS File
+
+[PostCSS]: https://github.com/postcss/postcss
+
+[PostCSS] File is a assets handler for css. It can copies assets and overwrites your url, it also can inserts images as a inline data.
+
+# Installation
+
+```shell
+npm install --save-dev postcss-file
+```
+
+# Usage
+
+## Webpack
+```javascript
+// webpack.config.js
+module.exports = {
+  // ...
+  module: {
+    rules: [
+      // ...
+      {
+        test: /\.css$/,
+        use: [{
+          loader: 'postcss-loader',
+          options: {
+            plugins: [
+              require('postcss-file')({
+                url: 'copy',
+                assetsPath: 'dist/assets',
+                publicPath: './assets/',
+                hash: true
+              })
+            ],
+          },
+        }]
+      }
+    ]
+  }
+}
+```
+
+## Rollup
+```javascript
+// rollup.config.js
+import postcss from 'postcss';
+
+const config = {
+  // ...
+  plugins: [
+    // ...
+    postcss({
+      // ...
+      plugins: [
+        require('postcss-file')({
+          url: 'copy',
+          assetsPath: 'dist/assets',
+          publicPath: './assets/',
+          hash: true
+        })
+      ]
+    })
+  ]
+};
+
+export default config;
+```
+#### Note: You must use options to specify how would you like to handle your assets in your css, if you don't pass any options, PostCSS File will do nothing about your assets.
+
+# Url Resolve
+
+You can copy your assets to anywhere or insert them as inline data through "url" option.
+
+## Copy
+
+```javascript
+postcss({
+  plugins: [
+    require({
+      url: 'copy',
+      assetsPath: './dist/assets',
+      publicPath: 'assets/'
+    })
+  ]
+})
+```
+
+Input:
+
+```css
+.app-body {
+  background-image: url('./imgs/background.png');
+}
+```
+
+Output:
+
+```css
+.app-body {
+  background-image: url('./assets/background.png');
+}
+```
+
+#### Note: Remember that you should specify the publicPath option since we know nothing about your structure of your project directories, and also we don't know where you want to output your css file. If you don't specify the publicPath option, we would use the assetsPath option to be your url prefix, and obviously, it is normally not what you want.
+
+## Inline
+```javascript
+postcss({
+  plugins: [
+    require({
+      url: 'inline',
+    })
+  ]
+})
+```
+
+Input:
+
+```css
+.app-body {
+  background-image: url('./imgs/background.png');
+}
+```
+
+Output:
+
+```css
+.app-body {
+  background-image: url('data:image/png;base64,<base64>');
+}
+```
+
+# Options
+option | description | default
+---- | ---- | ----
+url | determines how to handle the url, "copy" or "inline". require assetsPath | "inline"
+assetsPath | where the assets should be copy to. | undefined
+publicPath | the prefix of output url | undefined
+extensions | determines which type of files should be handle | all
+include | determines where to search for assets | all
+exclude | determines which folder should be exclided | none
+hash | use hash to be the asset's name | false
+
+See [PostCSS] docs for examples for your environment.

package.json

@@ -0,0 +1,67 @@
+{
+  "name": "postcss-file",
+  "version": "0.0.1",
+  "description": "PostCSS plugin for handle files and assets",
+  "main": "dist/index.js",
+  "keywords": [
+    "postcss",
+    "css",
+    "postcss-plugin",
+    "file",
+    "url",
+    "asset"
+  ],
+  "author": "shelton dong <dongxu2048@gmail.com>",
+  "license": "MIT",
+  "repository": "git@github.com:DongShelton/postcss-file.git",
+  "scripts": {
+    "build": "rollup -c",
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "lint": "tslint -p tsconfig.json"
+  },
+  "bugs": {
+    "url": "https://github.com/DongShelton/postcss-file/issues"
+  },
+  "homepage": "https://github.com/DongShelton/postcss-file",
+  "dependencies": {
+    "chalk": "^2.3.1",
+    "mkdirp": "^0.5.1",
+    "postcss": "^6.0.16"
+  },
+  "devDependencies": {
+    "@types/chalk": "^2.2.0",
+    "@types/jest": "^22.1.3",
+    "@types/mkdirp": "^0.5.2",
+    "@types/node": "^9.4.6",
+    "jest": "^22.4.0",
+    "pre-commit": "^1.2.2",
+    "ts-jest": "^22.0.4",
+    "tslint": "^5.9.1",
+    "typescript": "^2.7.2",
+    "rollup": "^0.54.1",
+    "rollup-plugin-clear": "^2.0.7",
+    "rollup-plugin-commonjs": "^8.2.6",
+    "rollup-plugin-filesize": "^1.5.0",
+    "rollup-plugin-node-resolve": "^3.0.2",
+    "rollup-plugin-progress": "^0.4.0",
+    "rollup-plugin-typescript2": "^0.10.0"
+  },
+  "pre-commit": [
+    "lint",
+    "test"
+  ],
+  "jest": {
+    "verbose": true,
+    "transform": {
+      "^.+\\.ts$": "ts-jest"
+    },
+    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(ts)$",
+    "moduleFileExtensions": [
+      "ts",
+      "js",
+      "json",
+      "node"
+    ]
+  }
+}

rollup.config.js

@@ -0,0 +1,23 @@
+import resolve from 'rollup-plugin-node-resolve';
+import typescript from 'rollup-plugin-typescript2';
+import commonjs from 'rollup-plugin-commonjs';
+import clear from 'rollup-plugin-clear';
+
+const config = {
+  input: './src/index.ts',
+  output: {
+    file: './dist/index.js',
+    format: 'cjs',
+  },
+  plugins: [
+    clear({
+      targets: ['./dist'],
+    }),
+    commonjs(),
+    resolve(),
+    typescript(),
+  ],
+  external: Object.keys(require('./package.json').dependencies),
+};
+
+export default config;

src/index.ts

@@ -0,0 +1,63 @@
+import * as postcss from 'postcss';
+import { Transformer } from 'postcss';
+import { shouldHandle } from './utils/filters';
+import { handleAsset } from './utils/urlHandler';
+import { validateOptions } from './utils/validators';
+
+export type URL = 'copy' | 'inline';
+
+export interface PostcssFileOptions {
+	extensions?: string[];
+	include?: string[];
+	exclude?: string[];
+	url?: URL;
+	assetsPath?: string;
+	publicPath?: string;
+	hash?: boolean;
+}
+
+export default postcss.plugin<PostcssFileOptions>('postcss-file', (options): Transformer => {
+		// it would throw error if options is invalid.
+		validateOptions(options);
+		// initialize options
+		const opts: PostcssFileOptions =
+			options && Object.prototype.isPrototypeOf(options) ? options : {
+				url: 'inline'
+			};
+
+		return function(root) {
+			root.walkDecls(/(background|src)/, function(decl) {
+				// test whether there is url value
+				if (!/url/.test(decl.value)) {
+					return;
+				}
+				// test whether the value of url is valid
+				const urlReg = /(\"|\')(.+?)(\1)/;
+				const matchs: RegExpMatchArray | null = decl.value.match(urlReg);
+				if (matchs === null) {
+					return;
+				}
+				// the file of url
+				const file = matchs[2];
+				// test whether the asset is included
+				const handleOptions = {
+					include: opts.include,
+					exclude: opts.exclude,
+					extensions: opts.extensions,
+					file
+				};
+				if (!shouldHandle(handleOptions)) {
+					return;
+				}
+				// handle asset
+				const urlValue = handleAsset({
+					...opts,
+					importer: decl.source.input.file,
+					file
+				});
+				// overwrite the url value
+				decl.value = `url('${urlValue}')`;
+			});
+		};
+	}
+);

src/utils/filters.ts

@@ -0,0 +1,56 @@
+import * as path from 'path';
+
+/**
+ * Whether the file is included in extensions.
+ *
+ * @param exts ".jpg", ".png", etc.
+ * @param file
+ */
+const extFilter = (exts: string[], file: string): boolean => {
+	const ext = path.extname(file);
+	return exts.some((value: string): boolean => {
+		return value === ext;
+	});
+};
+
+/**
+ * Whether the file is included in files
+ *
+ * @param files paths
+ * @param file
+ */
+const fileFilter = (files: string[], file: string): boolean => {
+	const rootDir = process.cwd();
+	const regs = files.map<RegExp>((value: string): RegExp => {
+		const regStr = path.resolve(rootDir, value).replace(/\*\*/g, '.+?').replace(/\*/g, '[^\/]+?');
+		return new RegExp(regStr);
+	});
+	return regs.some((value: RegExp) => {
+		return value.test(path.resolve(rootDir, file));
+	});
+};
+
+export interface ShouldHandleOptions {
+	include?: string[];
+	exclude?: string[];
+	extensions?: string[];
+	file: string;
+}
+
+/**
+ *  Whether the file should be handle
+ *
+ * @param options
+ */
+export const shouldHandle = (options: ShouldHandleOptions): boolean => {
+	switch (true) {
+		case options.include && !fileFilter(options.include, options.file):
+			return false;
+		case options.extensions && !extFilter(options.extensions, options.file):
+			return false;
+		case options.exclude && fileFilter(options.exclude, options.file):
+			return false;
+		default:
+			return true;
+	}
+};