atomic-css-in-js - npm Package Compare versions

Comparing version 0.0.0-89d3cc81e to 0.0.0-f39958f4c

common/compile.d.ts

@@ -6,4 +6,8 @@ export interface AtomicRule {
 export interface CompilationResult {
-    atomicRules: AtomicRule[];
-    globalRules: string[];
+    atomicRules: {
+        [className: string]: string;
+    };
+    globalRules: {
+        [key: string]: true;
+    };
 }
@@ -10,0 +14,0 @@ /**

common/get-class-name.d.ts

@@ -1,3 +0,3 @@
-import { CompilationResult } from './compile';
+import type { CompilationResult } from './compile';
 declare function getClassName({ atomicRules, globalRules }: CompilationResult): string;
 export default getClassName;

common/index.d.ts

@@ -5,2 +5,3 @@ export { default as camelToKebab } from './camel-to-kebab';
 export { default as createClassNames } from './create-class-names';
+export { default as createStyles } from './create-styles';
 export { default as createVariables } from './create-variables';
@@ -7,0 +8,0 @@ export type { Vars } from './create-variables';

index.esm.js

@@ -7,3 +7,3 @@ import { compile as compile$1, serialize, stringify } from 'stylis';
 function camelToKebab(camel) {
-  const normalized = camel.replace(/[^a-z0-9.]*/gi, '');
+  const normalized = camel.replace(/[^a-z0-9]*/gi, '');
   const [firstCharacter, ...rest] = normalized.split('');
@@ -69,3 +69,3 @@ const withDashes = rest.map(character => /[A-Z]/.test(character) ? `-${character}` : character).join('').toLowerCase();
   const atoms = [];
