css-combo - npm Package Compare versions

Comparing version 0.2.5 to 0.2.6

lib/index.js

@@ -0,1 +1,5 @@
+/**
+ * a css module combo tool
+ * author: daxingplay([e-mail])
+ */
 var fs = require('fs'),
@@ -5,3 +9,2 @@ path = require('path'),
     compressor = require('./cssmin').compressor,
-//    native2ascii = require('native2ascii').native2ascii,
     utils = require('./utils');
@@ -34,2 +37,4 @@
 
+    cfg.sourceDir = path.dirname(cfg.target);
+
     self.config = cfg;
@@ -108,5 +113,2 @@ self.build(callback);
             fileContent = compressor.cssmin(fileContent);
-            // native2ascii
-//            fileContent = native2ascii(fileContent);
-//            config.outputEncoding = 'ascii';
             cssFileExt = '.css';
@@ -142,3 +144,3 @@ }
         if(content){
-            var reg = /@import\s*(url)?\(?['|"]([^'"]+)\.css['|"]\)?[^;]*;/ig,
+            var reg = /@import\s*(url)?\(?['"]([^'"]+)\.css['"]\)?[^;]*;/ig,
                 result;
@@ -151,2 +153,5 @@ result = reg.exec(content);
 //                    if(content){
+                        data = self.modifySubImportsPath(data,filePath);
+                        data = data.replace(/(['"]|\():/g,'$1');
+                        data = data.replace(/(['"])%/g,'$1');
                         content = content.replace(result[0], '\n' + data + '\n');
@@ -166,2 +171,44 @@ content = self.analyzeImports(content, callback);
     },
+    // 修改子文件import的相对路径
+    // 子文件夹中所有的相对路径都要进行转换
+    // 先看一下什么形式的地址需要转换
+    // @import "./mods/import.css"
+    // background: url("./mods/import.png");
+    // list-style: url("./mods/import.jpg");
+    // @font-face {
+    //      src:url("./mods/import.ttf");
+    // } 
+    modifySubImportsPath: function(content,filePath) {
+        'use strict';
+
+        var self = this;
+
+        var regImport = /@import\s*(url)?\(?['"]([^'"%]+)\.css['"]\)?[^;]*;/ig,
+            regImageOrFont = /(url)?\(['"]?([^:]*\.(png|jpg|gif|jpeg|ttf|eot))['"]?\)/ig,
+            importResult,
+            picAndFontResult;
+
+        var importFilePath = path.dirname(path.resolve(self.config.sourceDir,filePath));
+
+        // 替换import
+        importResult = regImport.exec(content);
+        if (typeof importResult !== 'undefined' && importResult && importResult[2]) {
+            var importAbsoluteUrl = path.resolve(importFilePath,importResult[2]);
+            // 用%号表示已经替换好的import路径，后续会再去掉百分号,这里替换的时
+            // 候要注意全局的替换
+            var regimportReplace = RegExp(importResult[2],'g');
+            content = content.replace(regimportReplace, "%" + path.relative(self.config.sourceDir,importAbsoluteUrl));
+            return self.modifySubImportsPath(content, filePath);
+        }
+        // 替换图片和font的路径
+        picAndFontResult = regImageOrFont.exec(content);
+        if (typeof picAndFontResult !== 'undefined' && picAndFontResult && picAndFontResult[2]) {
+            var regpicReplace = RegExp(picAndFontResult[2],'g');
+            var picAbsolutePath = path.resolve(importFilePath,picAndFontResult[2]);
+            // 用：号表示已经替换好的import路径，后续会再去掉冒号
+            content = content.replace(regpicReplace, ":" + path.relative(self.config.sourceDir,picAbsolutePath));
+            return self.modifySubImportsPath(content, filePath);
+        }
+        return content;
+    },
     build: function(callback){
@@ -196,3 +243,3 @@ var self = this,
                 // after combo, @charset position may be changed. since the output file encoding is specified, we should remove @charset.
-                data = data.replace(/@charset\s+['|"](\w*)["|'];/g, '');
+                data = data.replace(/@charset\s+['|"](\S*)["|'];/g, '');
                 // restore all comments back.
@@ -220,3 +267,3 @@ data = compressor._restoreComments(data, preservedTokens);
     },
-    version: "0.2.4"
-};
+    version: JSON.parse(fs.readFileSync(path.resolve(__dirname, '../package.json'))).version
+};

package.json

 {
     "name":"css-combo",
-    "version":"0.2.5",
+    "version":"0.2.6",
     "description":"css module combo tool",
-    "author":"Dorange <[e-mail]>",
+    "author":"daxingplay <[e-mail]>",
     "homepage":"",
@@ -7,0 +7,0 @@ "keywords":[

README.md

@@ -7,35 +7,58 @@ # css-combo
 combo css which import other css
-����js��Ŀǰ�Ѿ��бȽϳ����ģ�黯����������seajs��kissy������css�����أ�һ����ͨ��less���б������ġ�less�ٷ�����less�ļ��е�@import "xxx.css"�Dz����������ģ���Ҳ�ǿ��ǵ���������������Ҫ��������css���������@import "xxx.less"��less������߾ͻ������Щ�����ģ�飬���д����
-css-combo���ǽ��������˼�룬ʵ����cssģ�黯����������ļ���@import����ģ�飬Ȼ�������ļ����д����ʱ�򣬸ù��߻����import���ļ�������Щ�ļ����������
+对于js，目前已经有比较成熟的模块化方案，比如seajs、kissy，但是css方面呢，一般是通过less进行编译打包的。less官方对于less文件中的@import "xxx.css"是不会打包进来的，这也是考虑到本身就是有需求要这样引用css，而如果你@import "xxx.less"，less打包工具就会分析这些引入的模块，进行打包。
+css-combo就是借鉴了这种思想，实现了css模块化。即在入口文件中@import其他模块，然后对入口文件进行打包的时候，该工具会分析import的文件，把这些文件打包进来。
 
-����CSSģ�黯����ӭ��ҿ�����ƪ���ģ�(http://www.techcheng.com/study/css/introduce-css-combo.html)
+对于CSS模块化，欢迎大家看我这篇博文：(http://www.techcheng.com/study/css/introduce-css-combo.html)
 
 ## Usage
 
-*API:*
+首先需要npm安装一下：
 
-    CssCombo.build(cfg, function(err){ callback(); });
+    npm install -g css-combo
 
-* cfg:{Object} ����
+###命令行使用###
 
-    * target��{String} ����ļ�
-    * inputEncoding��{String} �����ļ����룬��ѡ��Ĭ�ϼ������ļ��е�@charset���á��������ļ�û������@charset����ô������ñ�ѡ��
-    * outputEncoding��{String} ����ļ����룬��ѡ��Ĭ��UTF-8
-    * output��{String} ���Ŀ¼�������������·�������ļ������Ƽ���������ʹ�����·��
-    * exclude��{Array} �������������飬��ѡ��Ĭ�Ͽ�
-    * compress: {Boolean} �Ƿ�ѹ����Ĭ��Ϊtrue����������ͬYUICompressor
-    * debug: {Boolean} �Ƿ��ӡ��־
+命令行下，可以先进入需要打包的文件所在目录，然后
 
+    csscombo xxx.source.css xxx.combo.css
+
+第一个参数是源文件名，第二个参数是打包之后的文件名
+
+其他选项有：
+
+* -s: silent, 静默模式，表示不输出任何信息
+* -ic: inputCharset, 可以指定输入文件的编码
+* -oc： outputCharset, 可以指定输出文件的编码
+
+### 在NodeJS里面使用 ###
+
+你也可以在自己的打包工具中调用css combo，和其他npm包一样：
+
+    var CSSCombo = require('css-combo');
+    CSSCombo.build(cfg, function(err){ callback(); });
+
+* cfg 参数可以配置以下选项：
+
+    * target：{String} 入口文件
+    * inputEncoding：{String} 输入文件编码，可选，默认检测入口文件中的@charset设置。如果入口文件没有设置@charset，那么最好设置本选项
+    * outputEncoding：{String} 输出文件编码，可选，默认UTF-8
+    * output：{String} 输出目录或者输出的完整路径（含文件名，推荐），可以使用相对路径
+    * exclude：{Array} 黑名单正则数组，可选，默认空
+    * compress: {Boolean} 是否压缩，默认为true，处理规则同YUICompressor
+    * debug: {Boolean} 是否打印日志
+
+### 在grunt中使用 ###
+
+CSS Combo配套的grunt插件：https://github.com/daxingplay/grunt-css-combo
+
 ## TODO
 
-    * ����Ŀ¼�����ʽ
-    * <del>���Ӷ�ģ��@charset�ļ��</del>
-    * <del>����ת�������ѹ����ascii</del>
+* 增加目录打包形式
 
 ## ChangeList
 
-    * 0.2.2���������֮������ļ���������
+* 0.2.2：修正打包之后输出文件编码问题
 
 ## License
-css-combo ���� "MIT"��https://github.com/daxingplay/css-combo/blob/master/LICENSE.md ��
+css-combo 遵守 "MIT"：https://github.com/daxingplay/css-combo/blob/master/LICENSE.md 协议
 

test/css-combo-test.js

@@ -26,6 +26,6 @@ var CssCombo = require('../lib/index'),
         }
-        if (report.imports.length !== 5) {
+        if (report.imports.length !== 7) {
             throw new Error('report.imports Error');
         }
     }
-});
+});

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 2 instances in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Non-existent author

Supply chain risk

The package was published by an npm account that no longer exists.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

615161

increased by808.03%

Number of package files

26

increased by44.44%

Lines of code

1713

increased by7.67%

Number of lines in readme file

64

increased by56.1%

Number of high supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of medium supply chain risk alerts

4

increased by100%

No dependency changes