diff --git a/README.md b/README.md index c2a9bf0..d35a96d 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ # Aphrodite: Inline Styles that work -[![npm version](https://badge.fury.io/js/aphrodite.svg)](https://badge.fury.io/js/aphrodite) -[![Build Status](https://travis-ci.org/Khan/aphrodite.svg?branch=master)](https://travis-ci.org/Khan/aphrodite) -[![Coverage Status](https://coveralls.io/repos/github/Khan/aphrodite/badge.svg?branch=master)](https://coveralls.io/github/Khan/aphrodite?branch=master) +[![npm version](https://badge.fury.io/js/aphrodite.svg)](https://badge.fury.io/js/aphrodite) +[![Build Status](https://travis-ci.org/Khan/aphrodite.svg?branch=master)](https://travis-ci.org/Khan/aphrodite) +[![Coverage Status](https://coveralls.io/repos/github/Khan/aphrodite/badge.svg?branch=master)](https://coveralls.io/github/Khan/aphrodite?branch=master) [![Gitter chat](https://img.shields.io/gitter/room/Khan/aphrodite.svg)](https://gitter.im/Khan/aphrodite) [![gzip size][gzip-badge]][unpkg-dist] @@ -185,6 +185,23 @@ to avoid this behaviour, then instead of importing `aphrodite`, import import { StyleSheet, css } from 'aphrodite/no-important'; ``` +## Minifying style names + +By default, Aphrodite will minify style names down to their hashes in production +(`process.env.NODE_ENV === 'production'`). You can override this behavior by +calling `minify` with `true` or `false` before calling `StyleSheet.create`. + +This is useful if you want to facilitate debugging in production for example. + +```js +import { StyleSheet, minify } from 'aphrodite'; + +// Always keep the full style names +minify(false); + +// ... proceed to use StyleSheet.create etc. +``` + ## Font Faces Creating custom font faces is a special case. Typically you need to define a global `@font-face` rule. In the case of Aphrodite we only want to insert that rule if it's actually being referenced by a class that's in the page. We've made it so that the `fontFamily` property can accept a font-face object (either directly or inside an array). A global `@font-face` rule is then generated based on the font definition. diff --git a/src/exports.js b/src/exports.js index 33d2180..747c42d 100644 --- a/src/exports.js +++ b/src/exports.js @@ -17,13 +17,26 @@ type Extension = { export type MaybeSheetDefinition = SheetDefinition | false | null | void */ +// True to minify classnames. +// False to not minify classnames. +// Unset to minify only in 'production' environment +let forceMinify = undefined; +const shouldMinify = () => { + if (forceMinify !== undefined) { + return forceMinify; + } else { + return process.env.NODE_ENV === 'production'; + } +} + + const StyleSheet = { create(sheetDefinition /* : SheetDefinition */) { return mapObj(sheetDefinition, ([key, val]) => { const stringVal = JSON.stringify(val); return [key, { _len: stringVal.length, - _name: process.env.NODE_ENV === 'production' ? + _name: shouldMinify() ? hashString(stringVal) : `${key}_${hashString(stringVal)}`, _definition: val }]; @@ -131,6 +144,10 @@ const makeExports = ( StyleSheetServer, StyleSheetTestUtils, + minify(shouldMinify /* : boolean */) { + forceMinify = shouldMinify; + }, + css(...styleDefinitions /* : MaybeSheetDefinition[] */) { return injectAndGetClassName( useImportant, styleDefinitions, selectorHandlers); diff --git a/tests/index_test.js b/tests/index_test.js index 4069a0d..941c3a0 100644 --- a/tests/index_test.js +++ b/tests/index_test.js @@ -6,6 +6,7 @@ import { StyleSheet, StyleSheetServer, StyleSheetTestUtils, + minify, css } from '../src/index.js'; import { reset } from '../src/inject.js'; @@ -257,6 +258,76 @@ describe('StyleSheet.create', () => { }) }); +describe('minify', () => { + describe('true', () => { + beforeEach(() => { + minify(true); + }); + + afterEach(() => { + minify(undefined); + }); + + it('minifies style names', () => { + const sheet = StyleSheet.create({ + test: { + color: 'red', + height: 20, + + ':hover': { + color: 'blue', + width: 40, + }, + }, + }); + + assert.equal(sheet.test._name, 'j5rvvh'); + }); + }) + + describe('false', () => { + beforeEach(() => { + minify(false); + }); + + afterEach(() => { + minify(undefined); + }); + + it('does not minifies style names', () => { + const sheet = StyleSheet.create({ + test: { + color: 'red', + height: 20, + + ':hover': { + color: 'blue', + width: 40, + }, + }, + }); + + assert.equal(sheet.test._name, 'test_j5rvvh'); + }); + + it('does not minifies style names, even with process.env.NODE_ENV === \'production\'', () => { + const sheet = StyleSheet.create({ + test: { + color: 'red', + height: 20, + + ':hover': { + color: 'blue', + width: 40, + }, + }, + }); + + assert.equal(sheet.test._name, 'test_j5rvvh'); + }); + }) +}); + describe('rehydrate', () => { beforeEach(() => { global.document = jsdom.jsdom();