Skip to content

Commit ba86a7e

Browse files
committedJun 11, 2020
Initial Commit
0 parents  commit ba86a7e

File tree

5 files changed

+2340
-0
lines changed

5 files changed

+2340
-0
lines changed
 

‎.gitignore

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
#IDEs
2+
.idea
3+
4+
# Logs
5+
logs
6+
*.log
7+
npm-debug.log*
8+
yarn-debug.log*
9+
yarn-error.log*
10+
lerna-debug.log*
11+
12+
# Diagnostic reports (https://nodejs.org/api/report.html)
13+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
14+
15+
# Runtime data
16+
pids
17+
*.pid
18+
*.seed
19+
*.pid.lock
20+
21+
# Directory for instrumented libs generated by jscoverage/JSCover
22+
lib-cov
23+
24+
# Coverage directory used by tools like istanbul
25+
coverage
26+
*.lcov
27+
28+
# nyc test coverage
29+
.nyc_output
30+
31+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
32+
.grunt
33+
34+
# Bower dependency directory (https://bower.io/)
35+
bower_components
36+
37+
# node-waf configuration
38+
.lock-wscript
39+
40+
# Compiled binary addons (https://nodejs.org/api/addons.html)
41+
build/Release
42+
43+
# Dependency directories
44+
node_modules/
45+
jspm_packages/
46+
47+
# TypeScript v1 declaration files
48+
typings/
49+
50+
# TypeScript cache
51+
*.tsbuildinfo
52+
53+
# Optional npm cache directory
54+
.npm
55+
56+
# Optional eslint cache
57+
.eslintcache
58+
59+
# Microbundle cache
60+
.rpt2_cache/
61+
.rts2_cache_cjs/
62+
.rts2_cache_es/
63+
.rts2_cache_umd/
64+
65+
# Optional REPL history
66+
.node_repl_history
67+
68+
# Output of 'npm pack'
69+
*.tgz
70+
71+
# Yarn Integrity file
72+
.yarn-integrity
73+
74+
# dotenv environment variables file
75+
.env
76+
.env.test
77+
78+
# parcel-bundler cache (https://parceljs.org/)
79+
.cache
80+
81+
# Next.js build output
82+
.next
83+
84+
# Nuxt.js build / generate output
85+
.nuxt
86+
dist
87+
88+
# Gatsby files
89+
.cache/
90+
# Comment in the public line in if your project uses Gatsby and *not* Next.js
91+
# https://nextjs.org/blog/next-9-1#public-directory-support
92+
# public
93+
94+
# vuepress build output
95+
.vuepress/dist
96+
97+
# Serverless directories
98+
.serverless/
99+
100+
# FuseBox cache
101+
.fusebox/
102+
103+
# DynamoDB Local files
104+
.dynamodb/
105+
106+
# TernJS port file
107+
.tern-port

‎README.md

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# RTLCSS plugin for Laravel Mix
2+
3+
It's based on [webpack-rtl-plugin](https://github.com/romainberger/webpack-rtl-plugin).
4+
5+
# Install
6+
```shell script
7+
npm i rtlcss-webpack-mix-plugin -s
8+
```
9+
10+
# Usage
11+
12+
```javascript
13+
const RTLCSSPlugin = require('rtlcss-webpack-mix-plugin');
14+
15+
mix.webpackConfig({
16+
new RTLCSSPlugin({
17+
filename: '[name].rtl.css',
18+
})
19+
});
20+
```

