├── .gitignore
├── index.js
├── package.json
├── LICENSE
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | package-lock.json
3 | 
4 | # Editor
5 | .idea
6 | .vscode


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | const UNICODE_MATCH_REG = /[^\x00-\xff]/g;
 2 | const CONTENT_MATCH_REG = /(?<!-)content\s*:\s*([^;\}]+)/g;
 3 | module.exports = function (source) {
 4 | 	source = source.replace(CONTENT_MATCH_REG, function (m, p1) {
 5 | 		return m.replace(UNICODE_MATCH_REG, function (m) {
 6 | 			return "\\" + m.charCodeAt(0).toString(16);
 7 | 		});
 8 | 	});
 9 | 	return source;
10 | }
11 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "css-unicode-loader",
 3 |   "version": "1.0.3",
 4 |   "description": "webpack loader for convert chinese or double-byte character string of scss/sass/less/css files to unicode encoding",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/styzhang/css-unicode-loader.git"
12 |   },
13 |   "keywords": [
14 |     "webpack",
15 |     "loader",
16 |     "css-unicode-loader"
17 |   ],
18 |   "author": "styzhang",
19 |   "license": "MIT",
20 |   "bugs": {
21 |     "url": "https://github.com/styzhang/css-unicode-loader/issues"
22 |   },
23 |   "homepage": "https://github.com/styzhang/css-unicode-loader#readme",
24 |   "devDependencies": {
25 |     "loader-utils": "^2.0.0"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 styzhang
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # css-unicode-loader
 2 | 
 3 | webpack loader for convert chinese or double-byte character string of scss/sass/less/css files to unicode encoding.
 4 | 
 5 | ## Usage
 6 | 
 7 | ```
 8 | npm install --save-dev css-unicode-loader
 9 | ```
10 | 
11 | if use vue-cli 4+  and  scss(sass),  add the loader in the vue config file .
12 | 
13 | ```js
14 | // vue.config.js
15 | module.exports = {
16 |   configureWebpack: config => {
17 |     const sassLoader = require.resolve('sass-loader');
18 |     config.module.rules.filter(rule => {
19 |       return rule.test.toString().indexOf("scss") !== -1;
20 |     })
21 |       .forEach(rule => {
22 |         rule.oneOf.forEach(oneOfRule => {
23 |           const sassLoaderIndex = oneOfRule.use.findIndex(item => item.loader === sassLoader);
24 |           oneOfRule.use.splice(sassLoaderIndex, 0,
25 |           	{ loader: require.resolve("css-unicode-loader") });
26 |         });
27 |       });
28 |     }
29 | }
30 | ```
31 | 
32 | if use webpack.config.js,  add the loader in the config file .
33 | 
34 | ```js
35 | // webpack.config.js
36 | module.exports = {
37 |   ...
38 |   module: {
39 |     rules: [{
40 |       test: /\.scss$/,
41 |       use: [{
42 |           loader: "style-loader" // Creates `style` nodes from JS strings
43 |       }, {
44 |           loader: "css-loader" // Translates CSS into CommonJS
45 |       }, {
46 |           loader: "css-unicode-loader" // Convert double-byte character to unicode encoding.
47 |       }, {
48 |           loader: "sass-loader" // Compiles Sass to CSS
49 |       }]
50 |     }]
51 |   }
52 | };
53 | ```
54 | 
55 | ## Note
56 | 
57 | This loader must be before sass-loader if you used sass-loader
58 | 
59 | ## Example
60 | 
61 | ```css
62 | .scss::after {
63 |   content: "中国";
64 | }
65 | .icon-content::after {
66 |   content: "";
67 | }
68 | ```
69 | 
70 | after loader handle
71 | 
72 | ```css
73 | .scss::after {
74 |   content: "\4e2d\56fd";
75 | }
76 | .icon-content::after {
77 |   content: "\e6df";
78 | }
79 | ```
80 | 


--------------------------------------------------------------------------------