增加 import 选项解析 (#7)

* 增加 import 选项解析
* import 特性补充测试用例

Author: SevenOutman

README.md

@@ -55,6 +55,9 @@ Change the `webpack.config.js` file.
 +         color: '#008000'
 +       },
 +       yellow: {
++         import: [
++           '~thirdpartylibrary/styles/yellow.less'
++         ],
 +         color: '#ffff00'
 +       }
 +     },

README_zh.md

@@ -55,6 +55,9 @@ module.exports = {
 +         color: '#008000'
 +       },
 +       yellow: {
++         import: [
++           '~thirdpartylibrary/styles/yellow.less'
++         ],
 +         color: '#ffff00'
 +       }
 +     },

src/generate-themes.js

@@ -10,8 +10,13 @@ const write = function(pathLike, content) {
   fs.writeFileSync(pathLike, content, 'utf-8');
 };
 
+const getImportLines = config => {
+  const imports = config.import || [];
+  return _.map(imports, path => `@import '${path}';`);
+};
+
 const getModifyVariablesContent = variableConfig => {
-  const declaredContent = _.map(_.entries(variableConfig), ([key, value]) => `@${key}:${value};`);
+  const declaredContent = _.map(_.entries(variableConfig).filter(([key]) => key !== 'import'), ([key, value]) => `@${key}:${value};`);
   return declaredContent.join('\r');
 };
 
@@ -27,8 +32,9 @@ const generateThemes = (themesConfig = {}, configs = {}) => {
   _.forEach(_.entries(themesConfig), ([theme, config]) => {
     const lessFileName = `${theme}.less`;
     const jsFileName = `${theme}.js`;
+    const importLines = getImportLines(config);
     const modifyVariablesContent = getModifyVariablesContent(config);
-    const content = `${typeof lessContent === 'function' ? lessContent(theme, config) : lessContent}
+    const content = `${typeof lessContent === 'function' ? lessContent(theme, config) : [...importLines, lessContent].join('\n')}
 
 ${preHeader}
 ${modifyVariablesContent}`;

test/generate-themes.test.js

@@ -8,6 +8,12 @@ describe('Default generate.', () => {
   generateThemes({
     red: {
       'base-color': '#ff0000'
+    },
+    dark: {
+      import: [
+        '~rsuite/lib/styles/themes/dark/index'
+      ],
+      color: '#e5e5e5'
     }
   });
   const outPutFilePath = path.resolve(process.cwd(), './src/src/less/themes');
@@ -34,6 +40,16 @@ import './red.less';`
 @base-color:#ff0000;`
     );
   });
+
+  test('dark.less import validate', () => {
+    expect(readFile(resolvePath('dark.less'))).toEqual(
+      `@import '~rsuite/lib/styles/themes/dark/index';
+@import "../index";
+
+// Generate by Script.
+@color:#e5e5e5;`
+    );
+  })
 });
 
 describe('Multiple themes generate.', () => {

test/index.test.js

@@ -60,7 +60,7 @@ test('Output Name test', done => {
   });
   runCompiler(compiler).then(() => {
     const dist = fs.readdirSync(`${outputPath}/css`);
-    expect(dist.length).toEqual(3);
+    expect(dist.length).toEqual(4);
     expect(dist).toContain('theme-green.css');
     expect(dist).toContain('theme-yellow.css');
     expect(dist).toContain('theme-red.css');

test/themes.config.js

@@ -7,5 +7,8 @@ module.exports = {
   },
   red: {
     color: '#ff0000'
+  },
+  dark: {
+    color: '#e5e5e5'
   }
 };