init

Author: xiaoiver

.babelrc

@@ -0,0 +1,12 @@
+{
+    "presets": [
+        [
+            "env",
+            {
+                "targets": {
+                    "node": 4
+                }
+            }
+        ]
+    ]
+}

.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+node_modules/
+lib
+npm-debug.log*
+coverage
+.nyc_output

.travis.yml

@@ -0,0 +1,9 @@
+language: node_js
+node_js:
+  - "4"
+  - "5"
+  - "6"
+install:
+  - npm install
+script:
+  - npm test

CHANGELOG.md

@@ -0,0 +1,7 @@
+Change History
+==============
+
+v1.0.0
+---
+
+* 支持传入变量文件，转换成目标预处理器语法的变量，自动注入组件单文件中

README.md

@@ -1 +1,148 @@
-# theme-variables-loader
+# vue-style-variables-loader
+
+这个基于 webpack 的插件试图解决使用 Vue 开发中的两个问题：
+1. 在 Vue 单文件中自动引入变量文件
+2. 选用了一个 UI 框架并使用了框架提供的主题解决方案，在组件中想使用这些主题变量，但又不想使用框架指定的预处理器
+
+## 问题1：在 Vue 单文件中引入变量文件
+
+通常我们的项目中包含一个定义了常用变量的文件，以开发选择的预处理器格式存在。
+使用时，在每个 Vue 单文件组件的 style 块中都需要手动引入这个变量文件。虽然使用 webpack alias 之后不用考虑路径问题，但如果能自动引入将方便很多。
+``` vue
+// Component.vue
+
+<style lang="scss">
+    // 引入变量文件
+    @import "@/styles/variables.scss";
+    // 开始使用变量
+</style>
+```
+
+有人针对这个问题向 vue-loader 提出了[相关 issue](https://github.com/vuejs/vue-loader/issues/328)。而 vue-loader 认为这个工作应该交给各个预处理器 loader 完成。
+
+例如使用 sass 时，可以[使用 sass-resources-loader](https://vue-loader.vuejs.org/en/configurations/pre-processors.html)
+``` javascript
+{
+    loader: 'sass-resources-loader',
+    options: {
+        resources: 'variables.scss'
+    }
+}
+```
+
+或者[使用 sass-loader](https://github.com/webpack-contrib/sass-loader#environment-variables)的注入环境变量功能。[keen-ui就采用了这种方式支持用户覆盖预定义的主题变量](https://github.com/JosephusPaye/Keen-UI/blob/master/Customization.md#customization)
+``` javascript
+plugins: [
+    new webpack.LoaderOptionsPlugin({
+        options: {
+            sassLoader: {
+                data: '@import "src/styles/variables.scss";',
+                includePaths: 'src/styles'
+            },
+            context: path.resolve(__dirname) // your project root
+        }
+    })
+]
+```
+
+而在 stylus-loader 中，可以使用[import](https://github.com/shama/stylus-loader#using-nib-with-stylus)达到引入全局变量的目的。
+``` javascript
+plugins: [
+    new webpack.LoaderOptionsPlugin({
+        test: /\.styl$/,
+        stylus: {
+            use: [require('nib')()],
+            import: ['~nib/lib/nib/index.styl']
+        }
+    })
+]
+```
+
+less-loader 中并没有找到解决方法，似乎只能每次手动引入了。
+
+可以看出，各个预处理器 loader 都有自己的方式解决这个问题。而且就算是手动引入，代价也并不高，让我们继续来看第二个问题。
+
+## 问题2：选用和 UI 框架不同的预处理器开发
+
+各个 UI 框架都有自己的主题解决方案，例如：
+* vuetify [使用 stylus hash 变量](https://vuetifyjs.com/style/theme)覆盖[预定义的变量列表](https://github.com/vuetifyjs/vuetify/blob/dev/src/stylus/settings/_theme.styl)。
+* keen-ui [使用用户自定义的 sass 变量文件](https://github.com/JosephusPaye/Keen-UI/blob/master/Customization.md#customization)覆盖[预定义的变量列表](https://github.com/JosephusPaye/Keen-UI/blob/master/src/styles/variables.scss)
+* vux 通过 vux-loader [使用用户自定义的 less 变量文件](https://vux.li/#/?id=%E9%A2%9C%E8%89%B2%E9%85%8D%E7%BD%AE)覆盖[预定义的变量列表](https://github.com/airyland/vux/blob/v2/src/styles/variable.less)
+* [vue-material](https://github.com/vuematerial/vue-material)和以上框架都不同，使用了[编程式方式设置主题](http://vuematerial.io/#/themes/configuration)。
+
+可以看出在使用变量文件覆盖的方案中，主题变量必须使用框架指定的预处理器定义。
+例如选择了 vuetify，那开发者自定义的变量文件就必须使用 stylus 来写。这样在实际组件开发中，如果选择 less，就无法使用 stylus 定义的这些变量了。
+``` vue
+// Component.vue
+
+<style lang="less">
+    // 引入变量文件
+    @import "@/styles/variables.styl";
+    // 出错了，less 并不认识 stylus 定义的变量 $bg-color
+    background: @bg-color;
+</style>
+```
+
+所以在上述场景中，我们需要将文件中使用 stylus 定义的每一个主题变量都转换成 less 变量，然后注入`.vue`文件的`<style>`块中。
+如果能实现这一点，其实第一个问题也就顺便解决了。
+
+## 实现思路
+
+首先，开发者使用所选 UI 框架的主题解决方案，使用框架指定的预处理器创建一个变量文件，由于该文件只包含变量，对于开发者而言，学习特定预处理器语法的成本并不高。
+
+然后，使用 loader 处理每一个`.vue`文件。该 loader 接受之前的变量文件作为输入，在每个`.vue`文件的每个`<style>`块中，根据当前`<style>`块指定的预处理器语言，将包含的所有变量进行转换并注入。这样开发者就可以直接使用自己熟悉的预处理器语法开发了。
+
+并不需要做类似[stylus，less，sass之间全部语法的互相转换](http://csspre.com/convert/)。只需要变量声明这部分。
+
+*WIP* 但也并不能使用正则简单替换，原因是 stylus 中有 hash 类型的变量声明：
+``` stylus
+$theme := {
+    primary: 'white';
+}
+```
+
+所以只能写一个简单的 compiler 做一些词法语法分析的工作。
+
+## 使用方法
+
+安装
+```bash
+npm install theme-variables-loader --save-dev
+```
+
+在 webpack 中配置规则，处理项目中每一个`.vue`文件，要注意配置`include/exclude`规则，使 loader 只作用于开发者项目内的文件，不包含第三方文件。
+```javascript
+{
+    test: /\.vue$/,
+    use: [
+        {
+            loader: 'vue-loader',
+            options: vueLoaderConfig
+        },
+        {
+            loader: 'theme-variables-loader',
+            options: {
+                injectInVueFile: true
+            }
+        }
+    ],
+    include: [resolve('src')]
+},
+{
+    test: /\.vue$/,
+    use: [
+        {
+            loader: 'vue-loader',
+            options: vueLoaderConfig
+        }
+    ],
+    exclude: [resolve('src')]
+},
+```
+
+## 参数说明
+
+暂定两个参数：
+* `variablesFiles` 变量文件路径，Array 类型
+* `imports` import 语句，Array 类型
+

examples/index.js

@@ -0,0 +1,36 @@
+/**
+ * @file examples index
+ * @author panyuqi ([email protected])
+ */
+
+/* eslint-disable fecs-no-require */
+
+const fs = require('fs');
+const path = require('path');
+const rimraf = require('rimraf');
+
+cleanAllExamples();
+
+function getExamples() {
+    return fs.readdirSync(__dirname)
+        .filter(readdirItem => fs.statSync(path.join(__dirname, readdirItem)).isDirectory());
+}
+
+function cleanAllExamples() {
+    let examplesDistPathNames = getExamples()
+        .map(exampleName => path.join(__dirname, exampleName, 'dist'));
+
+    for (let path of examplesDistPathNames) {
+        fs.stat(path, (err, stat) => {
+            if (err) {
+                return;
+            }
+            if (stat.isDirectory()) {
+                rimraf.sync(path);
+            }
+        });
+    }
+}
+
+exports.getExamples = getExamples;
+exports.cleanAllExamples = cleanAllExamples;

examples/simple/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="zh_CN">
+    <head>
+        <meta charset="utf-8">
+        <title>title</title>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <% for (var jsFilePath of htmlWebpackPlugin.files.js) { %>
+            <link rel="preload" href="<%= jsFilePath %>" as="script">
+        <% } %>
+        <% for (var cssFilePath of htmlWebpackPlugin.files.css) { %>
+            <link rel="preload" href="<%= cssFilePath %>" as="style">
+        <% } %>
+    </head>
+    <body>
+        <div id="app"></div>
+        <!-- built files will be auto injected -->
+    </body>
+</html>

examples/simple/src/Component.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="component-wrapper">
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'component'
+};
+</script>
+
+<style lang="styl" scoped>
+
+.component-wrapper
+    height: 52px;
+    background: blue;
+
+</style>

examples/simple/src/entry.js

@@ -0,0 +1,14 @@
+/**
+ * @file simple entry
+ * @author panyuqi <[email protected]>
+ */
+
+import Vue from 'vue';
+import Component from './Component';
+
+export default new Vue({
+    components: {
+        Component
+    },
+    template: '<component />'
+});

examples/simple/src/styles/variables.less

@@ -0,0 +1 @@
+$test-variable := blue;

examples/simple/src/styles/variables.scss

@@ -0,0 +1,74 @@
+/**
+ * @file utils
+ * @author panyuqi ([email protected])
+ */
+
+'use strict';
+
+const path = require('path');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+exports.assetsPath = function (newPath) {
+    return path.posix.join('static', newPath);
+};
+
+exports.cssLoaders = function (options) {
+    options = options || {};
+
+    let cssLoader = {
+        loader: 'css-loader',
+        options: {
+            minimize: process.env.NODE_ENV === 'production',
+            sourceMap: options.sourceMap
+        }
+    };
+
+    // generate loader string to be used with extract text plugin
+    function generateLoaders(loader, loaderOptions) {
+        let loaders = [cssLoader];
+        if (loader) {
+            loaders.push({
+                loader: loader + '-loader',
+                options: Object.assign({}, loaderOptions, {
+                    sourceMap: options.sourceMap
+                })
+            });
+        }
+
+        // Extract CSS when that option is specified
+        // (which is the case during production build)
+        if (options.extract) {
+            return ExtractTextPlugin.extract({
+                use: loaders,
+                fallback: 'vue-style-loader'
+            });
+        }
+
+        return ['vue-style-loader'].concat(loaders);
+    }
+
+    // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+    return {
+        css: generateLoaders(),
+        postcss: generateLoaders(),
+        less: generateLoaders('less'),
+        sass: generateLoaders('sass', {indentedSyntax: true}),
+        scss: generateLoaders('sass'),
+        stylus: generateLoaders('stylus'),
+        styl: generateLoaders('stylus')
+    };
+};
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+    let output = [];
+    let loaders = exports.cssLoaders(options);
+
+    Object.keys(loaders).forEach(function (extension) {
+        output.push({
+            test: new RegExp('\\.' + extension + '$'),
+            use: loaders[extension]
+        });
+    });
+    return output;
+};

examples/simple/src/styles/variables.styl

@@ -0,0 +1,15 @@
+/**
+ * @file vue-loader conf
+ * @author panyuqi ([email protected])
+ */
+
+'use strict';
+
+const utils = require('./utils');
+
+module.exports = {
+    loaders: utils.cssLoaders({
+        sourceMap: false,
+        extract: true
+    })
+};