@thesoulfresh/sass-theming - npm Package Compare versions

Comparing version 1.1.2 to 1.1.3

package.json

 {
   "name": "@thesoulfresh/sass-theming",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Simple theming tools for SASS based projects.",
-  "main": "_theme.scss",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
   "repository": "[e-mail]:soulfresh/sass-theming.git",
@@ -19,5 +20,17 @@ "author": "Marc Wren <[e-mail]>",
   ],
+  "scripts": {
+    "build": "rollup -c rollup.config.js",
+    "clean": "rimraf storybook-static lib",
+    "sass-docs": "npx sassdoc2md ./src/_utils.scss --markdown ./src/docs/helpers/Mixins.stories.mdx.hbs -s Mixins > ./src/docs/helpers/Mixins.stories.mdx",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "release": "./scripts/release",
+    "deploy-storybook": "storybook-to-ghpages",
+    "deploy-storybook-ci": "storybook-to-ghpages -- --ci"
+  },
   "devDependencies": {
     "@babel/core": "^7.13.8",
+    "@babel/preset-env": "^7.12.11",
     "@hidoo/sassdoc-to-markdown": "^0.4.2",
+    "@rollup/plugin-node-resolve": "^11.2.0",
     "@storybook/addon-actions": "^6.1.21",
@@ -37,2 +50,3 @@ "@storybook/addon-essentials": "^6.1.21",
     "rimraf": "^3.0.2",
+    "rollup": "^2.41.5",
     "sass-loader": "^10.1.1",
@@ -43,11 +57,2 @@ "style-loader": "^2.0.0",
   "dependencies": {},
-  "scripts": {
-    "clean": "rimraf storybook-static",
-    "sass-docs": "npx sassdoc2md ./src/_utils.scss --markdown ./src/docs/helpers/Mixins.stories.mdx.hbs -s Mixins > ./src/docs/helpers/Mixins.stories.mdx",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "release": "./scripts/release",
-    "deploy-storybook": "storybook-to-ghpages",
-    "deploy-storybook-ci": "storybook-to-ghpages -- --ci"
-  },
   "storybook-deployer": {
@@ -54,0 +59,0 @@ "commitMessage": "Deploy Storybook [skip ci]"

src/docs/Animation.jsx

@@ -5,4 +5,2 @@ import React from 'react';
 
-import styles from './Animation.module.scss';
-
 export function AnimationItem({
@@ -15,3 +13,3 @@ speed,
       className={combineClasses(
-        styles.anim,
+        'anim',
         speed,
@@ -32,3 +30,3 @@ active ? 'active' : null,
     <div
-      className={combineClasses(styles.AnimationSpeed, className)}
+      className={combineClasses('sfAnimationSpeed', className)}
       {...rest}
@@ -63,3 +61,3 @@ >
     <div
-      className={combineClasses(styles.AnimationEasing, className)}
+      className={combineClasses('sfAnimationEasing', className)}
       {...rest}
@@ -66,0 +64,0 @@ >

src/docs/Color.jsx

@@ -6,4 +6,2 @@ import React from 'react';
 
-import styles from './Color.module.scss';
-
 export default function Palette({
@@ -18,4 +16,4 @@ name,
   return (
-    <div className={combineClasses(styles.Palette, className)}>
-      <h3 className={styles.paletteTitle}>{ name }</h3>
+    <div className={combineClasses('sfPalette', className)}>
+      <h3 className={'paletteTitle'}>{ name }</h3>
       <ul
@@ -28,3 +26,3 @@ className={combineClasses(name.toLowerCase(), 'color-palette')}
             key={hue}
-            className={combineClasses(`hue-${hue}`, styles.color, 'color')}
+            className={combineClasses(`hue-${hue}`, 'color')}
           >
@@ -77,3 +75,3 @@ { hue }
   return (
-    <Palette className={styles.ForegroundPalette} hues={hues} {...rest} />
+    <Palette className={'sfForegroundPalette'} hues={hues} {...rest} />
   );
@@ -103,3 +101,3 @@ }
     <Palette
-      className={combineClasses(styles.BackgroundPalette, className)}
+      className={combineClasses('sfBackgroundPalette', className)}
       hues={hues}
@@ -125,3 +123,3 @@ {...rest}
     <Palette
-      className={combineClasses(styles.ShadowsPalette, className)}
+      className={combineClasses('sfShadowsPalette', className)}
       hues={hues}
@@ -145,3 +143,3 @@ {...rest}
     <Palette
-      className={combineClasses(styles.GradientsPalette, className)}
+      className={combineClasses('sfGradientsPalette', className)}
       hues={hues}
@@ -148,0 +146,0 @@ {...rest}

src/docs/Example.jsx

@@ -6,7 +6,5 @@ import React from 'react';
 
-import styles from './Example.module.scss';
-
 export function RowOfItems(s) {
   return (
-    <div style={styles} className={styles.RowOfItems}>
+    <div className={'sfRowOfItems'}>
       { s() }
@@ -19,3 +17,3 @@ </div>
   return (
-    <div className={styles.ColumnOfItems}>
+    <div className={'sfColumnOfItems'}>
       { s() }
@@ -45,4 +43,3 @@ </div>
       className,
-      dark ? styles.dark : null,
-      dark ? 'dark' : null,
+      dark ? 'sfDark' : null,
     )}
@@ -69,5 +66,5 @@ {...rest}
     className={combineClasses(
-      styles.LightTheme,
+      'sfLightTheme',
       className,
-      column ? styles.ColumnOfItems : null,
+      column ? 'sfColumnOfItems' : null,
     )}
@@ -98,3 +95,3 @@ {...rest}
     ref={ref}
-    className={combineClasses(styles.ColumnOfItems, className)}
+    className={combineClasses('sfColumnOfItems', className)}
     {...rest}
@@ -113,3 +110,3 @@ />
     ref={ref}
-    className={combineClasses(styles.RowOfItems, className)}
+    className={combineClasses('sfRowOfItems', className)}
     {...rest}
@@ -128,3 +125,3 @@ />
     ref={ref}
-    className={combineClasses(styles.Centered, className)}
+    className={combineClasses('sfCentered', className)}
     {...rest}
@@ -131,0 +128,0 @@ />

src/docs/Font.jsx

@@ -5,4 +5,2 @@ import React from 'react';
 
-import styles from './Font.module.scss';
-
 export const defaultFamilies = ['Title', 'Body', 'Code'];
@@ -16,3 +14,3 @@ export const defaultWeights = ['Normal', 'Medium', 'Bold'];
   return (
-    <div className={combineClasses('lorem', className)} {...rest}>
+    <div className={combineClasses('sfLorem', className)} {...rest}>
       The quick brown fox jumps over the lazy dog.
@@ -35,7 +33,7 @@ </div>
   return (
-    <div className={combineClasses(styles.Font, className)} {...rest}>
-      <h3 className="font-name">{ children }</h3>
+    <div className={combineClasses('sfFont', className)} {...rest}>
+      <h3 className="sfFontName">{ children }</h3>
       { sizes.reverse().map(s => (
         <Lorem
-          className={`font-size-${s} ${styles.fontSize}`}
+          className={`font-size-${s}`}
           key={s}
@@ -57,3 +55,3 @@ />
     <div
-      className={combineClasses(styles.FontFamilies, className)}
+      className={combineClasses('sfFontFamilies', className)}
       {...rest}
@@ -65,3 +63,3 @@ >
             `font-${f.toLowerCase()}`,
-            styles.Font,
+            'sfFont',
           )}
@@ -71,3 +69,3 @@ >
           <Lorem
-            className={`font-size-xl ${styles.fontSize}`}
+            className={`font-size-xl`}
           />
@@ -87,3 +85,3 @@ </div>
     <div
-      className={combineClasses(styles.FontFamilies, className)}
+      className={combineClasses('sfFontFamilies', className)}
       {...rest}
@@ -105,3 +103,3 @@ >
     <div
-      className={combineClasses(styles.FontWeight, className)}
+      className={combineClasses('sfFontWeight', className)}
       {...rest}
@@ -114,3 +112,3 @@ >
           className={combineClasses(
-            styles.fontWeightLorem,
+            'sfFontWeightLorem',
             `font-${f.toLowerCase()}`,
@@ -132,3 +130,3 @@ 'show-family-name',
   return (
-    <div className={combineClasses(styles.FontWeights, className)} {...rest}>
+    <div className={combineClasses('sfFontWeights', className)} {...rest}>
       { weights.map(w => (
@@ -135,0 +133,0 @@ <FontWeight

src/docs/Size.jsx

 import React from 'react';
-// import PropTypes from 'prop-types';
 
 import { combineClasses } from '@thesoulfresh/utils';
 
-import styles from './Size.module.scss';
-
 export default function Size({
@@ -14,5 +11,5 @@ name,
   return (
-    <div className={combineClasses(styles.Size, className)} {...rest}>
-      <div className={styles.name}>{ name }</div>
-      <div className="measurement"></div>
+    <div className={combineClasses('sfSize', className)} {...rest}>
+      <div className={'name'}>{ name }</div>
+      <div className="sfMeasurement"></div>
     </div>
@@ -32,3 +29,3 @@ );
   return (
-    <div className={combineClasses(styles.Sizes, className)} {...rest}>
+    <div className={combineClasses('sfSizes', className)} {...rest}>
       { sizes.map(s =>
@@ -51,3 +48,3 @@ <Size key={s} name={s} className={`size-${s}`} />
   return (
-    <div className={combineClasses(styles.Sizes, className)} {...rest}>
+    <div className={combineClasses('sfSizes', className)} {...rest}>
       { sizes.map(s =>
@@ -69,3 +66,3 @@ <Size key={s} name={s} className={`breakpoint-${s}`} />
   return (
-    <div className={combineClasses(styles.Radius, className)} {...rest}>
+    <div className={combineClasses('sfRadius', className)} {...rest}>
       { size }
@@ -86,3 +83,3 @@ </div>
   return (
-    <div className={combineClasses(styles.Radii, className)} {...rest}>
+    <div className={combineClasses('sfRadii', className)} {...rest}>
       { sizes.map(s => (
@@ -89,0 +86,0 @@ <Radius key={s} size={s} className={`radius-${s}`} />

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

675964

decreased by-0.42%

Dev dependency count

22

increased by15.79%

Number of package files

56

decreased by-1.75%

Lines of code

498

decreased by-0.6%

No dependency changes