Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/romainberger/webpack-rtl-plugin
Webpack plugin to produce a rtl css bundle
https://github.com/romainberger/webpack-rtl-plugin
rtl webpack webpack-plugin
Last synced: about 20 hours ago
JSON representation
Webpack plugin to produce a rtl css bundle
- Host: GitHub
- URL: https://github.com/romainberger/webpack-rtl-plugin
- Owner: romainberger
- License: mit
- Created: 2016-04-28T13:39:45.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-01-30T05:04:41.000Z (10 months ago)
- Last Synced: 2024-04-26T08:04:32.352Z (7 months ago)
- Topics: rtl, webpack, webpack-plugin
- Language: JavaScript
- Size: 152 KB
- Stars: 47
- Watchers: 4
- Forks: 33
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Webpack RTL Plugin [](https://travis-ci.org/romainberger/webpack-rtl-plugin) [](https://www.npmjs.com/package/webpack-rtl-plugin) [](https://www.npmjs.com/package/webpack-rtl-plugin)
Webpack plugin to use in addition to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to create a second css bundle, processed to be rtl.
This uses [rtlcss](https://github.com/MohammadYounes/rtlcss) under the hood, please refer to its documentation for supported properties.
Check out the [webpack-rtl-example](https://github.com/romainberger/webpack-rtl-example) to see an example of an app using the rtl-css-loader and webpack-rtl-plugin.
## Installation
```shell
$ npm install webpack-rtl-plugin
```
## Usage
Add the plugin to your webpack configuration:
```js
const WebpackRTLPlugin = require('webpack-rtl-plugin')
module.exports = {
entry: path.join(__dirname, 'src/index.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
...,
}
}
]
}
],
},
plugins: [
new MiniCssExtractPlugin({
filename: 'style.css',
}),
new WebpackRTLPlugin(),
],
}
```
This will create the normal `style.css` and an additionnal `style.rtl.css`.
## Options
```
new WebpackRTLPlugin({
filename: 'style.[contenthash].rtl.css',
options: {},
plugins: [],
diffOnly: false,
minify: true,
})
```
* `test` a RegExp (object or string) that must match asset filename
* `filename` the filename of the result file. May contain patterns in brackets. Default to `style.css`.
* `[contenthash]` a hash of the content of the extracted file
* `[id]` the module identifier
* `[name]` the module name
* `[file]` the extracted file filename
* `[filebase]` the extracted file basename
* `[ext]` the extracted file extension
* May be an array of replace function arguments like `[/(\.css)/i, '-rtl$1']`.
Replace applies to filename that specified in extract-text-webpack-plugin.
* `options` Options given to `rtlcss`. See the [rtlcss documentation for available options](http://rtlcss.com/learn/usage-guide/options/).
* `plugins` RTLCSS plugins given to `rtlcss`. See the [rtlcss documentation for writing plugins](http://rtlcss.com/learn/extending-rtlcss/writing-a-plugin/). Default to `[]`.
* `diffOnly` If set to `true`, the stylesheet created will only contain the css that differs from the source stylesheet. Default to `false`.
* `minify` will minify the css. You can also pass an object for the arguments passed to `cssnano`. Default to `true`.