Skip to content

Commit cb146a2

Browse files
Add postcss.config.js config
1 parent 00fde57 commit cb146a2

File tree

2 files changed

+58
-56
lines changed

2 files changed

+58
-56
lines changed

postcss.config.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
const autoprefixer = require('autoprefixer')
2+
const cssnano = require('cssnano')
3+
const oldie = require('oldie')
4+
const pseudoclasses = require('postcss-pseudo-classes')
5+
6+
/**
7+
* PostCSS config
8+
*
9+
* @type {import('postcss-load-config').ConfigFn}
10+
*/
11+
module.exports = ({ env, file }) => {
12+
const plugins = [
13+
autoprefixer({ env })
14+
]
15+
16+
// Minify CSS
17+
if (file.basename.endsWith('.min.css')) {
18+
plugins.push(cssnano())
19+
}
20+
21+
// Auto-generate 'companion' classes for pseudo-selector states - e.g. a
22+
// :hover class you can use to simulate the hover state in the review app
23+
if (file.basename.startsWith('app-')) {
24+
plugins.push(pseudoclasses({
25+
// Work around a bug in pseudo classes plugin that badly transforms
26+
// :not(:whatever) pseudo selectors
27+
blacklist: [
28+
':not(',
29+
':disabled)',
30+
':first-child)',
31+
':last-child)',
32+
':focus)',
33+
':active)',
34+
':hover)'
35+
]
36+
}))
37+
}
38+
39+
// Transpile CSS for Internet Explorer
40+
if (file.basename.includes('-ie8')) {
41+
plugins.push(
42+
oldie({
43+
rgba: { filter: true },
44+
rem: { disable: true },
45+
unmq: { disable: true },
46+
pseudo: { disable: true }
47+
})
48+
)
49+
}
50+
51+
return {
52+
plugins
53+
}
54+
}

tasks/gulp/compile-assets.js

Lines changed: 4 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,13 @@ const gulp = require('gulp')
66
const sass = require('gulp-sass')(require('node-sass'))
77
const plumber = require('gulp-plumber')
88
const postcss = require('gulp-postcss')
9-
const autoprefixer = require('autoprefixer')
109
const rollup = require('gulp-better-rollup')
1110
const gulpif = require('gulp-if')
1211
const uglify = require('gulp-uglify')
1312
const eol = require('gulp-eol')
1413
const glob = require('glob')
1514
const merge = require('merge-stream')
1615
const rename = require('gulp-rename')
17-
const cssnano = require('cssnano')
18-
const postcsspseudoclasses = require('postcss-pseudo-classes')({
19-
// Work around a bug in pseudo classes plugin that badly transforms
20-
// :not(:whatever) pseudo selectors
21-
blacklist: [':not(', ':disabled)', ':first-child)', ':last-child)', ':focus)', ':active)', ':hover)']
22-
})
2316

2417
const configPaths = require('../../config/paths.js')
2518
const { destination, isDist, isPublic } = require('../task-arguments.js')
@@ -52,23 +45,13 @@ function compileStyles () {
5245
return gulp.src(compileStylesheet)
5346
.pipe(plumber(errorHandler))
5447
.pipe(sass())
55-
// minify css add vendor prefixes and normalize to compiled css
56-
.pipe(gulpif(isDist, postcss([
57-
autoprefixer,
58-
cssnano
59-
])))
60-
.pipe(gulpif(!isDist, postcss([
61-
autoprefixer,
62-
// Auto-generate 'companion' classes for pseudo-selector states - e.g. a
63-
// :hover class you can use to simulate the hover state in the review app
64-
postcsspseudoclasses
65-
])))
6648
.pipe(gulpif(isDist,
6749
rename({
6850
basename: 'govuk-frontend',
6951
extname: '.min.css'
7052
})
7153
))
54+
.pipe(postcss())
7255
.pipe(gulp.dest(`${destination}/`))
7356
}
7457

@@ -78,34 +61,13 @@ function compileOldIE () {
7861
return gulp.src(compileOldIeStylesheet)
7962
.pipe(plumber(errorHandler))
8063
.pipe(sass())
81-
// minify css add vendor prefixes and normalize to compiled css
82-
.pipe(gulpif(isDist, postcss([
83-
autoprefixer,
84-
cssnano,
85-
// transpile css for ie https://github.com/jonathantneal/oldie
86-
require('oldie')({
87-
rgba: { filter: true },
88-
rem: { disable: true },
89-
unmq: { disable: true },
90-
pseudo: { disable: true }
91-
})
92-
])))
93-
.pipe(gulpif(!isDist, postcss([
94-
autoprefixer,
95-
require('oldie')({
96-
rgba: { filter: true },
97-
rem: { disable: true },
98-
unmq: { disable: true },
99-
pseudo: { disable: true }
100-
// more rules go here
101-
})
102-
])))
10364
.pipe(gulpif(isDist,
10465
rename({
10566
basename: 'govuk-frontend-ie8',
10667
extname: '.min.css'
10768
})
10869
))
70+
.pipe(postcss())
10971
.pipe(gulp.dest(`${destination}/`))
11072
}
11173

@@ -115,12 +77,7 @@ function compileLegacy () {
11577
.pipe(sass({
11678
includePaths: ['node_modules/govuk_frontend_toolkit/stylesheets', 'node_modules']
11779
}))
118-
.pipe(postcss([
119-
autoprefixer,
120-
// Auto-generate 'companion' classes for pseudo-selector states - e.g. a
121-
// :hover class you can use to simulate the hover state in the review app
122-
postcsspseudoclasses
123-
]))
80+
.pipe(postcss())
12481
.pipe(gulp.dest(`${destination}/`))
12582
}
12683

@@ -130,16 +87,7 @@ function compileLegacyIE () {
13087
.pipe(sass({
13188
includePaths: ['node_modules/govuk_frontend_toolkit/stylesheets', 'node_modules']
13289
}))
133-
.pipe(postcss([
134-
autoprefixer,
135-
postcsspseudoclasses,
136-
require('oldie')({
137-
rgba: { filter: true },
138-
rem: { disable: true },
139-
unmq: { disable: true },
140-
pseudo: { disable: true }
141-
})
142-
]))
90+
.pipe(postcss())
14391
.pipe(gulp.dest(`${destination}/`))
14492
}
14593

0 commit comments

Comments
 (0)