Skip to content
This repository was archived by the owner on Jul 12, 2024. It is now read-only.

Load RTL CSS files #1781

Merged
Aljullu merged 4 commits into from
Mar 14, 2019
Merged

Load RTL CSS files #1781

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2b030b7
Load RTL CSS files
Aljullu Mar 12, 2019
f7bacaf
Remove RTL specific CSS rules
Aljullu Mar 12, 2019
5f0b062
Generate RTL files of app style
Aljullu Mar 13, 2019
474e777
Simplify require route
Aljullu Mar 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions lib/client-assets.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,20 +110,23 @@ function wc_admin_register_script() {
array( 'wp-edit-blocks' ),
filemtime( wc_admin_dir_path( 'dist/components/style.css' ) )
);
wp_style_add_data( 'wc-components', 'rtl', 'replace' );

wp_register_style(
'wc-components-ie',
wc_admin_url( 'dist/components/ie.css' ),
array( 'wp-edit-blocks' ),
filemtime( wc_admin_dir_path( 'dist/components/ie.css' ) )
);
wp_style_add_data( 'wc-components-ie', 'rtl', 'replace' );

wp_register_style(
WC_ADMIN_APP,
wc_admin_url( "dist/{$entry}/style.css" ),
array( 'wc-components' ),
filemtime( wc_admin_dir_path( "dist/{$entry}/style.css" ) )
);
wp_style_add_data( WC_ADMIN_APP, 'rtl', 'replace' );
}
add_action( 'admin_enqueue_scripts', 'wc_admin_register_script' );

Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,8 @@
"stylelint": "9.9.0",
"stylelint-config-wordpress": "13.1.0",
"webpack": "4.28.3",
"webpack-cli": "3.1.2"
"webpack-cli": "3.1.2",
"webpack-rtl-plugin": "github:yoavf/webpack-rtl-plugin#develop"

@psealock psealock Mar 13, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we target master ?

@Aljullu Aljullu Mar 14, 2019

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I chose that one to keep consistency with Gutenberg:
https://github.com/WordPress/gutenberg/blob/master/package.json#L123

Ideally, we would be using webpack-rtl-plugin from NPM, but we need this PR to be merged upstream before: romainberger/webpack-rtl-plugin#15.

},
"dependencies": {
"@fresh-data/framework": "^0.5.1",
Expand Down
10 changes: 0 additions & 10 deletions packages/components/src/chart/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,16 +79,6 @@
margin-top: -8px;
}

.rtl & {
margin: 0 auto 0 0;
border-right: 0;
border-left: 1px solid $core-grey-light-700;

@include breakpoint( '<782px' ) {
border-left: 0;
}
}

@include breakpoint( '<782px' ) {
border-right: 0;
min-height: 0;
Expand Down
13 changes: 0 additions & 13 deletions packages/components/src/table/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,10 +214,6 @@
&:not(.is-left-aligned) {
text-align: right;

.rtl & {
text-align: left;
}

button {
justify-content: flex-end;
}
Expand Down Expand Up @@ -255,11 +251,6 @@ th.woocommerce-table__item {

& + .woocommerce-table__header {
border-left: 1px solid $core-grey-light-700;

.rtl & {
border-left: 0;
border-right: 1px solid $core-grey-light-700;
}
}

&.is-left-aligned.is-sortable {
Expand All @@ -281,10 +272,6 @@ th.woocommerce-table__item {
background: transparent;
box-shadow: none !important;

.rtl & {
padding: $gap-smaller 0 $gap-smaller $gap-large;
}

// @todo Add interactive styles
&:hover {
box-shadow: none !important;
Expand Down
4 changes: 0 additions & 4 deletions packages/components/src/view-more-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,6 @@
padding-left: 4px;
margin: 0 0 0 $gap-smallest;
vertical-align: middle;

.rtl & {
margin: 0 $gap-smallest 0 0;
}
}

.woocommerce-view-more-list__popover {
Expand Down
2 changes: 1 addition & 1 deletion postcss.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
module.exports = {
plugins: [
require( './node_modules/@wordpress/postcss-themes' )( {
require( '@wordpress/postcss-themes' )( {
// @todo A default is required for now. Fix postcss-themes to allow no default
defaults: {
primary: '#0085ba',
Expand Down
4 changes: 4 additions & 0 deletions webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const { get } = require( 'lodash' );
const path = require( 'path' );
const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
const { DefinePlugin } = require( 'webpack' );
const WebpackRTLPlugin = require( 'webpack-rtl-plugin' );

/**
* WordPress dependencies
Expand Down Expand Up @@ -157,6 +158,9 @@ const webpackConfig = {
return outputPath;
},
} ),
new WebpackRTLPlugin( {
suffix: '-rtl',
} ),
new MiniCssExtractPlugin( {
filename: './dist/[name]/style.css',
} ),
Expand Down