Changeset 5994

Timestamp:

04/02/2016 09:22:03 AM (9 years ago)

Author:

netweb

Message:

Build Tools: Add Autoprefixer for adding CSS vendor prefixes

This changeset adds a new Grunt task grunt postcss:core that runs Autoprefixer on CSS & SCSS files to add or remove any vendor prefixes required by browsers.

Browsers supported are the same as WordPress currently supports which are:

• Android >= 2.1
• Chrome >= 21
• Edge >= 12
• Explorer >= 7
• Firefox >= 17
• Opera >= 12.1
• Safari >= 6.0.

Vendor prefixes are are also added for templates/default/css/bbpress.css as this is the only file that requires them at this time.

Fixes #2923.

Location:

trunk

Files:

• Gruntfile.js (modified) (3 diffs)
• package.json (modified) (2 diffs)
• src/templates/default/css/bbpress.css (modified) (4 diffs)

trunk/Gruntfile.js

@@ -44 +44 @@
             '!phpunit.xml',
             '!phpunit.xml.dist'
-        ];
+        ],
+
+        // PostCSS
+        autoprefixer    = require('autoprefixer');
 
     // Load tasks.
@@ -228 +231 @@
             }
         },
+        postcss: {
+            options: {
+                map: false,
+                processors: [
+                    autoprefixer({
+                        browsers: [
+                            'Android >= 2.1',
+                            'Chrome >= 21',
+                            'Edge >= 12',
+                            'Explorer >= 7',
+                            'Firefox >= 17',
+                            'Opera >= 12.1',
+                            'Safari >= 6.0'
+                        ],
+                        cascade: false
+                    })
+                ],
+                failOnError: false
+            },
+            core: {
+                expand: true,
+                cwd: SOURCE_DIR,
+                dest: SOURCE_DIR,
+                src: [ [ BBP_LTR_CSS ], 'includes/admin/styles/*/colors.scss' ]
+            },
+            colors: {
+                expand: true,
+                cwd: BUILD_DIR,
+                dest: BUILD_DIR,
+                src: [ 'includes/admin/styles/*/colors.css' ]
+            }
+        },
         rtlcss: {
             options: {
@@ -331 +366 @@
 
     // Color schemes task.
-    grunt.registerTask( 'colors', [ 'sass:colors' ] );
+    grunt.registerTask( 'colors', [ 'sass:colors', 'postcss:colors' ] );
 
     // Build tasks.
     grunt.registerTask( 'src',     [ 'checkDependencies', 'jsvalidate:src', 'jshint' ] );
     grunt.registerTask( 'commit',  [ 'src', 'checktextdomain' ] );
-    grunt.registerTask( 'build',   [ 'commit', 'clean:all', 'copy:files', 'colors', 'rtlcss:core', 'cssmin:ltr', 'cssmin:rtl', 'uglify:core', 'jsvalidate:build', 'makepot' ] );
+    grunt.registerTask( 'build',   [ 'commit', 'clean:all', 'copy:files', 'postcss:core', 'colors', 'rtlcss:core', 'cssmin:ltr', 'cssmin:rtl', 'uglify:core', 'jsvalidate:build', 'makepot' ] );
     grunt.registerTask( 'release', [ 'build' ] );
 

trunk/package.json

@@ -6 +6 @@
   "description": "Forum software with a twist from the creators of WordPress.",
   "devDependencies": {
+    "autoprefixer": "~6.3.3",
     "grunt": "~0.4.5",
     "grunt-check-dependencies": "~0.12.0",
@@ -19 +20 @@
     "grunt-legacy-util": "^0.2.0",
     "grunt-patch-wordpress": "~0.3.0",
+    "grunt-postcss": "~0.8.0",
     "grunt-rtlcss": "~2.0.1",
     "grunt-sass": "~1.1.0",

trunk/src/templates/default/css/bbpress.css

@@ -649 +649 @@
 textarea#bbp_forum_content {
     width: 97%;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
@@ -785 +787 @@
         background: #f9f9f9;
         border: 1px solid #ddd;
+        -webkit-box-shadow: none;
         box-shadow: none;
         padding: 5px 8px;
+        -webkit-border-radius: 0;
         border-radius: 0;
     }
@@ -792 +796 @@
     #bbpress-forums #bbp-your-profile fieldset textarea:focus {
         border: 1px solid #ccc;
+        -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
         box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
         outline-color: rgba(240,255,240,0.1);
@@ -860 +865 @@
     padding: 0 0.6em;
     margin: 5px 0 15px;
+    -webkit-border-radius: 3px;
     border-radius: 3px;
     background-color: #ffffe0;