Add AtomicPrefixToken

#180

Co-authored-by: Ryan Tsao <ryan.j.tsao@gmail.com>

Author: rtsao

.babelrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@babel/preset-react')],
+};

.buildkite/browserTests

@@ -6,13 +6,6 @@ steps:
         image-repository: 027047743804.dkr.ecr.us-east-2.amazonaws.com/uber
     agents:
       queue: builders
-  - name: ':docker: :package: node8'
-    plugins:
-      'docker-compose#v1.7.0':
-        build: fusion-plugin-styletron-react-node-last
-        image-repository: 027047743804.dkr.ecr.us-east-2.amazonaws.com/uber
-    agents:
-      queue: builders
   - wait
   - command: yarn flow
     name: ':flowtype:'
@@ -21,52 +14,17 @@ steps:
         run: fusion-plugin-styletron-react
     agents:
       queue: workers
-  - command: yarn flow
-    name: ':flowtype: node8'
-    plugins:
-      'docker-compose#v1.7.0':
-        run: fusion-plugin-styletron-react-node-last
-    agents:
-      queue: workers
   - name: ':eslint:'
     command: yarn lint
     plugins:
       'docker-compose#v1.7.0':
         run: fusion-plugin-styletron-react
     agents:
       queue: workers
-  - name: ':eslint: node8'
-    command: yarn lint
-    plugins:
-      'docker-compose#v1.7.0':
-        run: fusion-plugin-styletron-react-node-last
-    agents:
-      queue: workers
-  - name: ':chrome: :white_check_mark:'
-    command: .buildkite/browserTests
-    plugins:
-      'docker-compose#v1.7.0':
-        run: fusion-plugin-styletron-react
-    agents:
-      queue: workers
-  - name: ':chrome: :white_check_mark: node8'
-    command: .buildkite/browserTests
-    plugins:
-      'docker-compose#v1.7.0':
-        run: fusion-plugin-styletron-react-node-last
-    agents:
-      queue: workers
   - name: ':node: :white_check_mark:'
-    command: .buildkite/nodeTests
+    command: yarn test
     plugins:
       'docker-compose#v1.7.0':
         run: fusion-plugin-styletron-react
     agents:
       queue: workers
-  - name: ':node: :white_check_mark: node8'
-    command: .buildkite/nodeTests
-    plugins:
-      'docker-compose#v1.7.0':
-        run: fusion-plugin-styletron-react-node-last
-    agents:
-      queue: workers

.buildkite/nodeTests

@@ -1,8 +1,10 @@
 node_modules/
-dist/
-dist-tests/
+dist-browser-esm/
+dist-node-cjs/
+dist-node-esm/
 coverage/
 .nyc_output/
