prepare v3

Author: theKashey

README.md

@@ -11,6 +11,10 @@
 
 </div>
 
+> 👋**Version 3** migration notice: `import { discoverProjectStyles } from 'used-styles/node'`. That's it
+
+---
+
 > Bundler and framework independent CSS part of SSR-friendly code splitting
 
 Detects used `css` files from the given HTML, and/or **inlines critical styles**. Supports sync or **stream** rendering.
@@ -149,18 +153,21 @@ Also it may be useful for you, if you want to save on the size of your container
 #### During your build
 
 1. Add separate script to generate style lookup and store it as you like.
+
 ```js
 // project/scripts/generate_styles_lookup.mjs
-import { serializeStylesLookup, discoverProjectStyles } from 'used-styles'
-import { writeFileSync } from 'fs'
+import { serializeStylesLookup, discoverProjectStyles } from 'used-styles';
+import { writeFileSync } from 'fs';
 
 const stylesLookup = discoverProjectStyles('./path/to/dist/client');
 
 await stylesLookup;
 
-writeFileSync('./path/to/dist/server/styles-lookup.json', JSON.stringify(serializeStyles(lookup)))
+writeFileSync('./path/to/dist/server/styles-lookup.json', JSON.stringify(serializeStylesLookup(lookup)));
 ```
+
 2. Run this code after your build
+
 ```sh
 yarn build
 node ./scripts/generate_styles_lookup.mjs
@@ -171,14 +178,15 @@ Notice, that you can store serialized lookup in any way, that suits you and your
 #### During your runtime
 
 1. Access previously created and stored styles lookup, convert it to `StyleDef` with `loadSerializedLookup` and use it normally
+
 ```js
-import { loadSerializedLookup } from 'used-styles'
+import { loadSerializedLookup } from 'used-styles';
 
