├── .gitignore
├── .travis.yml
├── CONTRIBUTING.md
├── README.md
├── cattous.svg
├── demo
└── src
│ └── index.js
├── nwb.config.js
├── package.json
├── src
├── index.js
├── normalize
│ └── normalize.js
├── normalizeOpenType
│ └── normalizeOpenType.js
└── pesticide
│ └── pesticide.js
├── tests
├── .eslintrc
└── index-test.js
├── yarn-error.log
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | /coverage
2 | /demo/dist
3 | /es
4 | /lib
5 | /node_modules
6 | /umd
7 | npm-debug.log*
8 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | sudo: false
2 |
3 | language: node_js
4 | node_js:
5 | - 8
6 |
7 | before_install:
8 | - npm install codecov.io coveralls
9 |
10 | after_success:
11 | - cat ./coverage/lcov.info | ./node_modules/codecov.io/bin/codecov.io.js
12 | - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
13 |
14 | branches:
15 | only:
16 | - master
17 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | ## Prerequisites
2 |
3 | [Node.js](http://nodejs.org/) >= 6 must be installed.
4 |
5 | ## Installation
6 |
7 | - Running `npm install` in the component's root directory will install everything you need for development.
8 |
9 | ## Demo Development Server
10 |
11 | - `npm start` will run a development server with the component's demo app at [http://localhost:3000](http://localhost:3000) with hot module reloading.
12 |
13 | ## Running Tests
14 |
15 | - `npm test` will run the tests once.
16 |
17 | - `npm run test:coverage` will run the tests and produce a coverage report in `coverage/`.
18 |
19 | - `npm run test:watch` will run the tests on every change.
20 |
21 | ## Building
22 |
23 | - `npm run build` will build the component for publishing to npm and also bundle the demo app.
24 |
25 | - `npm run clean` will delete built resources.
26 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | Cattous 🐱
4 | Easily define your design system and write your CSS using JSX.
5 |
6 |
7 |
8 | [![Travis][build-badge]][build] [![npm package][npm-badge]][npm] [![Coveralls][coveralls-badge]][coveralls]
9 |
10 |
11 |
12 | ## How?
13 |
14 | 1. Import `ThemeProvider` from `styled-components`.
15 | 2. Import `Div`. (Optionally, you can also import `Normalize`, and `NormalizeOpenType`)
16 | 3. Define your theme or import an existing one, like `cattous-tachyons`.
17 |
18 | And :tada:!
19 |
20 | ```JS
21 | import { ThemeProvider } from "styled-components"
22 | import Div, { Normalize, NormalizeOpenType } from "cattous"
23 | import cattousTachyons from "cattous-tachyons"
24 |
25 | const Layout = () => (
26 |
27 |
28 |
Cattous.
29 |
A CSS in JSX library for lazy developers
30 |
32 | )
33 | ```
34 |
35 | If you would like to add extra styles to `Div`, you can easily use styled-components for that. `as` is used to change the resulting HTML element.
36 |
37 | ```JS
38 | const StyledDiv = styled(Div)`
39 | // insert your CSS here
40 | `
41 | ```
42 |
43 | Cattous also comes with `Normalize`, `NormalizeOpenType` (by [Kenneth Ormandy](https://github.com/kennethormandy/normalize-opentype.css)), and `Pesticide` for debugging CSS (by [Pesticide](http://pesticide.io/)).
44 |
45 | ## Why?
46 |
47 | I recently became fond of styled-components and I couldn't go back to using a CSS file in my projects. However, and especially for small projects, styled-components slows me down because I have to declare a new variable for every HTML element that I want to style.
48 |
49 | Rebass and styled-system offered what I wanted, but they were still missing a bunch of CSS properties.
50 |
51 | Thus, I made Cattous 🐱 to help me get done with styling my side projects as fast as possible. It uses styled-system API and adds all missing CSS properties along with some styling (`cattous-tachyons`).
52 |
53 | ## What's still missing?
54 |
55 | The project is still under development, although it can be used without any problems.
56 |
57 | I am still **improving the source code**, **adding more options for theming**, and **importing known CSS libraries** such as Tachyons (✔), Bootstrap, and TailwindCSS.
58 |
59 | ## Questions? Suggestions?
60 |
61 | You can find me on Twitter [@Imed_Adel](https://twitter.com/Imed_Adel) or on [Linkedin](https://www.linkedin.com/in/imedadel/).
62 |
63 | [build-badge]: https://img.shields.io/travis/ImedAdel/cattous/master.png?style=flat-square
64 | [build]: https://travis-ci.org/ImedAdel/cattous
65 | [npm-badge]: https://img.shields.io/npm/v/cattous.png?style=flat-square
66 | [npm]: https://www.npmjs.org/package/cattous
67 | [coveralls-badge]: https://img.shields.io/coveralls/ImedAdel/cattous/master.png?style=flat-square
68 | [coveralls]: https://coveralls.io/github/ImedAdel/cattous
69 |
--------------------------------------------------------------------------------
/cattous.svg:
--------------------------------------------------------------------------------
1 |
2 |
7 |
--------------------------------------------------------------------------------
/demo/src/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { render } from "react-dom";
3 | import {ThemeProvider} from "styled-components"
4 |
5 | import Div, {
6 | Normalize,
7 | NormalizeOpenType
8 | } from "../../src";
9 |
10 | const bootstrap = {
11 | space: [0, "0.25rem", "0.5rem", "1rem", "1.5rem", "3rem"],
12 | fontSizes: [
13 | "1rem",
14 | "1.25rem",
15 | "1.5rem",
16 | "1.75rem",
17 | "2rem",
18 | "2.5rem",
19 | "3rem",
20 | "3.5rem",
21 | "4rem",
22 | "4.5rem",
23 | "5rem",
24 | "5.5rem",
25 | "6rem"
26 | ],
27 | hover: {
28 | dim: {
29 | opacity: "1",
30 | transition: "opacity .15s ease-in",
31 | "&:hover,&:focus": {
32 | opacity: "0.5",
33 | transition: "opacity .15s ease-in"
34 | },
35 | "&:active": {
36 | opacity: "0.8",
37 | transition: "opacity .15s ease-in"
38 | }
39 | }
40 | }
41 | };
42 |
43 | const Demo = () => (
44 |
45 |
46 |
47 |
48 |
60 | Hello World. Cattous.
61 |
62 |
64 | );
65 |
66 | render( (https://imedadel.me)",
35 | "homepage": "https://github.com/ImedAdel/cattous",
36 | "license": "MIT",
37 | "repository": "https://github.com/ImedAdel/cattous",
38 | "keywords": [
39 | "react-component",
40 | "styled-components",
41 | "styled-system",
42 | "css-in-js",
43 | "css-in-jsx",
44 | "cattous"
45 | ]
46 | }
47 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled, { createGlobalStyle } from "styled-components";
3 | import {
4 | style,
5 | space,
6 | color,
7 | display,
8 | minWidth,
9 | minHeight,
10 | maxWidth,
11 | maxHeight,
12 | width,
13 | height,
14 | flex,
15 | order,
16 | flexWrap,
17 | flexDirection,
18 | flexBasis,
19 | alignItems,
20 | alignContent,
21 | alignSelf,
22 | justifyItems,
23 | justifyContent,
24 | justifySelf,
25 | gridGap,
26 | gridColumnGap,
27 | gridRowGap,
28 | gridColumn,
29 | gridRow,
30 | gridAutoFlow,
31 | gridAutoColumns,
32 | gridAutoRows,
33 | gridTemplateColumns,
34 | gridTemplateRows,
35 | gridTemplateAreas,
36 | gridArea,
37 | fontSize,
38 | fontFamily,
39 | fontWeight,
40 | fontStyle,
41 | textAlign,
42 | lineHeight,
43 | letterSpacing,
44 | border,
45 | borders,
46 | borderTop,
47 | borderRight,
48 | borderBottom,
49 | borderLeft,
50 | borderColor,
51 | borderRadius,
52 | borderStyle,
53 | borderWidth,
54 | buttonStyle,
55 | boxShadow,
56 | background,
57 | backgroundImage,
58 | backgroundSize,
59 | backgroundPosition,
60 | backgroundRepeat,
61 | opacity,
62 | overflow,
63 | position,
64 | top,
65 | right,
66 | bottom,
67 | left,
68 | zIndex,
69 | textStyle,
70 | colorStyle,
71 | size,
72 | verticalAlign,
73 | variant
74 | } from "styled-system";
75 | import { normalize } from "./normalize/normalize";
76 | import { normalizeOpenType } from "./normalizeOpenType/normalizeOpenType";
77 | import { pesticide } from "./pesticide/pesticide";
78 |
79 | const themed = key => props => props.theme[key];
80 |
81 | const all = style({
82 | prop: "all",
83 | cssProperty: "all"
84 | });
85 | const animation = style({
86 | prop: "animation",
87 | cssProperty: "animation"
88 | });
89 | const animationDelay = style({
90 | prop: "animationDelay",
91 | cssProperty: "animationDelay"
92 | });
93 | const animationDirection = style({
94 | prop: "animationDirection",
95 | cssProperty: "animationDirection"
96 | });
97 | const animationDuration = style({
98 | prop: "animationDuration",
99 | cssProperty: "animationDuration"
100 | });
101 | const animationFillMode = style({
102 | prop: "animationFillMode",
103 | cssProperty: "animationFillMode"
104 | });
105 | const animationIterationCount = style({
106 | prop: "animationIterationCount",
107 | cssProperty: "animationIterationCount"
108 | });
109 | const animationName = style({
110 | prop: "animationName",
111 | cssProperty: "animationName"
112 | });
113 | const animationPlayState = style({
114 | prop: "animationPlayState",
115 | cssProperty: "animationPlayState"
116 | });
117 | const animationTimingFunction = style({
118 | prop: "animationTimingFunction",
119 | cssProperty: "animationTimingFunction"
120 | });
121 | const backfaceVisibility = style({
122 | prop: "backfaceVisibility",
123 | cssProperty: "backfaceVisibility"
124 | });
125 | const backgroundAttachment = style({
126 | prop: "backgroundAttachment",
127 | cssProperty: "backgroundAttachment"
128 | });
129 | const backgroundBlendMode = style({
130 | prop: "backgroundBlendMode",
131 | cssProperty: "backgroundBlendMode"
132 | });
133 | const backgroundClip = style({
134 | prop: "backgroundClip",
135 | cssProperty: "backgroundClip"
136 | });
137 | const backgroundOrigin = style({
138 | prop: "backgroundOrigin",
139 | cssProperty: "backgroundOrigin"
140 | });
141 | const borderBottomColor = style({
142 | prop: "borderBottomColor",
143 | cssProperty: "borderBottomColor",
144 | key: "colors"
145 | });
146 | const borderBottomLeftRadius = style({
147 | prop: "borderBottomLeftRadius",
148 | cssProperty: "borderBottomLeftRadius",
149 | key: "radii"
150 | });
151 | const borderBottomRightRadius = style({
152 | prop: "borderBottomRightRadius",
153 | cssProperty: "borderBottomRightRadius",
154 | key: "radii"
155 | });
156 | const borderBottomStyle = style({
157 | prop: "borderBottomStyle",
158 | cssProperty: "borderBottomStyle"
159 | });
160 | const borderBottomWidth = style({
161 | prop: "borderBottomWidth",
162 | cssProperty: "borderBottomWidth",
163 | key: "borderWidths"
164 | });
165 | const borderCollapse = style({
166 | prop: "borderCollapse",
167 | cssProperty: "borderCollapse"
168 | });
169 | const borderImage = style({
170 | prop: "borderImage",
171 | cssProperty: "borderImage"
172 | });
173 | const borderImageOutset = style({
174 | prop: "borderImageOutset",
175 | cssProperty: "borderImageOutset"
176 | });
177 | const borderImageRepeat = style({
178 | prop: "borderImageRepeat",
179 | cssProperty: "borderImageRepeat"
180 | });
181 | const borderImageSlice = style({
182 | prop: "borderImageSlice",
183 | cssProperty: "borderImageSlice"
184 | });
185 | const borderImageSource = style({
186 | prop: "borderImageSource",
187 | cssProperty: "borderImageSource"
188 | });
189 | const borderImageWidth = style({
190 | prop: "borderImageWidth",
191 | cssProperty: "borderImageWidth",
192 | key: "borderWidths"
193 | });
194 | const borderLeftColor = style({
195 | prop: "borderLeftColor",
196 | cssProperty: "borderLeftColor",
197 | key: "colors"
198 | });
199 | const borderLeftStyle = style({
200 | prop: "borderLeftStyle",
201 | cssProperty: "borderLeftStyle"
202 | });
203 | const borderLeftWidth = style({
204 | prop: "borderLeftWidth",
205 | cssProperty: "borderLeftWidth",
206 | key: "borderWidths"
207 | });
208 | const borderRightColor = style({
209 | prop: "borderRightColor",
210 | cssProperty: "borderRightColor",
211 | key: "colors"
212 | });
213 | const borderRightStyle = style({
214 | prop: "borderRightStyle",
215 | cssProperty: "borderRightStyle"
216 | });
217 | const borderRightWidth = style({
218 | prop: "borderRightWidth",
219 | cssProperty: "borderRightWidth",
220 | key: "borderWidths"
221 | });
222 | const borderSpacing = style({
223 | prop: "borderSpacing",
224 | cssProperty: "borderSpacing"
225 | });
226 | const borderTopColor = style({
227 | prop: "borderTopColor",
228 | cssProperty: "borderTopColor",
229 | key: "colors"
230 | });
231 | const borderTopLeftRadius = style({
232 | prop: "borderTopLeftRadius",
233 | cssProperty: "borderTopLeftRadius",
234 | key: "radii"
235 | });
236 | const borderTopRightRadius = style({
237 | prop: "borderTopRightRadius",
238 | cssProperty: "borderTopRightRadius",
239 | key: "radii"
240 | });
241 | const borderTopStyle = style({
242 | prop: "borderTopStyle",
243 | cssProperty: "borderTopStyle"
244 | });
245 | const borderTopWidth = style({
246 | prop: "borderTopWidth",
247 | cssProperty: "borderTopWidth",
248 | key: "borderWidths"
249 | });
250 | const boxSizing = style({
251 | prop: "boxSizing",
252 | cssProperty: "boxSizing"
253 | });
254 | const captionSide = style({
255 | prop: "captionSide",
256 | cssProperty: "captionSide"
257 | });
258 | const clear = style({
259 | prop: "clear",
260 | cssProperty: "clear"
261 | });
262 | const clip = style({
263 | prop: "clip",
264 | cssProperty: "clip"
265 | });
266 | const columnCount = style({
267 | prop: "columnCount",
268 | cssProperty: "columnCount"
269 | });
270 | const columnFill = style({
271 | prop: "columnFill",
272 | cssProperty: "columnFill"
273 | });
274 | const columnGap = style({
275 | prop: "columnGap",
276 | cssProperty: "columnGap"
277 | });
278 | const columnRule = style({
279 | prop: "columnRule",
280 | cssProperty: "columnRule"
281 | });
282 | const columnRuleColor = style({
283 | prop: "columnRuleColor",
284 | cssProperty: "columnRuleColor",
285 | key: "colors"
286 | });
287 | const columnRuleStyle = style({
288 | prop: "columnRuleStyle",
289 | cssProperty: "columnRuleStyle"
290 | });
291 | const columnRuleWidth = style({
292 | prop: "columnRuleWidth",
293 | cssProperty: "columnRuleWidth"
294 | });
295 | const columnSpan = style({
296 | prop: "columnSpan",
297 | cssProperty: "columnSpan"
298 | });
299 | const columnWidth = style({
300 | prop: "columnWidth",
301 | cssProperty: "columnWidth"
302 | });
303 | const columns = style({
304 | prop: "columns",
305 | cssProperty: "columns"
306 | });
307 | const content = style({
308 | prop: "content",
309 | cssProperty: "content"
310 | });
311 | const counterIncrement = style({
312 | prop: "counterIncrement",
313 | cssProperty: "counterIncrement"
314 | });
315 | const counterReset = style({
316 | prop: "counterReset",
317 | cssProperty: "counterReset"
318 | });
319 | const cursor = style({
320 | prop: "cursor",
321 | cssProperty: "cursor"
322 | });
323 | const direction = style({
324 | prop: "direction",
325 | cssProperty: "direction"
326 | });
327 | const emptyCells = style({
328 | prop: "emptyCells",
329 | cssProperty: "emptyCells"
330 | });
331 | const filter = style({
332 | prop: "filter",
333 | cssProperty: "filter"
334 | });
335 | const flexFlow = style({
336 | prop: "flexFlow",
337 | cssProperty: "flexFlow"
338 | });
339 | const flexGrow = style({
340 | prop: "flexGrow",
341 | cssProperty: "flexGrow"
342 | });
343 | const flexShrink = style({
344 | prop: "flexShrink",
345 | cssProperty: "flexShrink"
346 | });
347 | const float = style({
348 | prop: "float",
349 | cssProperty: "float"
350 | });
351 | const font = style({
352 | prop: "font",
353 | cssProperty: "font"
354 | });
355 | const fontFace = style({
356 | prop: "fontFace",
357 | cssProperty: "@fontFace"
358 | });
359 | const fontSizeAdjust = style({
360 | prop: "fontSizeAdjust",
361 | cssProperty: "fontSizeAdjust"
362 | });
363 | const fontStretch = style({
364 | prop: "fontStretch",
365 | cssProperty: "fontStretch"
366 | });
367 | const fontVariant = style({
368 | prop: "fontVariant",
369 | cssProperty: "fontVariant"
370 | });
371 | const hangingPunctuation = style({
372 | prop: "hangingPunctuation",
373 | cssProperty: "hangingPunctuation"
374 | });
375 | const keyframes = style({
376 | prop: "keyframes",
377 | cssProperty: "@keyframes"
378 | });
379 | const listStyle = style({
380 | prop: "listStyle",
381 | cssProperty: "listStyle"
382 | });
383 | const listStyleImage = style({
384 | prop: "listStyleImage",
385 | cssProperty: "listStyleImage"
386 | });
387 | const listStylePosition = style({
388 | prop: "listStylePosition",
389 | cssProperty: "listStylePosition"
390 | });
391 | const listStyleType = style({
392 | prop: "listStyleType",
393 | cssProperty: "listStyleType"
394 | });
395 | const media = style({
396 | prop: "media",
397 | cssProperty: "@media"
398 | });
399 | const navDown = style({
400 | prop: "navDown",
401 | cssProperty: "navDown"
402 | });
403 | const navIndex = style({
404 | prop: "navIndex",
405 | cssProperty: "navIndex"
406 | });
407 | const navLeft = style({
408 | prop: "navLeft",
409 | cssProperty: "navLeft"
410 | });
411 | const navRight = style({
412 | prop: "navRight",
413 | cssProperty: "navRight"
414 | });
415 | const navUp = style({
416 | prop: "navUp",
417 | cssProperty: "navUp"
418 | });
419 | const outline = style({
420 | prop: "outline",
421 | cssProperty: "outline"
422 | });
423 | const outlineColor = style({
424 | prop: "outlineColor",
425 | cssProperty: "outlineColor",
426 | key: "colors"
427 | });
428 | const outlineOffset = style({
429 | prop: "outlineOffset",
430 | cssProperty: "outlineOffset"
431 | });
432 | const outlineStyle = style({
433 | prop: "outlineStyle",
434 | cssProperty: "outlineStyle"
435 | });
436 | const outlineWidth = style({
437 | prop: "outlineWidth",
438 | cssProperty: "outlineWidth"
439 | });
440 | const overflowX = style({
441 | prop: "overflowX",
442 | cssProperty: "overflowX"
443 | });
444 | const overflowY = style({
445 | prop: "overflowY",
446 | cssProperty: "overflowY"
447 | });
448 | const pageBreakAfter = style({
449 | prop: "pageBreakAfter",
450 | cssProperty: "pageBreakAfter"
451 | });
452 | const pageBreakBefore = style({
453 | prop: "pageBreakBefore",
454 | cssProperty: "pageBreakBefore"
455 | });
456 | const pageBreakInside = style({
457 | prop: "pageBreakInside",
458 | cssProperty: "pageBreakInside"
459 | });
460 | const perspective = style({
461 | prop: "perspective",
462 | cssProperty: "perspective"
463 | });
464 | const perspectiveOrigin = style({
465 | prop: "perspectiveOrigin",
466 | cssProperty: "perspectiveOrigin"
467 | });
468 | const quotes = style({
469 | prop: "quotes",
470 | cssProperty: "quotes"
471 | });
472 | const resize = style({
473 | prop: "resize",
474 | cssProperty: "resize"
475 | });
476 | const tabSize = style({
477 | prop: "tabSize",
478 | cssProperty: "tabSize"
479 | });
480 | const tableLayout = style({
481 | prop: "tableLayout",
482 | cssProperty: "tableLayout"
483 | });
484 | const textAlignLast = style({
485 | prop: "textAlignLast",
486 | cssProperty: "textAlignLast"
487 | });
488 | const textDecoration = style({
489 | prop: "textDecoration",
490 | cssProperty: "textDecoration"
491 | });
492 | const textDecorationColor = style({
493 | prop: "textDecorationColor",
494 | cssProperty: "textDecorationColor",
495 | key: "colors"
496 | });
497 | const textDecorationLine = style({
498 | prop: "textDecorationLine",
499 | cssProperty: "textDecorationLine"
500 | });
501 | const textDecorationStyle = style({
502 | prop: "textDecorationStyle",
503 | cssProperty: "textDecorationStyle"
504 | });
505 | const textIndent = style({
506 | prop: "textIndent",
507 | cssProperty: "textIndent"
508 | });
509 | const textJustify = style({
510 | prop: "textJustify",
511 | cssProperty: "textJustify"
512 | });
513 | const textOverflow = style({
514 | prop: "textOverflow",
515 | cssProperty: "textOverflow"
516 | });
517 | const textShadow = style({
518 | prop: "textShadow",
519 | cssProperty: "textShadow",
520 | key: "shadows"
521 | });
522 | const textTransform = style({
523 | prop: "textTransform",
524 | cssProperty: "textTransform"
525 | });
526 | const transform = style({
527 | prop: "transform",
528 | cssProperty: "transform"
529 | });
530 | const transformOrigin = style({
531 | prop: "transformOrigin",
532 | cssProperty: "transformOrigin"
533 | });
534 | const transformStyle = style({
535 | prop: "transformStyle",
536 | cssProperty: "transformStyle"
537 | });
538 | const transition = style({
539 | prop: "transition",
540 | cssProperty: "transition"
541 | });
542 | const transitionDelay = style({
543 | prop: "transitionDelay",
544 | cssProperty: "transitionDelay"
545 | });
546 | const transitionDuration = style({
547 | prop: "transitionDuration",
548 | cssProperty: "transitionDuration"
549 | });
550 | const transitionProperty = style({
551 | prop: "transitionProperty",
552 | cssProperty: "transitionProperty"
553 | });
554 | const transitionTimingFunction = style({
555 | prop: "transitionTimingFunction",
556 | cssProperty: "transitionTimingFunction"
557 | });
558 | const unicodeBidi = style({
559 | prop: "unicodeBidi",
560 | cssProperty: "unicodeBidi"
561 | });
562 | const visibility = style({
563 | prop: "visibility",
564 | cssProperty: "visibility"
565 | });
566 | const whiteSpace = style({
567 | prop: "whiteSpace",
568 | cssProperty: "whiteSpace"
569 | });
570 | const wordBreak = style({
571 | prop: "wordBreak",
572 | cssProperty: "wordBreak"
573 | });
574 | const wordSpacing = style({
575 | prop: "wordSpacing",
576 | cssProperty: "wordSpacing"
577 | });
578 | const wordWrap = style({
579 | prop: "wordWrap",
580 | cssProperty: "wordWrap"
581 | });
582 |
583 | const hoverState = variant({
584 | prop: "hover",
585 | key: "hover"
586 | });
587 | const debugState = variant({
588 | prop: "debug",
589 | key: "debug"
590 | });
591 |
592 | const Div = styled("div")(
593 | alignContent,
594 | alignItems,
595 | alignSelf,
596 | all,
597 | animation,
598 | animationDelay,
599 | animationDirection,
600 | animationDuration,
601 | animationFillMode,
602 | animationIterationCount,
603 | animationName,
604 | animationPlayState,
605 | animationTimingFunction,
606 | backfaceVisibility,
607 | background,
608 | backgroundAttachment,
609 | backgroundBlendMode,
610 | backgroundClip,
611 | backgroundImage,
612 | backgroundOrigin,
613 | backgroundPosition,
614 | backgroundRepeat,
615 | backgroundSize,
616 | border,
617 | borders,
618 | borderBottom,
619 | borderBottomColor,
620 | borderBottomLeftRadius,
621 | borderBottomRightRadius,
622 | borderBottomStyle,
623 | borderBottomWidth,
624 | borderCollapse,
625 | borderColor,
626 | borderImage,
627 | borderImageOutset,
628 | borderImageRepeat,
629 | borderImageSlice,
630 | borderImageSource,
631 | borderImageWidth,
632 | borderLeft,
633 | borderLeftColor,
634 | borderLeftStyle,
635 | borderLeftWidth,
636 | borderRadius,
637 | borderRight,
638 | borderRightColor,
639 | borderRightStyle,
640 | borderRightWidth,
641 | borderSpacing,
642 | borderStyle,
643 | borderTop,
644 | borderTopColor,
645 | borderTopLeftRadius,
646 | borderTopRightRadius,
647 | borderTopStyle,
648 | borderTopWidth,
649 | borderWidth,
650 | bottom,
651 | boxShadow,
652 | boxSizing,
653 | captionSide,
654 | clear,
655 | clip,
656 | color,
657 | columnCount,
658 | columnFill,
659 | columnGap,
660 | columnRule,
661 | columnRuleColor,
662 | columnRuleStyle,
663 | columnRuleWidth,
664 | columnSpan,
665 | columnWidth,
666 | columns,
667 | content,
668 | counterIncrement,
669 | counterReset,
670 | cursor,
671 | direction,
672 | display,
673 | emptyCells,
674 | filter,
675 | flex,
676 | flexBasis,
677 | flexDirection,
678 | flexFlow,
679 | flexGrow,
680 | flexShrink,
681 | flexWrap,
682 | float,
683 | font,
684 | fontFace,
685 | fontFamily,
686 | fontSize,
687 | fontSizeAdjust,
688 | fontStretch,
689 | fontStyle,
690 | fontVariant,
691 | fontWeight,
692 | gridGap,
693 | gridColumnGap,
694 | gridRowGap,
695 | gridColumn,
696 | gridRow,
697 | gridAutoFlow,
698 | gridAutoColumns,
699 | gridAutoRows,
700 | gridTemplateColumns,
701 | gridTemplateRows,
702 | gridTemplateAreas,
703 | gridArea,
704 | hangingPunctuation,
705 | height,
706 | justifyContent,
707 | justifyItems,
708 | justifySelf,
709 | keyframes,
710 | left,
711 | letterSpacing,
712 | lineHeight,
713 | listStyle,
714 | listStyleImage,
715 | listStylePosition,
716 | listStyleType,
717 | space,
718 | size,
719 | maxHeight,
720 | maxWidth,
721 | media,
722 | minHeight,
723 | minWidth,
724 | navDown,
725 | navIndex,
726 | navLeft,
727 | navRight,
728 | navUp,
729 | opacity,
730 | order,
731 | outline,
732 | outlineColor,
733 | outlineOffset,
734 | outlineStyle,
735 | outlineWidth,
736 | overflow,
737 | overflowX,
738 | overflowY,
739 | pageBreakAfter,
740 | pageBreakBefore,
741 | pageBreakInside,
742 | perspective,
743 | perspectiveOrigin,
744 | position,
745 | quotes,
746 | resize,
747 | right,
748 | tabSize,
749 | tableLayout,
750 | textAlign,
751 | textAlignLast,
752 | textDecoration,
753 | textDecorationColor,
754 | textDecorationLine,
755 | textDecorationStyle,
756 | textIndent,
757 | textJustify,
758 | textOverflow,
759 | textShadow,
760 | textTransform,
761 | top,
762 | transform,
763 | transformOrigin,
764 | transformStyle,
765 | transition,
766 | transitionDelay,
767 | transitionDuration,
768 | transitionProperty,
769 | transitionTimingFunction,
770 | unicodeBidi,
771 | verticalAlign,
772 | visibility,
773 | whiteSpace,
774 | width,
775 | wordBreak,
776 | wordSpacing,
777 | wordWrap,
778 | zIndex,
779 | textStyle,
780 | colorStyle,
781 | buttonStyle,
782 | hoverState,
783 | debugState,
784 | themed("Div")
785 | );
786 |
787 | export const Normalize = createGlobalStyle`${normalize}`;
788 | export const NormalizeOpenType = createGlobalStyle`${normalizeOpenType}`;
789 | export const Pesticide = createGlobalStyle`${pesticide}`;
790 | export default Div;
791 |
--------------------------------------------------------------------------------
/src/normalize/normalize.js:
--------------------------------------------------------------------------------
1 | import { css } from "styled-components";
2 |
3 | export const normalize = css`
4 | html {
5 | line-height: 1.15;
6 | -webkit-text-size-adjust: 100%;
7 | }
8 | body {
9 | margin: 0;
10 | }
11 | main {
12 | display: block;
13 | }
14 | h1 {
15 | font-size: 2em;
16 | margin: 0.67em 0;
17 | }
18 | hr {
19 | box-sizing: content-box;
20 | height: 0;
21 | overflow: visible;
22 | }
23 | pre {
24 | font-family: monospace, monospace;
25 | font-size: 1em;
26 | }
27 | a {
28 | background-color: transparent;
29 | }
30 | abbr[title] {
31 | border-bottom: none;
32 | text-decoration: underline;
33 | text-decoration: underline dotted;
34 | }
35 | b,
36 | strong {
37 | font-weight: bolder;
38 | }
39 | code,
40 | kbd,
41 | samp {
42 | font-family: monospace, monospace;
43 | font-size: 1em;
44 | }
45 | small {
46 | font-size: 80%;
47 | }
48 | sub,
49 | sup {
50 | font-size: 75%;
51 | line-height: 0;
52 | position: relative;
53 | vertical-align: baseline;
54 | }
55 | sub {
56 | bottom: -0.25em;
57 | }
58 | sup {
59 | top: -0.5em;
60 | }
61 | img {
62 | border-style: none;
63 | }
64 | button,
65 | input,
66 | optgroup,
67 | select,
68 | textarea {
69 | font-family: inherit;
70 | font-size: 100%;
71 | line-height: 1.15;
72 | margin: 0;
73 | }
74 | button,
75 | input {
76 | overflow: visible;
77 | }
78 | button,
79 | select {
80 | text-transform: none;
81 | }
82 | button,
83 | [type="button"],
84 | [type="reset"],
85 | [type="submit"] {
86 | -webkit-appearance: button;
87 | }
88 | button::-moz-focus-inner,
89 | [type="button"]::-moz-focus-inner,
90 | [type="reset"]::-moz-focus-inner,
91 | [type="submit"]::-moz-focus-inner {
92 | border-style: none;
93 | padding: 0;
94 | }
95 | button:-moz-focusring,
96 | [type="button"]:-moz-focusring,
97 | [type="reset"]:-moz-focusring,
98 | [type="submit"]:-moz-focusring {
99 | outline: 1px dotted ButtonText;
100 | }
101 | fieldset {
102 | padding: 0.35em 0.75em 0.625em;
103 | }
104 | legend {
105 | box-sizing: border-box;
106 | color: inherit;
107 | display: table;
108 | max-width: 100%;
109 | padding: 0;
110 | white-space: normal;
111 | }
112 | progress {
113 | vertical-align: baseline;
114 | }
115 | textarea {
116 | overflow: auto;
117 | }
118 | [type="checkbox"],
119 | [type="radio"] {
120 | box-sizing: border-box;
121 | padding: 0;
122 | }
123 | [type="number"]::-webkit-inner-spin-button,
124 | [type="number"]::-webkit-outer-spin-button {
125 | height: auto;
126 | }
127 | [type="search"] {
128 | -webkit-appearance: textfield;
129 | outline-offset: -2px;
130 | }
131 | [type="search"]::-webkit-search-decoration {
132 | -webkit-appearance: none;
133 | }
134 | ::-webkit-file-upload-button {
135 | -webkit-appearance: button;
136 | font: inherit;
137 | }
138 | details {
139 | display: block;
140 | }
141 | summary {
142 | display: list-item;
143 | }
144 | template {
145 | display: none;
146 | }
147 | [hidden] {
148 | display: none;
149 | }
150 | `;
151 |
--------------------------------------------------------------------------------
/src/normalizeOpenType/normalizeOpenType.js:
--------------------------------------------------------------------------------
1 | import { css } from "styled-components";
2 |
3 | export const normalizeOpenType = css`
4 | ::-moz-selection {
5 | color: inherit;
6 | text-shadow: inherit;
7 | background-color: #accef7;
8 | }
9 | ::selection {
10 | color: inherit;
11 | text-shadow: inherit;
12 | background-color: #accef7;
13 | }
14 | html,
15 | body,
16 | table {
17 | -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1,
18 | "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0;
19 | -moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0,
20 | "onum" 1, "lnum" 0, "dlig" 0;
21 | font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0,
22 | "onum" 1, "lnum" 0, "dlig" 0;
23 | }
24 | h1,
25 | h2,
26 | h3 {
27 | -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1,
28 | "tnum" 0, "onum" 1, "lnum" 0, "dlig" 1;
29 | -moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0,
30 | "onum" 1, "lnum" 0, "dlig" 1;
31 | font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0,
32 | "onum" 1, "lnum" 0, "dlig" 1;
33 | }
34 | abbr {
35 | text-transform: uppercase;
36 | -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1,
37 | "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1;
38 | -moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0,
39 | "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1;
40 | font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0,
41 | "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1;
42 | }
43 | time {
44 | -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1,
45 | "tnum" 0, "onum" 1, "lnum" 0;
46 | -moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0,
47 | "onum" 1, "lnum" 0;
48 | font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0,
49 | "onum" 1, "lnum" 0;
50 | }
51 | pre,
52 | kbd,
53 | samp,
54 | code {
55 | -webkit-font-feature-settings: "kern" 0, "liga" 0, "calt" 1, "dlig" 0,
56 | "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "zero" 1;
57 | -moz-font-feature-settings: "kern" 0, "liga" 0, "calt" 1, "dlig" 0, "pnum" 0,
58 | "tnum" 1, "onum" 0, "lnum" 1, "zero" 1;
59 | font-feature-settings: "kern" 0, "liga" 0, "calt" 1, "dlig" 0, "pnum" 0,
60 | "tnum" 1, "onum" 0, "lnum" 1, "zero" 1;
61 | }
62 | sup {
63 | -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1,
64 | "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "sups" 1;
65 | -moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0,
66 | "onum" 1, "lnum" 0, "dlig" 0, "sups" 1;
67 | font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0,
68 | "onum" 1, "lnum" 0, "dlig" 0, "sups" 1;
69 | }
70 | sub {
71 | -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1,
72 | "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "subs" 1;
73 | -moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0,
74 | "onum" 1, "lnum" 0, "dlig" 0, "subs" 1;
75 | font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0,
76 | "onum" 1, "lnum" 0, "dlig" 0, "subs" 1;
77 | }
78 | input[type="color"],
79 | input[type="date"],
80 | input[type="datetime"],
81 | input[type="datetime-local"],
82 | input[type="number"],
83 | input[type="range"],
84 | input[type="tel"],
85 | input[type="week"] {
86 | -webkit-font-feature-settings: "kern" 0, "liga" 1, "calt" 1, "pnum" 1,
87 | "tnum" 0, "onum" 0, "lnum" 1, "zero" 0;
88 | -moz-font-feature-settings: "kern" 0, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0,
89 | "onum" 0, "lnum" 1, "zero" 0;
90 | font-feature-settings: "kern" 0, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0,
91 | "onum" 0, "lnum" 1, "zero" 0;
92 | }
93 | tbody,
94 | caption {
95 | -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 0,
96 | "tnum" 1, "onum" 0, "lnum" 1, "zero" 1;
97 | -moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 0, "tnum" 1,
98 | "onum" 0, "lnum" 1, "zero" 1;
99 | font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 0, "tnum" 1,
100 | "onum" 0, "lnum" 1, "zero" 1;
101 | }
102 | `;
103 |
--------------------------------------------------------------------------------
/src/pesticide/pesticide.js:
--------------------------------------------------------------------------------
1 | import { css } from "styled-components";
2 |
3 | export const pesticide = css`
4 | body {
5 | outline: 1px solid #2980b9 !important;
6 | }
7 | article {
8 | outline: 1px solid #3498db !important;
9 | }
10 | nav {
11 | outline: 1px solid #0088c3 !important;
12 | }
13 | aside {
14 | outline: 1px solid #33a0ce !important;
15 | }
16 | section {
17 | outline: 1px solid #66b8da !important;
18 | }
19 | header {
20 | outline: 1px solid #99cfe7 !important;
21 | }
22 | footer {
23 | outline: 1px solid #cce7f3 !important;
24 | }
25 | h1 {
26 | outline: 1px solid #162544 !important;
27 | }
28 | h2 {
29 | outline: 1px solid #314e6e !important;
30 | }
31 | h3 {
32 | outline: 1px solid #3e5e85 !important;
33 | }
34 | h4 {
35 | outline: 1px solid #449baf !important;
36 | }
37 | h5 {
38 | outline: 1px solid #c7d1cb !important;
39 | }
40 | h6 {
41 | outline: 1px solid #4371d0 !important;
42 | }
43 | main {
44 | outline: 1px solid #2f4f90 !important;
45 | }
46 | address {
47 | outline: 1px solid #1a2c51 !important;
48 | }
49 | div {
50 | outline: 1px solid #036cdb !important;
51 | }
52 |
53 | p {
54 | outline: 1px solid #ac050b !important;
55 | }
56 | hr {
57 | outline: 1px solid #ff063f !important;
58 | }
59 | pre {
60 | outline: 1px solid #850440 !important;
61 | }
62 | blockquote {
63 | outline: 1px solid #f1b8e7 !important;
64 | }
65 | ol {
66 | outline: 1px solid #ff050c !important;
67 | }
68 | ul {
69 | outline: 1px solid #d90416 !important;
70 | }
71 | li {
72 | outline: 1px solid #d90416 !important;
73 | }
74 | dl {
75 | outline: 1px solid #fd3427 !important;
76 | }
77 | dt {
78 | outline: 1px solid #ff0043 !important;
79 | }
80 | dd {
81 | outline: 1px solid #e80174 !important;
82 | }
83 | figure {
84 | outline: 1px solid #ff00bb !important;
85 | }
86 | figcaption {
87 | outline: 1px solid #bf0032 !important;
88 | }
89 |
90 | table {
91 | outline: 1px solid #00cc99 !important;
92 | }
93 | caption {
94 | outline: 1px solid #37ffc4 !important;
95 | }
96 | thead {
97 | outline: 1px solid #98daca !important;
98 | }
99 | tbody {
100 | outline: 1px solid #64a7a0 !important;
101 | }
102 | tfoot {
103 | outline: 1px solid #22746b !important;
104 | }
105 | tr {
106 | outline: 1px solid #86c0b2 !important;
107 | }
108 | th {
109 | outline: 1px solid #a1e7d6 !important;
110 | }
111 | td {
112 | outline: 1px solid #3f5a54 !important;
113 | }
114 | col {
115 | outline: 1px solid #6c9a8f !important;
116 | }
117 | colgroup {
118 | outline: 1px solid #6c9a9d !important;
119 | }
120 |
121 | button {
122 | outline: 1px solid #da8301 !important;
123 | }
124 | datalist {
125 | outline: 1px solid #c06000 !important;
126 | }
127 | fieldset {
128 | outline: 1px solid #d95100 !important;
129 | }
130 | form {
131 | outline: 1px solid #d23600 !important;
132 | }
133 | input {
134 | outline: 1px solid #fca600 !important;
135 | }
136 | keygen {
137 | outline: 1px solid #b31e00 !important;
138 | }
139 | label {
140 | outline: 1px solid #ee8900 !important;
141 | }
142 | legend {
143 | outline: 1px solid #de6d00 !important;
144 | }
145 | meter {
146 | outline: 1px solid #e8630c !important;
147 | }
148 | optgroup {
149 | outline: 1px solid #b33600 !important;
150 | }
151 | option {
152 | outline: 1px solid #ff8a00 !important;
153 | }
154 | output {
155 | outline: 1px solid #ff9619 !important;
156 | }
157 | progress {
158 | outline: 1px solid #e57c00 !important;
159 | }
160 | select {
161 | outline: 1px solid #e26e0f !important;
162 | }
163 | textarea {
164 | outline: 1px solid #cc5400 !important;
165 | }
166 |
167 | details {
168 | outline: 1px solid #33848f !important;
169 | }
170 | summary {
171 | outline: 1px solid #60a1a6 !important;
172 | }
173 | command {
174 | outline: 1px solid #438da1 !important;
175 | }
176 | menu {
177 | outline: 1px solid #449da6 !important;
178 | }
179 |
180 | del {
181 | outline: 1px solid #bf0000 !important;
182 | }
183 | ins {
184 | outline: 1px solid #400000 !important;
185 | }
186 |
187 | img {
188 | outline: 1px solid #22746b !important;
189 | }
190 | iframe {
191 | outline: 1px solid #64a7a0 !important;
192 | }
193 | embed {
194 | outline: 1px solid #98daca !important;
195 | }
196 | object {
197 | outline: 1px solid #00cc99 !important;
198 | }
199 | param {
200 | outline: 1px solid #37ffc4 !important;
201 | }
202 | video {
203 | outline: 1px solid #6ee866 !important;
204 | }
205 | audio {
206 | outline: 1px solid #027353 !important;
207 | }
208 | source {
209 | outline: 1px solid #012426 !important;
210 | }
211 | canvas {
212 | outline: 1px solid #a2f570 !important;
213 | }
214 | track {
215 | outline: 1px solid #59a600 !important;
216 | }
217 | map {
218 | outline: 1px solid #7be500 !important;
219 | }
220 | area {
221 | outline: 1px solid #305900 !important;
222 | }
223 |
224 | a {
225 | outline: 1px solid #ff62ab !important;
226 | }
227 | em {
228 | outline: 1px solid #800b41 !important;
229 | }
230 | strong {
231 | outline: 1px solid #ff1583 !important;
232 | }
233 | i {
234 | outline: 1px solid #803156 !important;
235 | }
236 | b {
237 | outline: 1px solid #cc1169 !important;
238 | }
239 | u {
240 | outline: 1px solid #ff0430 !important;
241 | }
242 | s {
243 | outline: 1px solid #f805e3 !important;
244 | }
245 | small {
246 | outline: 1px solid #d107b2 !important;
247 | }
248 | abbr {
249 | outline: 1px solid #4a0263 !important;
250 | }
251 | q {
252 | outline: 1px solid #240018 !important;
253 | }
254 | cite {
255 | outline: 1px solid #64003c !important;
256 | }
257 | dfn {
258 | outline: 1px solid #b4005a !important;
259 | }
260 | sub {
261 | outline: 1px solid #dba0c8 !important;
262 | }
263 | sup {
264 | outline: 1px solid #cc0256 !important;
265 | }
266 | time {
267 | outline: 1px solid #d6606d !important;
268 | }
269 | code {
270 | outline: 1px solid #e04251 !important;
271 | }
272 | kbd {
273 | outline: 1px solid #5e001f !important;
274 | }
275 | samp {
276 | outline: 1px solid #9c0033 !important;
277 | }
278 | var {
279 | outline: 1px solid #d90047 !important;
280 | }
281 | mark {
282 | outline: 1px solid #ff0053 !important;
283 | }
284 | bdi {
285 | outline: 1px solid #bf3668 !important;
286 | }
287 | bdo {
288 | outline: 1px solid #6f1400 !important;
289 | }
290 | ruby {
291 | outline: 1px solid #ff7b93 !important;
292 | }
293 | rt {
294 | outline: 1px solid #ff2f54 !important;
295 | }
296 | rp {
297 | outline: 1px solid #803e49 !important;
298 | }
299 | span {
300 | outline: 1px solid #cc2643 !important;
301 | }
302 | br {
303 | outline: 1px solid #db687d !important;
304 | }
305 | wbr {
306 | outline: 1px solid #db175b !important;
307 | }
308 | `;
309 |
--------------------------------------------------------------------------------
/tests/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "mocha": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/tests/index-test.js:
--------------------------------------------------------------------------------
1 | import expect from "expect";
2 | import React from "react";
3 | import { renderToStaticMarkup as render } from "react-dom/server";
4 |
5 | import Div from "src";
6 |
7 | describe("Div", () => {
8 | it("renders a div", () => {
9 | expect(render(Hello
)).toContain("Hello");
10 | });
11 | it("renders a p", () => {
12 | expect(render(Hello
)).toContain("Hello");
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
