├── .github ├── CODEOWNERS └── workflows │ ├── pr-build.yml │ ├── pr-merged.yml │ └── version-tag-build-master.yml ├── .gitignore ├── .sassrc ├── LICENSE ├── README.md ├── build.cmd ├── examples ├── blog-post.html └── index.html ├── images ├── alignment.png ├── animation.gif ├── fish-skeleton.png ├── fish-skeleton.svg ├── headers.png ├── image-shapes.png ├── images.png ├── line-widths.png ├── paragraphs.png ├── skeleton-cards.png ├── skellyCSS__full-logo.svg └── skellyCSS__logo.svg ├── index.html ├── main.js ├── package-lock.json ├── package.json ├── package ├── LICENSE ├── README.md └── package.json ├── postcss.config.js ├── src ├── index.js └── style.scss └── vite.config.js /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | # https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners 2 | 3 | /.github/** @ritterim/GitGuardians 4 | -------------------------------------------------------------------------------- /.github/workflows/pr-build.yml: -------------------------------------------------------------------------------- 1 | name: PR Build 2 | 3 | permissions: 4 | contents: read 5 | packages: read 6 | 7 | on: 8 | 9 | # https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request 10 | # By default, a workflow only runs when a pull_request event's activity type is opened, synchronize, or reopened. 11 | pull_request: 12 | types: [ opened, synchronize, reopened, labeled, unlabeled ] 13 | branches: 14 | - main 15 | 16 | jobs: 17 | 18 | pr-build: 19 | uses: ritterim/public-github-actions/.github/workflows/npm-packages-pr-build.yml@v1.16.5 20 | #uses: ./.github/workflows/npm-packages-pr-build.yml 21 | with: 22 | always_increment_patch_version: true 23 | npm_package_name: skellycss 24 | run_tests: false 25 | -------------------------------------------------------------------------------- /.github/workflows/pr-merged.yml: -------------------------------------------------------------------------------- 1 | name: PR Merged 2 | 3 | permissions: 4 | contents: read 5 | id-token: write 6 | packages: read 7 | 8 | on: 9 | 10 | # https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request 11 | # By default, a workflow only runs when a pull_request event's activity type is opened, synchronize, or reopened. 12 | # We want to run on 'closed' to trigger, but we also have to check if it was merged. 13 | # That check is: if: github.event.pull_request.merged == true 14 | pull_request_target: 15 | types: [ closed ] 16 | branches: 17 | - main 18 | 19 | jobs: 20 | 21 | npm-packages-pr-create-tag: 22 | uses: ritterim/public-github-actions/.github/workflows/npm-packages-pr-create-tag-jfrog.yml@v1.16.5 23 | #uses: ./.github/workflows/npm-packages-pr-create-tag-jfrog.yml 24 | if: github.event.pull_request.merged == true 25 | secrets: 26 | gh_actions_secret_passing_passphrase: ${{ secrets.ACTIONS_SECRET_PASSING_PASSPHRASE }} 27 | gh_app_private_key: ${{ secrets.RIMDEV_NPM_RELEASES_APP_PRIVATE_KEY }} 28 | with: 29 | always_increment_patch_version: true 30 | gh_app_id: ${{ vars.RIMDEV_NPM_RELEASES_APP_APPID }} 31 | jfrog_api_base_url: ${{ vars.JFROG_API_BASE_URL }} 32 | jfrog_artifactory_repository: "${{ vars.JFROG_NPM_PACKAGE_REPO_BASENAME }}-draft" 33 | jfrog_audit_xray_watch_list: ${{ vars.JFROG_AUDIT_XRAY_WATCH_LIST }} 34 | jfrog_build_basename: ${{ vars.JFROG_BUILD_BASENAME }} 35 | jfrog_npm_feed_repo: ${{ vars.JFROG_ARTIFACTORY_VIRTUAL_REPO_NPM }} 36 | jfrog_npm_package_repo_basename: ${{ vars.JFROG_NPM_PACKAGE_REPO_BASENAME }} 37 | jfrog_oidc_provider_name: ${{ vars.JFROG_GHA_OIDC_PROVIDER_NAME }} 38 | npm_package_name: skellycss 39 | run_tests: false 40 | -------------------------------------------------------------------------------- /.github/workflows/version-tag-build-master.yml: -------------------------------------------------------------------------------- 1 | name: Version Tag Build 2 | 3 | permissions: 4 | contents: write 5 | id-token: write 6 | packages: write 7 | 8 | on: 9 | push: 10 | # To limit whether this executes on a specific branch, you must adjust the allowed_branches input. 11 | # Specifying 'branches' here is a logical 'OR', not a logical 'AND'. 12 | tags: 13 | - v0.* 14 | 15 | jobs: 16 | 17 | version-tag-build: 18 | uses: ritterim/public-github-actions/.github/workflows/npm-packages-release-on-tag-jfrog.yml@v1.16.5 19 | #uses: ./.github/workflows/npm-packages-release-on-tag-jfrog.yml 20 | secrets: 21 | npmjs_org_api_key: ${{ secrets.RITTERIM_NPMJS_PUBLISH_TOKEN }} 22 | with: 23 | allowed_branches: | 24 | main 25 | jfrog_api_base_url: ${{ vars.JFROG_API_BASE_URL }} 26 | jfrog_artifactory_repository: "${{ vars.JFROG_NPM_PACKAGE_REPO_BASENAME }}-prod" 27 | jfrog_audit_xray_watch_list: ${{ vars.JFROG_AUDIT_XRAY_WATCH_LIST }} 28 | jfrog_build_basename: ${{ vars.JFROG_BUILD_BASENAME }} 29 | jfrog_npm_feed_repo: ${{ vars.JFROG_ARTIFACTORY_VIRTUAL_REPO_NPM }} 30 | jfrog_npm_package_repo_basename: ${{ vars.JFROG_NPM_PACKAGE_REPO_BASENAME }} 31 | jfrog_oidc_provider_name: ${{ vars.JFROG_GHA_OIDC_PROVIDER_NAME }} 32 | npm_package_name: skellycss 33 | run_tests: false 34 | npmjs_org_access_public: true 35 | publish_to_npmjs_org: true 36 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | #Distribution 2 | dist/ 3 | 4 | # Logs 5 | logs 6 | *.log 7 | npm-debug.log* 8 | yarn-debug.log* 9 | yarn-error.log* 10 | lerna-debug.log* 11 | 12 | # Diagnostic reports (https://nodejs.org/api/report.html) 13 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 14 | 15 | # Runtime data 16 | pids 17 | *.pid 18 | *.seed 19 | *.pid.lock 20 | 21 | # Directory for instrumented libs generated by jscoverage/JSCover 22 | lib-cov 23 | 24 | # Coverage directory used by tools like istanbul 25 | coverage 26 | *.lcov 27 | 28 | # nyc test coverage 29 | .nyc_output 30 | 31 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 32 | .grunt 33 | 34 | # Bower dependency directory (https://bower.io/) 35 | bower_components 36 | 37 | # node-waf configuration 38 | .lock-wscript 39 | 40 | # Compiled binary addons (https://nodejs.org/api/addons.html) 41 | build/Release 42 | 43 | # Dependency directories 44 | node_modules/ 45 | jspm_packages/ 46 | 47 | # TypeScript v1 declaration files 48 | typings/ 49 | 50 | # TypeScript cache 51 | *.tsbuildinfo 52 | 53 | # Optional npm cache directory 54 | .npm 55 | 56 | # Optional eslint cache 57 | .eslintcache 58 | 59 | # Microbundle cache 60 | .rpt2_cache/ 61 | .rts2_cache_cjs/ 62 | .rts2_cache_es/ 63 | .rts2_cache_umd/ 64 | 65 | # Optional REPL history 66 | .node_repl_history 67 | 68 | # Output of 'npm pack' 69 | *.tgz 70 | 71 | # Yarn Integrity file 72 | .yarn-integrity 73 | 74 | # dotenv environment variables file 75 | .env 76 | .env.test 77 | 78 | # parcel-bundler cache (https://parceljs.org/) 79 | .cache 80 | 81 | # Next.js build output 82 | .next 83 | 84 | # Nuxt.js build / generate output 85 | .nuxt 86 | 87 | # Gatsby files 88 | .cache/ 89 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 90 | # https://nextjs.org/blog/next-9-1#public-directory-support 91 | # public 92 | 93 | # vuepress build output 94 | .vuepress/dist 95 | 96 | # Serverless directories 97 | .serverless/ 98 | 99 | # FuseBox cache 100 | .fusebox/ 101 | 102 | # DynamoDB Local files 103 | .dynamodb/ 104 | 105 | # TernJS port file 106 | .tern-port 107 | 108 | #Other Files 109 | .DS_store -------------------------------------------------------------------------------- /.sassrc: -------------------------------------------------------------------------------- 1 | { 2 | "includePaths": ["node_modules"] 3 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Ritter Insurance Marketing 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 |
2 | 3 |
4 | 5 | # skellyCSS 6 | A light-weight CSS framework to quickly implement skeletons into your projects. 7 | 8 | 9 |

Table of Contents

