Skip to content

Commit 635f43b

Browse files
committed
Add aphrodite-no-important case
Faster and produces smaller (and cleaner IMHO) code.
1 parent d9e4ba8 commit 635f43b

File tree

13 files changed

+83
-4
lines changed

13 files changed

+83
-4
lines changed

README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -176,9 +176,9 @@ Some observations:
176176

177177
For all of them, class name is stable between generations if same content. Unless said otherwise, the generated CSS is minimized.
178178

179-
#### aphrodite
179+
#### aphrodite and aphrodite-no-important
180180

181-
(simple) Removes a non-used class. Generates class names like `original-name_1fm03kj`. Adds `!important` to each CSS property, but this can be deactivated.
181+
(simple) Removes a non-used class. Generates class names like `original-name_1fm03kj`. By default, adds `!important` to each CSS property, *aphrodite-no-important* generates CSS without it.
182182
(style overload) Different classes with a common style are kept as is.
183183
(classes overload) Doesn't detect identical classes that remain duplicate.
184184
(nested) Manages pseudo-classes and media queries.
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { StyleSheet, css as aphroditeCss, StyleSheetServer, StyleSheetTestUtils } from 'aphrodite/no-important';
2+
import { stylesheet, buttonClassNames } from '../styles';
3+
import { renderHtml, renderBody } from '../render';
4+
5+
export const aphroditeNoImportantCase = (caseName) => {
6+
const useStyles = StyleSheet.create(stylesheet);
7+
8+
const getButtonClassName = i => aphroditeCss(useStyles[buttonClassNames[i]]);
9+
10+
const { html, css } = StyleSheetServer.renderStatic(() => {
11+
return renderBody(caseName, aphroditeCss(useStyles.container), getButtonClassName);
12+
});
13+
14+
StyleSheetTestUtils.clearBufferAndResumeStyleInjection();
15+
16+
return renderHtml(css.content, html);
17+
};

src/classes-overload-test/cases/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export * from './aphrodite';
2+
export * from './aphrodite-no-important';
23
export * from './cxs';
34
export * from './cxs-optimized';
45
export * from './fela';
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { StyleSheet, css as aphroditeCss, StyleSheetServer, StyleSheetTestUtils } from 'aphrodite/no-important';
2+
import { createStylesheet } from '../styles';
3+
import { renderHtml, renderBody } from '../render';
4+
5+
export const aphroditeNoImportantCase = (caseName) => {
6+
const useStyles = StyleSheet.create(createStylesheet());
7+
8+
const { html, css } = StyleSheetServer.renderStatic(() =>
9+
renderBody(
10+
caseName,
11+
aphroditeCss(useStyles.container),
12+
aphroditeCss(useStyles.button)
13+
)
14+
);
15+
16+
StyleSheetTestUtils.clearBufferAndResumeStyleInjection();
17+
18+
return renderHtml(css.content, html);
19+
};

src/nested-test/cases/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export * from './aphrodite';
2+
export * from './aphrodite-no-important';
23
export * from './cxs';
34
export * from './cxs-optimized';
45
export * from './fela';
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { StyleSheet, css as aphroditeCss, StyleSheetServer, StyleSheetTestUtils } from 'aphrodite/no-important';
2+
import { stylesheet } from '../styles';
3+
import { renderHtml, renderBody } from '../render';
4+
5+
export const aphroditeNoImportantCase = (caseName) => {
6+
const useStyles = StyleSheet.create(stylesheet);
7+
8+
const { html, css } = StyleSheetServer.renderStatic(() =>
9+
renderBody(
10+
caseName,
11+
aphroditeCss(useStyles.container),
12+
aphroditeCss(useStyles.button)
13+
)
14+
);
15+
16+
StyleSheetTestUtils.clearBufferAndResumeStyleInjection();
17+
18+
return renderHtml(css.content, html);
19+
};

src/simple-test/cases/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export * from './aphrodite';
2+
export * from './aphrodite-no-important';
23
export * from './cxs';
34
export * from './cxs-optimized';
45
export * from './fela';
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import aphrodite from 'aphrodite/no-important';

src/size-test/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ const testBundle = (name) => new Promise((resolve, reject) => {
5656

5757
Promise.all([
5858
testBundle('aphrodite'),
59+
testBundle('aphrodite-no-important'),
5960
testBundle('cxs'),
6061
testBundle('cxs-optimized'),
6162
testBundle('fela'),

src/size-test/jss-without-preset.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
import jss from 'jss';
22
import camelCase from 'jss-camel-case';
3+
import nested from 'jss-nested';

0 commit comments

Comments
 (0)