Merge pull request #60 from MailOnline/refactor/use-nano-css

Refactor/use nano css

README.md

@@ -101,19 +101,8 @@ const MyComponent = mock();
      - [`<BrowserOnly>`](./docs/en/BrowserOnly.md), [`<ServerOnly>`](./docs/en/ServerOnly.md), and [`<ElectronOnly>`](./docs/en/ElectronOnly.md)
      - [`<ErrorBoundary>`](./docs/en/ErrorBoundary.md) and [`withErrorBoundary()`](./docs/en/ErrorBoundary.md#witherrorboundary-hoc)
      - `<CacheBoundary>`
-  - [Next](./docs/en/next.md)
+  - [NEXT](./docs/en/next.md)
      - [`createRef()`](./docs/en/next/createRef.md), [`createState()`](./docs/en/next/createState.md), and [`createLifecycleEvents()`](./docs/en/next/createLifecycleEvents.md)
-  - [CSS](./docs/en/CSS.md)
-     - [`rule()`](./docs/en/css/rule.md), [`StyleSheet.create()`](./docs/en/css/StyleSheet.md), [`@css`](./docs/en/css/css.md), [`styled()()`](./docs/en/css/styled.md), and [`jsxstyle()`](./docs/en/css/jsxstyle.md)
-  - [CSS resets](./docs/en/CSS-resets.md)
-     - [`<CssResetEricMeyer>`](./docs/en/reset/CssResetEricMeyer.md) and [`<CssResetEricMeyerCondensed>`](./docs/en/reset/CssResetEricMeyerCondensed.md)
-     - [`<CssResetMinimalistic>`](./docs/en/reset/CssResetMinimalistic.md), [`<CssResetMinimalistic2>`](./docs/en/reset/CssResetMinimalistic2.md), and [`<CssResetMinimalistic3>`](./docs/en/reset/CssResetMinimalistic3.md)
-     - [`<CssResetPoorMan>`](./docs/en/reset/CssResetPoorMan.md)
-     - [`<CssResetShaunInman>`](./docs/en/reset/CssResetShaunInman.md)
-     - [`<CssResetSiolon>`](./docs/en/reset/CssResetSiolon.md)
-     - [`<CssResetTantek>`](./docs/en/reset/CssResetTantek.md)
-     - [`<CssResetUniversal>`](./docs/en/reset/CssResetUniversal.md)
-     - [`<CssResetYahoo>`](./docs/en/reset/CssResetYahoo.md)
   - Other
      - [`<Resolve>`](./docs/en/Resolve.md), `<Fetch>`
      - [`getDisplayName()`](./docs/en/getDisplayName.md)

docs/en/README.md

@@ -70,19 +70,8 @@
      - [`<BrowserOnly>`](./BrowserOnly.md), [`<ServerOnly>`](./ServerOnly.md), and [`<ElectronOnly>`](./ElectronOnly.md)
      - [`<ErrorBoundary>`](./ErrorBoundary.md) and [`withErrorBoundary()`](./ErrorBoundary.md#witherrorboundary-hoc)
      - `<CacheBoundary>`
-  - [Next](./next.md)
+  - [NEXT](./next.md)
      - [`createRef()`](./next/createRef.md), [`createState()`](./next/createState.md), and [`createLifecycleEvents()`](./next/createLifecycleEvents.md)
-  - [CSS](./CSS.md)
-     - [`rule()`](./css/rule.md), [`StyleSheet.create()`](./css/StyleSheet.md), [`@css`](./css/css.md), [`styled()()`](./css/styled.md), and [`jsxstyle()`](./css/jsxstyle.md)
-  - [CSS resets](./CSS-resets.md)
-     - [`<CssResetEricMeyer>`](./reset/CssResetEricMeyer.md) and [`<CssResetEricMeyerCondensed>`](./reset/CssResetEricMeyerCondensed.md)
-     - [`<CssResetMinimalistic>`](./reset/CssResetMinimalistic.md), [`<CssResetMinimalistic2>`](./reset/CssResetMinimalistic2.md), and [`<CssResetMinimalistic3>`](./reset/CssResetMinimalistic3.md)
-     - [`<CssResetPoorMan>`](./reset/CssResetPoorMan.md)
-     - [`<CssResetShaunInman>`](./reset/CssResetShaunInman.md)
-     - [`<CssResetSiolon>`](./reset/CssResetSiolon.md)
-     - [`<CssResetTantek>`](./reset/CssResetTantek.md)
-     - [`<CssResetUniversal>`](./reset/CssResetUniversal.md)
-     - [`<CssResetYahoo>`](./reset/CssResetYahoo.md)
   - Other
      - [`<Resolve>`](./Resolve.md), `<Fetch>`
      - [`getDisplayName()`](./getDisplayName.md)

package.json

@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "throttle-debounce": "^1.0.1",
-    "freestyler": "^3",
+    "nano-css": "^1.13.0",
     "screenfull": "^3.3.2",
     "fast-af": "^0.1.0",
     "tslib": "^1.9.0",

src/Ripple/__story__/Button.tsx

@@ -1,7 +1,20 @@
 import {Component, createElement as h} from 'react';
-import {styled} from 'freestyler';
+import {nano} from '../../nano';
+import {addon as addonCache} from 'nano-css/addon/cache';
+import {addon as addonJsx} from 'nano-css/addon/jsx';
+import {addon as addonAtoms} from 'nano-css/addon/atoms';
+import {addon as addonStyle} from 'nano-css/addon/style';
+import {addon as addonStyled} from 'nano-css/addon/styled';
 import {Ripple} from '..';
 
+addonCache(nano);
+addonJsx(nano);
+addonAtoms(nano);
+addonStyle(nano);
+addonStyled(nano);
+
+const {styled} = nano;
+
 export const theme = {
   color1: ['#29EB7F', '#13CE66', '#0F9F4F'],
   color2: ['#85D7FF', '#1FB6FF', '#009EEB'],

src/Ripple/index.ts

@@ -1,21 +1,22 @@
 import {Component, Children, cloneElement} from 'react';
-import {rule} from 'freestyler';
+import {rule, keyframes} from '../nano';
 import {h, noop} from '../util';
 
+const rippleAnimationName = keyframes({
+  to: {
+     transform: 'scale(12)',
+     opacity: 0
+  }
+});
+
 const className = rule({
-  bdrad: '50%',
-  h: '100px',
-  w: '100px',
-  pos: 'absolute',
+  borderRadius: '50%',
+  height: '100px',
+  width: '100px',
+  position: 'absolute',
   transform: 'scale(0)',
-  op: 1,
+  opacity: 1,
   pointerEvents: 'none',
-  '@keyframes libreact-ripple': {
-    '100%': {
-       transform: 'scale(12)',
-       op: 0
-    }
-  }
 });
 
 export interface IRippleProps {
@@ -60,7 +61,7 @@ export class Ripple extends Component<IRippleProps, IRippleState> {
     style.top = (elY - 50) + 'px';
     style.left = (elX - 50) + 'px';
     setTimeout(() => {
-      style.setProperty('animation', `libreact-ripple ${this.props.ms}ms linear`);
+      style.setProperty('animation', `${rippleAnimationName} ${this.props.ms}ms linear`);
     }, 35);
 
     (originalMouseDown || noop)(event);

src/index.ts

@@ -1,5 +1,4 @@
 export * from './util';
-export * from './css';
 
 // Dummies
 export * from './mock';

src/nano.ts

@@ -0,0 +1,18 @@
+import {create} from 'nano-css';
+import {addon as addonRule} from 'nano-css/addon/rule';
+import {addon as addonKeyframes} from 'nano-css/addon/keyframes';
+
+const nano = create({
+  pfx: 'libreact-'
+});
+
+addonRule(nano);
+addonKeyframes(nano);
+
+const {rule, keyframes} = nano;
+
+export {
+  nano,
+  rule,
+  keyframes,
+};