10 | 11 | - [skellyCSS](#skellycss) 12 | - [Installation](#installation) 13 | - [npm](#npm) 14 | - [CSS](#css) 15 | - [JavaScript](#javascript) 16 | - [Quick Usage](#quick-usage) 17 | - [Usage](#usage) 18 | - [Headers](#headers) 19 | - [Paragraphs](#paragraphs) 20 | - [Line Width](#line-width) 21 | - [Alignment](#alignment) 22 | - [Images](#images) 23 | - [Sizes](#sizes) 24 | - [Shapes](#shapes) 25 | - [Animation](#animation) 26 | - [JavaScript Utility](#javascript-utility) 27 | - [JavaScript Data Attributes](#javascript-data-attributes) 28 | - [All Data Attributes](#all-data-attributes) 29 | 30 |
31 | 32 | ## Installation 33 | 34 | ### npm 35 | To install via node package manager: 36 | ```shell 37 | npm install @ritterim/skellycss 38 | ``` 39 | 40 | ### CSS 41 | Include the Skelly css file wherever you add your CSS: 42 | ``` html 43 | 44 | ``` 45 | 46 | ### JavaScript 47 | Include the skelly.js file wherever you add your JavaScript: 48 | ``` html 49 | 50 | ``` 51 | 52 |
53 | 54 | ## Quick Usage 55 | You can quickly get started using skellyCSS using the JavaScript utility, like so: 56 | ``` html 57 |

58 |

59 | ``` 60 | **See full [JavaScript Utility](#javascript-utility) docs below** 61 | 62 |
63 | 64 | ## Usage 65 | Skeletons can be quickly added to any project with a few simple lines of code. 66 | 67 | ### Headers 68 | Apply the `skeleton` class to any type of header and it will automatically adjust to the font-size of the header stylings: 69 | 70 | ![Headers](images/headers.png) 71 | 72 | ``` html 73 |

74 |

75 |

76 |

77 |
78 |
79 | ``` 80 | 81 |
82 | 83 | ### Paragraphs 84 | You can create paragraph skeletons by applying the `skeleton` class to the paragraph tag, then including however many span tags you'd like with the `skeleton__line` class within the paragraph. In order to make the paragraph skeleton look more like a paragraph, the last line is set to 50% width. 85 | 86 | ![Paragraphs](images/paragraphs.png) 87 | ```html 88 |
89 |

90 | 91 | 92 | 93 | 94 |

95 |
96 | ``` 97 | 98 |
99 | 100 | ### Line Width 101 | You can adjust the line width by applying a size modifier class: 102 | | Width | Modifier Class | 103 | | ------------ | ------------| 104 | | Small, 25% | `.skeleton--sm` | 105 | | Medium, 50% | `.skeleton--md` | 106 | | Large, 75% | `.skeleton--lg` | 107 | | Full, 100% | `.skeleton--full` | 108 | 109 | ![Line Widths](images/line-widths.png) 110 | 111 | ``` html 112 |

113 |

114 |

115 |

116 | ``` 117 | 118 |
119 | 120 | ### Alignment 121 | You can text align the skeleton using alignment modifier classes: 122 | 123 | | Alignment | Modifier Class | 124 | | ------------ | ------------| 125 | | Left | `.skeleton--left` | 126 | | Center | `.skeleton--center` | 127 | | Right | `.skeleton--right` | 128 | 129 | ![Alignment](images/alignment.png) 130 | 131 | ``` html 132 | 133 |

134 | 135 | 136 | 137 | 138 |

139 | 140 | 141 |

142 | 143 | 144 | 145 | 146 |

147 | 148 | 149 |

150 | 151 | 152 | 153 | 154 |

155 | ``` 156 | 157 |
158 | 159 | ### Images 160 | You can create an image skeleton by using the `.skeleton-image` class. By default this will apply the image skeleton at 100% height and width of the parent container. 161 | 162 | #### Sizes 163 | Here are some default sizes we have included for skeleton images: 164 | 165 | | Size | Modifier Class | 166 | | ------------ | ------------| 167 | | Small, 50x50 | `.skeleton-image--sm` | 168 | | Medium, 100x100 | `.skeleton-image--md` | 169 | | Large, 200x200 | `.skeleton-image--lg` | 170 | | X-Large, 400x400 | `.skeleton-image--xl` | 171 | | Full, 100% x 100% | `.skeleton-image--full` | 172 | 173 | ![Images](images/images.png) 174 | 175 | ``` html 176 | 177 | 178 | 179 | 180 | ``` 181 | 182 |
183 | 184 | #### Shapes 185 | You can also make different image shapes using shape modifier classes: 186 | 187 | | Shape | Description | Modifier Class | 188 | | ------------ |------------ | ------------| 189 | | Square | Sets the image aspect ratio to 1/1 (default) | `.skeleton-image--square` | 190 | | Circle | Sets the border radius to 50% | `.skeleton-image--circle` | 191 | | Landscape Rectangle | Sets the image aspect ratio to 4/3 | `.skeleton-image--landscape` | 192 | | Portrait Rectangle | Sets the image aspect ratio to 3/4| `.skeleton-image--portrait` | 193 | | Wide Rectangle | Sets the image aspect ratio to 16/9 | `.skeleton-image--wide` | 194 | | Tall Rectangle | Sets the image aspect ratio to 9/16 | `.skeleton-image--tall` | 195 | 196 | ``` html 197 |
198 |
199 |
200 |
201 |
202 |
203 | ``` 204 | 205 |
206 | 207 | ### Animation 208 | To add animation, add a `span.skeleton--animation` within the `.skeleton__line` elements in headers or paragaphs. 209 | 210 | ![Animation](images/animation.gif) 211 | 212 | ``` html 213 |
214 |

215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 |

228 |
229 | ``` 230 | 231 |
232 | 233 | ## JavaScript Utility 234 | The easiest and our preferred way to add Skeletons is by using the included JavaScript utilities. 235 | 236 | On either a header tag or a paragraph tag, add the `skeleton` class and a `data-lines` attribute with the number of lines you'd like the skeleton to have: 237 | 238 | ``` html 239 |

240 |

241 | ``` 242 | 243 |
244 | 245 | You can also give the skeleton animation by adding the `data-animation` attribute and setting it to `true`: 246 | 247 | ``` html 248 |

249 |

250 | ``` 251 | 252 |
253 | 254 | ### JavaScript Data Attributes 255 | You can alter the way skeleton looks by utilizing other data-attributes as well, including opacity and color: 256 | ``` html 257 | 258 |

259 |

260 | 261 | 262 |

263 |

264 | ``` 265 | 266 | #### All Data Attributes 267 | | Attribute | Description | Type | 268 | | ------------ |------------ | ------------| 269 | | `data-lines` | Determines how many lines to output | Integer | 270 | | `data-animation` | Adds animation to the skeleton lines | Boolean | 271 | | `data-opacity` | Sets the opacity of the skeleton lines (sets opacity between 0 and 1) | Float | 272 | | `data-color` | Sets the color of the skeleton lines | Color | 273 | -------------------------------------------------------------------------------- /build.cmd: -------------------------------------------------------------------------------- 1 | @echo Off 2 | pushd %~dp0 3 | setlocal 4 | 5 | :Build 6 | call npm install 7 | if %ERRORLEVEL% neq 0 goto BuildFail 8 | 9 | if "%APPVEYOR%" equ "True" ( 10 | echo *** Building Production [%APPVEYOR_REPO_BRANCH%] *** 11 | call npm run build 12 | 13 | ) else ( 14 | echo *** Building Default *** 15 | call npm run serve 16 | ) 17 | 18 | if %ERRORLEVEL% neq 0 goto BuildFail 19 | 20 | goto BuildSuccess 21 | 22 | :BuildFail 23 | echo. 24 | echo *** BUILD FAILED *** 25 | goto End 26 | 27 | :BuildSuccess 28 | echo. 29 | echo *** BUILD SUCCEEDED *** 30 | goto End 31 | 32 | :End 33 | echo. 34 | popd 35 | exit /B %ERRORLEVEL% -------------------------------------------------------------------------------- /examples/blog-post.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Blog Post 7 | 8 | 9 | 56 | 57 | 58 |
59 |
60 |

61 |

62 |

63 |

64 |

65 |

66 |
67 | 78 |
79 | 80 |
81 |
82 | 83 |

84 |

85 |
86 |
87 | 88 |

89 |

90 |
91 |
92 | 93 |

94 |

95 |
96 |
97 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 80 | 81 | 82 |
83 | 84 |
85 |

86 |

87 |

88 |

89 |
90 |
91 |
92 | 93 | 94 |
95 |

96 | 97 | 98 | 99 | 100 |

101 |
102 | 103 | 104 |
105 |

106 |

107 |

108 |

109 |
110 | 111 | 112 |
113 | 114 |

115 | 116 | 117 | 118 | 119 |

120 | 121 | 122 |

123 | 124 | 125 | 126 | 127 |

128 | 129 | 130 |

131 | 132 | 133 | 134 | 135 |

136 |
137 | 138 |
139 | 140 | 141 | 142 | 143 |
144 | 145 |
146 |
147 | 150 |
151 | 152 |
153 | 156 |
157 | 158 |
159 | 162 |
163 |
164 | 165 |
166 |

167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 |

180 |
181 | 182 |
183 | 184 | 185 | 186 | 187 | 188 | -------------------------------------------------------------------------------- /images/alignment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ritterim/skellyCSS/fffd04428ed856f4b088d09cd7fedb9fd32e5cf1/images/alignment.png -------------------------------------------------------------------------------- /images/animation.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ritterim/skellyCSS/fffd04428ed856f4b088d09cd7fedb9fd32e5cf1/images/animation.gif -------------------------------------------------------------------------------- /images/fish-skeleton.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ritterim/skellyCSS/fffd04428ed856f4b088d09cd7fedb9fd32e5cf1/images/fish-skeleton.png -------------------------------------------------------------------------------- /images/fish-skeleton.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/headers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ritterim/skellyCSS/fffd04428ed856f4b088d09cd7fedb9fd32e5cf1/images/headers.png -------------------------------------------------------------------------------- /images/image-shapes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ritterim/skellyCSS/fffd04428ed856f4b088d09cd7fedb9fd32e5cf1/images/image-shapes.png -------------------------------------------------------------------------------- /images/images.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ritterim/skellyCSS/fffd04428ed856f4b088d09cd7fedb9fd32e5cf1/images/images.png -------------------------------------------------------------------------------- /images/line-widths.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ritterim/skellyCSS/fffd04428ed856f4b088d09cd7fedb9fd32e5cf1/images/line-widths.png -------------------------------------------------------------------------------- /images/paragraphs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ritterim/skellyCSS/fffd04428ed856f4b088d09cd7fedb9fd32e5cf1/images/paragraphs.png -------------------------------------------------------------------------------- /images/skeleton-cards.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ritterim/skellyCSS/fffd04428ed856f4b088d09cd7fedb9fd32e5cf1/images/skeleton-cards.png -------------------------------------------------------------------------------- /images/skellyCSS__full-logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/skellyCSS__logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 105 | 106 | 107 |
108 |

SkellyCSS

109 | 110 |

Headers

111 |
112 |

113 |

114 |

115 |

116 |
117 |
118 |
119 | 120 | 121 |

Paragraphs

122 |
123 |

124 |
125 | 126 | 127 |

Line Widths

128 |
129 |

Small

130 |

131 |

Medium

132 |

133 |

Large

134 |

135 |

Full

136 |

137 |
138 | 139 | 140 |

Alignment

141 |
142 | 143 |

144 | 145 | 146 | 147 | 148 |

149 | 150 | 151 |

152 | 153 | 154 | 155 | 156 |

157 | 158 | 159 |

160 | 161 | 162 | 163 | 164 |

165 |
166 | 167 |

Images

168 |
169 |
170 |
171 |
172 |
173 |
174 | 175 |

Image Shapes

176 |
177 |
178 |

Square

179 |
182 |
183 | 184 |
185 |

Circle

186 |
189 |
190 | 191 |
192 |

Landscape

193 |
196 |
197 | 198 |
199 |

Portrait

200 |
203 |
204 | 205 |
206 |

Wide

207 |
210 |
211 | 212 |
213 |

Tall

214 |
217 |
218 |
219 | 220 |

Animation

221 |
222 |

223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 |

236 |
237 | 238 |

Opacity

239 |
240 |

241 |
242 | 243 |

Color

244 |
245 |

246 |
247 |
248 | 249 | 250 | 251 | 252 | 253 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | import './src/style.scss'; 2 | import './src/index.js'; 3 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ritterim/skellycss", 3 | "version": "0.1.6", 4 | "lockfileVersion": 3, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "@ritterim/skellycss", 9 | "version": "0.1.6", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "autoprefixer": "^10.4.15", 13 | "postcss": "^8.4.29", 14 | "postcss-cli": "^10.1.0", 15 | "sass": "^1.66.1", 16 | "vite": "^4.4.9", 17 | "vite-plugin-banner": "^0.7.0" 18 | } 19 | }, 20 | "node_modules/@esbuild/android-arm": { 21 | "version": "0.18.20", 22 | "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz", 23 | "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==", 24 | "cpu": [ 25 | "arm" 26 | ], 27 | "dev": true, 28 | "optional": true, 29 | "os": [ 30 | "android" 31 | ], 32 | "engines": { 33 | "node": ">=12" 34 | } 35 | }, 36 | "node_modules/@esbuild/android-arm64": { 37 | "version": "0.18.20", 38 | "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz", 39 | "integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==", 40 | "cpu": [ 41 | "arm64" 42 | ], 43 | "dev": true, 44 | "optional": true, 45 | "os": [ 46 | "android" 47 | ], 48 | "engines": { 49 | "node": ">=12" 50 | } 51 | }, 52 | "node_modules/@esbuild/android-x64": { 53 | "version": "0.18.20", 54 | "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz", 55 | "integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==", 56 | "cpu": [ 57 | "x64" 58 | ], 59 | "dev": true, 60 | "optional": true, 61 | "os": [ 62 | "android" 63 | ], 64 | "engines": { 65 | "node": ">=12" 66 | } 67 | }, 68 | "node_modules/@esbuild/darwin-arm64": { 69 | "version": "0.18.20", 70 | "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz", 71 | "integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==", 72 | "cpu": [ 73 | "arm64" 74 | ], 75 | "dev": true, 76 | "optional": true, 77 | "os": [ 78 | "darwin" 79 | ], 80 | "engines": { 81 | "node": ">=12" 82 | } 83 | }, 84 | "node_modules/@esbuild/darwin-x64": { 85 | "version": "0.18.20", 86 | "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz", 87 | "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==", 88 | "cpu": [ 89 | "x64" 90 | ], 91 | "dev": true, 92 | "optional": true, 93 | "os": [ 94 | "darwin" 95 | ], 96 | "engines": { 97 | "node": ">=12" 98 | } 99 | }, 100 | "node_modules/@esbuild/freebsd-arm64": { 101 | "version": "0.18.20", 102 | "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz", 103 | "integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==", 104 | "cpu": [ 105 | "arm64" 106 | ], 107 | "dev": true, 108 | "optional": true, 109 | "os": [ 110 | "freebsd" 111 | ], 112 | "engines": { 113 | "node": ">=12" 114 | } 115 | }, 116 | "node_modules/@esbuild/freebsd-x64": { 117 | "version": "0.18.20", 118 | "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz", 119 | "integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==", 120 | "cpu": [ 121 | "x64" 122 | ], 123 | "dev": true, 124 | "optional": true, 125 | "os": [ 126 | "freebsd" 127 | ], 128 | "engines": { 129 | "node": ">=12" 130 | } 131 | }, 132 | "node_modules/@esbuild/linux-arm": { 133 | "version": "0.18.20", 134 | "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz", 135 | "integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==", 136 | "cpu": [ 137 | "arm" 138 | ], 139 | "dev": true, 140 | "optional": true, 141 | "os": [ 142 | "linux" 143 | ], 144 | "engines": { 145 | "node": ">=12" 146 | } 147 | }, 148 | "node_modules/@esbuild/linux-arm64": { 149 | "version": "0.18.20", 150 | "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz", 151 | "integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==", 152 | "cpu": [ 153 | "arm64" 154 | ], 155 | "dev": true, 156 | "optional": true, 157 | "os": [ 158 | "linux" 159 | ], 160 | "engines": { 161 | "node": ">=12" 162 | } 163 | }, 164 | "node_modules/@esbuild/linux-ia32": { 165 | "version": "0.18.20", 166 | "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz", 167 | "integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==", 168 | "cpu": [ 169 | "ia32" 170 | ], 171 | "dev": true, 172 | "optional": true, 173 | "os": [ 174 | "linux" 175 | ], 176 | "engines": { 177 | "node": ">=12" 178 | } 179 | }, 180 | "node_modules/@esbuild/linux-loong64": { 181 | "version": "0.18.20", 182 | "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz", 183 | "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==", 184 | "cpu": [ 185 | "loong64" 186 | ], 187 | "dev": true, 188 | "optional": true, 189 | "os": [ 190 | "linux" 191 | ], 192 | "engines": { 193 | "node": ">=12" 194 | } 195 | }, 196 | "node_modules/@esbuild/linux-mips64el": { 197 | "version": "0.18.20", 198 | "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz", 199 | "integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==", 200 | "cpu": [ 201 | "mips64el" 202 | ], 203 | "dev": true, 204 | "optional": true, 205 | "os": [ 206 | "linux" 207 | ], 208 | "engines": { 209 | "node": ">=12" 210 | } 211 | }, 212 | "node_modules/@esbuild/linux-ppc64": { 213 | "version": "0.18.20", 214 | "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz", 215 | "integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==", 216 | "cpu": [ 217 | "ppc64" 218 | ], 219 | "dev": true, 220 | "optional": true, 221 | "os": [ 222 | "linux" 223 | ], 224 | "engines": { 225 | "node": ">=12" 226 | } 227 | }, 228 | "node_modules/@esbuild/linux-riscv64": { 229 | "version": "0.18.20", 230 | "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz", 231 | "integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==", 232 | "cpu": [ 233 | "riscv64" 234 | ], 235 | "dev": true, 236 | "optional": true, 237 | "os": [ 238 | "linux" 239 | ], 240 | "engines": { 241 | "node": ">=12" 242 | } 243 | }, 244 | "node_modules/@esbuild/linux-s390x": { 245 | "version": "0.18.20", 246 | "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz", 247 | "integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==", 248 | "cpu": [ 249 | "s390x" 250 | ], 251 | "dev": true, 252 | "optional": true, 253 | "os": [ 254 | "linux" 255 | ], 256 | "engines": { 257 | "node": ">=12" 258 | } 259 | }, 260 | "node_modules/@esbuild/linux-x64": { 261 | "version": "0.18.20", 262 | "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz", 263 | "integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==", 264 | "cpu": [ 265 | "x64" 266 | ], 267 | "dev": true, 268 | "optional": true, 269 | "os": [ 270 | "linux" 271 | ], 272 | "engines": { 273 | "node": ">=12" 274 | } 275 | }, 276 | "node_modules/@esbuild/netbsd-x64": { 277 | "version": "0.18.20", 278 | "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz", 279 | "integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==", 280 | "cpu": [ 281 | "x64" 282 | ], 283 | "dev": true, 284 | "optional": true, 285 | "os": [ 286 | "netbsd" 287 | ], 288 | "engines": { 289 | "node": ">=12" 290 | } 291 | }, 292 | "node_modules/@esbuild/openbsd-x64": { 293 | "version": "0.18.20", 294 | "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz", 295 | "integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==", 296 | "cpu": [ 297 | "x64" 298 | ], 299 | "dev": true, 300 | "optional": true, 301 | "os": [ 302 | "openbsd" 303 | ], 304 | "engines": { 305 | "node": ">=12" 306 | } 307 | }, 308 | "node_modules/@esbuild/sunos-x64": { 309 | "version": "0.18.20", 310 | "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz", 311 | "integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==", 312 | "cpu": [ 313 | "x64" 314 | ], 315 | "dev": true, 316 | "optional": true, 317 | "os": [ 318 | "sunos" 319 | ], 320 | "engines": { 321 | "node": ">=12" 322 | } 323 | }, 324 | "node_modules/@esbuild/win32-arm64": { 325 | "version": "0.18.20", 326 | "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz", 327 | "integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==", 328 | "cpu": [ 329 | "arm64" 330 | ], 331 | "dev": true, 332 | "optional": true, 333 | "os": [ 334 | "win32" 335 | ], 336 | "engines": { 337 | "node": ">=12" 338 | } 339 | }, 340 | "node_modules/@esbuild/win32-ia32": { 341 | "version": "0.18.20", 342 | "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz", 343 | "integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==", 344 | "cpu": [ 345 | "ia32" 346 | ], 347 | "dev": true, 348 | "optional": true, 349 | "os": [ 350 | "win32" 351 | ], 352 | "engines": { 353 | "node": ">=12" 354 | } 355 | }, 356 | "node_modules/@esbuild/win32-x64": { 357 | "version": "0.18.20", 358 | "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz", 359 | "integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==", 360 | "cpu": [ 361 | "x64" 362 | ], 363 | "dev": true, 364 | "optional": true, 365 | "os": [ 366 | "win32" 367 | ], 368 | "engines": { 369 | "node": ">=12" 370 | } 371 | }, 372 | "node_modules/@nodelib/fs.scandir": { 373 | "version": "2.1.5", 374 | "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", 375 | "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", 376 | "dev": true, 377 | "dependencies": { 378 | "@nodelib/fs.stat": "2.0.5", 379 | "run-parallel": "^1.1.9" 380 | }, 381 | "engines": { 382 | "node": ">= 8" 383 | } 384 | }, 385 | "node_modules/@nodelib/fs.stat": { 386 | "version": "2.0.5", 387 | "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", 388 | "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", 389 | "dev": true, 390 | "engines": { 391 | "node": ">= 8" 392 | } 393 | }, 394 | "node_modules/@nodelib/fs.walk": { 395 | "version": "1.2.8", 396 | "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", 397 | "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", 398 | "dev": true, 399 | "dependencies": { 400 | "@nodelib/fs.scandir": "2.1.5", 401 | "fastq": "^1.6.0" 402 | }, 403 | "engines": { 404 | "node": ">= 8" 405 | } 406 | }, 407 | "node_modules/ansi-regex": { 408 | "version": "5.0.1", 409 | "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", 410 | "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", 411 | "dev": true, 412 | "engines": { 413 | "node": ">=8" 414 | } 415 | }, 416 | "node_modules/ansi-styles": { 417 | "version": "4.3.0", 418 | "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", 419 | "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", 420 | "dev": true, 421 | "dependencies": { 422 | "color-convert": "^2.0.1" 423 | }, 424 | "engines": { 425 | "node": ">=8" 426 | }, 427 | "funding": { 428 | "url": "https://github.com/chalk/ansi-styles?sponsor=1" 429 | } 430 | }, 431 | "node_modules/anymatch": { 432 | "version": "3.1.1", 433 | "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz", 434 | "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==", 435 | "dev": true, 436 | "dependencies": { 437 | "normalize-path": "^3.0.0", 438 | "picomatch": "^2.0.4" 439 | }, 440 | "engines": { 441 | "node": ">= 8" 442 | } 443 | }, 444 | "node_modules/autoprefixer": { 445 | "version": "10.4.15", 446 | "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.15.tgz", 447 | "integrity": "sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==", 448 | "dev": true, 449 | "funding": [ 450 | { 451 | "type": "opencollective", 452 | "url": "https://opencollective.com/postcss/" 453 | }, 454 | { 455 | "type": "tidelift", 456 | "url": "https://tidelift.com/funding/github/npm/autoprefixer" 457 | }, 458 | { 459 | "type": "github", 460 | "url": "https://github.com/sponsors/ai" 461 | } 462 | ], 463 | "dependencies": { 464 | "browserslist": "^4.21.10", 465 | "caniuse-lite": "^1.0.30001520", 466 | "fraction.js": "^4.2.0", 467 | "normalize-range": "^0.1.2", 468 | "picocolors": "^1.0.0", 469 | "postcss-value-parser": "^4.2.0" 470 | }, 471 | "bin": { 472 | "autoprefixer": "bin/autoprefixer" 473 | }, 474 | "engines": { 475 | "node": "^10 || ^12 || >=14" 476 | }, 477 | "peerDependencies": { 478 | "postcss": "^8.1.0" 479 | } 480 | }, 481 | "node_modules/binary-extensions": { 482 | "version": "2.1.0", 483 | "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz", 484 | "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==", 485 | "dev": true, 486 | "engines": { 487 | "node": ">=8" 488 | } 489 | }, 490 | "node_modules/braces": { 491 | "version": "3.0.2", 492 | "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", 493 | "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", 494 | "dev": true, 495 | "dependencies": { 496 | "fill-range": "^7.0.1" 497 | }, 498 | "engines": { 499 | "node": ">=8" 500 | } 501 | }, 502 | "node_modules/browserslist": { 503 | "version": "4.21.10", 504 | "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.10.tgz", 505 | "integrity": "sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==", 506 | "dev": true, 507 | "funding": [ 508 | { 509 | "type": "opencollective", 510 | "url": "https://opencollective.com/browserslist" 511 | }, 512 | { 513 | "type": "tidelift", 514 | "url": "https://tidelift.com/funding/github/npm/browserslist" 515 | }, 516 | { 517 | "type": "github", 518 | "url": "https://github.com/sponsors/ai" 519 | } 520 | ], 521 | "dependencies": { 522 | "caniuse-lite": "^1.0.30001517", 523 | "electron-to-chromium": "^1.4.477", 524 | "node-releases": "^2.0.13", 525 | "update-browserslist-db": "^1.0.11" 526 | }, 527 | "bin": { 528 | "browserslist": "cli.js" 529 | }, 530 | "engines": { 531 | "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" 532 | } 533 | }, 534 | "node_modules/caniuse-lite": { 535 | "version": "1.0.30001529", 536 | "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001529.tgz", 537 | "integrity": "sha512-n2pUQYGAkrLG4QYj2desAh+NqsJpHbNmVZz87imptDdxLAtjxary7Df/psdfyDGmskJK/9Dt9cPnx5RZ3CU4Og==", 538 | "dev": true, 539 | "funding": [ 540 | { 541 | "type": "opencollective", 542 | "url": "https://opencollective.com/browserslist" 543 | }, 544 | { 545 | "type": "tidelift", 546 | "url": "https://tidelift.com/funding/github/npm/caniuse-lite" 547 | }, 548 | { 549 | "type": "github", 550 | "url": "https://github.com/sponsors/ai" 551 | } 552 | ] 553 | }, 554 | "node_modules/chokidar": { 555 | "version": "3.4.3", 556 | "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.3.tgz", 557 | "integrity": "sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ==", 558 | "dev": true, 559 | "dependencies": { 560 | "anymatch": "~3.1.1", 561 | "braces": "~3.0.2", 562 | "glob-parent": "~5.1.0", 563 | "is-binary-path": "~2.1.0", 564 | "is-glob": "~4.0.1", 565 | "normalize-path": "~3.0.0", 566 | "readdirp": "~3.5.0" 567 | }, 568 | "engines": { 569 | "node": ">= 8.10.0" 570 | }, 571 | "optionalDependencies": { 572 | "fsevents": "~2.1.2" 573 | } 574 | }, 575 | "node_modules/cliui": { 576 | "version": "7.0.4", 577 | "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz", 578 | "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==", 579 | "dev": true, 580 | "dependencies": { 581 | "string-width": "^4.2.0", 582 | "strip-ansi": "^6.0.0", 583 | "wrap-ansi": "^7.0.0" 584 | } 585 | }, 586 | "node_modules/color-convert": { 587 | "version": "2.0.1", 588 | "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", 589 | "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", 590 | "dev": true, 591 | "dependencies": { 592 | "color-name": "~1.1.4" 593 | }, 594 | "engines": { 595 | "node": ">=7.0.0" 596 | } 597 | }, 598 | "node_modules/color-name": { 599 | "version": "1.1.4", 600 | "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", 601 | "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", 602 | "dev": true 603 | }, 604 | "node_modules/dependency-graph": { 605 | "version": "0.11.0", 606 | "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz", 607 | "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==", 608 | "dev": true, 609 | "engines": { 610 | "node": ">= 0.6.0" 611 | } 612 | }, 613 | "node_modules/dir-glob": { 614 | "version": "3.0.1", 615 | "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", 616 | "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==", 617 | "dev": true, 618 | "dependencies": { 619 | "path-type": "^4.0.0" 620 | }, 621 | "engines": { 622 | "node": ">=8" 623 | } 624 | }, 625 | "node_modules/electron-to-chromium": { 626 | "version": "1.4.512", 627 | "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.512.tgz", 628 | "integrity": "sha512-1W8wRbYlQE4ph7eoj3TJ+uqwO6+xvAE/L+KGU7WTQQvX3tnSIGZAb90MTsMoJqzntamiwJhBAj4WZmygXhsOUg==", 629 | "dev": true 630 | }, 631 | "node_modules/emoji-regex": { 632 | "version": "8.0.0", 633 | "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", 634 | "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", 635 | "dev": true 636 | }, 637 | "node_modules/esbuild": { 638 | "version": "0.18.20", 639 | "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz", 640 | "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==", 641 | "dev": true, 642 | "hasInstallScript": true, 643 | "bin": { 644 | "esbuild": "bin/esbuild" 645 | }, 646 | "engines": { 647 | "node": ">=12" 648 | }, 649 | "optionalDependencies": { 650 | "@esbuild/android-arm": "0.18.20", 651 | "@esbuild/android-arm64": "0.18.20", 652 | "@esbuild/android-x64": "0.18.20", 653 | "@esbuild/darwin-arm64": "0.18.20", 654 | "@esbuild/darwin-x64": "0.18.20", 655 | "@esbuild/freebsd-arm64": "0.18.20", 656 | "@esbuild/freebsd-x64": "0.18.20", 657 | "@esbuild/linux-arm": "0.18.20", 658 | "@esbuild/linux-arm64": "0.18.20", 659 | "@esbuild/linux-ia32": "0.18.20", 660 | "@esbuild/linux-loong64": "0.18.20", 661 | "@esbuild/linux-mips64el": "0.18.20", 662 | "@esbuild/linux-ppc64": "0.18.20", 663 | "@esbuild/linux-riscv64": "0.18.20", 664 | "@esbuild/linux-s390x": "0.18.20", 665 | "@esbuild/linux-x64": "0.18.20", 666 | "@esbuild/netbsd-x64": "0.18.20", 667 | "@esbuild/openbsd-x64": "0.18.20", 668 | "@esbuild/sunos-x64": "0.18.20", 669 | "@esbuild/win32-arm64": "0.18.20", 670 | "@esbuild/win32-ia32": "0.18.20", 671 | "@esbuild/win32-x64": "0.18.20" 672 | } 673 | }, 674 | "node_modules/escalade": { 675 | "version": "3.1.1", 676 | "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", 677 | "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", 678 | "dev": true, 679 | "engines": { 680 | "node": ">=6" 681 | } 682 | }, 683 | "node_modules/fast-glob": { 684 | "version": "3.3.1", 685 | "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz", 686 | "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==", 687 | "dev": true, 688 | "dependencies": { 689 | "@nodelib/fs.stat": "^2.0.2", 690 | "@nodelib/fs.walk": "^1.2.3", 691 | "glob-parent": "^5.1.2", 692 | "merge2": "^1.3.0", 693 | "micromatch": "^4.0.4" 694 | }, 695 | "engines": { 696 | "node": ">=8.6.0" 697 | } 698 | }, 699 | "node_modules/fastq": { 700 | "version": "1.15.0", 701 | "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz", 702 | "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==", 703 | "dev": true, 704 | "dependencies": { 705 | "reusify": "^1.0.4" 706 | } 707 | }, 708 | "node_modules/fill-range": { 709 | "version": "7.0.1", 710 | "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", 711 | "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", 712 | "dev": true, 713 | "dependencies": { 714 | "to-regex-range": "^5.0.1" 715 | }, 716 | "engines": { 717 | "node": ">=8" 718 | } 719 | }, 720 | "node_modules/fraction.js": { 721 | "version": "4.3.6", 722 | "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.6.tgz", 723 | "integrity": "sha512-n2aZ9tNfYDwaHhvFTkhFErqOMIb8uyzSQ+vGJBjZyanAKZVbGUQ1sngfk9FdkBw7G26O7AgNjLcecLffD1c7eg==", 724 | "dev": true, 725 | "engines": { 726 | "node": "*" 727 | }, 728 | "funding": { 729 | "type": "patreon", 730 | "url": "https://github.com/sponsors/rawify" 731 | } 732 | }, 733 | "node_modules/fs-extra": { 734 | "version": "11.1.1", 735 | "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz", 736 | "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==", 737 | "dev": true, 738 | "dependencies": { 739 | "graceful-fs": "^4.2.0", 740 | "jsonfile": "^6.0.1", 741 | "universalify": "^2.0.0" 742 | }, 743 | "engines": { 744 | "node": ">=14.14" 745 | } 746 | }, 747 | "node_modules/fsevents": { 748 | "version": "2.1.3", 749 | "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz", 750 | "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==", 751 | "deprecated": "\"Please update to latest v2.3 or v2.2\"", 752 | "dev": true, 753 | "hasInstallScript": true, 754 | "optional": true, 755 | "os": [ 756 | "darwin" 757 | ], 758 | "engines": { 759 | "node": "^8.16.0 || ^10.6.0 || >=11.0.0" 760 | } 761 | }, 762 | "node_modules/get-caller-file": { 763 | "version": "2.0.5", 764 | "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", 765 | "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", 766 | "dev": true, 767 | "engines": { 768 | "node": "6.* || 8.* || >= 10.*" 769 | } 770 | }, 771 | "node_modules/get-stdin": { 772 | "version": "9.0.0", 773 | "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-9.0.0.tgz", 774 | "integrity": "sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA==", 775 | "dev": true, 776 | "engines": { 777 | "node": ">=12" 778 | }, 779 | "funding": { 780 | "url": "https://github.com/sponsors/sindresorhus" 781 | } 782 | }, 783 | "node_modules/glob-parent": { 784 | "version": "5.1.2", 785 | "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", 786 | "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", 787 | "dev": true, 788 | "dependencies": { 789 | "is-glob": "^4.0.1" 790 | }, 791 | "engines": { 792 | "node": ">= 6" 793 | } 794 | }, 795 | "node_modules/globby": { 796 | "version": "13.2.2", 797 | "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.2.tgz", 798 | "integrity": "sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==", 799 | "dev": true, 800 | "dependencies": { 801 | "dir-glob": "^3.0.1", 802 | "fast-glob": "^3.3.0", 803 | "ignore": "^5.2.4", 804 | "merge2": "^1.4.1", 805 | "slash": "^4.0.0" 806 | }, 807 | "engines": { 808 | "node": "^12.20.0 || ^14.13.1 || >=16.0.0" 809 | }, 810 | "funding": { 811 | "url": "https://github.com/sponsors/sindresorhus" 812 | } 813 | }, 814 | "node_modules/globby/node_modules/slash": { 815 | "version": "4.0.0", 816 | "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz", 817 | "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==", 818 | "dev": true, 819 | "engines": { 820 | "node": ">=12" 821 | }, 822 | "funding": { 823 | "url": "https://github.com/sponsors/sindresorhus" 824 | } 825 | }, 826 | "node_modules/graceful-fs": { 827 | "version": "4.2.11", 828 | "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", 829 | "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", 830 | "dev": true 831 | }, 832 | "node_modules/ignore": { 833 | "version": "5.2.4", 834 | "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", 835 | "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==", 836 | "dev": true, 837 | "engines": { 838 | "node": ">= 4" 839 | } 840 | }, 841 | "node_modules/immutable": { 842 | "version": "4.0.0", 843 | "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz", 844 | "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==", 845 | "dev": true 846 | }, 847 | "node_modules/is-binary-path": { 848 | "version": "2.1.0", 849 | "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", 850 | "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", 851 | "dev": true, 852 | "dependencies": { 853 | "binary-extensions": "^2.0.0" 854 | }, 855 | "engines": { 856 | "node": ">=8" 857 | } 858 | }, 859 | "node_modules/is-extglob": { 860 | "version": "2.1.1", 861 | "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", 862 | "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", 863 | "dev": true, 864 | "engines": { 865 | "node": ">=0.10.0" 866 | } 867 | }, 868 | "node_modules/is-fullwidth-code-point": { 869 | "version": "3.0.0", 870 | "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", 871 | "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", 872 | "dev": true, 873 | "engines": { 874 | "node": ">=8" 875 | } 876 | }, 877 | "node_modules/is-glob": { 878 | "version": "4.0.1", 879 | "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz", 880 | "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==", 881 | "dev": true, 882 | "dependencies": { 883 | "is-extglob": "^2.1.1" 884 | }, 885 | "engines": { 886 | "node": ">=0.10.0" 887 | } 888 | }, 889 | "node_modules/is-number": { 890 | "version": "7.0.0", 891 | "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", 892 | "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", 893 | "dev": true, 894 | "engines": { 895 | "node": ">=0.12.0" 896 | } 897 | }, 898 | "node_modules/jsonfile": { 899 | "version": "6.1.0", 900 | "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", 901 | "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", 902 | "dev": true, 903 | "dependencies": { 904 | "universalify": "^2.0.0" 905 | }, 906 | "optionalDependencies": { 907 | "graceful-fs": "^4.1.6" 908 | } 909 | }, 910 | "node_modules/lilconfig": { 911 | "version": "2.1.0", 912 | "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz", 913 | "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==", 914 | "dev": true, 915 | "engines": { 916 | "node": ">=10" 917 | } 918 | }, 919 | "node_modules/merge2": { 920 | "version": "1.4.1", 921 | "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", 922 | "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", 923 | "dev": true, 924 | "engines": { 925 | "node": ">= 8" 926 | } 927 | }, 928 | "node_modules/micromatch": { 929 | "version": "4.0.5", 930 | "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", 931 | "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==", 932 | "dev": true, 933 | "dependencies": { 934 | "braces": "^3.0.2", 935 | "picomatch": "^2.3.1" 936 | }, 937 | "engines": { 938 | "node": ">=8.6" 939 | } 940 | }, 941 | "node_modules/nanoid": { 942 | "version": "3.3.6", 943 | "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", 944 | "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", 945 | "dev": true, 946 | "funding": [ 947 | { 948 | "type": "github", 949 | "url": "https://github.com/sponsors/ai" 950 | } 951 | ], 952 | "bin": { 953 | "nanoid": "bin/nanoid.cjs" 954 | }, 955 | "engines": { 956 | "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" 957 | } 958 | }, 959 | "node_modules/node-releases": { 960 | "version": "2.0.13", 961 | "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz", 962 | "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==", 963 | "dev": true 964 | }, 965 | "node_modules/normalize-path": { 966 | "version": "3.0.0", 967 | "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", 968 | "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", 969 | "dev": true, 970 | "engines": { 971 | "node": ">=0.10.0" 972 | } 973 | }, 974 | "node_modules/normalize-range": { 975 | "version": "0.1.2", 976 | "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", 977 | "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=", 978 | "dev": true, 979 | "engines": { 980 | "node": ">=0.10.0" 981 | } 982 | }, 983 | "node_modules/path-type": { 984 | "version": "4.0.0", 985 | "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", 986 | "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", 987 | "dev": true, 988 | "engines": { 989 | "node": ">=8" 990 | } 991 | }, 992 | "node_modules/picocolors": { 993 | "version": "1.0.0", 994 | "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", 995 | "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", 996 | "dev": true 997 | }, 998 | "node_modules/picomatch": { 999 | "version": "2.3.1", 1000 | "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", 1001 | "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", 1002 | "dev": true, 1003 | "engines": { 1004 | "node": ">=8.6" 1005 | }, 1006 | "funding": { 1007 | "url": "https://github.com/sponsors/jonschlinkert" 1008 | } 1009 | }, 1010 | "node_modules/pify": { 1011 | "version": "2.3.0", 1012 | "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", 1013 | "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", 1014 | "dev": true, 1015 | "engines": { 1016 | "node": ">=0.10.0" 1017 | } 1018 | }, 1019 | "node_modules/postcss": { 1020 | "version": "8.4.29", 1021 | "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.29.tgz", 1022 | "integrity": "sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==", 1023 | "dev": true, 1024 | "funding": [ 1025 | { 1026 | "type": "opencollective", 1027 | "url": "https://opencollective.com/postcss/" 1028 | }, 1029 | { 1030 | "type": "tidelift", 1031 | "url": "https://tidelift.com/funding/github/npm/postcss" 1032 | }, 1033 | { 1034 | "type": "github", 1035 | "url": "https://github.com/sponsors/ai" 1036 | } 1037 | ], 1038 | "dependencies": { 1039 | "nanoid": "^3.3.6", 1040 | "picocolors": "^1.0.0", 1041 | "source-map-js": "^1.0.2" 1042 | }, 1043 | "engines": { 1044 | "node": "^10 || ^12 || >=14" 1045 | } 1046 | }, 1047 | "node_modules/postcss-cli": { 1048 | "version": "10.1.0", 1049 | "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-10.1.0.tgz", 1050 | "integrity": "sha512-Zu7PLORkE9YwNdvOeOVKPmWghprOtjFQU3srMUGbdz3pHJiFh7yZ4geiZFMkjMfB0mtTFR3h8RemR62rPkbOPA==", 1051 | "dev": true, 1052 | "dependencies": { 1053 | "chokidar": "^3.3.0", 1054 | "dependency-graph": "^0.11.0", 1055 | "fs-extra": "^11.0.0", 1056 | "get-stdin": "^9.0.0", 1057 | "globby": "^13.0.0", 1058 | "picocolors": "^1.0.0", 1059 | "postcss-load-config": "^4.0.0", 1060 | "postcss-reporter": "^7.0.0", 1061 | "pretty-hrtime": "^1.0.3", 1062 | "read-cache": "^1.0.0", 1063 | "slash": "^5.0.0", 1064 | "yargs": "^17.0.0" 1065 | }, 1066 | "bin": { 1067 | "postcss": "index.js" 1068 | }, 1069 | "engines": { 1070 | "node": ">=14" 1071 | }, 1072 | "peerDependencies": { 1073 | "postcss": "^8.0.0" 1074 | } 1075 | }, 1076 | "node_modules/postcss-load-config": { 1077 | "version": "4.0.1", 1078 | "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz", 1079 | "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==", 1080 | "dev": true, 1081 | "dependencies": { 1082 | "lilconfig": "^2.0.5", 1083 | "yaml": "^2.1.1" 1084 | }, 1085 | "engines": { 1086 | "node": ">= 14" 1087 | }, 1088 | "funding": { 1089 | "type": "opencollective", 1090 | "url": "https://opencollective.com/postcss/" 1091 | }, 1092 | "peerDependencies": { 1093 | "postcss": ">=8.0.9", 1094 | "ts-node": ">=9.0.0" 1095 | }, 1096 | "peerDependenciesMeta": { 1097 | "postcss": { 1098 | "optional": true 1099 | }, 1100 | "ts-node": { 1101 | "optional": true 1102 | } 1103 | } 1104 | }, 1105 | "node_modules/postcss-reporter": { 1106 | "version": "7.0.5", 1107 | "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-7.0.5.tgz", 1108 | "integrity": "sha512-glWg7VZBilooZGOFPhN9msJ3FQs19Hie7l5a/eE6WglzYqVeH3ong3ShFcp9kDWJT1g2Y/wd59cocf9XxBtkWA==", 1109 | "dev": true, 1110 | "dependencies": { 1111 | "picocolors": "^1.0.0", 1112 | "thenby": "^1.3.4" 1113 | }, 1114 | "engines": { 1115 | "node": ">=10" 1116 | }, 1117 | "funding": { 1118 | "type": "opencollective", 1119 | "url": "https://opencollective.com/postcss/" 1120 | }, 1121 | "peerDependencies": { 1122 | "postcss": "^8.1.0" 1123 | } 1124 | }, 1125 | "node_modules/postcss-value-parser": { 1126 | "version": "4.2.0", 1127 | "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", 1128 | "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", 1129 | "dev": true 1130 | }, 1131 | "node_modules/pretty-hrtime": { 1132 | "version": "1.0.3", 1133 | "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz", 1134 | "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=", 1135 | "dev": true, 1136 | "engines": { 1137 | "node": ">= 0.8" 1138 | } 1139 | }, 1140 | "node_modules/queue-microtask": { 1141 | "version": "1.2.3", 1142 | "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", 1143 | "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==", 1144 | "dev": true, 1145 | "funding": [ 1146 | { 1147 | "type": "github", 1148 | "url": "https://github.com/sponsors/feross" 1149 | }, 1150 | { 1151 | "type": "patreon", 1152 | "url": "https://www.patreon.com/feross" 1153 | }, 1154 | { 1155 | "type": "consulting", 1156 | "url": "https://feross.org/support" 1157 | } 1158 | ] 1159 | }, 1160 | "node_modules/read-cache": { 1161 | "version": "1.0.0", 1162 | "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", 1163 | "integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=", 1164 | "dev": true, 1165 | "dependencies": { 1166 | "pify": "^2.3.0" 1167 | } 1168 | }, 1169 | "node_modules/readdirp": { 1170 | "version": "3.5.0", 1171 | "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz", 1172 | "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==", 1173 | "dev": true, 1174 | "dependencies": { 1175 | "picomatch": "^2.2.1" 1176 | }, 1177 | "engines": { 1178 | "node": ">=8.10.0" 1179 | } 1180 | }, 1181 | "node_modules/require-directory": { 1182 | "version": "2.1.1", 1183 | "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", 1184 | "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=", 1185 | "dev": true, 1186 | "engines": { 1187 | "node": ">=0.10.0" 1188 | } 1189 | }, 1190 | "node_modules/reusify": { 1191 | "version": "1.0.4", 1192 | "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz", 1193 | "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==", 1194 | "dev": true, 1195 | "engines": { 1196 | "iojs": ">=1.0.0", 1197 | "node": ">=0.10.0" 1198 | } 1199 | }, 1200 | "node_modules/rollup": { 1201 | "version": "3.29.0", 1202 | "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.0.tgz", 1203 | "integrity": "sha512-nszM8DINnx1vSS+TpbWKMkxem0CDWk3cSit/WWCBVs9/JZ1I/XLwOsiUglYuYReaeWWSsW9kge5zE5NZtf/a4w==", 1204 | "dev": true, 1205 | "bin": { 1206 | "rollup": "dist/bin/rollup" 1207 | }, 1208 | "engines": { 1209 | "node": ">=14.18.0", 1210 | "npm": ">=8.0.0" 1211 | }, 1212 | "optionalDependencies": { 1213 | "fsevents": "~2.3.2" 1214 | } 1215 | }, 1216 | "node_modules/rollup/node_modules/fsevents": { 1217 | "version": "2.3.3", 1218 | "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", 1219 | "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", 1220 | "dev": true, 1221 | "hasInstallScript": true, 1222 | "optional": true, 1223 | "os": [ 1224 | "darwin" 1225 | ], 1226 | "engines": { 1227 | "node": "^8.16.0 || ^10.6.0 || >=11.0.0" 1228 | } 1229 | }, 1230 | "node_modules/run-parallel": { 1231 | "version": "1.2.0", 1232 | "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", 1233 | "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==", 1234 | "dev": true, 1235 | "funding": [ 1236 | { 1237 | "type": "github", 1238 | "url": "https://github.com/sponsors/feross" 1239 | }, 1240 | { 1241 | "type": "patreon", 1242 | "url": "https://www.patreon.com/feross" 1243 | }, 1244 | { 1245 | "type": "consulting", 1246 | "url": "https://feross.org/support" 1247 | } 1248 | ], 1249 | "dependencies": { 1250 | "queue-microtask": "^1.2.2" 1251 | } 1252 | }, 1253 | "node_modules/sass": { 1254 | "version": "1.66.1", 1255 | "resolved": "https://registry.npmjs.org/sass/-/sass-1.66.1.tgz", 1256 | "integrity": "sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA==", 1257 | "dev": true, 1258 | "dependencies": { 1259 | "chokidar": ">=3.0.0 <4.0.0", 1260 | "immutable": "^4.0.0", 1261 | "source-map-js": ">=0.6.2 <2.0.0" 1262 | }, 1263 | "bin": { 1264 | "sass": "sass.js" 1265 | }, 1266 | "engines": { 1267 | "node": ">=14.0.0" 1268 | } 1269 | }, 1270 | "node_modules/slash": { 1271 | "version": "5.1.0", 1272 | "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz", 1273 | "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==", 1274 | "dev": true, 1275 | "engines": { 1276 | "node": ">=14.16" 1277 | }, 1278 | "funding": { 1279 | "url": "https://github.com/sponsors/sindresorhus" 1280 | } 1281 | }, 1282 | "node_modules/source-map-js": { 1283 | "version": "1.0.2", 1284 | "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", 1285 | "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", 1286 | "dev": true, 1287 | "engines": { 1288 | "node": ">=0.10.0" 1289 | } 1290 | }, 1291 | "node_modules/string-width": { 1292 | "version": "4.2.3", 1293 | "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", 1294 | "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", 1295 | "dev": true, 1296 | "dependencies": { 1297 | "emoji-regex": "^8.0.0", 1298 | "is-fullwidth-code-point": "^3.0.0", 1299 | "strip-ansi": "^6.0.1" 1300 | }, 1301 | "engines": { 1302 | "node": ">=8" 1303 | } 1304 | }, 1305 | "node_modules/strip-ansi": { 1306 | "version": "6.0.1", 1307 | "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", 1308 | "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", 1309 | "dev": true, 1310 | "dependencies": { 1311 | "ansi-regex": "^5.0.1" 1312 | }, 1313 | "engines": { 1314 | "node": ">=8" 1315 | } 1316 | }, 1317 | "node_modules/thenby": { 1318 | "version": "1.3.4", 1319 | "resolved": "https://registry.npmjs.org/thenby/-/thenby-1.3.4.tgz", 1320 | "integrity": "sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==", 1321 | "dev": true 1322 | }, 1323 | "node_modules/to-regex-range": { 1324 | "version": "5.0.1", 1325 | "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", 1326 | "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", 1327 | "dev": true, 1328 | "dependencies": { 1329 | "is-number": "^7.0.0" 1330 | }, 1331 | "engines": { 1332 | "node": ">=8.0" 1333 | } 1334 | }, 1335 | "node_modules/universalify": { 1336 | "version": "2.0.0", 1337 | "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", 1338 | "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==", 1339 | "dev": true, 1340 | "engines": { 1341 | "node": ">= 10.0.0" 1342 | } 1343 | }, 1344 | "node_modules/update-browserslist-db": { 1345 | "version": "1.0.11", 1346 | "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz", 1347 | "integrity": "sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==", 1348 | "dev": true, 1349 | "funding": [ 1350 | { 1351 | "type": "opencollective", 1352 | "url": "https://opencollective.com/browserslist" 1353 | }, 1354 | { 1355 | "type": "tidelift", 1356 | "url": "https://tidelift.com/funding/github/npm/browserslist" 1357 | }, 1358 | { 1359 | "type": "github", 1360 | "url": "https://github.com/sponsors/ai" 1361 | } 1362 | ], 1363 | "dependencies": { 1364 | "escalade": "^3.1.1", 1365 | "picocolors": "^1.0.0" 1366 | }, 1367 | "bin": { 1368 | "update-browserslist-db": "cli.js" 1369 | }, 1370 | "peerDependencies": { 1371 | "browserslist": ">= 4.21.0" 1372 | } 1373 | }, 1374 | "node_modules/vite": { 1375 | "version": "4.4.9", 1376 | "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz", 1377 | "integrity": "sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==", 1378 | "dev": true, 1379 | "dependencies": { 1380 | "esbuild": "^0.18.10", 1381 | "postcss": "^8.4.27", 1382 | "rollup": "^3.27.1" 1383 | }, 1384 | "bin": { 1385 | "vite": "bin/vite.js" 1386 | }, 1387 | "engines": { 1388 | "node": "^14.18.0 || >=16.0.0" 1389 | }, 1390 | "funding": { 1391 | "url": "https://github.com/vitejs/vite?sponsor=1" 1392 | }, 1393 | "optionalDependencies": { 1394 | "fsevents": "~2.3.2" 1395 | }, 1396 | "peerDependencies": { 1397 | "@types/node": ">= 14", 1398 | "less": "*", 1399 | "lightningcss": "^1.21.0", 1400 | "sass": "*", 1401 | "stylus": "*", 1402 | "sugarss": "*", 1403 | "terser": "^5.4.0" 1404 | }, 1405 | "peerDependenciesMeta": { 1406 | "@types/node": { 1407 | "optional": true 1408 | }, 1409 | "less": { 1410 | "optional": true 1411 | }, 1412 | "lightningcss": { 1413 | "optional": true 1414 | }, 1415 | "sass": { 1416 | "optional": true 1417 | }, 1418 | "stylus": { 1419 | "optional": true 1420 | }, 1421 | "sugarss": { 1422 | "optional": true 1423 | }, 1424 | "terser": { 1425 | "optional": true 1426 | } 1427 | } 1428 | }, 1429 | "node_modules/vite-plugin-banner": { 1430 | "version": "0.7.0", 1431 | "resolved": "https://registry.npmjs.org/vite-plugin-banner/-/vite-plugin-banner-0.7.0.tgz", 1432 | "integrity": "sha512-g0cm0wbrR6b6wR8FWtfD1RSDPacdumKEOAnneXv+NpJ9ez+j6rklRv6lMOO+aPf+Y6Zb8OzgIk0FXBZ6h+DeZQ==", 1433 | "dev": true 1434 | }, 1435 | "node_modules/vite/node_modules/fsevents": { 1436 | "version": "2.3.2", 1437 | "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", 1438 | "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", 1439 | "dev": true, 1440 | "hasInstallScript": true, 1441 | "optional": true, 1442 | "os": [ 1443 | "darwin" 1444 | ], 1445 | "engines": { 1446 | "node": "^8.16.0 || ^10.6.0 || >=11.0.0" 1447 | } 1448 | }, 1449 | "node_modules/wrap-ansi": { 1450 | "version": "7.0.0", 1451 | "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", 1452 | "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", 1453 | "dev": true, 1454 | "dependencies": { 1455 | "ansi-styles": "^4.0.0", 1456 | "string-width": "^4.1.0", 1457 | "strip-ansi": "^6.0.0" 1458 | }, 1459 | "engines": { 1460 | "node": ">=10" 1461 | }, 1462 | "funding": { 1463 | "url": "https://github.com/chalk/wrap-ansi?sponsor=1" 1464 | } 1465 | }, 1466 | "node_modules/y18n": { 1467 | "version": "5.0.8", 1468 | "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", 1469 | "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", 1470 | "dev": true, 1471 | "engines": { 1472 | "node": ">=10" 1473 | } 1474 | }, 1475 | "node_modules/yaml": { 1476 | "version": "2.3.2", 1477 | "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.2.tgz", 1478 | "integrity": "sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg==", 1479 | "dev": true, 1480 | "engines": { 1481 | "node": ">= 14" 1482 | } 1483 | }, 1484 | "node_modules/yargs": { 1485 | "version": "17.3.1", 1486 | "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.3.1.tgz", 1487 | "integrity": "sha512-WUANQeVgjLbNsEmGk20f+nlHgOqzRFpiGWVaBrYGYIGANIIu3lWjoyi0fNlFmJkvfhCZ6BXINe7/W2O2bV4iaA==", 1488 | "dev": true, 1489 | "dependencies": { 1490 | "cliui": "^7.0.2", 1491 | "escalade": "^3.1.1", 1492 | "get-caller-file": "^2.0.5", 1493 | "require-directory": "^2.1.1", 1494 | "string-width": "^4.2.3", 1495 | "y18n": "^5.0.5", 1496 | "yargs-parser": "^21.0.0" 1497 | }, 1498 | "engines": { 1499 | "node": ">=12" 1500 | } 1501 | }, 1502 | "node_modules/yargs-parser": { 1503 | "version": "21.0.0", 1504 | "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.0.0.tgz", 1505 | "integrity": "sha512-z9kApYUOCwoeZ78rfRYYWdiU/iNL6mwwYlkkZfJoyMR1xps+NEBX5X7XmRpxkZHhXJ6+Ey00IwKxBBSW9FIjyA==", 1506 | "dev": true, 1507 | "engines": { 1508 | "node": ">=12" 1509 | } 1510 | } 1511 | } 1512 | } 1513 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ritterim/skellycss", 3 | "version": "0.1.6", 4 | "description": "A light-weight CSS framework to quickly implement skeletons into your projects.", 5 | "main": "dist/skelly.js", 6 | "files": [ 7 | "dist/" 8 | ], 9 | "scripts": { 10 | "start": "vite", 11 | "build": "vite build", 12 | "preview": "vite preview" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/ritterim/skellyCSS.git" 17 | }, 18 | "keywords": [ 19 | "skeleton screens", 20 | "skeletons", 21 | "loading skeleton" 22 | ], 23 | "author": "Ritter Insurance Marketing (https://rimdev.io)", 24 | "license": "MIT", 25 | "bugs": { 26 | "url": "https://github.com/ritterim/skellyCSS/issues" 27 | }, 28 | "browserslist": [ 29 | "defaults", 30 | "not IE 11", 31 | "maintained node versions" 32 | ], 33 | "homepage": "https://github.com/ritterim/skellyCSS#readme", 34 | "devDependencies": { 35 | "autoprefixer": "^10.4.15", 36 | "postcss": "^8.4.29", 37 | "postcss-cli": "^10.1.0", 38 | "sass": "^1.66.1", 39 | "vite": "^4.4.9", 40 | "vite-plugin-banner": "^0.7.0" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /package/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Ritter Insurance Marketing 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 | -------------------------------------------------------------------------------- /package/README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 | # skellyCSS 6 | A light-weight CSS framework to quickly implement skeletons into your projects. 7 | 8 | 9 |

Table of Contents

10 | 11 | - [skellyCSS](#skellycss) 12 | - [Installation](#installation) 13 | - [CSS](#css) 14 | - [JavaScript](#javascript) 15 | - [Quick Usage](#quick-usage) 16 | - [Usage](#usage) 17 | - [Headers](#headers) 18 | - [Paragraphs](#paragraphs) 19 | - [Line Width](#line-width) 20 | - [Alignment](#alignment) 21 | - [Images](#images) 22 | - [Sizes](#sizes) 23 | - [Shapes](#shapes) 24 | - [Animation](#animation) 25 | - [JavaScript Utility](#javascript-utility) 26 | 27 |
28 | 29 | ## Installation 30 | ### CSS 31 | Include the skelly.css file wherever you add your CSS: 32 | ``` html 33 | 34 | ``` 35 | 36 | ### JavaScript 37 | Include the skelly.js file wherever you add your JavaScript: 38 | ``` html 39 | 40 | ``` 41 | 42 |
43 | 44 | ## Quick Usage 45 | You can quickly get started using skellyCSS using the JavaScript utility, like so: 46 | ``` html 47 |

48 |

49 | ``` 50 | **See full [JavaScript Utility](#javascript-utility) docs below** 51 | 52 |
53 | 54 | ## Usage 55 | Skeletons can be quickly added to any project with a few simple lines of code. 56 | 57 | ### Headers 58 | Apply the `skeleton` class to any type of header and it will automatically adjust to the font-size of the header stylings: 59 | 60 | ![Headers](images/headers.png) 61 | 62 | ``` html 63 |

64 |

65 |

66 |

67 |
68 |
69 | ``` 70 | 71 |
72 | 73 | ### Paragraphs 74 | You can create paragraph skeletons by applying the `skeleton` class to the paragraph tag, then including however many span tags you'd like with the `skeleton__line` class within the paragraph. In order to make the paragraph skeleton look more like a paragraph, the last line is set to 50% width. 75 | 76 | ![Paragraphs](images/paragraphs.png) 77 | ```html 78 |
79 |

80 | 81 | 82 | 83 | 84 |

85 |
86 | ``` 87 | 88 |
89 | 90 | ### Line Width 91 | You can adjust the line width by applying a size modifier class: 92 | | Width | Modifier Class | 93 | | ------------ | ------------| 94 | | Small, 25% | `.skeleton--sm` | 95 | | Medium, 50% | `.skeleton--md` | 96 | | Large, 75% | `.skeleton--lg` | 97 | | Full, 100% | `.skeleton--full` | 98 | 99 | ![Line Widths](images/line-widths.png) 100 | 101 | ``` html 102 |

103 |

104 |

105 |

106 | ``` 107 | 108 |
109 | 110 | ### Alignment 111 | You can text align the skeleton using alignment modifier classes: 112 | 113 | | Alignment | Modifier Class | 114 | | ------------ | ------------| 115 | | Left | `.skeleton--left` | 116 | | Center | `.skeleton--center` | 117 | | Right | `.skeleton--right` | 118 | 119 | ![Alignment](images/alignment.png) 120 | 121 | ``` html 122 | 123 |

124 | 125 | 126 | 127 | 128 |

129 | 130 | 131 |

132 | 133 | 134 | 135 | 136 |

137 | 138 | 139 |

140 | 141 | 142 | 143 | 144 |

145 | ``` 146 | 147 |
148 | 149 | ### Images 150 | You can create an image skeleton by adding the `.skeleton-image` class to an img tag -- do not include the `src` attribute. By default this will apply the image skeleton at 100% height and width of the parent container. 151 | 152 | #### Sizes 153 | Here are some default sizes we have included for skeleton images: 154 | 155 | | Size | Modifier Class | 156 | | ------------ | ------------| 157 | | Small, 50x50 | `.skeleton-image--sm` | 158 | | Medium, 100x100 | `.skeleton-image--md` | 159 | | Large, 200x200 | `.skeleton-image--lg` | 160 | | X-Large, 400x400 | `.skeleton-image--xl` | 161 | | Full, 100% x 100% | `.skeleton-image--full` | 162 | 163 | ![Images](images/images.png) 164 | 165 | ``` html 166 | 167 | 168 | 169 | 170 | ``` 171 | 172 |
173 | 174 | #### Shapes 175 | You can also make different image shapes using shape modifier classes: 176 | 177 | | Shape | Description | Modifier Class | 178 | | ------------ |------------ | ------------| 179 | | Landscape Rectangle | Sets the width of the image to 100% | `.skeleton-image--landscape` | 180 | | Portrait Rectangle | Sets the height of the image to 100% | `.skeleton-image--portrait` | 181 | | Circle | Sets the border radius to 50% | `.skeleton-image--circle` | 182 | 183 | ![Image Shapes](images/image-shapes.png) 184 | 185 | ``` html 186 | 187 | 188 | 189 | ``` 190 | 191 |
192 | 193 | ### Animation 194 | To add animation, add a `span.skeleton--animation` within the `.skeleton__line` elements in headers or paragaphs. 195 | 196 | ![Animation](images/animation.gif) 197 | 198 | ``` html 199 |
200 |

201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 |

214 |
215 | ``` 216 | 217 |
218 | 219 | ## JavaScript Utility 220 | The easiest and our preferred way to add Skeletons is by using the included JavaScript utilities. 221 | 222 | On either a header tag or a paragraph tag, add the `skeleton` class and a `data-lines` attribute with the number of lines you'd like the skeleton to have: 223 | 224 | ``` html 225 |

226 |

227 | ``` 228 | 229 |
230 | 231 | You can also give the skeleton animation by adding the `data-animation` attribute and setting it to `true`: 232 | 233 | ``` html 234 |

235 |

236 | ``` -------------------------------------------------------------------------------- /package/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ritterim/skellycss", 3 | "version": "0.0.1", 4 | "description": "A light-weight CSS framework to quickly implement skeletons into your projects.", 5 | "main": "dist/skelly.js", 6 | "files":[ 7 | "dist/" 8 | ], 9 | "scripts": { 10 | "test": "echo \"Error: no test specified\" && exit 1", 11 | "dev": "parcel src/skelly.js", 12 | "build": "parcel build src/skelly.js" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/ritterim/skellyCSS.git" 17 | }, 18 | "keywords": ["skeleton screens", "skeletons", "loading skeleton"], 19 | "author": "Ritter Insurance Marketing (https://rimdev.io)", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/ritterim/skellyCSS/issues" 23 | }, 24 | "homepage": "https://github.com/ritterim/skellyCSS#readme", 25 | "devDependencies": { 26 | "cssnano": "^4.1.10", 27 | "sass": "^1.30.0" 28 | }, 29 | "dependencies": { 30 | "assets": "^3.0.1" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require('autoprefixer')] 3 | }; 4 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | const skeletons = document.querySelectorAll('.skeleton'); 2 | 3 | if (skeletons) { 4 | skeletons.forEach((skelly) => { 5 | let lineCount = parseInt(skelly.dataset.lines); 6 | let opacity = skelly.dataset.opacity 7 | ? parseFloat(skelly.dataset.opacity) 8 | : null; 9 | 10 | let color = skelly.dataset.color ? skelly.dataset.color : null; 11 | 12 | if (!lineCount && skelly.innerHTML.trim().length == 0) { 13 | lineCount = 1; 14 | } 15 | 16 | for (let i = 0; i < lineCount; i++) { 17 | const line = document.createElement('span'); 18 | line.classList.add('skeleton__line'); 19 | 20 | if (skelly.dataset.animation === 'true') { 21 | const animationElement = document.createElement('span'); 22 | animationElement.classList.add('skeleton--animation'); 23 | line.append(animationElement); 24 | } 25 | 26 | skelly.append(line); 27 | } 28 | 29 | if (opacity && opacity <= 1) { 30 | const lines = skelly.querySelectorAll('.skeleton__line'); 31 | lines.forEach((line) => (line.style.opacity = opacity)); 32 | } 33 | 34 | if (color) { 35 | const lines = skelly.querySelectorAll('.skeleton__line'); 36 | lines.forEach(line => line.style.setProperty('--skelly-color', color)); 37 | 38 | } 39 | }); 40 | } 41 | 42 | const skeletonImages = document.querySelectorAll('.skeleton-image'); 43 | 44 | if (skeletonImages) { 45 | skeletonImages.forEach((skelly) => { 46 | let animation = skelly.dataset.animation === 'true'; 47 | let opacity = skelly.dataset.opacity 48 | ? parseFloat(skelly.dataset.opacity) 49 | : null; 50 | 51 | if (animation === true) { 52 | const animationElement = document.createElement('span'); 53 | animationElement.classList.add('skeleton--animation'); 54 | skelly.append(animationElement); 55 | } 56 | 57 | if (opacity && opacity <= 1) skelly.style.opacity = opacity; 58 | }); 59 | } 60 | -------------------------------------------------------------------------------- /src/style.scss: -------------------------------------------------------------------------------- 1 | $skelly-color: #EFEFEF; 2 | 3 | :root{ 4 | --skelly-color: #EFEFEF; 5 | } ; 6 | 7 | $skelly-line-widths: ( 8 | "sm": 25%, 9 | "md": 50%, 10 | "lg": 75%, 11 | "full": 100%, 12 | ); 13 | 14 | $skelly-image-sizes: ( 15 | "sm": 50px, 16 | "md": 100px, 17 | "lg": 200px, 18 | "xl": 400px, 19 | "full": 100%, 20 | ); 21 | 22 | .skeleton { 23 | position: relative; 24 | box-sizing: border-box; 25 | display: flex; 26 | flex-flow: column; 27 | width: 100%; 28 | 29 | &__line { 30 | overflow: hidden; 31 | position: relative; 32 | box-sizing: border-box; 33 | display: block; 34 | height: 1em; 35 | width: 100%; 36 | background: var(--skelly-color); 37 | border-radius: 3px; 38 | } 39 | 40 | &__line + &__line:last-child { 41 | width: 50%; 42 | } 43 | 44 | @each $width-label, $width in $skelly-line-widths { 45 | &--#{$width-label} { 46 | width: $width; 47 | } 48 | } 49 | 50 | &--left { 51 | display: flex; 52 | flex-flow: column; 53 | align-items: flex-start; 54 | } 55 | 56 | &--center { 57 | display: flex; 58 | flex-flow: column; 59 | align-items: center; 60 | } 61 | 62 | &--right { 63 | display: flex; 64 | flex-flow: column; 65 | align-items: flex-end; 66 | } 67 | 68 | &--animation { 69 | position: abosolute; 70 | display: flex; 71 | height: 100%; 72 | background: rgb(255, 255, 255); 73 | background: linear-gradient( 74 | 90deg, 75 | rgba(255, 255, 255, 0) 0%, 76 | rgba(255, 255, 255, 0) 10%, 77 | rgba(255, 255, 255, 0.5) 50%, 78 | rgba(255, 255, 255, 0) 90%, 79 | rgba(255, 255, 255, 0) 100% 80 | ); 81 | 82 | animation: shine 3s infinite cubic-bezier(0.55, 0.055, 0.675, 0.19); 83 | } 84 | 85 | &:last-child { 86 | margin-bottom: 0; 87 | } 88 | } 89 | 90 | p { 91 | .skeleton__line { 92 | margin-bottom: 0.6em; 93 | } 94 | } 95 | 96 | .skeleton-image { 97 | overflow: hidden; 98 | display: block; 99 | background-color: var(--skelly-color); 100 | background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBpZD0iTGF5ZXJfMSIgeD0iMCIgeT0iMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjIyLjQgMjg4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyMjIuNCAyODgiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyIvPjxnPjxwYXRoIGQ9Ik0yMTgsNzQuM0wxNDguOSw1LjhjLTItMi00LjgtMy4yLTcuNy0zLjJIMjQuN0MxMi4xLDIuNiwxLjksMTIuOCwxLjksMjUuNFYyNjNjMCwxMi42LDEwLjIsMjIuOCwyMi44LDIyLjhoMTczLjcgYzEyLjYsMCwyMi44LTEwLjIsMjIuOC0yMi44VjgyQzIyMS4yLDc5LjEsMjIwLjEsNzYuMywyMTgsNzQuM3ogTTE0NS44LDM2LjVsNDEuMyw0MWgtNDEuM1YzNi41eiBNMjUuOSwyNjEuOFYyNi42aDk1Ljh2NTkuMiBjMCw4LjYsNywxNS42LDE1LjYsMTUuNmg1OS44djE2MC40SDI1Ljl6Ii8+PGNpcmNsZSBjeD0iNzMuMyIgY3k9IjExNS4yIiByPSIyNy4xIi8+PHBhdGggZD0iTTE0Mi43LDEzNy42Yy0xLjgtMS45LTQuMy0zLTYuOS0yLjljLTIuNiwwLjEtNS4xLDEuMy02LjcsMy4zbC0zOC4yLDQ2LjVsLTkuMy05LjdjLTEuOC0xLjktNC4yLTIuOS02LjgtMi44IGMtMi42LDAuMS01LDEuMy02LjYsMy4zbC0yNS4zLDMwLjZjLTEuMywxLjYtMi4xLDMuNi0yLjEsNS43djI3LjJjMCw1LDQsOSw5LDloMTI0LjhjNSwwLDktNCw5LTlWMTg2YzAtMi4yLTAuOC00LjQtMi4zLTYuMSBMMTQyLjcsMTM3LjZ6IE0xNjUuNiwyMjkuN0g1OC44di0xNWwxNi44LTIwLjNsOS4zLDkuN2MxLjgsMS45LDQuMywyLjksNi44LDIuOGMyLjYtMC4xLDUtMS4zLDYuNi0zLjNsMzgtNDYuM2wyOS4yLDMyLjFWMjI5Ljd6Ii8+PC9nPjwvc3ZnPg=="); 101 | background-blend-mode: overlay; 102 | background-repeat: no-repeat; 103 | background-position: center; 104 | background-size: 15px; 105 | aspect-ratio: 1; 106 | 107 | @each $size-label, $size in $skelly-image-sizes { 108 | &--#{$size-label} { 109 | height: $size; 110 | width: $size; 111 | } 112 | } 113 | 114 | &--square{ 115 | aspect-ratio: 1; 116 | } 117 | 118 | &--landscape { 119 | aspect-ratio: 4/3; 120 | height:auto; 121 | } 122 | 123 | &--portrait { 124 | aspect-ratio: 3/4; 125 | width:auto; 126 | } 127 | 128 | &--wide { 129 | aspect-ratio: 16/9; 130 | height:auto; 131 | } 132 | 133 | &--tall { 134 | aspect-ratio: 9/16; 135 | width:auto; 136 | } 137 | 138 | &--circle { 139 | border-radius: 50%; 140 | } 141 | } 142 | 143 | .skeleton:is(h1, h2, h3, h4, h5, h6) { 144 | margin: 0; 145 | padding: 0; 146 | .skeleton__line { 147 | margin-bottom: 0.2em; 148 | background: var(--skelly-color); 149 | } 150 | &.skeleton--center{ 151 | margin:0 auto; 152 | } 153 | &.skeleton--left{ 154 | margin:0 auto 0 0; 155 | } 156 | &.skeleton--right{ 157 | margin:0 0 0 auto; 158 | } 159 | } 160 | 161 | @keyframes shine { 162 | 0% { 163 | transform: translateX(-100%); 164 | } 165 | 166 | 30% { 167 | transform: translateX(100%); 168 | } 169 | 170 | 100% { 171 | transform: translateX(100%); 172 | } 173 | } 174 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | // vite.config.js 2 | const { defineConfig } = require('vite'); 3 | const path = require('path'); 4 | import banner from 'vite-plugin-banner'; 5 | // import copy from 'rollup-plugin-copy'; 6 | const pjson = require('./package.json'); 7 | const year = new Date().getFullYear(); 8 | 9 | const puiHeader = [ 10 | '/*', 11 | ' SkellyCSS v' + pjson.version + ' | ' + pjson.name + '\n', 12 | ' ' + pjson.description + ' (' + pjson.homepage + ')', 13 | ' ©' + year + ' ' + pjson.author, 14 | ' ' + pjson.bugs.url, 15 | ' Released under the ' + pjson.license + ' license.', 16 | '*/', 17 | '', 18 | ].join('\n'); 19 | 20 | export default defineConfig({ 21 | plugins: [ 22 | banner(puiHeader) 23 | ], 24 | build: { 25 | lib: { 26 | entry: path.resolve(__dirname, 'main.js'), 27 | name: 'SkellyCSS', 28 | fileName: () => `skelly.js`, 29 | }, 30 | }, 31 | }); 32 | --------------------------------------------------------------------------------