hibiscss - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

default.js

 const r = require('ramda');
 const rule = require('./lib').rule;
 
+const toCamelCase = str => str.replace(/[-_]([a-z])/g, m => m[1].toUpperCase());
+
 const breakpoints = {
@@ -11,17 +13,4 @@ s: '479px',
 const defaults = {
-  colors: {
-    black: '#000',
-    midGray: '#555',
-    moonGray: '#ccc',
-    yellow: '#ffff00',
-    navy: '#001B44',
-  },
-  sizes: {
-    '1': '1rem',
-    '2': '2rem',
-    '3': '3rem',
-    '4': '4rem',
-    '5': '5rem',
-    '100%': '100%',
-  },
+  colors: {},
+  borderRadius: {},
   fontFamily: {
@@ -32,15 +21,21 @@ sans: `-apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, 'Segoe UI', Arial, sans-serif`,
   fontSize: {
-    '13': '13px',
-    '15': '15px',
-    '18': '18px',
-    '22': '22px',
-    '27': '27px',
-    '33': '33px',
+    12: '12px',
+    14: '14px',
+    16: '16px',
+    20: '20px',
+    36: '36px',
+    48: '48px',
+    80: '80px',
+    96: '96px',
   },
   fontWeight: {
-    'normal': 'normal',
-    'bold': 'bold',
+    normal: 'normal',
+    bold: 'bold',
   },
-  letterSpacing: { '1': '1px' },
-  lineHeight: { '1.2': 1.2, '1.6': 1.6 },
+  letterSpacing: {},
+  lineHeight: {
+    '1.0': 1.0,
+    '1.25': 1.25,
+    '1.5': 1.5,
+  },
   opacity: {
@@ -54,59 +49,36 @@ '0%': 0.0,
   maxWidths: [],
+  sizes: {},
   spacing: [0, 4, 8, 16, 32, 64, 128],
+  verboseClassNames: false,
 };
 
-const verboseKeyNames = {
-  d: 'display',
-  ma: 'margin',
-  mt: 'marginTop',
-  ml: 'marginLeft',
-  mr: 'marginRight',
-  mb: 'marginBottom',
-  mh: 'marginHorizontal',
-  mv: 'marginVertical',
-  pa: 'padding',
-  pt: 'paddingTop',
-  pl: 'paddingLeft',
-  pr: 'paddingRight',
-  pb: 'paddingBottom',
-  ph: 'paddingHorizontal',
-  pv: 'paddingVertical',
-  x: 'flex',
-  xa: 'flexAlign',
-  xd: 'flexDirection',
-  xj: 'flexJustify',
-  xo: 'flexOrder',
-  xw: 'flexWrap',
-  o: 'opacity',
-  of: 'overflow',
-  bgc: 'backgroundColor',
-  bgp: 'backgroundPosition',
-  bgs: 'backgroundSize',
-  bgr: 'backgroundRepeat',
-  p: 'position',
-  z: 'zIndex',
-  w: 'width',
-  h: 'height',
-  c: 'color',
-  ff: 'fontFamily',
-  fs: 'fontSize',
-  fw: 'fontWeight',
-  lh: 'lineHeight',
-  ls: 'letterSpacing',
-  ta: 'textAlign',
-  td: 'textDecoration',
-  tt: 'textTransform',
-  to: 'textOverflow',
-  pe: 'pointerEvents',
-  us: 'userSelect',
-};
+const verboseKeys = new Map();
 
-const getRules = (opts) => {
+const marginHorizontalProperties = ['margin-left', 'margin-right'];
+const marginVerticalProperties = ['margin-top', 'margin-bottom'];
+const paddingHorizontalProperties = ['padding-left', 'padding-right'];
+const paddingVerticalProperties = ['padding-top', 'padding-bottom'];
+
+verboseKeys.set(marginHorizontalProperties, 'marginHorizontal');
+verboseKeys.set(marginVerticalProperties, 'marginVertical');
+verboseKeys.set(paddingHorizontalProperties, 'paddingHorizontal');
+verboseKeys.set(paddingVerticalProperties, 'paddingVertical');
+
+verboseKeys.set('align-items', 'flexAlign');
+verboseKeys.set('justify-content', 'flexJustify');
+verboseKeys.set('order', 'flexOrder');
+
+const getConciseKey = key => key;
+const getVerboseKey = (_, properties) =>
+  verboseKeys.has(properties)
+    ? verboseKeys.get(properties)
+    : toCamelCase(properties);
+
+function getRules (opts) {
   const config = r.merge(defaults, opts);
   const { verboseClasses } = config;
 
-  const getKey = verboseClasses
-    ? key => verboseKeyNames[key] ? verboseKeyNames[key] : key
-    : key => key;
-  const getRule = (key, properties, values, options) => rule(getKey(key), properties, values, options);
+  const getKey = verboseClasses ? getVerboseKey : getConciseKey;
+  const getRule = (key, properties, values, options) =>
+    rule(getKey(key, properties), properties, values, options);
 
@@ -123,2 +95,4 @@ return r.flatten([
 
+    getRule('br', 'border-radius', config.borderRadius),
+
     position(),
@@ -146,9 +120,9 @@ flex(),
       getRule('mb', 'margin-bottom', values, withUnit),
-      getRule('mh', ['margin-left', 'margin-right'], values, withUnit),
-      getRule('mv', ['margin-top', 'margin-bottom'], values, withUnit),
+      getRule('mh', marginHorizontalProperties, values, withUnit),
+      getRule('mv', marginVerticalProperties, values, withUnit),
 
       getRule('ml', 'margin-left', { auto: 'auto' }, withResponsive),
       getRule('mr', 'margin-right', { auto: 'auto' }, withResponsive),
-      getRule('mh', ['margin-left', 'margin-right'], { auto: 'auto' }, withResponsive),
-      getRule('mv', ['margin-top', 'margin-bottom'], { auto: 'auto' }, withResponsive),
+      getRule('mh', marginHorizontalProperties, { auto: 'auto' }, withResponsive),
+      getRule('mv', marginVerticalProperties, { auto: 'auto' }, withResponsive),
 
@@ -160,4 +134,4 @@ getRule('pa', 'padding', values, withUnit),
       getRule('pb', 'padding-bottom', values, withUnit),
-      getRule('ph', ['padding-left', 'padding-right'], values, withUnit),
-      getRule('pv', ['padding-top', 'padding-bottom'], values, withUnit),
+      getRule('ph', paddingHorizontalProperties, values, withUnit),
+      getRule('pv', paddingVerticalProperties, values, withUnit),
     ];
@@ -217,5 +191,5 @@ }
   }
-};
+}
 
 module.exports = getRules;
 module.exports.breakpoints = breakpoints;

examples/basic.js

@@ -11,3 +11,3 @@ const hibiscss = require('..').default;
   fontFamily: {
-    sans: 'Calibre, sans-serif',
+    sans: 'Work Sans, sans-serif',
   },
@@ -14,0 +14,0 @@ }), kit.breakpoints);

package.json

 {
   "name": "hibiscss",
   "description": "Tool for making functional css stylesheets",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "main": "lib/index.js",
@@ -31,3 +31,2 @@ "scripts": {
     "tachyons.js",
-    "README.md",
     "examples",
@@ -34,0 +33,0 @@ "lib",

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

57323

decreased by-0.61%

Lines of code

740

decreased by-4.15%

Number of lines in readme file

200

decreased by-9.5%

No dependency changes