‎index.js

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
const { forEachOfLimit } = require('async');
2+
const rtlcss = require('rtlcss');
3+
const cssDiff = require('@romainberger/css-diff');
4+
const cssnano = require('cssnano');
5+
const { ConcatSource } = require('webpack-sources');
6+
7+
class RTLCSSPlugin {
8+
constructor(options) {
9+
this.options = {
10+
filename: false,
11+
options: {},
12+
plugins: [],
13+
...options
14+
}
15+
}
16+
17+
apply(compiler) {
18+
compiler.hooks.emit.tapAsync('RTLCSSPlugin', (compilation, callback) => {
19+
forEachOfLimit(compilation.chunks, 5, (chunk, key, cb) => {
20+
const rtlFiles = [];
21+
let cssnanoPromise = Promise.resolve();
22+
23+
chunk.files.forEach(asset => {
24+
const match = this.options.test ? new RegExp(this.options.test).test(asset) : true;
25+
26+
if (path.extname(asset) !== '.css') {
27+
return;
28+
}
29+
30+
const baseSource = compilation.assets[asset].source();
31+
let filename = '';
32+
let rtlSource = '';
33+
34+
if (match) {
35+
rtlSource = rtlcss.process(baseSource, this.options.options, this.options.plugins);
36+
37+
if (this.options.filename instanceof Array && this.options.filename.length === 2) {
38+
filename = asset.replace(this.options.filename[0], this.options.filename[1]);
39+
} else if (this.options.filename) {
40+
filename = this.options.filename;
41+
42+
if (/\[contenthash]/.test(this.options.filename)) {
43+
const hash = createHash('md5').update(rtlSource).digest('hex').substr(0, 10);
44+
filename = filename.replace('[contenthash]', hash);
45+
}
46+
if (/\[id]/.test(this.options.filename)) {
47+
filename = filename.replace('[id]', chunk.id);
48+
}
49+
if (/\[name]/.test(this.options.filename)) {
50+
filename = path.dirname(asset) + '/' + filename.replace('[name]', path.basename(asset, '.css'));
51+
}
52+
if (/\[file]/.test(this.options.filename)) {
53+
filename = filename.replace('[file]', asset);
54+
}
55+
if (/\[filebase]/.test(this.options.filename)) {
56+
filename = filename.replace('[filebase]', path.basename(asset));
57+
}
58+
if (/\[ext]/.test(this.options.filename)) {
59+
filename = filename.replace('.[ext]', path.extname(asset));
60+
}
61+
} else {
62+
const newFilename = `${path.basename(asset, '.css')}.rtl`;
63+
filename = asset.replace(path.basename(asset, '.css'), newFilename);
64+
}
65+
66+
if (this.options.diffOnly) {
67+
rtlSource = cssDiff(baseSource, rtlSource)
68+
}
69+
}
70+
71+
if (this.options.minify !== false) {
72+
let nanoOptions = { from: undefined }
73+
if (typeof this.options.minify === 'object') {
74+
nanoOptions = this.options.minify;
75+
}
76+
77+
cssnanoPromise = cssnanoPromise.then(() => {
78+
let minify = cssnano.process( baseSource, nanoOptions).then(output => {
79+
compilation.assets[asset] = new ConcatSource(output.css);
80+
});
81+
82+
if (match) {
83+
const rtlMinify = cssnano.process(rtlSource, nanoOptions).then(output => {
84+
compilation.assets[filename] = new ConcatSource(output.css);
85+
rtlFiles.push(filename);
86+
});
87+
88+
minify = Promise.all([minify, rtlMinify]);
89+
}
90+
91+
return minify;
92+
});
93+
} else if (match) {
94+
compilation.assets[filename] = new ConcatSource(rtlSource);
95+
rtlFiles.push(filename);
96+
}
97+
});
98+
99+
cssnanoPromise.then(() => {
100+
chunk.files.push.apply(chunk.files, rtlFiles)
101+
cb()
102+
});
103+
}, callback);
104+
});
105+
}
106+
}
107+
108+
module.exports = RTLCSSPlugin;

‎package-lock.json

+2,070
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "rtlcss-webpack-mix-plugin",
3+
"version": "1.0.0",
4+
"description": "RTLCSS plugin for webpack mix",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"keywords": [
10+
"mix",
11+
"laravel",
12+
"rtlcss",
13+
"rtl",
14+
"webpack",
15+
"webpack-plugin"
16+
],
17+
"author": "Reza Tayebi",
18+
"license": "ISC",
19+
"dependencies": {
20+
"@romainberger/css-diff": "^1.0.3",
21+
"async": "^3.2.0",
22+
"cssnano": "^4.1.10",
23+
"rtlcss": "^2.5.0",
24+
"webpack-sources": "^1.4.3"
25+
},
26+
"devDependencies": {},
27+
"repository": {
28+
"type": "git",
29+
"url": "git+https://github.com/atriatech/rtlcss-webpack-mix-plugin.git"
30+
},
31+
"bugs": {
32+
"url": "https://github.com/atriatech/rtlcss-webpack-mix-plugin/issues"
33+
},
34+
"homepage": "https://github.com/atriatech/rtlcss-webpack-mix-plugin#readme"
35+
}

0 commit comments

Comments
 (0)
Please sign in to comment.