-const stylesLookup = loadSerializedLookup(require('./dist/server/styles-lookup.json');
+const stylesLookup = loadSerializedLookup(require('./dist/server/styles-lookup.json'));
 
 // ...
 
-getCriticalStyles(markup, stylesLookup)
+getCriticalStyles(markup, stylesLookup);
 ```
 
 # Example
@@ -195,7 +203,8 @@ getCriticalStyles(markup, stylesLookup)
 There is nothing interesting here - just render, just `getUsedStyles`.
 
 ```js
-import {discoverProjectStyles, getUsedStyles} from 'used-styles';
+import {getUsedStyles} from 'used-styles';
+import {discoverProjectStyles} from 'used-styles/node';
 
 
 // generate lookup table on server start
@@ -245,13 +254,8 @@ similar how StyledComponents works
 
 ```js
 import express from 'express';
-import {
-  discoverProjectStyles,
-  loadStyleDefinitions,
-  createCriticalStyleStream,
-  createStyleStream,
-  createLink,
-} from 'used-styles';
+import { discoverProjectStyles } from 'used-styles/node';
+import { loadStyleDefinitions, createCriticalStyleStream, createStyleStream, createLink } from 'used-styles';
 
 const app = express();
 
@@ -380,7 +384,8 @@ That's all are streams, concatenated in a right order. It's possible to interlea
 a `hydrate`.
 
 ```js
-import { discoverProjectStyles, createStyleStream, createLink } from 'used-styles';
+import { createStyleStream, createLink } from 'used-styles';
+import { discoverProjectStyles } from 'used-styles/node';
 import MultiStream from 'multistream';
 
 // .....

__tests__/react.integration.spec.tsx

@@ -8,14 +8,14 @@ import {
   createCriticalStyleStream,
   createLink,
   createStyleStream,
-  discoverProjectStyles,
   enableReactOptimization,
   getCriticalStyles,
   getUsedStyles,
   parseProjectStyles,
   serializeStylesLookup,
   loadSerializedLookup,
 } from '../src';
+import { discoverProjectStyles } from '../src/index-node';
 import { StyleDefinition } from '../src/types';
 
 describe('File based css stream', () => {

node/package.json

@@ -0,0 +1,7 @@
+{
+  "private": true,
+  "main": "../dist/es5/index-node.js",
+  "jsnext:main": "../dist/es2015/index-node.js",
+  "module": "../dist/es2015/index-node.js",
+  "types": "../dist/es2015/index-node.d.ts"
+}

package.json

@@ -34,7 +34,8 @@
   },
   "files": [
     "dist",
-    "moveStyles"
+    "moveStyles",
+    "node"
   ],
   "keywords": [
     "nodejs",

src/index-node.ts

@@ -0,0 +1 @@
+export { discoverProjectStyles } from './style-discovery';

src/index.ts

@@ -4,18 +4,21 @@ import { getCriticalRules, extractCriticalRules, getCriticalStyles, getUsedStyle
 import { alterProjectStyles } from './operations';
 import { createCriticalStyleStream } from './reporters/critical';
 import { createStyleStream } from './reporters/used';
-import { discoverProjectStyles, loadStyleDefinitions, parseProjectStyles } from './scanForStyles';
-
+import { loadStyleDefinitions, parseProjectStyles } from './style-operations';
 import { createUsedFilter as createUsedSelectorsFilter } from './utils/cache';
 
-export { serializeStylesLookup, loadSerializedLookup } from './serialize';
+/**
+ * @deprecated please import discoverProjectStyles from 'used-styles/node'
+ */
+export const discoverProjectStyles = () => {
+  throw new Error("Please import discoverProjectStyles from 'used-styles/node'");
+};
 
+export { serializeStylesLookup, loadSerializedLookup } from './serialize';
 export { UsedTypes, StyleDefinition, SelectionFilter } from './types';
-
 export {
   createUsedSelectorsFilter,
   loadStyleDefinitions,
-  discoverProjectStyles,
   parseProjectStyles,
   alterProjectStyles,
   getUsedStyles,

src/style-discovery.ts

@@ -0,0 +1,35 @@
+import { readFile } from 'fs/promises';
+import { extname, join, relative } from 'path';
+
+// @ts-ignore
+import scanDirectory from 'scan-directory';
+
+import { loadStyleDefinitions } from './style-operations';
+import { StyleDefinition } from './types';
+
+const RESOLVE_EXTENSIONS = ['.css'];
+
+const getFileContent = (file: string) => readFile(file, 'utf8');
+
+const passAll = () => true;
+
+/**
+ * auto discovers style files in a given dir applying a given "ordering" filter
+ * @see Use {@link loadStyleDefinitions} as a full customizable variant
+ * @param rootDir - location of the build artefact
+ * @param fileFilter - filter and ordering, return false to skip the file, return true or null to not change file order, sort index otherwise
+ */
+export function discoverProjectStyles(
+  rootDir: string,
+  fileFilter: (fileName: string) => boolean | number | null = passAll
+): StyleDefinition {
+  return loadStyleDefinitions(
+    async () =>
+      ((await scanDirectory(rootDir, undefined, () => false)) as string[])
+        .filter((name) => RESOLVE_EXTENSIONS.indexOf(extname(name)) >= 0)
+        .map((file) => relative(rootDir, file))
+        .sort(),
+    (fileName) => getFileContent(join(rootDir, fileName)),
+    fileFilter
+  );
+}

src/scanForStyles.ts src/style-operations.ts

@@ -1,22 +1,8 @@
-import { readFile } from 'fs';
-import { extname, join, relative } from 'path';
-
-import { promisify } from 'util';
-
-// @ts-ignore
-import scanDirectory from 'scan-directory';
-
 import { StyleAst } from './parser/ast';
 import { buildAst } from './parser/toAst';
 import { StyleDefinition, StyleFiles, StylesLookupTable, SyncStyleDefinition } from './types';
 import { flattenOrder } from './utils/order';
 
-const RESOLVE_EXTENSIONS = ['.css'];
-
-const pReadFile = promisify(readFile);
-
-export const getFileContent = (file: string) => pReadFile(file, 'utf8');
-
 const toFlattenArray = (ast: StyleAst): StylesLookupTable =>
   Object.keys(ast).reduce((acc, file) => {
     ast[file].selectors.forEach((sel) => {
@@ -141,24 +127,3 @@ export function loadStyleDefinitions(
 
   return result;
 }
-
-/**
- * auto discovers style files in a given dir applying a given "ordering" filter
- * @see Use {@link loadStyleDefinitions} as a full customizable variant
- * @param rootDir - location of the build artefact
- * @param fileFilter - filter and ordering, return false to skip the file, return true or null to not change file order, sort index otherwise
- */
-export function discoverProjectStyles(
-  rootDir: string,
-  fileFilter: (fileName: string) => boolean | number | null = passAll
-): StyleDefinition {
-  return loadStyleDefinitions(
-    async () =>
-      ((await scanDirectory(rootDir, undefined, () => false)) as string[])
-        .filter((name) => RESOLVE_EXTENSIONS.indexOf(extname(name)) >= 0)
-        .map((file) => relative(rootDir, file))
-        .sort(),
-    (fileName) => getFileContent(join(rootDir, fileName)),
-    fileFilter
-  );
-}

tsconfig.json

@@ -12,7 +12,7 @@
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "noImplicitAny": true,
-    "removeComments": true,
+    "removeComments": false,
     "importHelpers": true,
     "target": "es6",
     "moduleResolution": "node",