feat: Added css-blocks.com website package and custom docs theme.

README.md

@@ -77,10 +77,10 @@ CSS Blocks is under active development and there are a number of features that h
 | **Selectors** ||
 | ✅ | `:scope` | Scope selector for component root. |
 | ✅ | `.class` | Class selectors for component sub-elements. |
-| ✅ | `.class[state\|name]` | State that is applied to scope and class selectors on state existence. |
-| ✅ | `.class[state\|name="value"]` | Mutually exclusive sub-states for scope and class selectors to be applied when a sub-state value matches. |
-| ❌ | `[state\|name=value]` | Bare state (not associated with an Originating Element) and optional substate selectors for targeting all elements in the Block that possess the state an/or sub-state. |
-| 🖌 | `.class[state\|name default]` | Default state value to be applied when there is no other match. |
+| ✅ | <code>.class[state&#124;name]</code> | State that is applied to scope and class selectors on state existence. |
+| ✅ | <code>.class[state&#124;name="value"]</code> | Mutually exclusive sub-states for scope and class selectors to be applied when a sub-state value matches. |
+| ❌ | <code>[state&#124;name=value]</code> | Bare state (not associated with an Originating Element) and optional substate selectors for targeting all elements in the Block that possess the state an/or sub-state. |
+| 🖌 | <code>.class[state&#124;name default]</code> | Default state value to be applied when there is no other match. |
 | **At Rules** ||
 | ✅ | `@block-reference local-name from "./file/path.css"` | Reference another Block using a local name. |
 | ✅ | `@block-debug block-name to channel` | Debug call that will print a block interface to a "channel": `comment`, `stderr`, or `stdout`. |
@@ -402,11 +402,11 @@ All the following syntaxes are legal to select any given stylable on a reference
 |Stylable|Syntax|
 |:--|:--|
 |Scope|`block`|
-|Scope State|`block[state\|name]`|
-|Scope Sub-State|`block[state\|name=value]`|
+|Scope State|<code>block[state&#124;name]</code>|
+|Scope Sub-State|<code>block[state&#124;name=value]</code>|
 |Class|`block.class`|
-|Scope State|`block.class[state\|name]`|
-|Scope Sub-State|`block.class[state\|name=value]`|
+|Scope State|<code>block.class[state&#124;name]</code>|
+|Scope Sub-State|<code>block.class[state&#124;name=value]</code>|
 
 > 🔮 **Future Feature: Block Path Wildcards**
 > 
@@ -425,7 +425,7 @@ For Glimmer, using multiple blocks in a single template will look something like
   transition: box-shadow .28s;
 }
 :scope:hover {
-	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2)
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2)
 }
 .button { 
   background-color: rgba(255, 255, 255, .5);
@@ -511,7 +511,7 @@ Here, we tell css-blocks to use the `color` value from `my-class` instead of `ot
 ```css
 .my-class {
   color: resolve("other.selector");
-	color: red;
+  color: red;
 }
 ```
 
@@ -522,7 +522,7 @@ Here, we tell css-blocks to use the `color` value from `other.selector` instead
 
 ```css
 .my-class {
-	color: red;
+  color: red;
   color: resolve("other.selector");
 }
 ```
@@ -533,8 +533,8 @@ Here, we tell css-blocks to use the `color` value from `other.selector` instead
 
 ```css
 .my-class {
-	color: red;
-	background: blue;
+  color: red;
+  background: blue;
 
 	/* Yields all conflicts to `other.selector` */
   all: resolve("other.selector");
@@ -664,6 +664,6 @@ app[state|is-saving] .signout {
 
 /* Animate the logo when app is loading data */
 app[state|is-loading] .logo {
-	animation-name: bounce;
+  animation-name: bounce;
 }
 ```

lerna.json

@@ -1,8 +1,7 @@
 {
   "version": "0.17.0",
-  "lerna": "2.5.1",
   "packages": [
-    "packages/*"
+    "packages/@css-blocks/*"
   ],
   "npmClient": "yarn",
   "useWorkspaces": true

package.json

@@ -26,7 +26,7 @@
     "chai": "^3.5.0",
     "husky": "^0.14.3",
     "istanbul": "^0.4.5",
-    "lerna": "^2.5.1",
+    "lerna": "^3.0.0-beta.1",
     "loader-utils": "^1.1.0",
     "mocha": "^3.4.2",
     "mocha-typescript": "^1.0.23",
@@ -43,10 +43,11 @@
     "tslint": "^5.9.1",
     "typedoc": "^0.11.0",
     "typescript": "^2.8.1",
-    "typedoc-plugin-external-module-map": "amiller-gh/typedoc-plugin-external-module-map#prebuilt",
+    "typedoc-plugin-monorepo": "^0.1.0",
     "watch": "^1.0.2"
   },
   "workspaces": [
     "packages/@css-blocks/*"
-  ]
+  ],
+  "name": "css-blocks"
 }

packages/@css-blocks/core/src/index.ts

@@ -1,3 +1,8 @@
+/**
+ * @module @css-blocks/core
+ *
+ * This comment will be used to document the "thing2" module.
+ */
 export * from "./BlockTree";
 export * from "./errors";
 export * from "./SourceLocation";

packages/@css-blocks/jsx/test/fixtures/deep-multifile/components/awesome-component-two.tsx

@@ -2,6 +2,10 @@
 import { h } from 'preact';
 import baz from '../blocks/baz.block.css';
 
-export default function render(){
-  return (<div class={baz.pretty}></div>);
+export interface Props {
+  children?: JSX.Element | JSX.Element[]
+}
+
+export default function render(props: Props){
+  return (<div class={baz.pretty}>{props.children}</div>);
 }

packages/@css-blocks/jsx/test/fixtures/deep-multifile/components/awesome-component.tsx

@@ -4,5 +4,5 @@ import foo from '../blocks/foo.block.css';
 import AwesomeTwo from './awesome-component-two';
 
 export default function render(){
-  return (<AwesomeTwo><div class={foo.pretty}></div></AwesomeTwo>);
+return (<AwesomeTwo><div class={foo.pretty}></div></AwesomeTwo>);
 }

packages/@css-blocks/jsx/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../../tsconfig.json",
   "compilerOptions": {
-    "jsx": "Preserve",
+    "jsx": "preserve",
     "jsxFactory": "h",
 
     // output options

packages/@css-blocks/runtime/tsconfig.json

@@ -13,6 +13,7 @@
     // Environment Configuration
     "experimentalDecorators": false,
     "moduleResolution": "node",
+    "skipLibCheck": true,
 
     // Enhance Strictness
     "noImplicitAny": true,

packages/@css-blocks/runtime/tslint.json

@@ -1,3 +1,3 @@
 {
-  "extends": "@css-blocks/code-style"
+  "extends": "@css-blocks/code-style",
 }

packages/@css-blocks/webpack/package.json

@@ -40,6 +40,7 @@
   },
   "homepage": "https://github.com/css-blocks/css-blocks/tree/master/packages/@css-blocks/webpack#readme",
   "devDependencies": {
+    "@css-blocks/core": "^0.17.0",
     "@css-blocks/code-style": "^0.17.0",
     "@types/convert-source-map": "^1.3.33",
     "@types/extract-text-webpack-plugin": "^2.1.0",

packages/@css-blocks/website/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+public/docs