RTL CSS generation: Switch from CSSJanus to RTLCSS.
CSSJanus (introduced in [26107]), we had a great time with you, but sadly you don't like our fancy CSS. RTLCSS is a framework for converting CSS from LTR to RTL, same as CSSJanus, with support for more CSS properties like `transform`, `transition` or multiple box and text shadows. Changes: * devDependencies: Remove `grunt-cssjanus`, add `grunt-rtlcss`. * RTLCSS uses `/* rtl:ignore */` to ignore a rule, switch existing `/* @noflip */` to the new directive. * RTLCSS supports the `transform` property, means we can remove some ignore rules. * RTLCSS supports string maps for custom replace rules. This commit includes a rule `import-rtl-stylesheet` which replaces ".css" with "-rtl.css" in URLs. Notes for core development: * The file generation task is still `grunt rtl`. * If you have used `grunt cssjanus` before, use `grunt rtlcss` now. * Remember the new directive `/* rtl:ignore */`. fixes #31332. Build: https://build.trac.wordpress.org/changeset/31554 git-svn-id: https://develop.svn.wordpress.org/trunk@31573 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Dominik Schilling (ocean90)
parent
a4cf473c6d
commit
cbb528de0f
40
Gruntfile.js
40
Gruntfile.js
@ -172,14 +172,29 @@ module.exports = function(grunt) {
|
||||
]
|
||||
}
|
||||
},
|
||||
cssjanus: {
|
||||
core: {
|
||||
options: {
|
||||
rtlcss: {
|
||||
options: {
|
||||
// rtlcss options
|
||||
config: {
|
||||
swapLeftRightInUrl: false,
|
||||
swapLtrRtlInUrl: false,
|
||||
processContent: function( src ) {
|
||||
return src.replace( /url\((.+?)\.css\)/g, 'url($1-rtl.css)' );
|
||||
}
|
||||
autoRename: false,
|
||||
preserveDirectives: true,
|
||||
stringMap: [
|
||||
{
|
||||
name: 'import-rtl-stylesheet',
|
||||
search: [ '.css' ],
|
||||
replace: [ '-rtl.css' ],
|
||||
options: {
|
||||
scope: 'url',
|
||||
ignoreCase: false
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
saveUnmodified: false
|
||||
},
|
||||
core: {
|
||||
expand: true,
|
||||
cwd: SOURCE_DIR,
|
||||
dest: BUILD_DIR,
|
||||
@ -190,11 +205,6 @@ module.exports = function(grunt) {
|
||||
]
|
||||
},
|
||||
colors: {
|
||||
options: {
|
||||
processContent: function( src ) {
|
||||
return src.replace( /([^/]+)\.css/gi, '$1-rtl.css' );
|
||||
}
|
||||
},
|
||||
expand: true,
|
||||
cwd: BUILD_DIR,
|
||||
dest: BUILD_DIR,
|
||||
@ -503,7 +513,7 @@ module.exports = function(grunt) {
|
||||
SOURCE_DIR + 'wp-admin/css/*.css',
|
||||
SOURCE_DIR + 'wp-includes/css/*.css'
|
||||
],
|
||||
tasks: ['cssjanus:dynamic'],
|
||||
tasks: ['rtlcss:dynamic'],
|
||||
options: {
|
||||
spawn: false,
|
||||
interval: 2000
|
||||
@ -522,7 +532,7 @@ module.exports = function(grunt) {
|
||||
// Register tasks.
|
||||
|
||||
// RTL task.
|
||||
grunt.registerTask('rtl', ['cssjanus:core', 'cssjanus:colors']);
|
||||
grunt.registerTask('rtl', ['rtlcss:core', 'rtlcss:colors']);
|
||||
|
||||
// Color schemes task.
|
||||
grunt.registerTask('colors', ['sass:colors', 'autoprefixer:colors']);
|
||||
@ -576,7 +586,7 @@ module.exports = function(grunt) {
|
||||
//
|
||||
// On `watch:all`, automatically updates the `copy:dynamic` and `clean:dynamic`
|
||||
// configurations so that only the changed files are updated.
|
||||
// On `watch:rtl`, automatically updates the `cssjanus:dynamic` configuration.
|
||||
// On `watch:rtl`, automatically updates the `rtlcss:dynamic` configuration.
|
||||
grunt.event.on('watch', function( action, filepath, target ) {
|
||||
if ( target !== 'all' && target !== 'rtl' ) {
|
||||
return;
|
||||
@ -588,6 +598,6 @@ module.exports = function(grunt) {
|
||||
|
||||
grunt.config(['clean', 'dynamic', 'src'], cleanSrc);
|
||||
grunt.config(['copy', 'dynamic', 'src'], copySrc);
|
||||
grunt.config(['cssjanus', 'dynamic', 'src'], copySrc);
|
||||
grunt.config(['rtlcss', 'dynamic', 'src'], copySrc);
|
||||
});
|
||||
};
|
||||
|
||||
@ -22,10 +22,10 @@
|
||||
"grunt-contrib-qunit": "~0.5.2",
|
||||
"grunt-contrib-uglify": "~0.6.0",
|
||||
"grunt-contrib-watch": "~0.6.1",
|
||||
"grunt-cssjanus": "~0.2.4",
|
||||
"grunt-jsvalidate": "~0.2.2",
|
||||
"grunt-legacy-util": "^0.2.0",
|
||||
"grunt-patch-wordpress": "~0.3.0",
|
||||
"grunt-rtlcss": "~1.5.1",
|
||||
"grunt-sass": "~0.16.0",
|
||||
"matchdep": "~0.3.0"
|
||||
}
|
||||
|
||||
@ -263,6 +263,7 @@
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* rtl:ignore */
|
||||
.about-wrap .dfw-container .overlay-image.from-left {
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
@ -296,7 +297,7 @@
|
||||
.about-wrap .feature-list svg {
|
||||
float: left;
|
||||
clear: left;
|
||||
margin: 15px 15px 0 0 ;
|
||||
margin: 15px 15px 0 0;
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
background-color: #cccccc;
|
||||
|
||||
@ -592,6 +592,7 @@ ul#adminmenu > li.current > a.current:after {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* rtl:ignore */
|
||||
.folded #collapse-button div:after,
|
||||
.rtl #collapse-button div:after {
|
||||
-webkit-transform: rotate(180deg);
|
||||
@ -723,6 +724,7 @@ li#wp-admin-bar-menu-toggle {
|
||||
background: none;
|
||||
}
|
||||
|
||||
/* rtl:ignore */
|
||||
.auto-fold #collapse-button div:after {
|
||||
-webkit-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
|
||||
@ -390,12 +390,12 @@ ol.ol-decimal > li {
|
||||
margin: 0 0 0.5em;
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
/* rtl:ignore */
|
||||
.ltr {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
/* rtl:ignore */
|
||||
.code,
|
||||
code {
|
||||
font-family: Consolas, Monaco, monospace;
|
||||
@ -2375,12 +2375,12 @@ div.action-links {
|
||||
background: #f3f3f3;
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
/* rtl:ignore */
|
||||
#plugin-information .section {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
/* rtl:ignore */
|
||||
#plugin-information .section ul,
|
||||
#plugin-information .section ol {
|
||||
list-style-type: disc;
|
||||
@ -2408,7 +2408,7 @@ div.action-links {
|
||||
box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.3 );
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
/* rtl:ignore */
|
||||
#plugin-information #section-screenshots li p {
|
||||
font-style: italic;
|
||||
padding-left: 20px;
|
||||
@ -2420,7 +2420,7 @@ div.action-links {
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
/* rtl:ignore */
|
||||
#plugin-information .review {
|
||||
overflow: hidden; /* clearfix */
|
||||
width: 100%;
|
||||
@ -2432,7 +2432,7 @@ div.action-links {
|
||||
overflow: hidden; /* clearfix */
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
/* rtl:ignore */
|
||||
#plugin-information .review-title-section h4 {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
@ -2445,24 +2445,24 @@ div.action-links {
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
/* rtl:ignore */
|
||||
#plugin-information .reviewer-info .avatar {
|
||||
float: left;
|
||||
margin: 4px 6px 0 0;
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
/* rtl:ignore */
|
||||
#plugin-information .reviewer-info .star-rating {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
/* rtl:ignore */
|
||||
#plugin-information .review-meta {
|
||||
float: left;
|
||||
margin-left: 0.75em;
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
/* rtl:ignore */
|
||||
#plugin-information .review-body {
|
||||
float: left;
|
||||
width: 100%;
|
||||
@ -2710,7 +2710,7 @@ img {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
/* rtl:ignore */
|
||||
#template textarea,
|
||||
#docs-list {
|
||||
direction: ltr;
|
||||
|
||||
@ -1310,7 +1310,6 @@ table.links-table {
|
||||
transition-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
.focus-on #adminmenuback,
|
||||
.focus-on #adminmenuwrap {
|
||||
-webkit-transform: translateX( -100% );
|
||||
@ -1318,14 +1317,6 @@ table.links-table {
|
||||
transform: translateX( -100% );
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
.rtl.focus-on #adminmenuback,
|
||||
.rtl.focus-on #adminmenuwrap {
|
||||
-webkit-transform: translateX( 100% );
|
||||
-ms-transform: translateX( 100% );
|
||||
transform: translateX( 100% );
|
||||
}
|
||||
|
||||
.focus-off #adminmenuback,
|
||||
.focus-off #adminmenuwrap {
|
||||
-webkit-transform: translateX( 0 );
|
||||
|
||||
@ -61,7 +61,7 @@ textarea:focus {
|
||||
box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
/* rtl:ignore */
|
||||
input[type="email"],
|
||||
input[type="url"] {
|
||||
direction: ltr;
|
||||
|
||||
@ -237,7 +237,7 @@ submit {
|
||||
background-color: #ffebe8;
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
/* rtl:ignore */
|
||||
#dbname,
|
||||
#uname,
|
||||
#pwd,
|
||||
|
||||
@ -1524,6 +1524,7 @@ body.full-overlay-active {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
/* rtl:ignore */
|
||||
.wp-full-overlay.collapsed .collapse-sidebar-arrow:before,
|
||||
.rtl .wp-full-overlay .collapse-sidebar-arrow:before {
|
||||
-webkit-transform: rotate(180deg);
|
||||
|
||||
@ -2112,12 +2112,12 @@ i.mce-i-hr:before {
|
||||
font-family: Tahoma, sans-serif;
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
/* rtl:ignore */
|
||||
.mce-rtl .mce-flow-layout .mce-flow-layout-item > div {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
/* rtl:ignore */
|
||||
.mce-rtl .mce-listbox i.mce-caret {
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
@ -128,7 +128,7 @@
|
||||
bottom: -5px;
|
||||
left: 0;
|
||||
}
|
||||
/* @noflip */
|
||||
/* rtl:ignore */
|
||||
.ui-resizable-e {
|
||||
cursor: e-resize;
|
||||
width: 7px;
|
||||
@ -136,7 +136,7 @@
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
/* @noflip */
|
||||
/* rtl:ignore */
|
||||
.ui-resizable-w {
|
||||
cursor: w-resize;
|
||||
width: 7px;
|
||||
@ -144,7 +144,7 @@
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
/* @noflip */
|
||||
/* rtl:ignore */
|
||||
.ui-resizable-se {
|
||||
cursor: se-resize;
|
||||
width: 12px;
|
||||
@ -152,7 +152,7 @@
|
||||
right: 1px;
|
||||
bottom: 1px;
|
||||
}
|
||||
/* @noflip */
|
||||
/* rtl:ignore */
|
||||
.ui-resizable-sw {
|
||||
cursor: sw-resize;
|
||||
width: 9px;
|
||||
@ -160,7 +160,7 @@
|
||||
left: -5px;
|
||||
bottom: -5px;
|
||||
}
|
||||
/* @noflip */
|
||||
/* rtl:ignore */
|
||||
.ui-resizable-nw {
|
||||
cursor: nw-resize;
|
||||
width: 9px;
|
||||
@ -168,7 +168,7 @@
|
||||
left: -5px;
|
||||
top: -5px;
|
||||
}
|
||||
/* @noflip */
|
||||
/* rtl:ignore */
|
||||
.ui-resizable-ne {
|
||||
cursor: ne-resize;
|
||||
width: 9px;
|
||||
|
||||
@ -886,13 +886,11 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
.wp-core-ui .attachment .thumbnail img {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
.wp-core-ui .attachment .thumbnail .centered {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
@ -110,11 +110,11 @@
|
||||
padding-bottom: 13px;
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
/* rtl:ignore */
|
||||
.wp-pointer-left {
|
||||
padding-left: 13px;
|
||||
}
|
||||
/* @noflip */
|
||||
/* rtl:ignore */
|
||||
.wp-pointer-right {
|
||||
margin-left: -13px;
|
||||
padding-right: 13px;
|
||||
@ -168,14 +168,14 @@
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
/* rtl:ignore */
|
||||
.wp-pointer-left .wp-pointer-arrow {
|
||||
left: 0;
|
||||
border-width: 13px 13px 13px 0;
|
||||
border-right-color: #ccc;
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
/* rtl:ignore */
|
||||
.wp-pointer-left .wp-pointer-arrow-inner {
|
||||
left: 1px;
|
||||
margin-left: -13px;
|
||||
@ -186,14 +186,14 @@
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
/* rtl:ignore */
|
||||
.wp-pointer-right .wp-pointer-arrow {
|
||||
right: 0;
|
||||
border-width: 13px 0 13px 13px;
|
||||
border-left-color: #ccc;
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
/* rtl:ignore */
|
||||
.wp-pointer-right .wp-pointer-arrow-inner {
|
||||
right: 1px;
|
||||
margin-right: -13px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user