+test/*/.fusion
 
 .DS_Store
 npm-debug.log

.buildkite/pipeline.yml

@@ -1,10 +1,8 @@
-ARG BASE_IMAGE=uber/web-base-image:2.0.0
+ARG BASE_IMAGE=uber/web-base-image:10.15.3
 FROM $BASE_IMAGE
 
 WORKDIR /fusion-plugin-styletron-react
 
 COPY . .
 
 RUN yarn
-
-RUN yarn build-test

.gitignore

@@ -32,6 +32,17 @@ export default () => {
 }
 ```
 
+### Atomic class prefix
+
+By default, it is assumed there is no global CSS that will result in collisions with the generated atomic class names. If this is not the case, collisions can be avoided by adding a prefix to the generated atomic class names via `AtomicPrefixToken`.
+
+```js
+import Styletron, {AtomicPrefixToken} from 'fusion-plugin-styletron-react';
+
+app.register(Styletron);
+app.register(AtomicPrefixToken, "_");
+```
+
 ### Creating styled components
 For API details and usage examples, see [the official `styletron-react` documentation](https://github.com/rtsao/styletron/tree/master/packages/styletron-react)
 

Dockerfile

@@ -1,12 +1,13 @@
-version: '2'
+version: "2"
 services:
   fusion-plugin-styletron-react:
     build: .
     volumes:
-      - '.:/fusion-plugin-styletron-react'
+      - ".:/fusion-plugin-styletron-react"
       - /fusion-plugin-styletron-react/node_modules/
-      - /fusion-plugin-styletron-react/dist/
-      - /fusion-plugin-styletron-react/dist-tests/
+      - /fusion-plugin-styletron-react/dist-browser-esm/
+      - /fusion-plugin-styletron-react/dist-node-cjs/
+      - /fusion-plugin-styletron-react/dist-node-esm/
     environment:
       - CODECOV_TOKEN
       - CI=true
@@ -17,9 +18,3 @@ services:
       - BUILDKITE_BUILD_URL
       - BUILDKITE_PROJECT_SLUG
       - BUILDKITE_COMMIT
-  fusion-plugin-styletron-react-node-last:
-    extends: fusion-plugin-styletron-react
-    build:
-      context: .
-      args:
-        BASE_IMAGE: 'uber/web-base-image:1.0.9'

README.md

@@ -2,35 +2,36 @@
   "name": "fusion-plugin-styletron-react",
   "version": "2.5.4",
   "description": "The Fusion plugin for Styletron, which, in addition to providing a easy-to-use styled-component-like interface, provides powerful server-side CSS optimizations, yielding less CSS code down the wire.",
-  "license": "MIT",
   "repository": "fusionjs/fusion-plugin-styletron-react",
   "files": [
-    "dist",
+    "dist-browser-esm",
+    "dist-node-cjs",
+    "dist-node-esm",
     "src"
   ],
-  "main": "./dist/index.js",
-  "module": "./dist/index.es.js",
-  "browser": {
-    "./dist/index.js": "./dist/browser.es5.js",
-    "./dist/index.es.js": "./dist/browser.es5.es.js"
-  },
-  "es2015": {
-    "./dist/browser.es5.es.js": "./dist/browser.es2015.es.js"
-  },
-  "es2017": {
-    "./dist/browser.es5.es.js": "./dist/browser.es2017.es.js",
-    "./dist/browser.es2015.es.js": "./dist/browser.es2017.es.js"
+  "main": "./dist-node-cjs/index.js",
+  "module": "./dist-node-esm/index.js",
+  "browser": "./dist-browser-esm/index.js",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "lint": "eslint . --ignore-path .gitignore",
+    "transpile": "npm run clean && cup build",
+    "test": "jest",
+    "prepublish": "npm run transpile"
   },
   "dependencies": {
     "css-to-js-sourcemap-worker": "^2.0.4",
     "styletron-engine-atomic": "^1.0.13"
   },
+  "peerDependencies": {
+    "fusion-core": "^1.10.1",
+    "react": "14.x - 16.x",
+    "styletron-react": "^4.3.0"
+  },
   "devDependencies": {
     "@babel/preset-react": "7.0.0",
     "babel-eslint": "10.0.1",
-    "create-universal-package": "3.4.6",
-    "enzyme": "3.8.0",
-    "enzyme-adapter-react-16": "1.9.1",
+    "create-universal-package": "^4.0.0",
     "eslint": "5.13.0",
     "eslint-config-fusion": "^4.0.0",
     "eslint-plugin-cup": "2.0.1",
@@ -40,30 +41,19 @@
     "eslint-plugin-prettier": "3.0.1",
     "eslint-plugin-react": "7.11.1",
     "flow-bin": "^0.87.0",
+    "fusion-cli": "^1.17.0",
     "fusion-core": "1.10.1",
-    "nyc": "13.1.0",
+    "fusion-react": "^2.0.0",
+    "get-port": "^4.2.0",
+    "jest": "^24.1.0",
     "prettier": "1.15.2",
-    "react": "16.6.3",
-    "react-dom": "16.6.3",
-    "styletron-react": "^4.3.6",
-    "tape-cup": "4.7.1",
-    "unitest": "2.1.1"
-  },
-  "peerDependencies": {
-    "fusion-core": "^1.10.1",
-    "react": "14.x - 16.x",
-    "styletron-react": "^4.3.0"
-  },
-  "scripts": {
-    "clean": "rm -rf dist",
-    "lint": "eslint . --ignore-path .gitignore",
-    "transpile": "npm run clean && cup build",
-    "build-test": "rm -rf dist-tests && cup build-tests",
-    "just-test": "node_modules/.bin/unitest --browser=dist-tests/browser.js && node dist-tests/node.js",
-    "test": "npm run build-test && npm run just-test",
-    "prepublish": "npm run transpile"
+    "puppeteer": "^1.13.0",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "styletron-react": "^4.4.5"
   },
   "engines": {
     "node": ">= 8.9.0"
-  }
+  },
+  "license": "MIT"
 }