-  const otherRules = [];
+  const globalRules = {};
   /**
@@ -147,3 +147,3 @@ * Traverses the AST mutating current to find all the style "atoms" — where
               if (serializedRule) {
-                otherRules.push(serializedRule);
+                globalRules[serializedRule] = true;
               }
@@ -215,14 +215,10 @@ }
     const atomicCss = applyMedia(media, ruleNoMedia);
-    return {
-      className: finalClassName,
-      atomicCss
-    };
-  });
-  const uniqueAtomicRules = Object.values(atomicRules.reduce((acc, next) => {
-    acc[next.atomicCss] = next;
+    return [finalClassName, atomicCss];
+  }).reduce((acc, [finalClassName, atomicCss]) => {
+    acc[finalClassName] = atomicCss;
     return acc;
-  }, {})).sort((a, b) => a.className.localeCompare(b.className));
+  }, {});
   return {
-    atomicRules: uniqueAtomicRules,
-    globalRules: otherRules
+    atomicRules,
+    globalRules
   };
@@ -238,2 +234,11 @@ }
 
+/**
+ * Returns the style sheet
+ */
+function createStyles(styles) {
+  return Object.assign(styles, {
+    __atomicCssInJsExtractable: true
+  });
+}
+
 function createVariables(namespace, arr) {
@@ -259,6 +264,4 @@ const vars = values => {
 
-  const atomicClassNames = atomicRules.slice().map(({
-    className
-  }) => className).sort(ascendingComparator);
-  const otherClassNames = globalRules.slice().sort(ascendingComparator);
+  const atomicClassNames = Object.keys(atomicRules).sort(ascendingComparator);
+  const otherClassNames = Object.keys(globalRules).sort(ascendingComparator);
   return `${atomicClassNames.join(' ')} ${otherClassNames.join(' ')}`.trim();
@@ -328,15 +331,11 @@ }
   const styleEl = getStyleEl();
-  const atomicRulesToApply = atomicRules.map(({
-    atomicCss
-  }) => atomicCss).filter(atomicCss => !appliedAtomicCssRules[atomicCss]).join('\n') + '\n';
-  const globalRulesToApply = globalRules.filter(rule => !appliedGlobalRules[rule]).join('\n') + '\n';
+  const atomicRulesToApply = Object.keys(atomicRules).filter(atomicCss => !appliedAtomicCssRules[atomicCss]).join('\n') + '\n';
+  const globalRulesToApply = Object.keys(globalRules).filter(rule => !appliedGlobalRules[rule]).join('\n') + '\n';
   styleEl.innerHTML += atomicRulesToApply + globalRulesToApply;
 
-  for (const {
-    atomicCss
-  } of atomicRules) {
+  for (const atomicCss of Object.values(atomicRules)) {
     appliedAtomicCssRules[atomicCss] = true;
   }
 
-  for (const otherRule of globalRules) {
+  for (const otherRule of Object.keys(globalRules)) {
     appliedGlobalRules[otherRule] = true;
@@ -350,11 +349,3 @@ }
 
-/**
- * Returns the style sheet
- */
-function createStyles(styles) {
-  // in the standalone implementation, creates styles does nothing
-  return styles;
-}
-
 export { camelToKebab, compile, createClassNames, createStyles, createVariables, css, getClassName, resolve };
 //# sourceMappingURL=index.esm.js.map

index.js

@@ -144,3 +144,3 @@ (function (global, factory) {
   function camelToKebab(camel) {
-    var normalized = camel.replace(/[^a-z0-9.]*/gi, '');
+    var normalized = camel.replace(/[^a-z0-9]*/gi, '');
 
@@ -215,3 +215,3 @@ var _normalized$split = normalized.split(''),
     var atoms = [];
-    var otherRules = [];
+    var globalRules = {};
     /**
@@ -246,3 +246,3 @@ * Traverses the AST mutating current to find all the style "atoms" — where
               for (_iterator.s(); !(_step = _iterator.n()).done;) {
-                var className = _step.value;
+                var _className2 = _step.value;
 
@@ -256,3 +256,3 @@ var _iterator2 = _createForOfIteratorHelper(children),
                     // change
-                    current.className = className; // traverse
+                    current.className = _className2; // traverse
 
@@ -321,3 +321,3 @@ traverse(child, current); // undo
                   if (serializedRule) {
-                    otherRules.push(serializedRule);
+                    globalRules[serializedRule] = true;
                   }
@@ -424,16 +424,14 @@ }
       var atomicCss = applyMedia(media, ruleNoMedia);
-      return {
-        className: finalClassName,
-        atomicCss: atomicCss
-      };
-    });
-    var uniqueAtomicRules = Object.values(atomicRules.reduce(function (acc, next) {
-      acc[next.atomicCss] = next;
+      return [finalClassName, atomicCss];
+    }).reduce(function (acc, _ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+          finalClassName = _ref3[0],
+          atomicCss = _ref3[1];
+
+      acc[finalClassName] = atomicCss;
       return acc;
-    }, {})).sort(function (a, b) {
-      return a.className.localeCompare(b.className);
-    });
+    }, {});
     return {
-      atomicRules: uniqueAtomicRules,
-      globalRules: otherRules
+      atomicRules: atomicRules,
+      globalRules: globalRules
     };
@@ -449,2 +447,11 @@ }
 
+  /**
+   * Returns the style sheet
+   */
+  function createStyles(styles) {
+    return Object.assign(styles, {
+      __atomicCssInJsExtractable: true
+    });
+  }
+
   function createVariables(namespace, arr) {
@@ -482,7 +489,4 @@ var vars = function vars(values) {
 
-    var atomicClassNames = atomicRules.slice().map(function (_ref2) {
-      var className = _ref2.className;
-      return className;
-    }).sort(ascendingComparator);
-    var otherClassNames = globalRules.slice().sort(ascendingComparator);
+    var atomicClassNames = Object.keys(atomicRules).sort(ascendingComparator);
+    var otherClassNames = Object.keys(globalRules).sort(ascendingComparator);
     return "".concat(atomicClassNames.join(' '), " ").concat(otherClassNames.join(' ')).trim();
@@ -567,9 +571,6 @@ }
     var styleEl = getStyleEl();
-    var atomicRulesToApply = atomicRules.map(function (_ref) {
-      var atomicCss = _ref.atomicCss;
-      return atomicCss;
-    }).filter(function (atomicCss) {
+    var atomicRulesToApply = Object.keys(atomicRules).filter(function (atomicCss) {
       return !appliedAtomicCssRules[atomicCss];
     }).join('\n') + '\n';
-    var globalRulesToApply = globalRules.filter(function (rule) {
+    var globalRulesToApply = Object.keys(globalRules).filter(function (rule) {
       return !appliedGlobalRules[rule];
@@ -579,28 +580,10 @@ }).join('\n') + '\n';
 
-    var _iterator = _createForOfIteratorHelper(atomicRules),
-        _step;
-
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var atomicCss = _step.value.atomicCss;
-        appliedAtomicCssRules[atomicCss] = true;
-      }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
+    for (var _i = 0, _Object$values = Object.values(atomicRules); _i < _Object$values.length; _i++) {
+      var atomicCss = _Object$values[_i];
+      appliedAtomicCssRules[atomicCss] = true;
     }
 
-    var _iterator2 = _createForOfIteratorHelper(globalRules),
-        _step2;
-
-    try {
-      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-        var otherRule = _step2.value;
-        appliedGlobalRules[otherRule] = true;
-      }
-    } catch (err) {
-      _iterator2.e(err);
-    } finally {
-      _iterator2.f();
+    for (var _i2 = 0, _Object$keys = Object.keys(globalRules); _i2 < _Object$keys.length; _i2++) {
+      var otherRule = _Object$keys[_i2];
+      appliedGlobalRules[otherRule] = true;
     }
@@ -613,10 +596,2 @@
 
-  /**
-   * Returns the style sheet
-   */
-  function createStyles(styles) {
-    // in the standalone implementation, creates styles does nothing
-    return styles;
-  }
-
   exports.camelToKebab = camelToKebab;
@@ -623,0 +598,0 @@ exports.compile = compile;

package.json

 {
-  "version": "0.0.0-89d3cc81e",
+  "version": "0.0.0-f39958f4c",
   "main": "index.js",
@@ -7,15 +7,26 @@ "module": "index.esm.js",
   "description": "",
-  "dependencies": {
-    "stylis": "^4.0.1"
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ricokahler/atomic-css-in-js.git"
   },
+  "license": "MIT",
   "author": {
+    "name": "Rico Kahler",
     "email": "[e-mail]",
-    "name": "Rico Kahler",
     "url": "https://github.com/ricokahler"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ricokahler/atomic-css-in-js.git"
-  },
-  "license": "MIT"
+  "dependencies": {
+    "@babel/core": "^7.10.2",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.1",
+    "@babel/plugin-proposal-optional-chaining": "^7.10.1",
+    "@babel/polyfill": "^7.10.1",
+    "@babel/preset-flow": "^7.10.1",
+    "@babel/traverse": "^7.10.1",
+    "@babel/types": "^7.10.2",
+    "@types/require-from-string": "^1.2.0",
+    "babel-plugin-module-resolver": "^4.0.0",
+    "no-op": "^1.0.3",
+    "require-from-string": "^2.0.2",
+    "stylis": "^4.0.1"
+  }
 }

README.md

@@ -6,100 +6,1 @@ # atomic-css-in-js
 > ⚠️ NOT ready yet
-
-`atomic-css-in-js` is not the first library of its kind. There many other amazing libraries that do either statically extracted CSS-in-JS or atomic CSS-in-JS but none that checked all the boxes for me.
-
-- [ ] standalone mode
-- [ ] compiler mode (static CSS extraction)
-- [ ] loader (reduce code splitting reduction)
-- [x] fallback support (implement with comment, make it change the property hash)
-- [x] global CSS support (with `:global { /* ... */ }`?)
-- [x] @keyframes @supports (does this work?)
-- [ ] stylelint
-- [x] grid-template-areas
-- [ ] snippet to generate `vars` and class name anchors `a`
-
-```js
-import React from 'react';
-import { css, resolve, createStyles, createVariables } from 'atomic-css-in-js';
-
-const vars = createVariables('namespace', ['test']);
-const classes = createClassNames('namespace', ['test']);
-
-export const styles = createStyles({
-  main: css``,
-  title: css`
-    & ${classes.test}:hover {
-      background-color: ${vars.test};
-    }
-  `,
-});
-
-function Component({ title }) {
-  return (
-    <div
-      className={resolve(classes.test, main, props.active && classes.someLon)}
-      style={vars({ test: rest })}
-    >
-      <h1 className={resolve(styles.main, styles.title)}>{title}</h1>
-      <p>Description</p>
-    </div>
-  );
-}
-```
-
-```js
-const cache = {};
-function css(content) {
-  if (has(cache, content)) {
-    return classNames;
-  }
-
-  styleEl = document.querySelector('style-el');
-}
-```
-
-```
-atomic-css-in-js
-  - re-exports standalone
-@atomic-css-in-js/babel-plugin-plugin
-  - babel
-  - require-from-string
-@atomic-css-in-js/ssr
-  - resolve
-  - createVariables
-@atomic-css-in-js/loader
-@atomic-css-in-js/standalone
-```
-
-```css
-/* prettier-ignore */
-.ee6po47{background-color:red;}
-.qxf2hea {
-  color: red;
-}
-```
-
-```
-<property_hash>-_-<value_hash>
-ee6po47-ee6po47
-```
-
-property hash is to remove collisions
-
-```css
-.another {
-  background-color: red;
-}
-.test {
-  background-color: red;
-}
-.test:hover {
-  background-color: red;
-}
-```
-
-```
-[@media] [pseudo-class] [property] [value]
-```
-
-```css
-```

standalone/index.d.ts

 export { default as css } from './css';
-export { default as createStyles } from './create-styles';
-export { camelToKebab, compile, createClassNames, createVariables, getClassName, resolve, } from '../common';
+export { camelToKebab, compile, createClassNames, createStyles, createVariables, getClassName, resolve, } from '../common';
 export type { AtomicRule, CompilationResult, Vars } from '../common';

New alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

144508

increased by70.6%

Number of package files

30

increased by57.89%

Lines of code

1562

increased by76.7%

Worsened metrics

Dependency count

12

increased by1100%

Number of lines in readme file

6

decreased by-94.29%

Number of low supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@babel/core@^7.10.2

• + Added@babel/plugin-proposal-nullish-coalescing-operator@^7.10.1

• + Added@babel/plugin-proposal-optional-chaining@^7.10.1

• + Added@babel/polyfill@^7.10.1

• + Added@babel/preset-flow@^7.10.1

• + Added@babel/traverse@^7.10.1

• + Added@babel/types@^7.10.2

• + Added@types/require-from-string@^1.2.0

• + Addedbabel-plugin-module-resolver@^4.0.0

• + Addedno-op@^1.0.3

• + Addedrequire-from-string@^2.0.2

• + Added@ampproject/remapping@2.3.0(transitive)

• + Added@babel/code-frame@7.26.2(transitive)

• + Added@babel/compat-data@7.26.8(transitive)

• + Added@babel/core@7.26.8(transitive)

• + Added@babel/generator@7.26.8(transitive)

• + Added@babel/helper-compilation-targets@7.26.5(transitive)

• + Added@babel/helper-module-imports@7.25.9(transitive)

• + Added@babel/helper-module-transforms@7.26.0(transitive)

• + Added@babel/helper-plugin-utils@7.26.5(transitive)

• + Added@babel/helper-skip-transparent-expression-wrappers@7.25.9(transitive)

• + Added@babel/helper-string-parser@7.25.9(transitive)

• + Added@babel/helper-validator-identifier@7.25.9(transitive)

• + Added@babel/helper-validator-option@7.25.9(transitive)

• + Added@babel/helpers@7.26.7(transitive)

• + Added@babel/parser@7.26.8(transitive)

• + Added@babel/plugin-proposal-nullish-coalescing-operator@7.18.6(transitive)

• + Added@babel/plugin-proposal-optional-chaining@7.21.0(transitive)

• + Added@babel/plugin-syntax-flow@7.26.0(transitive)

• + Added@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(transitive)

• + Added@babel/plugin-syntax-optional-chaining@7.8.3(transitive)

• + Added@babel/plugin-transform-flow-strip-types@7.26.5(transitive)

• + Added@babel/polyfill@7.12.1(transitive)

• + Added@babel/preset-flow@7.25.9(transitive)

• + Added@babel/template@7.26.8(transitive)

• + Added@babel/traverse@7.26.8(transitive)

• + Added@babel/types@7.26.8(transitive)

• + Added@jridgewell/gen-mapping@0.3.8(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Added@types/gensync@1.0.4(transitive)

• + Added@types/require-from-string@1.2.3(transitive)

• + Addedbabel-plugin-module-resolver@4.1.0(transitive)

• + Addedbalanced-match@1.0.2(transitive)

• + Addedbrace-expansion@1.1.11(transitive)

• + Addedbrowserslist@4.24.4(transitive)

• + Addedcaniuse-lite@1.0.30001699(transitive)

• + Addedconcat-map@0.0.1(transitive)

• + Addedconvert-source-map@2.0.0(transitive)

• + Addedcore-js@2.6.12(transitive)

• + Addeddebug@4.4.0(transitive)

• + Addedelectron-to-chromium@1.5.99(transitive)

• + Addedescalade@3.2.0(transitive)

• + Addedfind-babel-config@1.2.2(transitive)

• + Addedfind-up@3.0.0(transitive)

• + Addedfs.realpath@1.0.0(transitive)

• + Addedfunction-bind@1.1.2(transitive)

• + Addedgensync@1.0.0-beta.2(transitive)

• + Addedglob@7.2.3(transitive)

• + Addedglobals@11.12.0(transitive)

• + Addedhasown@2.0.2(transitive)

• + Addedinflight@1.0.6(transitive)

• + Addedinherits@2.0.4(transitive)

• + Addedis-core-module@2.16.1(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedjsesc@3.1.0(transitive)

• + Addedjson5@1.0.22.2.3(transitive)

• + Addedlocate-path@3.0.0(transitive)

• + Addedlru-cache@5.1.1(transitive)

• + Addedminimatch@3.1.2(transitive)

• + Addedminimist@1.2.8(transitive)

• + Addedms@2.1.3(transitive)

• + Addedno-op@1.0.3(transitive)

• + Addednode-releases@2.0.19(transitive)

• + Addedonce@1.4.0(transitive)

• + Addedp-limit@2.3.0(transitive)

• + Addedp-locate@3.0.0(transitive)

• + Addedp-try@2.2.0(transitive)

• + Addedpath-exists@3.0.0(transitive)

• + Addedpath-is-absolute@1.0.1(transitive)

• + Addedpath-parse@1.0.7(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpkg-up@3.1.0(transitive)

• + Addedregenerator-runtime@0.13.11(transitive)

• + Addedrequire-from-string@2.0.2(transitive)

• + Addedreselect@4.1.8(transitive)

• + Addedresolve@1.22.10(transitive)

• + Addedsemver@6.3.1(transitive)

• + Addedsupports-preserve-symlinks-flag@1.0.0(transitive)

• + Addedupdate-browserslist-db@1.1.2(transitive)

• + Addedwrappy@1.0.2(transitive)

• + Addedyallist@3.1.1(transitive)