PostCSS Focus Within lets you use the :focus-within pseudo-class in CSS,
following the Selectors Level 4 specification.
It is the companion to the focus-within polyfill.
.my-form-field:focus-within label {
background-color: yellow;
}
/* becomes */
.my-form-field[focus-within] label {
background-color: yellow;
}
.my-form-field:focus-within label {
background-color: yellow;
}PostCSS Focus Within duplicates rules using the :focus-within pseudo-class
with a [focus-within] attribute selector, the same selector used by the
focus-within polyfill. This replacement selector can be changed using the
replaceWith option. Also, the preservation of the original :focus-within
rule can be disabled using the preserve option.
Add PostCSS Focus Within to your build tool:
npm install postcss-focus-within --save-devUse PostCSS Focus Within to process your CSS:
import focusWithin from 'postcss-focus-within';
focusWithin.process(YOUR_CSS);Add PostCSS to your build tool:
npm install postcss --save-devUse PostCSS Focus Within as a plugin:
import postcss from 'gulp-postcss';
import focusWithin from 'postcss-focus-within';
postcss([
focusWithin()
]).process(YOUR_CSS);Add PostCSS Loader to your build tool:
npm install postcss-loader --save-devUse PostCSS Focus Within in your Gulpfile:
import focusWithin from 'postcss-focus-within';
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
{ loader: 'postcss-loader', options: {
ident: 'postcss',
plugins: () => [ focusWithin() ]
} }
]
}
]
}
}Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-devUse PostCSS Focus Within in your Gulpfile:
import postcss from 'gulp-postcss';
import focusWithin from 'postcss-focus-within';
gulp.task('css', () => gulp.src('./src/*.css').pipe(
postcss([
focusWithin()
])
).pipe(
gulp.dest('.')
));Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-devUse PostCSS Focus Within in your Gruntfile:
import focusWithin from 'postcss-focus-within';
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
use: [
focusWithin()
]
},
dist: {
src: '*.css'
}
}
});The preserve option defines whether the original selector should remain. By
default, the original selector is preserved.
focusWithin({ preserve: false });.my-form-field:focus-within label {
background-color: yellow;
}
/* becomes */
.my-form-field[focus-within] label {
background-color: yellow;
}The replaceWith option defines the selector to replace :focus-within. By
default, the replacement selector is [focus-within].
focusWithin({ replaceWith: '.focus-within' });.my-form-field:focus-within label {
background-color: yellow;
}
/* becomes */
.my-form-field.focus-within label {
background-color: yellow;
}
.my-form-field:focus-within label {
background-color: yellow;
}