Refactor on styled-system

components/lib/props/style/index.js

@@ -7,15 +7,15 @@ export const getDeclaration = (property, value) => {
         .join('');
 };
 
+const importantRegex = /.*!$/;
+
 export const token = {
     spacing: (property, options) => {
         return {
             type: 'spacing',
             property,
             transform(value) {
-                console.log(this.key);
-
-                return value;
+                return importantRegex.test(value) ? value + 'important' : value;
             },
             toString(value, options) {
                 return getDeclaration(property, this.transform(value));
@@ -36,22 +36,28 @@ export const token = {
     }
 };
 
-export const createRules = (rules = {}) => {
-    return Object.entries(rules).reduce((acc, [key, value]) => ((acc[key] = { key, ...value }), acc), {});
+export const defineDeclarations = (data = {}) => {
+    return Object.entries(data).reduce((acc, [key, value]) => ((acc[key] = { key, ...value }), acc), {});
 };
 
-export const createStyleData = (rules = {}) => {
-    const keys = Object.keys(rules);
+export const useDeclarations = (...args) => {
+    const declarations = Object.assign({}, ...args);
+    const keys = Object.keys(declarations);
     const props = keys.reduce((acc, k) => ((acc[k] = undefined), acc), {});
 
     return {
-        rules,
         keys,
         props,
-        toString(obj) {
-            return Object.entries(obj)
+        declarations,
+        getStyleDeclarations(options) {},
+        filterP(_props) {
+            const __props = Object.entries(_props)
                 .filter(([key]) => keys.includes(key))
-                .reduce((acc, [key, value]) => {
+                .reduce((acc, [k, v]) => ((acc[k] = v), acc), {});
+            const __ks = Object.keys(__props);
+            const __declarations = Object.entries(__props).reduce((acc, [key]) => ((acc[key] = declarations[key]), acc), {});
+
+            /*const declarations = props.reduce((acc, [key, value]) => {
                     if (ObjectUtils.isNotEmpty(value)) {
                         const rule = ObjectUtils.toKebabCase(key);
 
@@ -60,7 +66,26 @@ export const createStyleData = (rules = {}) => {
 
                     return acc;
                 }, [])
+                .join('');*/
+
+            return {
+                keys: __ks,
+                props: __props,
+                declarations: __declarations,
+                getStyleDeclarations(options) {
+                    return Object.entries(__declarations)
+                        .reduce((acc, [, value]) => {
+                            const { key, toString } = value;
+
+                            const v = __props[key];
+
+                            ObjectUtils.isNotEmpty(v) && acc.push(value.toString(v, options));
+
+                            return acc;
+                        }, [])
                         .join('');
                 }
             };
+        }
+    };
 };

components/lib/props/style/padding/index.js

@@ -1,3 +1,4 @@
+import { defineDeclarations, token } from '..';
 import x from './modules/x';
 import y from './modules/y';
 import bottom from './properties/bottom';
@@ -6,6 +7,10 @@ import right from './properties/right';
 import top from './properties/top';
 
 export default {
+    ...defineDeclarations({
+        padding: token.spacing('padding'),
+        p: token.spacing('padding')
+    }),
     // properties
     ...bottom,
     ...left,
@@ -16,33 +21,3 @@ export default {
     ...x,
     ...y
 };
-
-/* const { styleClass } = require('../../utils');
-const bottom = require('./properties/bottom');
-const left = require('./properties/left');
-const right = require('./properties/right');
-const top = require('./properties/top');
-const x = require('./modules/x');
-const y = require('./modules/y');
-
-module.exports = (root, opts) => {
-    const scales = opts.spacing;
-    let paddings = {};
-
-    for (const i in scales) {
-        paddings['p-' + i] = scales[i] + 'rem';
-    }
-
-    styleClass('padding', paddings, root, opts, true);
-
-    // properties
-    bottom(root, opts);
-    left(root, opts);
-    right(root, opts);
-    top(root, opts);
-
-    // modules
-    x(root, opts);
-    y(root, opts);
-};
- */

components/lib/props/style/padding/modules/x.js

@@ -1,20 +1,6 @@
-import { createRules, token } from '../..';
+import { defineDeclarations, token } from '../..';
 
-export default createRules({
+export default defineDeclarations({
     paddingX: token.spacing(['paddingLeft', 'paddingRight']),
     px: token.spacing(['paddingLeft', 'paddingRight'])
 });
-
-/* const { styleClass } = require('../../../utils');
-
-module.exports = (root, opts) => {
-    const scales = opts.spacing;
-    let xPaddings = {};
-
-    for (const i in scales) {
-        xPaddings['px-' + i] = scales[i] + 'rem';
-    }
-
-    styleClass(['padding-left', 'padding-right'], xPaddings, root, opts, true);
-};
- */

components/lib/props/style/padding/modules/y.js

@@ -1,20 +1,6 @@
-import { createRules, token } from '../..';
+import { defineDeclarations, token } from '../..';
 
-export default createRules({
+export default defineDeclarations({
     paddingX: token.spacing(['paddingTop', 'paddingBottom']),
     px: token.spacing(['paddingTop', 'paddingBottom'])
 });
-
-/* const { styleClass } = require('../../../utils');
-
-module.exports = (root, opts) => {
-    const scales = opts.spacing;
-    let yPaddings = {};
-
-    for (const i in scales) {
-        yPaddings['py-' + i] = scales[i] + 'rem';
-    }
-
-    styleClass(['padding-top', 'padding-bottom'], yPaddings, root, opts, true);
-};
- */

components/lib/props/style/padding/properties/bottom.js

@@ -1,20 +1,6 @@
-import { createRules, token } from '../..';
+import { defineDeclarations, token } from '../..';
 
-export default createRules({
+export default defineDeclarations({
     paddingBottom: token.spacing('paddingBottom'),
     pb: token.spacing('paddingBottom')
 });
-
-/* const { styleClass } = require('../../../utils');
-
-module.exports = (root, opts) => {
-    const scales = opts.spacing;
-    let bottomPaddings = {};
-
-    for (const i in scales) {
-        bottomPaddings['pb-' + i] = `${scales[i]}rem`;
-    }
-
-    styleClass('padding-bottom', bottomPaddings, root, opts, true);
-};
- */

components/lib/props/style/padding/properties/left.js

@@ -1,20 +1,6 @@
-import { createRules, token } from '../..';
+import { defineDeclarations, token } from '../..';
 
-export default createRules({
+export default defineDeclarations({
     paddingLeft: token.spacing('paddingLeft'),
     pl: token.spacing('paddingLeft')
 });
-
-/* const { styleClass } = require('../../../utils');
-
-module.exports = (root, opts) => {
-    const scales = opts.spacing;
-    let leftPaddings = {};
-
-    for (const i in scales) {
-        leftPaddings['pl-' + i] = `${scales[i]}rem`;
-    }
-
-    styleClass('padding-left', leftPaddings, root, opts, true);
-};
- */

components/lib/props/style/padding/properties/right.js

@@ -1,20 +1,6 @@
-import { createRules, token } from '../..';
+import { defineDeclarations, token } from '../..';
 
-export default createRules({
+export default defineDeclarations({
     paddingRight: token.spacing('paddingRight'),
     pr: token.spacing('paddingRight')
 });
-
-/* const { styleClass } = require('../../../utils');
-
-module.exports = (root, opts) => {
-    const scales = opts.spacing;
-    let rightPaddings = {};
-
-    for (const i in scales) {
-        rightPaddings['pr-' + i] = `${scales[i]}rem`;
-    }
-
-    styleClass('padding-right', rightPaddings, root, opts, true);
-};
- */

components/lib/props/style/padding/properties/top.js

@@ -1,20 +1,6 @@
-import { createRules, token } from '../..';
+import { defineDeclarations, token } from '../..';
 
-export default createRules({
+export default defineDeclarations({
     paddingTop: token.spacing('paddingTop'),
     pt: token.spacing('paddingTop')
 });
-
-/* const { styleClass } = require('../../../utils');
-
-module.exports = (root, opts) => {
-    const scales = opts.spacing;
-    let topPaddings = {};
-
-    for (const i in scales) {
-        topPaddings['pt-' + i] = `${scales[i]}rem`;
-    }
-
-    styleClass('padding-top', topPaddings, root, opts, true);
-};
- */

components/lib/text/BaseText.vue

@@ -1,10 +1,10 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
 import TextStyle from 'primevue/text/style';
-import { createStyleData } from '../props/style';
+import { useDeclarations } from '../props/style';
 import SPACING from '../props/style/spacing.js';
 
-export const styleData = createStyleData(SPACING);
+export const styleData = useDeclarations(SPACING);
 
 export default {
     name: 'BaseText',

components/lib/text/Text.vue

@@ -41,7 +41,7 @@ export default {
     },
     computed: {
         styles() {
-            return styleData.toString(this.$props);
+            return styleData.filterP(this.$props).getStyleDeclarations(this.$config.theme);
         }
     }
 };

doc/panel/BasicDoc.vue

@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card">
         <Panel header="Header">
-            <Text px="0">
+            <Text px="0!" p="1px">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
             </Text>