3.0.0

.gitignore

@@ -1,5 +1,10 @@
 node_modules
-index.*.js
+/browser.js*
+/cli.js*
+/index.js*
+/index.mjs*
+/postcss.js*
+/postcss.mjs*
 package-lock.json
 *.log*
 *.result.css

.rollup.js

@@ -1,16 +1,64 @@
 import babel from 'rollup-plugin-babel';
+import { terser } from 'rollup-plugin-terser';
 
-export default {
-	input: 'index.js',
-	output: [
-		{ file: 'index.es.js', format: 'es' },
-		{ file: 'index.cjs.js', format: 'cjs' }
-	],
-	plugins: [
-		babel({
-			presets: [
-				['env', { modules: false, targets: 'not dead' }]
-			]
-		})
+const isBrowser = String(process.env.NODE_ENV).includes('browser');
+const isCLI = String(process.env.NODE_ENV).includes('cli');
+const isPostCSS = String(process.env.NODE_ENV).includes('postcss');
+const targets = isCLI || isPostCSS || !isBrowser ? { node: 6 } : 'last 2 versions, not dead';
+
+const input = `src/${isCLI ? 'cli' : isPostCSS ? 'postcss' : 'browser'}.js`;
+const output = isCLI
+	? { file: 'cli.js', format: 'cjs' }
+: isBrowser
+	? { file: 'browser.js', format: 'cjs' }
+: isPostCSS
+	? [
+	{ file: 'postcss.js', format: 'cjs', sourcemap: true },
+	{ file: 'postcss.mjs', format: 'esm', sourcemap: true }
+] : [
+	{ file: 'index.js', format: 'cjs', sourcemap: true },
+	{ file: 'index.mjs', format: 'esm', sourcemap: true }
+];
+const plugins = [
+	babel({
+		presets: [
+			['@babel/env', { targets }]
+		]
+	})
+].concat(isBrowser
+	? [
+		trimContentForBrowser(),
+		terser()
+	]
+: isCLI
+	? [
+		trimContentForBrowser(),
+		addHashBang()
 	]
-};
+: []);
+
+export default { input, output, plugins };
+
+function addHashBang() {
+	return {
+		name: 'add-hash-bang',
+		renderChunk(code) {
+			const updatedCode = `#!/usr/bin/env node\n\n${code}`;
+
+			return updatedCode;
+		}
+	};
+}
+
+function trimContentForBrowser() {
+	return {
+		name: 'trim-content-for-browser',
+		renderChunk(code) {
+			const updatedCode = code
+				.replace(/'use strict';\n*/, '')
+				.replace(/\n*module\.exports = focusWithin;/, '');
+
+			return updatedCode;
+		}
+	};
+}

.tape.js

@@ -0,0 +1,19 @@
+module.exports = {
+	'focus-within': {
+		'basic': {
+			message: 'supports basic usage'
+		},
+		'basic:replacewith': {
+			message: 'supports { replaceWith: ".focus-within" } usage',
+			options: {
+				replaceWith: '.focus-within'
+			}
+		},
+		'basic:preserve': {
+			message: 'supports { preserve: false } usage',
+			options: {
+				preserve: false
+			}
+		}
+	}
+};

.travis.yml

@@ -3,7 +3,7 @@
 language: node_js
 
 node_js:
-  - 4
+  - 6
 
 install:
   - npm install --ignore-scripts

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changes to Focus Within
 
+### 3.0.0 (November 14, 2018)
+
+- Rewrite the source for optimal browser size
+- Publish a browser-ready version
+
 ### 2.0.0 (June 4, 2018)
 
 - Default polyfill to only execute in unsupported browsers

INSTALL-POSTCSS.md

@@ -0,0 +1,170 @@
+# Installing PostCSS
+
+[Focus Within] runs in all Node environments, with special instructions for:
+
+| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) |
+| --- | --- | --- | --- | --- | --- |
+
+## Node
+
+Add [Focus Within] to your project:
+
+```bash
+npm install focus-within --save-dev
+```
+
+Use [Focus Within] to process your CSS:
+
+```js
+const postcssFocusWithin = require('focus-within/postcss');
+
+postcssFocusWithin.process(YOUR_CSS /*, processOptions, pluginOptions */);
+```
+
+Or use it as a [PostCSS] plugin:
+
+```js
+const postcss = require('postcss');
+const postcssFocusWithin = require('focus-within/postcss');
+
+postcss([
+  postcssFocusWithin(/* pluginOptions */)
+]).process(YOUR_CSS /*, processOptions */);
+```
+
+## PostCSS CLI
+
+Add [PostCSS CLI] to your project:
+
+```bash
+npm install postcss-cli --save-dev
+```
+
+Use [Focus Within] in your `postcss.config.js` configuration file:
+
+```js
+const postcssFocusWithin = require('focus-within/postcss');
+
+module.exports = {
+  plugins: [
+    postcssFocusWithin(/* pluginOptions */)
+  ]
+}
+```
+
+## Webpack
+
+Add [PostCSS Loader] to your project:
+
+```bash
+npm install postcss-loader --save-dev
+```
+
+Use [Focus Within] in your Webpack configuration:
+
+```js
+const postcssFocusWithin = require('focus-within/postcss');
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          'style-loader',
+          { loader: 'css-loader', options: { importLoaders: 1 } },
+          { loader: 'postcss-loader', options: {
+            ident: 'postcss',
+            plugins: () => [
+              postcssFocusWithin(/* pluginOptions */)
+            ]
+          } }
+        ]
+      }
+    ]
+  }
+}
+```
+
+## Create React App
+
+Add [React App Rewired] and [React App Rewire PostCSS] to your project:
+
+```bash
+npm install react-app-rewired react-app-rewire-postcss --save-dev
+```
+
+Use [React App Rewire PostCSS] and [Focus Within] in your `config-overrides.js`
+file:
+
+```js
+const reactAppRewirePostcss = require('react-app-rewire-postcss');
+const postcssFocusWithin = require('focus-within/postcss');
+
+module.exports = config => reactAppRewirePostcss(config, {
+  plugins: () => [
+    postcssFocusWithin(/* pluginOptions */)
+  ]
+});
+```
+
+## Gulp
+
+Add [Gulp PostCSS] to your project:
+
+```bash
+npm install gulp-postcss --save-dev
+```
+
+Use [Focus Within] in your Gulpfile:
+
+```js
+const postcss = require('gulp-postcss');
+const postcssFocusWithin = require('focus-within/postcss');
+
+gulp.task('css', () => gulp.src('./src/*.css').pipe(
+  postcss([
+    postcssFocusWithin(/* pluginOptions */)
+  ])
+).pipe(
+  gulp.dest('.')
+));
+```
+
+## Grunt
+
+Add [Grunt PostCSS] to your project:
+
+```bash
+npm install grunt-postcss --save-dev
+```
+
+Use [Focus Within] in your Gruntfile:
+
+```js
+const postcssFocusWithin = require('focus-within/postcss');
+
+grunt.loadNpmTasks('grunt-postcss');
+
+grunt.initConfig({
+  postcss: {
+    options: {
+      use: [
+       postcssFocusWithin(/* pluginOptions */)
+      ]
+    },
+    dist: {
+      src: '*.css'
+    }
+  }
+});
+```
+
+[Focus Within]: https://github.com/jonathantneal/focus-within
+[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
+[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
+[PostCSS]: https://github.com/postcss/postcss
+[PostCSS CLI]: https://github.com/postcss/postcss-cli
+[PostCSS Loader]: https://github.com/postcss/postcss-loader
+[React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss
+[React App Rewired]: https://github.com/timarney/react-app-rewired

README-BROWSER.md

@@ -0,0 +1,70 @@
+# Focus Within for Browsers [<img src="http://jonathantneal.github.io/js-logo.svg" alt="" width="90" height="90" align="right">][Focus Within]
+
+[![NPM Version][npm-img]][npm-url]
+[![Build Status][cli-img]][cli-url]
+[![Support Chat][git-img]][git-url]
+
+[Focus Within] lets you style elements based on whether they are focused or
+contain a focused element, following the [Selectors Level 4] specification.
+
+```css
+.field label {
+  /* style a label */
+}
+
+.field[focus-within] label {
+  /* style a label when its field also contains a focused element */
+}
+```
+
+## Usage
+
+Add [Focus Within] to your build tool:
+
+```bash
+npm install focus-within
+```
+
+Then include and initialize it on your document:
+
+```js
+const focusWithin = require('focus-within');
+
+focusWithin(document);
+```
+
+## Options
+
+[Focus Within] accepts a secondary paramater to configure the attribute or
+class name added to elements matching focused elements or containing focused
+elements.
+
+```js
+focusWithin(document, {
+  attr: false,
+  className: '.focus-within'
+});
+```
+
+Falsey values on either `attr` or `className` will disable setting the
+attribute or class name on elements matching `:focus-within`.
+
+[Focus Within] also accepts a secondary paramater to configure whether the
+polyfill is loaded regardless of support. If `force` is given a truthy value,
+then the polyfill will always execute.
+
+```js
+focusWithin(document, {
+  force: true
+});
+```
+
+[cli-img]: https://img.shields.io/travis/jonathantneal/focus-within/master.svg
+[cli-url]: https://travis-ci.org/jonathantneal/focus-within
+[git-img]: https://img.shields.io/badge/support-chat-blue.svg
+[git-url]: https://gitter.im/postcss/postcss
+[npm-img]: https://img.shields.io/npm/v/focus-within.svg
+[npm-url]: https://www.npmjs.com/package/focus-within
+
+[Focus Within]: https://github.com/jonathantneal/focus-within
+[Selectors Level 4]: https://www.w3.org/TR/selectors-4/#the-focus-within-pseudo