Adding rtlcss plugin

This commit is contained in:
SergeyEzhin 2022-04-11 21:19:48 +04:00
parent 0f4f400cec
commit a5af4c395c
7 changed files with 34 additions and 25 deletions

View file

@ -3,11 +3,11 @@
.about {
.page-content {
text-align: center;
text-align: center /*rtl:ignore*/;
}
.content-block:first-child {
margin: 15px 0;
margin: 15px 0 /*rtl:append20px*/;
}
.content-block {

View file

@ -16,7 +16,7 @@ window.$ = jQuery;
// Import Framework7 Styles
// import 'framework7/framework7-bundle.css';
import 'framework7/framework7-bundle-rtl.css';
// import 'framework7/framework7-bundle-rtl.css';
// Import Icons and App Custom Styles
// import '../css/icons.css';

View file

@ -20,7 +20,6 @@
<% } else { %>
<style><%= htmlWebpackPlugin.options.skeleton.stylesheet %></style>
<% } %>
<link rel="stylesheet" href="./css/app.rtl.css">
<!-- built styles file will be auto injected -->
</head>
<body>

View file

@ -1,3 +1,4 @@
@import '../../../../../vendor/framework7-react/node_modules/framework7/framework7-bundle.less';
@import '../../../../../vendor/framework7-react/node_modules/framework7/less/mixins.less';
@import '../../../../common/mobile/resources/less/_mixins.less';
@import '../../../../common/mobile/resources/less/colors-table.less';

View file

@ -2,8 +2,10 @@ const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const WebpackRTLPlugin = require('webpack-rtl-plugin');
// const WebpackRTLPlugin = require('webpack-rtl-plugin');
// const rtlcss = require('rtlcss');
const postcssRTLCSS = require('postcss-rtlcss');
const { Mode } = require('postcss-rtlcss/options');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
@ -100,15 +102,17 @@ module.exports = {
}
}),
'css-loader',
{
loader: 'postcss-loader',
options: {
config: {
path: path.resolve(__dirname, '..'),
},
// plugins: [rtlcss]
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
path: path.resolve(__dirname, '..'),
plugins: [
postcssRTLCSS({mode: Mode.combined})
]
},
},
},
],
},
{
@ -122,13 +126,15 @@ module.exports = {
}),
'css-loader?url=false',
{
loader: 'postcss-loader',
options: {
config: {
path: path.resolve(__dirname, '..'),
},
// plugins: [rtlcss]
loader: 'postcss-loader',
options: {
postcssOptions: {
path: path.resolve(__dirname, '..'),
plugins: [
postcssRTLCSS({mode: Mode.combined})
]
},
},
},
{
loader: "less-loader",
@ -202,10 +208,10 @@ module.exports = {
new MiniCssExtractPlugin({
filename: 'css/[name].css',
}),
new WebpackRTLPlugin({
filename: 'css/[name].rtl.css',
diffOnly: true
}),
// new WebpackRTLPlugin({
// filename: 'css/[name].rtl.css',
// diffOnly: true
// }),
new HtmlWebpackPlugin({
filename: `../../../apps/${editor}/mobile/index.html`,
template: `../../apps/${editor}/mobile/src/index_dev.html`,

View file

@ -33,6 +33,7 @@
"framework7-react": "^6.0.4",
"i18next": "^19.8.4",
"i18next-fetch-backend": "^3.0.0",
"postcss": "^8.4.12",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
@ -67,8 +68,9 @@
"mobx": "^6.1.8",
"mobx-react": "^7.1.0",
"ora": "^4.1.1",
"postcss-loader": "^3.0.0",
"postcss-loader": "^6.2.1",
"postcss-preset-env": "^6.7.0",
"postcss-rtlcss": "^3.6.1",
"rimraf": "^3.0.2",
"style-loader": "^1.3.0",
"terser-webpack-plugin": "^5.1.3",

View file

@ -1,5 +1,6 @@
module.exports = (ctx) => ({
plugins: {
'postcss-preset-env': {},
'postcss-preset-env': {}
},
});