mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-24 11:52:51 +01:00
Code Issues Releases Wiki Activity

Replace grunt-postcss with postcss-cli (#20140)

Browse Source 
Refs #19990
Continues the degruntification process.

Also removes mq4-hover-shim for now,
since it doesn't yet implement the standard PostCSS plugin interface.
This commit is contained in:
Chris Rebert 2016-06-20 16:18:21 -07:00 committed by GitHub
parent bfc16c4a82
commit a358fc9dc1
7 changed files with 1117 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
Gruntfile.js
View File

@ -19,9 +19,6 @@ module.exports = function (grunt) {
var fs = require('fs');
var path = require('path');
var isTravis = require('is-travis');
var mq4HoverShim = require('mq4-hover-shim');
var autoprefixerSettings = require('./grunt/autoprefixer-settings.js');
var autoprefixer = require('autoprefixer')(autoprefixerSettings);
var configBridge = grunt.file.readJSON('./grunt/configBridge.json', { encoding: 'utf8' });
@ -166,39 +163,6 @@ module.exports = function (grunt) {
}
},
postcss: {
core: {
options: {
map: true,
processors: [
mq4HoverShim.postprocessorFor({ hoverSelectorPrefix: '.bs-true-hover ' }),
require('postcss-flexbugs-fixes')(),
autoprefixer
]
},
src: 'dist/css/*.css'
},
docs: {
options: {
processors: [
autoprefixer
]
},
src: 'docs/assets/css/docs.min.css'
},
examples: {
options: {
processors: [
autoprefixer
]
},
expand: true,
cwd: 'docs/examples/',
src: ['**/*.css'],
dest: 'docs/examples/'
}
},
cssmin: {
options: {
// TODO: disable `zeroUnits` optimization once clean-css 3.2 is released
@ -308,6 +272,12 @@ module.exports = function (grunt) {
},
exec: {
postcss: {
command: 'npm run postcss'
},
'postcss-docs': {
command: 'npm run postcss-docs'
}
},
buildcontrol: {
@ -403,7 +373,7 @@ module.exports = function (grunt) {
// grunt.registerTask('sass-compile', ['sass:core', 'sass:extras', 'sass:docs']);
grunt.registerTask('sass-compile', ['sass:core', 'sass:docs']);
grunt.registerTask('dist-css', ['sass-compile', 'postcss:core', 'cssmin:core', 'cssmin:docs']);
grunt.registerTask('dist-css', ['sass-compile', 'exec:postcss', 'cssmin:core', 'cssmin:docs']);
// Full distribution task.
grunt.registerTask('dist', ['clean:dist', 'dist-css', 'dist-js']);
@ -412,7 +382,7 @@ module.exports = function (grunt) {
grunt.registerTask('default', ['clean:dist', 'test']);
// Docs task.
grunt.registerTask('docs-css', ['postcss:docs', 'postcss:examples', 'cssmin:docs']);
grunt.registerTask('docs-css', ['cssmin:docs', 'exec:postcss-docs']);
grunt.registerTask('lint-docs-css', ['scsslint:docs']);
grunt.registerTask('docs-js', ['uglify:docsJs']);
grunt.registerTask('docs', ['lint-docs-css', 'docs-css', 'docs-js', 'clean:docs', 'copy:docs']);

2
docs/getting-started/build-tools.md
View File

@ -46,7 +46,7 @@ For example, run `TWBS_SASS=sass grunt` to test and build Bootstrap with Ruby Sa
Bootstrap uses [Autoprefixer][autoprefixer] (included in our Gruntfile and build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.
We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [`/grunt/autoprefixer-settings.json`](https://github.com/twbs/bootstrap/blob/master/grunt/autoprefixer-settings.js) for details.
We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [`/grunt/postcss.js`](https://github.com/twbs/bootstrap/blob/master/grunt/postcss.js) for details.
## Local documentation

31
grunt/autoprefixer-settings.js
View File

@ -1,31 +0,0 @@
module.exports = {
browsers: [
//
// Official browser support policy:
// http://v4-alpha.getbootstrap.com/getting-started/browsers-devices/#supported-browsers
//
'Chrome >= 35', // Exact version number here is kinda arbitrary
// Rather than using Autoprefixer's native "Firefox ESR" version specifier string,
// we deliberately hardcode the number. This is to avoid unwittingly severely breaking the previous ESR in the event that:
// (a) we happen to ship a new Bootstrap release soon after the release of a new ESR,
// such that folks haven't yet had a reasonable amount of time to upgrade; and
// (b) the new ESR has unprefixed CSS properties/values whose absence would severely break webpages
// (e.g. `box-sizing`, as opposed to `background: linear-gradient(...)`).
// Since they've been unprefixed, Autoprefixer will stop prefixing them,
// thus causing them to not work in the previous ESR (where the prefixes were required).
'Firefox >= 38', // Current Firefox Extended Support Release (ESR); https://www.mozilla.org/en-US/firefox/organizations/faq/
// Note: Edge versions in Autoprefixer & Can I Use refer to the EdgeHTML rendering engine version,
// NOT the Edge app version shown in Edge's "About" screen.
// For example, at the time of writing, Edge 20 on an up-to-date system uses EdgeHTML 12.
// See also https://github.com/Fyrd/caniuse/issues/1928
'Edge >= 12',
'Explorer >= 9',
// Out of leniency, we prefix these 1 version further back than the official policy.
'iOS >= 8',
'Safari >= 8',
// The following remain NOT officially supported, but we're lenient and include their prefixes to avoid severely breaking in them.
'Android 2.3',
'Android >= 4',
'Opera >= 12'
]
}

1179
grunt/npm-shrinkwrap.json generated
View File

File diff suppressed because it is too large Load Diff

42
grunt/postcss.js Normal file
View File

@ -0,0 +1,42 @@
module.exports = {
use: [
'postcss-flexbugs-fixes',
'autoprefixer'
],
map: {
inline: false,
annotation: true,
sourcesContent: true
},
autoprefixer: {
browsers: [
//
// Official browser support policy:
// http://v4-alpha.getbootstrap.com/getting-started/browsers-devices/#supported-browsers
//
'Chrome >= 35', // Exact version number here is kinda arbitrary
// Rather than using Autoprefixer's native "Firefox ESR" version specifier string,
// we deliberately hardcode the number. This is to avoid unwittingly severely breaking the previous ESR in the event that:
// (a) we happen to ship a new Bootstrap release soon after the release of a new ESR,
// such that folks haven't yet had a reasonable amount of time to upgrade; and
// (b) the new ESR has unprefixed CSS properties/values whose absence would severely break webpages
// (e.g. `box-sizing`, as opposed to `background: linear-gradient(...)`).
// Since they've been unprefixed, Autoprefixer will stop prefixing them,
// thus causing them to not work in the previous ESR (where the prefixes were required).
'Firefox >= 38', // Current Firefox Extended Support Release (ESR); https://www.mozilla.org/en-US/firefox/organizations/faq/
// Note: Edge versions in Autoprefixer & Can I Use refer to the EdgeHTML rendering engine version,
// NOT the Edge app version shown in Edge's "About" screen.
// For example, at the time of writing, Edge 20 on an up-to-date system uses EdgeHTML 12.
// See also https://github.com/Fyrd/caniuse/issues/1928
'Edge >= 12',
'Explorer >= 9',
// Out of leniency, we prefix these 1 version further back than the official policy.
'iOS >= 8',
'Safari >= 8',
// The following remain NOT officially supported, but we're lenient and include their prefixes to avoid severely breaking in them.
'Android 2.3',
'Android >= 4',
'Opera >= 12'
]
}
}

9
package.json
View File

@ -13,12 +13,16 @@
],
"homepage": "http://getbootstrap.com",
"author": "The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)",
"contributors": ["Twitter, Inc."],
"contributors": [
"Twitter, Inc."
],
"scripts": {
"change-version": "node grunt/change-version.js",
"shrinkwrap": "npm shrinkwrap --dev && mv ./npm-shrinkwrap.json ./grunt/npm-shrinkwrap.json",
"eslint": "eslint --config js/.eslintrc.json js/src",
"jscs": "jscs --config=js/.jscsrc js/src js/tests/unit docs/assets/js/src docs/assets/js/ie*.js grunt Gruntfile.js",
"postcss": "postcss --config grunt/postcss.js --replace dist/css/*.css",
"postcss-docs": "postcss --config grunt/postcss.js --no-map --replace docs/assets/css/docs.min.css && postcss --config grunt/postcss.js --no-map --replace docs/examples/**/*.css",
"test": "npm run eslint && npm run jscs && grunt test"
},
"style": "dist/css/bootstrap.css",
@ -56,7 +60,6 @@
"grunt-exec": "^0.4.6",
"grunt-html": "^7.0.0",
"grunt-jekyll": "^0.4.2",
"grunt-postcss": "^0.8.0",
"grunt-sass": "^1.0.0",
"grunt-saucelabs": "^8.6.1",
"grunt-scss-lint": "^0.3.8",
@ -64,7 +67,7 @@
"is-travis": "^1.0.0",
"jscs": "^3.0.4",
"load-grunt-tasks": "^3.4.0",
"mq4-hover-shim": "^0.3.0",
"postcss-cli": "^2.5.2",
"postcss-flexbugs-fixes": "^2.0.0",
"shelljs": "^0.7.0",
"time-grunt": "^1.2.1"

19
scss/mixins/_hover.scss
View File

@ -1,14 +1,15 @@
@mixin hover {
@if $enable-hover-media-query {
// See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover
// Currently shimmed by https://github.com/twbs/mq4-hover-shim
@media (hover: hover) {
&:hover { @content }
}
}
@else {
// TODO: re-enable along with mq4-hover-shim
// @if $enable-hover-media-query {
// // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover
// // Currently shimmed by https://github.com/twbs/mq4-hover-shim
// @media (hover: hover) {
// &:hover { @content }
// }
// }
// @else {
&:hover { @content }
}
// }
}
@mixin hover-focus {