opdavies/inviqa-tailwindcss-example
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

refactor: extract plugins into separate files

Browse source
This commit is contained in:
Oliver Davies 2022-09-09 18:00:00 +01:00
parent a2672313f0
commit 317e1c10b7
3 changed files with 84 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
plugins/flex-basis-plugin.js Normal file
View file

@ -0,0 +1,11 @@
let plugin = require("tailwindcss/plugin");
let flexBasisPlugin = plugin(function ({ addBase, addUtilities }) {
let values = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
values.forEach((value) => {
addUtilities({ [`.flex-basis-${value}`]: { flexBasis: `${value}%` } });
});
});
module.exports = flexBasisPlugin;

71
plugins/multi-theme-plugin.js Normal file
View file

@ -0,0 +1,71 @@
let plugin = require("tailwindcss/plugin");
let colors = {
black: "#333333",
blue: "#334982",
grey: "#f3f3f3",
orange: "#fdb913",
pink: "#e40087",
purple: "#782b8f",
red: "#dd372f",
teal: "#00857d",
white: "#fff",
};
let themes = {
blue: {
quaternary: colors.red,
quinary: colors.red,
primary: colors.blue,
secondary: colors.red,
tertiary: colors.white,
},
purple: {
quaternary: colors.white,
quinary: colors.purple,
primary: colors.purple,
secondary: colors.orange,
tertiary: colors.purple,
},
teal: {
quaternary: colors.pink,
quinary: colors.pink,
primary: colors.teal,
secondary: colors.pink,
tertiary: colors.white,
},
};
let multiThemePlugin = plugin(function ({ addBase }) {
addBase(generateForRoot());
Object.keys(themes).forEach((themeName) => {
addBase(generateForTheme(themeName));
});
});
function generateForRoot() {
let defaultThemeName = Object.keys(themes)[0];
return Object.entries(themes[defaultThemeName]).map(([colourName, value]) => {
return {
":root": {
[`--color-${colourName}`]: value,
},
};
});
}
function generateForTheme(themeName) {
return Object.entries(themes[themeName]).map(([colourName, value]) => {
return {
[`[data-theme=${themeName}]`]: {
[`--color-${colourName}`]: value,
},
};
});
}
module.exports = multiThemePlugin;

67
tailwind.config.js
View file

@ -1,4 +1,5 @@
let plugin = require("tailwindcss/plugin");
let flexBasisPlugin = require("./plugins/flex-basis-plugin");
let multiThemePlugin = require("./plugins/multi-theme-plugin");
let colors = {
black: "#333333",
@ -12,70 +13,6 @@ let colors = {
white: "#fff",
};
let themes = {
blue: {
quaternary: colors.red,
quinary: colors.red,
primary: colors.blue,
secondary: colors.red,
tertiary: colors.white,
},
purple: {
quaternary: colors.white,
quinary: colors.purple,
primary: colors.purple,
secondary: colors.orange,
tertiary: colors.purple,
},
teal: {
quaternary: colors.pink,
quinary: colors.pink,
primary: colors.teal,
secondary: colors.pink,
tertiary: colors.white,
},
};
let multiThemePlugin = plugin(function ({ addBase }) {
addBase(generateForRoot());
Object.keys(themes).forEach((themeName) => {
addBase(generateForTheme(themeName));
});
});
function generateForRoot() {
let defaultThemeName = Object.keys(themes)[0];
return Object.entries(themes[defaultThemeName]).map(([colourName, value]) => {
return {
":root": {
[`--color-${colourName}`]: value,
},
};
});
}
function generateForTheme(themeName) {
return Object.entries(themes[themeName]).map(([colourName, value]) => {
return {
[`[data-theme=${themeName}]`]: {
[`--color-${colourName}`]: value,
},
};
});
}
let flexBasisPlugin = plugin(function ({ addBase, addUtilities }) {
let values = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
values.forEach((value) => {
addUtilities({ [`.flex-basis-${value}`]: { flexBasis: `${value}%` } });
});
});
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [