feat: initial commit

andreypopp · andreypopp · commit 609c251d3070 · 2016-04-09T23:27:30.000+03:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+node_modules/
+lib/
+examples/webpack/bundle
+npm-debug.log
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,4 @@
+src/
+npm-debug.log
+.nyc_output/
+coverage/
diff --git a/Makefile b/Makefile
@@ -0,0 +1,37 @@
+.DELETE_ON_ERROR:
+
+BIN           = ./node_modules/.bin
+TESTS         = $(shell find src -path '*/__tests__/*-test.js')
+FIXTURES      = $(shell find src -path '*/__tests__/*-fixture/*.js')
+SRC           = $(filter-out $(TESTS) $(FIXTURES), $(shell find src -name '*.js'))
+LIB           = $(SRC:src/%=lib/%)
+MOCHA_OPTS    = -R dot --require babel-core/register
+
+build::
+	@$(MAKE) -j 8 $(LIB)
+
+lint::
+	@$(BIN)/eslint src
+
+check::
+	@$(BIN)/flow --show-all-errors src
+
+test::
+	@$(BIN)/mocha $(MOCHA_OPTS) $(TESTS)
+
+ci::
+	@$(BIN)/mocha $(MOCHA_OPTS) --watch --watch-extensions json,md $(TESTS)
+
+version-major version-minor version-patch:: lint test
+	@npm version $(@:version-%=%)
+
+push::
+	@git push --tags origin HEAD:master
+
+clean::
+	@rm -rf lib
+
+lib/%.js: src/%.js
+	@echo "Building $<"
+	@mkdir -p $(@D)
+	@$(BIN)/babel $(BABEL_OPTIONS) -o $@ $<
diff --git a/README.md b/README.md
@@ -0,0 +1,16 @@
+# React CSS components
+
+React CSS components is a CSS based module format to define styled React DOM
+components.
+
+Example `styles.react.css`:
+
+    Label {
+      color: red;
+    }
+
+Then:
+
+    import {Label} from './styles.react.css'
+
+    <Label /> // => <div className="<autogenerated classname>">...</div>
diff --git a/examples/webpack/.babelrc b/examples/webpack/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["prometheusresearch"]
+}
diff --git a/examples/webpack/index.html b/examples/webpack/index.html
@@ -0,0 +1,2 @@
+<div id="main">
+<script src="bundle/bundle.js"></script>
diff --git a/examples/webpack/index.js b/examples/webpack/index.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {Header, Content, Root} from './styles.react.css';
+
+ReactDOM.render(
+  <Root>
+    <Header>Header</Header>
+    <Content>Content</Content>
+  </Root>,
+  document.getElementById('main')
+);
diff --git a/examples/webpack/package.json b/examples/webpack/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "react-css-components-example-webpack",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack",
+    "watch": "webpack -w"
+  },
+  "dependencies": {
+    "babel-loader": "^6.2.4",
+    "css-loader": "^0.23.1",
+    "react": "^15.0.0",
+    "react-css-components": "../../",
+    "react-dom": "^15.0.0",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.12.14"
+  }
+}
diff --git a/examples/webpack/styles.react.css b/examples/webpack/styles.react.css
@@ -0,0 +1,14 @@
+Root {
+  padding: 10px;
+  font-family: Menlo;
+}
+
+Header {
+  font-size: 200%;
+  font-weight: bold;
+  color: black;
+}
+
+Content {
+  color: #444;
+}
diff --git a/examples/webpack/webpack.config.js b/examples/webpack/webpack.config.js
@@ -0,0 +1,29 @@
+var path = require('path');
+
+module.exports = {
+  entry: './index.js',
+  output: {
+    path: 'bundle',
+    filename: 'bundle.js',
+  },
+  devtool: 'cheap-eval-source-map',
+  resolve: {
+    fallback: path.join(__dirname, 'node_modules'),
+  },
+  resolveLoader: {
+    fallback: path.join(__dirname, 'node_modules'),
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.react.css$/,
+        loader: 'babel-loader!react-css-components/webpack',
+      },
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+      }
+    ]
+  }
+};
diff --git a/package.json b/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "react-css-components",
+  "version": "0.1.0",
+  "description": "Define styled React components using CSS based module format",
+  "main": "lib/index.js",
+  "babel": {
+    "presets": [
+      "prometheusresearch"
+    ]
+  },
+  "eslintConfig": {
+    "extends": "prometheusresearch"
+  },
+  "scripts": {
+    "test": "make test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/andreypopp/react-css-components.git"
+  },
+  "keywords": [
+    "react",
+    "css",
+    "postcss-plugin",
+    "webpack"
+  ],
+  "author": "Andrey Popp <8mayday@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/andreypopp/react-css-components/issues"
+  },
+  "homepage": "https://github.com/andreypopp/react-css-components#readme",
+  "dependencies": {
+    "babel-types": "^6.7.2",
+    "loader-utils": "^0.2.14",
+    "postcss": "^5.0.19"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.7.5",
+    "babel-core": "^6.7.6",
+    "babel-preset-prometheusresearch": "^0.1.0",
+    "eslint": "^2.7.0",
+    "eslint-config-prometheusresearch": "^0.2.0",
+    "mocha": "^2.4.5"
+  }
+}
diff --git a/src/__tests__/index-test.js b/src/__tests__/index-test.js
@@ -0,0 +1,34 @@
+import {render} from '../';
+
+describe('react-css-components', function() {
+
+  it('renders react compoents', function() {
+    let {js, css} = render(`
+
+Label {
+  color: red;
+}
+    `, {requestCSS: 'react-css-components?css!styles.react.css'});
+    console.log('--- js');
+    console.log(js);
+    console.log('--- css');
+    console.log(css);
+  });
+
+
+  it('renders react components with pseudoclasses', function() {
+    let {js, css} = render(`
+
+Label {
+  color: red;
+  :hover {
+    color: white;
+  }
+}
+    `, {requestCSS: 'react-css-components?css!styles.react.css'});
+    console.log('--- js');
+    console.log(js);
+    console.log('--- css');
+    console.log(css);
+  });
+});
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,87 @@
+/**
+ * @copyright 2016-present, React CSS Components team
+ * @flow
+ */
+
+import * as types from 'babel-types';
+import * as postcss from 'postcss';
+import * as LoaderUtils from 'loader-utils';
+import generate from 'babel-generator';
+
+const LOADER = require.resolve('../webpack');
+
+export type RenderConfig = {
+  requestCSS: string;
+};
+
+export function loader(source: string): string {
+  this.cacheable();
+  let query = LoaderUtils.parseQuery(this.query);
+  if (query.css) {
+    let result = renderToCSS(source);
+    return result;
+  } else {
+    let requestCSS = `!!style-loader!css-loader?module!${LOADER}?css!${this.resource}`;
+    let result = renderToJS(source, {requestCSS});
+    return result;
+  }
+}
+
+export function render(source: string, config: RenderConfig = {}): {js: string; css: string}{
+  let js = renderToJS(source, {requestCSS: config.requestCSS});
+  let css = renderToCSS(source);
+  return {js, css};
+}
+
+function renderToCSS(source: string, config: RenderConfig): string {
+  let root = postcss.parse(source);
+  root.walkRules(node => {
+    let cssNode = node.clone();
+    cssNode.selector = `:local(.${node.selector})`;
+    node.replaceWith(cssNode);
+  });
+  return root.toString();
+}
+
+function renderToJS(source: string, config: RenderConfig): string {
+  let root = postcss.parse(source);
+  let statements = [];
+  root.walkRules(node => {
+    statements.push(exportComponent(node.selector, 'div', node.selector));
+  });
+  statements.unshift(
+    types.importDeclaration(
+      [types.importDefaultSpecifier(types.identifier('styles'))],
+      types.stringLiteral(config.requestCSS)
+    )
+  );
+  statements.unshift(
+    types.importDeclaration(
+      [types.importDefaultSpecifier(types.identifier('React'))],
+      types.stringLiteral('react')
+    )
+  );
+  return generate(types.program(statements)).code;
+}
+
+function exportComponent(name: string, component: string, className: string) {
+  let propsNode = types.objectExpression([
+    types.spreadProperty(types.identifier('props')),
+    types.objectProperty(
+      types.identifier('className'),
+      types.memberExpression(types.identifier('styles'), types.identifier(name))
+    )
+  ]);
+  let elementNode = types.callExpression(
+    types.memberExpression(
+      types.identifier('React'),
+      types.identifier('createElement')),
+    [types.stringLiteral(component), propsNode]
+  );
+  let componentNode = types.functionDeclaration(
+    types.identifier(name),
+    [types.identifier('props')],
+    types.blockStatement([types.returnStatement(elementNode)])
+  );
+  return types.exportNamedDeclaration(componentNode, [], null);
+}
diff --git a/webpack.js b/webpack.js
@@ -0,0 +1,6 @@
+/**
+ * @copyright 2016-present, React CSS Components team
+ * @flow
+ */
+
+module.exports = require('./lib/index').loader;

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "presets": ["prometheusresearch"]`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+<div id="main">`
	`2`	`+<script src="bundle/bundle.js"></script>`