Add style extraction to build

radix-ui · Aug 3, 2020 · 159ea2d · 159ea2d
1 parent 7bda95d
commit 159ea2d
Show file tree

Hide file tree

Showing 21 changed files with 132 additions and 680 deletions.
diff --git a/package.json b/package.json
@@ -8,8 +8,9 @@
     "test": "cross-env ts-node --transpile-only ./scripts/test packages",
     "test:ci": "CI=true yarn test",
     "bootstrap": "make bootstrap",
-    "build": "ts-node --transpile-only scripts/build-all",
+    "build": "ts-node --transpile-only scripts/build-all && yarn build:styles",
     "build-package": "ts-node --transpile-only scripts/build-package",
+    "build:styles": "cross-env EXTRACT_CSS=true ts-node ./scripts/extract-styles packages/react",
     "clean": "make clean",
     "new-component": "cross-env CI=true ts-node ./scripts/new-component",
     "nc": "yarn new-component",
@@ -102,6 +103,7 @@
     "jest": "^26.2.2",
     "jest-axe": "^3.5.0",
     "jest-watch-typeahead": "^0.6.0",
+    "json-to-css": "^0.1.0",
     "lerna": "^3.22.1",
     "lerna-script": "^1.3.2",
     "lodash": "^4.17.19",

diff --git a/packages/core/css/package.json b/packages/core/css/package.json
diff --git a/packages/core/css/src/hashStringIntoClass.ts b/packages/core/css/src/hashStringIntoClass.ts
diff --git a/packages/core/css/src/index.ts b/packages/core/css/src/index.ts
diff --git a/packages/core/css/src/murmurhash.ts b/packages/core/css/src/murmurhash.ts
diff --git a/packages/core/css/src/stringifyCSSObj.ts b/packages/core/css/src/stringifyCSSObj.ts
diff --git a/packages/core/css/src/stylis.ts b/packages/core/css/src/stylis.ts
diff --git a/packages/core/utils/src/domUtils.ts b/packages/core/utils/src/domUtils.ts
@@ -2,13 +2,23 @@ import kebabCase from 'lodash.kebabcase';
 import { isFunction } from './typeUtils';
 
 export function interopDataAttr(componentPart: string) {
-  return `data-interop-part-${kebabCase(componentPart)}`;
+  return `data-interop-${kebabCase(componentPart)}`;
 }
 
 export function interopDataAttrObj(componentPart: string) {
   return { [interopDataAttr(componentPart)]: '' };
 }
 
+export function interopSelector(componentPart: string) {
+  return process.env.EXTRACT_CSS
+    ? interopDataAttrSelector(componentPart)
+    : componentPart.toLowerCase().split('.').reverse()[0];
+}
+
+export function interopDataAttrSelector(componentPart: string) {
+  return `[${interopDataAttr(componentPart)}]`;
+}
+
 /**
  * Get an element's owner document. Useful when components are used in iframes
  * or other environments like dev tools.