LukeParke/skeleton
1
0
Fork 0
mirror of https://github.com/LukeHagar/skeleton.git synced 2025-12-10 12:47:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

our main plugin now returns a single function that allows options

Browse Source
This commit is contained in:
AdrianGonz97
2023-01-19 19:02:10 -05:00
parent feef0bcdac
commit b2ee0b88bb
3 changed files with 51 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scripts/compile-css-to-js.cjs
View File

@@ -11,7 +11,7 @@ async function transpileCssToJs() {
const twConfig = { const twConfig = {
darkMode: 'class', darkMode: 'class',
content: ['./src/**/*.{html,js,svelte,ts}'], content: ['./src/**/*.{html,js,svelte,ts}'],
plugins: [require('../src/lib/tailwind/skeleton.cjs')] plugins: [require('../src/lib/tailwind/core.cjs')]
}; };
const css = fs.readFileSync(cssEntryPath, 'utf8'); const css = fs.readFileSync(cssEntryPath, 'utf8');

37
src/lib/tailwind/core.cjs Normal file
View File

@@ -0,0 +1,37 @@
// The Skeleton Tailwind Plugin
// Tailwind Docs: https://tailwindcss.com/docs/plugins
// Skeleton Docs: https://www.skeleton.dev/guides/tailwind
const plugin = require('tailwindcss/plugin');
// Skeleton Theme Modules
const themeColors = require('./theme/colors.cjs');
// Skeleton Design Token Modules
const tokensBackgrounds = require('./tokens/backgrounds.cjs');
const tokensBorders = require('./tokens/borders.cjs');
const tokensBorderRadius = require('./tokens/border-radius.cjs');
const tokensFills = require('./tokens/fills.cjs');
const tokensText = require('./tokens/text.cjs');
const tokensRings = require('./tokens/rings.cjs');
module.exports = plugin(
({ addUtilities }) => {
addUtilities({
// Implement Skeleton design token classes
...tokensBackgrounds(),
...tokensBorders(),
...tokensBorderRadius(),
...tokensFills(),
...tokensText(),
...tokensRings()
});
},
{
theme: {
extend: {
// Implement Skeleton theme colors
colors: themeColors()
}
}
}
);

44
src/lib/tailwind/skeleton.cjs
View File

@@ -2,36 +2,18 @@
// Tailwind Docs: https://tailwindcss.com/docs/plugins // Tailwind Docs: https://tailwindcss.com/docs/plugins
// Skeleton Docs: https://www.skeleton.dev/guides/tailwind // Skeleton Docs: https://www.skeleton.dev/guides/tailwind
const plugin = require('tailwindcss/plugin'); const intellisensePlugin = require('./intellisense.cjs');
const corePlugin = require('./core.cjs');
// Skeleton Theme Modules // The default export is a function that returns an array of plugins
const themeColors = require('./theme/colors.cjs'); // and accepts an optional config that determines which plugins are included.
// Skeleton Design Token Modules // By default, all plugins are included.
const tokensBackgrounds = require('./tokens/backgrounds.cjs'); module.exports = function (config = { intellisense: true }) {
const tokensBorders = require('./tokens/borders.cjs'); const { intellisense } = config;
const tokensBorderRadius = require('./tokens/border-radius.cjs'); const plugins = [corePlugin];
const tokensFills = require('./tokens/fills.cjs');
const tokensText = require('./tokens/text.cjs');
const tokensRings = require('./tokens/rings.cjs');
module.exports = plugin( // Add the plugin if the option is not explicitly set to false
({ addUtilities }) => { if (intellisense !== false) plugins.push(intellisensePlugin);
addUtilities({
// Implement Skeleton design token classes return plugins;
...tokensBackgrounds(), };
...tokensBorders(),
...tokensBorderRadius(),
...tokensFills(),
...tokensText(),
...tokensRings()
});
},
{
theme: {
extend: {
// Implement Skeleton theme colors
colors: themeColors()
}
}
}
);