├── LICENSE ├── README.md ├── __info.js └── __run.js /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Manuel Serret 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

📗 Add Bulma to Svelte

2 | 3 | [![GitHub issues by-label](https://img.shields.io/github/issues/svelte-add/svelte-add/confirmed%20bug?color=%23DC2626)](https://github.com/svelte-add/svelte-add/issues?q=is%3Aopen+is%3Aissue+label%3A%22confirmed+bug%22) 4 | [![GitHub issues by-label](https://img.shields.io/github/issues/svelte-add/svelte-add/support%20question?color=%23FACC15)](https://github.com/svelte-add/svelte-add/issues?q=is%3Aopen+is%3Aissue+label%3A%22support+question%22) 5 | 6 | This is an adder for `svelte-add`; you should [read its `README`](https://github.com/svelte-add/svelte-add#readme) before continuing here. 7 | 8 | ## ➕ Adding Bulma 9 | 10 | This adder's codename is `bulma`, and can be used like so: 11 | 12 | ```sh 13 | npx svelte-add@latest bulma 14 | ``` 15 | 16 | ### 🏞 Supported environments 17 | 18 | This adder supports SvelteKit and Vite-powered Svelte apps (all the environments `svelte-add` currently supports). 19 | 20 | ### ⚙️ Options 21 | 22 | This adder doesn't take any options of its own. 23 | 24 | ## 🛠 Using Bulma 25 | 26 | After the adder runs, 27 | 28 | - You can use Bulma classes like `is-primary` or `mb-3` in the markup (components, routes, `app.html`). 29 | 30 | - You can [customize your Bulma theme with variables](https://bulma.io/documentation/customize/variables/) like `$success` or `$body-background-color` in `src/variables.scss`. 31 | -------------------------------------------------------------------------------- /__info.js: -------------------------------------------------------------------------------- 1 | import { extension } from "../scss/stuff.js"; 2 | 3 | export const name = "Bulma"; 4 | 5 | export const emoji = "📗"; 6 | 7 | export const usageMarkdown = ["You can use Bulma classes like `is-primary` or `mb-3` in the markup (components, routes, `app.html`).", "You can [customize your Bulma theme with variables](https://bulma.io/documentation/customize/variables/) like `$success` or `$body-background-color` in `src/variables.scss`."]; 8 | 9 | /** @type {import("../..").Gatekeep} */ 10 | export const gatekeep = async () => { 11 | return { able: true }; 12 | }; 13 | 14 | /** @typedef {{}} Options */ 15 | 16 | /** @type {import("../..").AdderOptions} */ 17 | export const options = {}; 18 | 19 | /** @type {import("../..").Heuristic[]} */ 20 | export const heuristics = [ 21 | { 22 | description: "`bulma` is installed", 23 | async detector({ folderInfo }) { 24 | return "bulma" in folderInfo.allDependencies; 25 | }, 26 | }, 27 | { 28 | description: `some \`bulma\` files are imported in \`src/app.${extension}\``, 29 | async detector({ readFile }) { 30 | const { text } = await readFile({ path: `/src/app.${extension}` }); 31 | return text.includes("bulma"); 32 | }, 33 | }, 34 | ]; 35 | -------------------------------------------------------------------------------- /__run.js: -------------------------------------------------------------------------------- 1 | import { AtRule, Comment, Declaration } from "postcss"; 2 | import { extension, stylesHint } from "../scss/stuff.js"; 3 | 4 | /** @type {import("../..").AdderRun} */ 5 | export const run = async ({ install, updateCss }) => { 6 | await updateCss({ 7 | path: `/src/variables.${extension}`, 8 | async style({ postcss }) { 9 | postcss.append( 10 | new Comment({ 11 | text: "https://github.com/jgthms/bulma/issues/1293", 12 | }), 13 | ); 14 | postcss.append( 15 | new Declaration({ 16 | prop: "$body-overflow-y", 17 | value: "auto", 18 | }), 19 | ); 20 | 21 | return { 22 | postcss, 23 | }; 24 | }, 25 | }); 26 | 27 | await updateCss({ 28 | path: `/src/app.${extension}`, 29 | async style({ postcss }) { 30 | const imports = ["utilities", "base", "elements", "form", "components", "grid", "helpers", "layout"]; 31 | imports.reverse(); 32 | 33 | const [stylesHintComment] = postcss.nodes.filter((node) => node.type === "comment" && node.text === stylesHint); 34 | 35 | for (const import_ of imports) { 36 | const importAtRule = new AtRule({ 37 | name: "import", 38 | params: `"bulma/sass/${import_}/_all"`, 39 | }); 40 | if (stylesHintComment) { 41 | stylesHintComment.after(importAtRule); 42 | } else { 43 | postcss.prepend(importAtRule); 44 | } 45 | } 46 | const importHint = new Comment({ 47 | text: "Import only what you need from Bulma", 48 | }); 49 | if (stylesHintComment) { 50 | stylesHintComment.after(importHint); 51 | } else { 52 | postcss.prepend(importHint); 53 | } 54 | 55 | return { 56 | postcss, 57 | }; 58 | }, 59 | }); 60 | 61 | await install({ package: "bulma" }); 62 | }; 63 | --------------------------------------------------------------------------------