Skip to content

Commit

Permalink
fix: fixed important flag in helpers
Browse files Browse the repository at this point in the history
  • Loading branch information
@jmjuanes
jmjuanes committed Aug 14, 2022
1 parent 157dda8 commit ed768f9
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 11 deletions.
32 changes: 23 additions & 9 deletions packages/modules/helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,6 @@ export const helpers = {
shortcut: "size",
properties: ["fontSize"],
states: ["default"],
responsive: false,
scale: "fontSizes",
}),
// Font weights
Expand All @@ -76,7 +75,6 @@ export const helpers = {
shortcut: "lh",
properties: ["lineHeight"],
states: ["default"],
responsive: false,
values: {
none: "1",
tight: "1.25",
Expand All @@ -91,6 +89,7 @@ export const helpers = {
properties: ["width"],
states: ["default"],
responsive: true,
important: true,
scale: "sizes",
values: {
...sizesValues,
Expand All @@ -103,6 +102,7 @@ export const helpers = {
properties: ["height"],
states: ["default"],
responsive: true,
important: true,
scale: "sizes",
values: {
...sizesValues,
Expand Down Expand Up @@ -131,6 +131,7 @@ export const helpers = {
properties: ["padding"],
states: ["default"],
responsive: true,
important: true,
scale: "space",
values: sizesValues,
}),
Expand All @@ -140,6 +141,7 @@ export const helpers = {
properties: ["padding-top"],
states: ["default"],
responsive: true,
important: true,
scale: "space",
values: sizesValues,
}),
Expand All @@ -149,6 +151,7 @@ export const helpers = {
properties: ["padding-bottom"],
states: ["default"],
responsive: true,
important: true,
scale: "space",
values: sizesValues,
}),
Expand All @@ -158,6 +161,7 @@ export const helpers = {
properties: ["padding-left"],
states: ["default"],
responsive: true,
important: true,
scale: "space",
values: sizesValues,
}),
Expand All @@ -167,6 +171,7 @@ export const helpers = {
properties: ["padding-right"],
states: ["default"],
responsive: true,
important: true,
scale: "space",
values: sizesValues,
}),
Expand All @@ -176,6 +181,7 @@ export const helpers = {
properties: ["margin"],
states: ["default"],
responsive: true,
important: true,
scale: "space",
values: sizesValues,
}),
Expand All @@ -185,6 +191,7 @@ export const helpers = {
properties: ["margin-top"],
states: ["default"],
responsive: true,
important: true,
scale: "space",
values: sizesValues,
}),
Expand All @@ -194,6 +201,7 @@ export const helpers = {
properties: ["margin-bottom"],
states: ["default"],
responsive: true,
important: true,
scale: "space",
values: sizesValues,
}),
Expand All @@ -203,6 +211,7 @@ export const helpers = {
properties: ["margin-left"],
states: ["default"],
responsive: true,
important: true,
scale: "space",
values: sizesValues,
}),
Expand All @@ -212,6 +221,7 @@ export const helpers = {
properties: ["margin-right"],
states: ["default"],
responsive: true,
important: true,
scale: "space",
values: sizesValues,
}),
Expand Down Expand Up @@ -372,8 +382,8 @@ export const helpers = {
properties: ["cursor"],
important: true,
values: {
"clickable": ["pointer", "!important"],
"not-allowed": ["not-allowed", "!important"],
"clickable": "pointer",
"not-allowed": "not-allowed",
},
}),
// Display
Expand Down Expand Up @@ -407,17 +417,19 @@ export const helpers = {
prefix: "is",
states: ["default"],
responsive: true,
important: true,
properties: ["overflow"],
values: {
"clipped": ["hidden", "!important"],
"scrollable": ["auto", "!important"],
"clipped": "hidden",
"scrollable": "auto",
},
}),
// Shadow helpers
shadow: createHelper({
prefix: "is",
states: ["default"],
responsive: false,
// important: true,
properties: ["boxShadow"],
values: {
"shadowed": "0 0.5rem 1rem -0.25rem rgba(54,63,79,0.2), 0 0 0 1px rgba(54,63,79,0.02)",
Expand All @@ -429,6 +441,7 @@ export const helpers = {
prefix: "is",
states: ["default"],
responsive: false,
// important: true,
properties: ["radius"],
values: {
"rounded": "0.5rem",
Expand Down Expand Up @@ -489,18 +502,19 @@ export const helpers = {
responsive: false,
properties: ["opacity"],
values: {
"semitransparent": ["0.5", "!important"],
"transparent": ["0", "!important"],
"semitransparent": "0.5",
"transparent": "0",
},
}),
// Text selection
textSelection: createHelper({
prefix: "is",
states: ["default"],
responsive: false,
important: true,
properties: ["userSelect"],
values: {
"unselectable": ["none", "!important"],
"unselectable": "none",
},
}),
};
14 changes: 12 additions & 2 deletions packages/modules/utils.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,16 @@
// Generate values
const buildValue = (v, isImportant) => {
let value = [v].flat(1);
if (isImportant && value[value.length - 1] !== "!important") {
value.push("!important");
}
return value;
};

// Helpers generator
export const createHelper = helpers => {
return [helpers].flat().reduce((styles, item) => {
const isImportant = !!item.important;
const prefix = [item.prefix, item.shortcut].filter(n => !!n).join("-");
// Themeable helpers
if (item.scale) {
Expand All @@ -11,7 +21,7 @@ export const createHelper = helpers => {
const themeStyles = {
[`@theme ${item.scale}${excludedFields}`]: {
"&": Object.fromEntries(item.properties.map(name => {
return [name, "value"];
return [name, buildValue("value", isImportant)];
})),
},
};
Expand All @@ -36,7 +46,7 @@ export const createHelper = helpers => {
if (item.values) {
Object.keys(item.values).map(name => {
const valueStyles = Object.fromEntries(item.properties.map(property => {
return [property, item.values[name]];
return [property, buildValue(item.values[name], isImportant)];
}));
// Generate states
item.states.forEach(state => {
Expand Down

0 comments on commit ed768f9

Please sign in to comment.