feat: limit views styles to .views-block css class in react dom to pl…

…ay well with none flex third party components

cli.js

@@ -10,7 +10,7 @@ const {
   as,
   compile,
   help,
-  inlineStyles,
+  isBundlingBaseCss,
   logic,
   pretty,
   watch: shouldWatch,
@@ -23,7 +23,7 @@ const {
   default: {
     as: 'react-dom',
     compile: false,
-    inlineStyles: false,
+    isBundlingBaseCss: false,
     logic: true,
     pretty: true,
     watch: false,
@@ -38,10 +38,9 @@ if (help) {
                       react-native
 
     --compile       if true, produces ES5 JS, defaults to false
-    --inline-styles if true, it will inline styles in react-dom,
-                      otherwise it will produce external .css
-                      files. Use this if you compile the CSS
-                      into its own file. Defaults to false
+    --bundle-base-css if true, it will bundle the base CSS in react-dom,
+                      otherwise you will need to include it in your
+                      build system as a .css file. Defaults to false
     --logic         if true, it includes .view.logic.js files in
                       the output, defaults to true
     --pretty        format output code, defaults to true
@@ -68,6 +67,13 @@ if (shouldWatch) {
     process.exit()
   }
 
+  const updateNotifier = require('update-notifier')
+  const pkg = require('./package.json')
+
+  updateNotifier({ pkg }).notify()
+
+  console.log(`Views Tools morpher v${pkg.version}\n\n`)
+
   console.log(
     `Will morph files at '${chalk.green(input)}' as ${chalk.green(as)}\n`
   )
@@ -82,7 +88,7 @@ if (shouldWatch) {
   watch({
     as,
     compile,
-    inlineStyles,
+    isBundlingBaseCss,
     logic,
     pretty,
     src: input,
@@ -92,7 +98,7 @@ if (shouldWatch) {
     watch({
       as,
       compile,
-      inlineStyles,
+      isBundlingBaseCss,
       logic,
       once: true,
       pretty,
@@ -102,7 +108,6 @@ if (shouldWatch) {
     const { code } = morph(readFileSync(input, 'utf-8'), {
       as,
       compile,
-      inlineStyles,
       file: { raw: input, relative: input },
       name: pathToName(input),
       pretty,

ensure-base-css.js

@@ -0,0 +1,69 @@
+const fs = require('mz/fs')
+
+const CSS = `* {
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+}
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+}
+a.views-block,
+button.views-block,
+div.views-block,
+form.views-block,
+img.views-block,
+input.views-block,
+span.views-block,
+svg.views-block,
+textarea.views-block {
+  align-items: stretch;
+  box-sizing: border-box;
+  color: inherit;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  hyphens: auto;
+  margin: 0;
+  outline: 0;
+  overflow-wrap: break-word;
+  padding: 0;
+  position: relative;
+  text-decoration: none;
+  word-wrap: break-word;
+}
+a.views-block,
+button.views-block,
+input.views-block,
+textarea.views-block {
+  background-color: transparent;
+  border-radius: 0;
+  border: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+  white-space: normal;
+}
+button.views-block::-moz-focus-inner {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+/* remove number arrows */
+input.views-block[type='number']::-webkit-outer-spin-button,
+input.views-block[type='number']::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}`
+
+const BASE_CSS = `import { injectGlobal } from 'react-emotion'
+injectGlobal(\`${CSS}\`)`
+
+module.exports = async file => {
+  await fs.writeFile(file, BASE_CSS, { encoding: 'utf8' })
+}

morph/react-dom/properties-class-name.js

@@ -2,7 +2,7 @@ import { deinterpolate, getProp, isCode, isInterpolation } from '../utils.js'
 import wrap from '../react/wrap.js'
 
 export const enter = (node, parent, state) => {
-  node.className = []
+  node.className = ['views-block']
 
   const className = getProp(node, 'className')
   if (className) {

morph/react/get-dependencies.js

@@ -49,6 +49,8 @@ export default (state, getImport) => {
 
   // TODO native
   if (!state.isReactNative) {
+    dependencies.push(getImport('ViewsBaseCss'))
+
     state.fonts.forEach(usedFont => {
       const font = state.getFont(usedFont)
       if (font) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "views-morph",
-  "version": "0.11.4",
+  "version": "0.11.5",
   "description": "Views language morpher",
   "main": "lib.js",
   "bin": {
@@ -55,7 +55,8 @@
     "prettier": "^1.4.2",
     "svgo": "^1.0.3",
     "to-camel-case": "^1.0.0",
-    "to-pascal-case": "^1.0.0"
+    "to-pascal-case": "^1.0.0",
+    "update-notifier": "^2.3.0"
   },
   "lint-staged": {
     "*.js": [

watch.js

@@ -7,13 +7,14 @@ const {
 const chalk = require('chalk')
 const chokidar = require('chokidar')
 const clean = require('./clean.js')
+const ensureBaseCss = require('./ensure-base-css.js')
 const flatten = require('flatten')
 const fs = require('mz/fs')
 const glob = require('fast-glob')
+const morphInlineSvg = require('./morph/inline-svg.js')
 const path = require('path')
 const toPascalCase = require('to-pascal-case')
 const uniq = require('array-uniq')
-const morphInlineSvg = require('./morph/inline-svg.js')
 
 const FONT_TYPES = {
   '.otf': 'opentype',
@@ -47,12 +48,12 @@ module.exports = options => {
       debug,
       enableAnimated,
       fake: shouldIncludeFake,
-      inlineStyles,
-      map,
+      isBundlingBaseCss,
       logic: shouldIncludeLogic,
-      once,
+      map,
       onMorph,
       onRemove,
+      once,
       pretty,
       src,
       verbose,
@@ -65,12 +66,13 @@ module.exports = options => {
         debug: false,
         enableAnimated: true,
         fake: false,
-        map: {},
+        isBundlingBaseCss: false,
         logic: true,
+        map: {},
+        onMorph: onMorphWriteFile,
+        once: false,
         pretty: true,
         src: process.cwd(),
-        once: false,
-        onMorph: onMorphWriteFile,
         verbose: true,
       },
       options
@@ -175,6 +177,12 @@ module.exports = options => {
       dependsOn[view] = []
 
       return name => {
+        if (name === 'ViewsBaseCss') {
+          return isBundlingBaseCss
+            ? `import '${relativise(file, instance.baseCss)}'`
+            : ''
+        }
+
         if (!dependsOn[view].includes(name)) {
           dependsOn[view].push(name)
         }
@@ -201,6 +209,11 @@ module.exports = options => {
       stop() {},
     }
 
+    if (as === 'react-dom' && isBundlingBaseCss) {
+      instance.baseCss = 'ViewsBaseCss.js'
+      ensureBaseCss(path.join(src, instance.baseCss))
+    }
+
     const addView = filter((f, skipMorph = false) => {
       const { file, view } = toViewPath(f)
 
@@ -348,7 +361,6 @@ height 50`
           compile,
           debug,
           enableAnimated,
-          inlineStyles,
           file: { raw: rawFile, relative: file },
           name: view,
           getFont,
@@ -401,7 +413,6 @@ height 50`
                 compile,
                 debug,
                 enableAnimated,
-                inlineStyles,
                 file: { raw: rawFile, relative: file },
                 name: svg.view,
                 getImport,