fixed nav added rest of routes

This commit is contained in:
specCon18 2024-02-17 01:43:36 -05:00
parent 3e32aa1bed
commit cfec34d133
126 changed files with 15133 additions and 25 deletions

1
assets/htmx.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View file

@ -444,6 +444,201 @@ video {
display: none;
}
[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
border-color: #6b7280;
border-width: 1px;
border-radius: 0px;
padding-top: 0.5rem;
padding-right: 0.75rem;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
font-size: 1rem;
line-height: 1.5rem;
--tw-shadow: 0 0 #0000;
}
[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #2563eb;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
border-color: #2563eb;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: #6b7280;
opacity: 1;
}
input::placeholder,textarea::placeholder {
color: #6b7280;
opacity: 1;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-date-and-time-value {
min-height: 1.5em;
text-align: inherit;
}
::-webkit-datetime-edit {
display: inline-flex;
}
::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
padding-top: 0;
padding-bottom: 0;
}
select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
[multiple],[size]:where(select:not([size="1"])) {
background-image: initial;
background-position: initial;
background-repeat: unset;
background-size: initial;
padding-right: 0.75rem;
-webkit-print-color-adjust: unset;
print-color-adjust: unset;
}
[type='checkbox'],[type='radio'] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
display: inline-block;
vertical-align: middle;
background-origin: border-box;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
flex-shrink: 0;
height: 1rem;
width: 1rem;
color: #2563eb;
background-color: #fff;
border-color: #6b7280;
border-width: 1px;
--tw-shadow: 0 0 #0000;
}
[type='checkbox'] {
border-radius: 0px;
}
[type='radio'] {
border-radius: 100%;
}
[type='checkbox']:focus,[type='radio']:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 2px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #2563eb;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
[type='checkbox']:checked,[type='radio']:checked {
border-color: transparent;
background-color: currentColor;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
[type='checkbox']:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
[type='checkbox']:checked {
-webkit-appearance: auto;
-moz-appearance: auto;
appearance: auto;
}
}
[type='radio']:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
[type='radio']:checked {
-webkit-appearance: auto;
-moz-appearance: auto;
appearance: auto;
}
}
[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
border-color: transparent;
background-color: currentColor;
}
[type='checkbox']:indeterminate {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
border-color: transparent;
background-color: currentColor;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
@media (forced-colors: active) {
[type='checkbox']:indeterminate {
-webkit-appearance: auto;
-moz-appearance: auto;
appearance: auto;
}
}
[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
border-color: transparent;
background-color: currentColor;
}
[type='file'] {
background: unset;
border-color: inherit;
border-width: 0;
border-radius: 0;
padding: 0;
font-size: unset;
line-height: inherit;
}
[type='file']:focus {
outline: 1px solid ButtonText;
outline: 1px auto -webkit-focus-ring-color;
}
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
@ -544,11 +739,413 @@ video {
--tw-backdrop-sepia: ;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.-inset-0 {
inset: -0px;
}
.-inset-0\.5 {
inset: -0.125rem;
}
.inset-y-0 {
top: 0px;
bottom: 0px;
}
.left-0 {
left: 0px;
}
.left-4 {
left: 1rem;
}
.top-4 {
top: 1rem;
}
.mx-72 {
margin-left: 18rem;
margin-right: 18rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.-mb-8 {
margin-bottom: -2rem;
}
.-ml-px {
margin-left: -1px;
}
.block {
display: block;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.flow-root {
display: flow-root;
}
.hidden {
display: none;
}
.h-16 {
height: 4rem;
}
.h-6 {
height: 1.5rem;
}
.h-5 {
height: 1.25rem;
}
.h-8 {
height: 2rem;
}
.h-full {
height: 100%;
}
.w-6 {
width: 1.5rem;
}
.w-0 {
width: 0px;
}
.w-0\.5 {
width: 0.125rem;
}
.w-5 {
width: 1.25rem;
}
.w-8 {
width: 2rem;
}
.min-w-0 {
min-width: 0px;
}
.max-w-7xl {
max-width: 80rem;
}
.flex-1 {
flex: 1 1 0%;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1rem * var(--tw-space-x-reverse));
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.75rem * var(--tw-space-x-reverse));
margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.whitespace-nowrap {
white-space: nowrap;
}
.rounded-md {
border-radius: 0.375rem;
}
.rounded-full {
border-radius: 9999px;
}
.bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.bg-stone-400 {
--tw-bg-opacity: 1;
background-color: rgb(168 162 158 / var(--tw-bg-opacity));
}
.bg-stone-800 {
--tw-bg-opacity: 1;
background-color: rgb(41 37 36 / var(--tw-bg-opacity));
}
.bg-stone-900 {
--tw-bg-opacity: 1;
background-color: rgb(28 25 23 / var(--tw-bg-opacity));
}
.bg-blue-500 {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}
.bg-gray-200 {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
.bg-gray-400 {
--tw-bg-opacity: 1;
background-color: rgb(156 163 175 / var(--tw-bg-opacity));
}
.bg-green-500 {
--tw-bg-opacity: 1;
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}
.p-2 {
padding: 0.5rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.pb-3 {
padding-bottom: 0.75rem;
}
.pb-6 {
padding-bottom: 1.5rem;
}
.pt-2 {
padding-top: 0.5rem;
}
.pt-6 {
padding-top: 1.5rem;
}
.pb-8 {
padding-bottom: 2rem;
}
.pt-1 {
padding-top: 0.25rem;
}
.pt-1\.5 {
padding-top: 0.375rem;
}
.text-right {
text-align: right;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.font-extrabold {
font-weight: 800;
}
.text-red-500 {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity));
.font-medium {
font-weight: 500;
}
.text-gray-300 {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity));
}
.text-stone-100 {
--tw-text-opacity: 1;
color: rgb(245 245 244 / var(--tw-text-opacity));
}
.text-stone-300 {
--tw-text-opacity: 1;
color: rgb(214 211 209 / var(--tw-text-opacity));
}
.text-stone-400 {
--tw-text-opacity: 1;
color: rgb(168 162 158 / var(--tw-text-opacity));
}
.text-stone-900 {
--tw-text-opacity: 1;
color: rgb(28 25 23 / var(--tw-text-opacity));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.text-gray-900 {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
}
.ring-8 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-white {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
}
.hover\:bg-gray-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}
.hover\:bg-stone-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(68 64 60 / var(--tw-bg-opacity));
}
.hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.focus\:ring-2:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-inset:focus {
--tw-ring-inset: inset;
}
.focus\:ring-white:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
}
@media (min-width: 640px) {
.sm\:ml-6 {
margin-left: 1.5rem;
}
.sm\:block {
display: block;
}
.sm\:hidden {
display: none;
}
.sm\:items-stretch {
align-items: stretch;
}
.sm\:justify-start {
justify-content: flex-start;
}
.sm\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media (min-width: 1024px) {
.lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
}

10
node_modules/.modules.yaml generated vendored
View file

@ -103,12 +103,20 @@ hoistedDependencies:
lilconfig: private
/lines-and-columns/1.2.4:
lines-and-columns: private
/lodash.castarray/4.4.0:
lodash.castarray: private
/lodash.isplainobject/4.0.6:
lodash.isplainobject: private
/lodash.merge/4.6.2:
lodash.merge: private
/lru-cache/10.2.0:
lru-cache: private
/merge2/1.4.1:
merge2: private
/micromatch/4.0.5:
micromatch: private
/mini-svg-data-uri/1.4.4:
mini-svg-data-uri: private
/minimatch/9.0.3:
minimatch: private
/minipass/7.0.4:
@ -145,7 +153,7 @@ hoistedDependencies:
postcss-load-config: private
/postcss-nested/6.0.1(postcss@8.4.35):
postcss-nested: private
/postcss-selector-parser/6.0.15:
/postcss-selector-parser/6.0.10:
postcss-selector-parser: private
/postcss-value-parser/4.2.0:
postcss-value-parser: private

View file

@ -0,0 +1,38 @@
name: Bug Report
description: Create a bug report for @tailwindcss/aspect-ratio.
labels: []
body:
- type: input
attributes:
label: What version of @tailwindcss/aspect-ratio are you using?
description: 'For example: v0.2.0'
validations:
required: true
- type: input
attributes:
label: What version of Node.js are you using?
description: 'For example: v12.0.0'
validations:
required: true
- type: input
attributes:
label: What browser are you using?
description: 'For example: Chrome, Safari, or N/A'
validations:
required: true
- type: input
attributes:
label: What operating system are you using?
description: 'For example: macOS, Windows'
validations:
required: true
- type: input
attributes:
label: Reproduction repository
description: A public GitHub repo that includes a minimal reproduction of the bug. Unfortunately we can't provide support without a reproduction, and your issue will be closed and locked with no comment if this is not provided.
validations:
required: true
- type: textarea
attributes:
label: Describe your issue
description: Describe the problem you're seeing, any important steps to reproduce and what behavior you expect instead

View file

@ -0,0 +1,11 @@
blank_issues_enabled: false
contact_links:
- name: Feature Request
url: https://github.com/tailwindlabs/tailwindcss/discussions/new?category=ideas
about: 'Suggest any ideas you have using our discussion forums.'
- name: Help
url: https://github.com/tailwindlabs/tailwindcss/discussions/new?category=help
about: 'If you have a question or need help, ask a question on the discussion forums.'
- name: Kind Words
url: https://github.com/tailwindlabs/tailwindcss/discussions/new?category=kind-words
about: "Have something nice to say about @tailwindcss/aspect-ratio or Tailwind CSS in general? We'd love to hear it!"

View file

@ -0,0 +1,50 @@
name: Release Insiders
on:
push:
branches: [master]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [12]
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v2
with:
node-version: ${{ matrix.node-version }}
registry-url: 'https://registry.npmjs.org'
- name: Use cached node_modules
id: cache
uses: actions/cache@v2
with:
path: node_modules
key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }}
restore-keys: |
nodeModules-
- name: Install dependencies
if: steps.cache.outputs.cache-hit != 'true'
run: npm install
env:
CI: true
- name: Resolve version
id: vars
run: echo "::set-output name=sha_short::$(git rev-parse --short HEAD)"
- name: "Version based on commit: 0.0.0-insiders.${{ steps.vars.outputs.sha_short }}"
run: npm version 0.0.0-insiders.${{ steps.vars.outputs.sha_short }} --force --no-git-tag-version
- name: Publish
run: npm publish --tag insiders
env:
CI: true
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

View file

@ -0,0 +1,95 @@
# Changelog
All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [Unreleased]
- Nothing yet!
## [0.4.2] - 2022-09-02
### Fixed
- Update TypeScript types ([#34](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/pull/34))
## [0.4.1] - 2022-09-01
### Added
- Remove `dist` folder and related dependencies ([#29](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/pull/29))
- Add typescript types ([#33](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/pull/33))
## [0.4.0] - 2021-12-09
### Added
- Make sure that Tailwind CSS v3 is in peerDependencies ([ae97a25](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/commit/ae97a25))
## [0.3.0] - 2021-10-05
### Added
- Support arbitrary values in Tailwind CSS v3.0.0-alpha.1, via the new `matchComponents` API
## [0.2.2] - 2021-10-02
### Fixed
- Fix compatibility with Tailwind CSS v3.0.0-alpha.1
## [0.2.1] - 2021-05-24
### Fixed
- Mark `tailwindcss` as peer-dependency for better monorepo support ([#14](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/pull/14))
## [0.2.0] - 2020-11-16
### Changed
- Prefix custom properties with `tw-` to match Tailwind CSS v2.0 convention ([6802588](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/commit/6802588))
## [0.1.4] - 2020-11-06
### Added
- Add `aspect-none` clas ([73b57ef](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/commit/73b57ef))
## [0.1.3] - 2020-11-06
### Fixed
- Remove debugging statements ([32d68f5](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/commit/32d68f5))
## [0.1.2] - 2020-11-06
### Fixed
- Remove incorrect peer dependencies ([d46bf8f](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/commit/d46bf8f))
## [0.1.1] - 2020-11-06
### Fixed
- Fix entry point so it even works at all ([88fd2f1](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/commit/88fd2f1))
## [0.1.0] - 2020-11-06
Initial release!
[unreleased]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.4.2...HEAD
[0.4.2]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.4.1...v0.4.2
[0.4.1]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.4.0...v0.4.1
[0.4.0]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.3.0...v0.4.0
[0.3.0]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.2.2...v0.3.0
[0.2.2]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.2.1...v0.2.2
[0.2.1]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.2.0...v0.2.1
[0.2.0]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.1.4...v0.2.0
[0.1.4]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.1.3...v0.1.4
[0.1.3]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.1.2...v0.1.3
[0.1.2]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.1.1...v0.1.2
[0.1.1]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.1.0...v0.1.1
[0.1.0]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/releases/tag/v0.1.0

View file

@ -0,0 +1,141 @@
# @tailwindcss/aspect-ratio
A plugin that provides a composable API for giving elements a fixed aspect ratio.
## Installation
Install the plugin from npm:
```sh
npm install -D @tailwindcss/aspect-ratio
```
Then add the plugin to your `tailwind.config.js` file, and disable the `aspectRatio` core plugin to avoid conflicts with the native `aspect-ratio` utilities included in Tailwind CSS v3.0:
```js
// tailwind.config.js
module.exports = {
theme: {
// ...
},
corePlugins: {
aspectRatio: false,
},
plugins: [
require('@tailwindcss/aspect-ratio'),
// ...
],
}
```
## Usage
Combine the `aspect-w-{n}` and `aspect-h-{n}` classes to specify the aspect ratio for an element:
```html
<div class="aspect-w-16 aspect-h-9">
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
```
Use `aspect-none` to remove any aspect ratio behavior:
```html
<div class="aspect-w-16 aspect-h-9 lg:aspect-none">
<!-- ... -->
</div>
```
When removing aspect ratio behavior, if nested elements have `w-{n}` or `h-{n}` classes, ensure they are re-declared with a matching breakpoint prefix:
```html
<div class="aspect-w-16 aspect-h-9 lg:aspect-none">
<img src="..." alt="..." class="w-full h-full object-center object-cover lg:w-full lg:h-full" />
</div>
```
Note that due to the way this currently needs to be implemented ([the old padding-bottom trick](https://css-tricks.com/aspect-ratio-boxes/)) you need to assign the aspect ratio to a _parent_ element, and make the actual element you are trying to size the only child of that parent.
Once the [`aspect-ratio` property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) is supported in modern browsers, we'll add official support to Tailwind CSS itself and deprecate this plugin.
Aspect ratio classes up to 16 are generated by default:
| Width | Height |
| --- | --- |
| `aspect-w-1` | `aspect-h-1` |
| `aspect-w-2` | `aspect-h-2` |
| `aspect-w-3` | `aspect-h-3` |
| `aspect-w-4` | `aspect-h-4` |
| `aspect-w-5` | `aspect-h-5` |
| `aspect-w-6` | `aspect-h-6` |
| `aspect-w-7` | `aspect-h-7` |
| `aspect-w-8` | `aspect-h-8` |
| `aspect-w-9` | `aspect-h-9` |
| `aspect-w-10` | `aspect-h-10` |
| `aspect-w-11` | `aspect-h-11` |
| `aspect-w-12` | `aspect-h-12` |
| `aspect-w-13` | `aspect-h-13` |
| `aspect-w-14` | `aspect-h-14` |
| `aspect-w-15` | `aspect-h-15` |
| `aspect-w-16` | `aspect-h-16` |
## Configuration
You can configure which values and variants are generated by this plugin under the `aspectRatio` key in your `tailwind.config.js` file:
```js
// tailwind.config.js
module.exports = {
theme: {
aspectRatio: {
1: '1',
2: '2',
3: '3',
4: '4',
}
},
variants: {
aspectRatio: ['responsive', 'hover']
}
}
```
## Compatibility with default aspect-ratio utilities
Tailwind CSS v3.0 shipped with [native aspect-ratio](https://tailwindcss.com/docs/aspect-ratio) support, and while these new utilities are great, the `aspect-ratio` property isn't supported in Safari 14, which still has [significant global usage](https://caniuse.com/mdn-css_properties_aspect-ratio). If you need to support Safari 14, this plugin is still the best way to do that.
While it's technically possible to use the new native `aspect-ratio` utilities as well as this plugin in the same project, it doesn't really make a lot of sense to do so. If you're able to use the new native aspect-ratio utilities, just use them instead of this plugin, as they are a lot simpler and work much better.
However, if you do want to use both approaches in your project, maybe as a way of transitioning slowly from the plugin approach to the new native utilities, you'll need to add the following values to your `tailwind.config.js` file:
```js
module.exports = {
// ...
theme: {
aspectRatio: {
auto: 'auto',
square: '1 / 1',
video: '16 / 9',
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
13: '13',
14: '14',
15: '15',
16: '16',
},
},
}
```
This is necessary, as the default `aspectRatio` values are overwritten by this plugin's values.

View file

@ -0,0 +1,17 @@
#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
case `uname` in
*CYGWIN*) basedir=`cygpath -w "$basedir"`;;
esac
if [ -z "$NODE_PATH" ]; then
export NODE_PATH="/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules/tailwindcss/lib/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules/tailwindcss/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/node_modules"
else
export NODE_PATH="/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules/tailwindcss/lib/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules/tailwindcss/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/node_modules:$NODE_PATH"
fi
if [ -x "$basedir/node" ]; then
exec "$basedir/node" "$basedir/../../../../../../tailwindcss@3.4.1/node_modules/tailwindcss/lib/cli.js" "$@"
else
exec node "$basedir/../../../../../../tailwindcss@3.4.1/node_modules/tailwindcss/lib/cli.js" "$@"
fi

View file

@ -0,0 +1,17 @@
#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
case `uname` in
*CYGWIN*) basedir=`cygpath -w "$basedir"`;;
esac
if [ -z "$NODE_PATH" ]; then
export NODE_PATH="/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules/tailwindcss/lib/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules/tailwindcss/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/node_modules"
else
export NODE_PATH="/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules/tailwindcss/lib/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules/tailwindcss/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/node_modules:$NODE_PATH"
fi
if [ -x "$basedir/node" ]; then
exec "$basedir/node" "$basedir/../../../../../../tailwindcss@3.4.1/node_modules/tailwindcss/lib/cli.js" "$@"
else
exec node "$basedir/../../../../../../tailwindcss@3.4.1/node_modules/tailwindcss/lib/cli.js" "$@"
fi

View file

@ -0,0 +1,29 @@
{
"name": "@tailwindcss/aspect-ratio",
"version": "0.4.2",
"main": "src/index.js",
"types": "src/index.d.ts",
"license": "MIT",
"repository": "https://github.com/tailwindlabs/tailwindcss-aspect-ratio",
"publishConfig": {
"access": "public"
},
"prettier": {
"printWidth": 100,
"semi": false,
"singleQuote": true,
"trailingComma": "es5"
},
"scripts": {
"test": "jest"
},
"peerDependencies": {
"tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
},
"devDependencies": {
"jest": "^27.2.4",
"postcss": "^8.2.4",
"tailwindcss": "^3.0.0",
"tailwindcss-v2": "npm:tailwindcss@^2.2.16"
}
}

View file

@ -0,0 +1,2 @@
declare const plugin: { handler: () => void }
export = plugin

View file

@ -0,0 +1,124 @@
const plugin = require('tailwindcss/plugin')
const baseStyles = {
position: 'relative',
paddingBottom: `calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%)`,
}
const childStyles = {
position: 'absolute',
height: '100%',
width: '100%',
top: '0',
right: '0',
bottom: '0',
left: '0',
}
const noneComponent = {
'.aspect-none': {
position: 'static',
paddingBottom: '0',
},
'.aspect-none > *': {
position: 'static',
height: 'auto',
width: 'auto',
top: 'auto',
right: 'auto',
bottom: 'auto',
left: 'auto',
},
}
const aspectRatio = plugin(
function ({ addComponents, matchComponents, theme, variants, e }) {
const values = theme('aspectRatio')
if (matchComponents) {
matchComponents(
{
'aspect-w': (value) => [
{
...baseStyles,
'--tw-aspect-w': value,
},
{
'> *': childStyles,
},
],
'aspect-h': (value) => ({ '--tw-aspect-h': value }),
},
{ values }
)
addComponents(noneComponent)
return
}
const baseSelectors = Object.entries(values)
.map(([key, value]) => {
return `.${e(`aspect-w-${key}`)}`
})
.join(',\n')
const childSelectors = Object.entries(values)
.map(([key, value]) => {
return `.${e(`aspect-w-${key}`)} > *`
})
.join(',\n')
addComponents(
[
{
[baseSelectors]: baseStyles,
[childSelectors]: childStyles,
},
noneComponent,
Object.entries(values).map(([key, value]) => {
return {
[`.${e(`aspect-w-${key}`)}`]: {
'--tw-aspect-w': value,
},
}
}),
Object.entries(values).map(([key, value]) => {
return {
[`.${e(`aspect-h-${key}`)}`]: {
'--tw-aspect-h': value,
},
}
}),
],
variants('aspectRatio')
)
},
{
theme: {
aspectRatio: {
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
13: '13',
14: '14',
15: '15',
16: '16',
},
},
variants: {
aspectRatio: ['responsive'],
},
}
)
module.exports = aspectRatio

View file

@ -0,0 +1,157 @@
const postcss = require('postcss')
let expectedV3 = `
.aspect-w-1 {
position: relative;
padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
--tw-aspect-w: 1
}
.aspect-w-1 > * {
position: absolute;
height: 100%;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0
}
.aspect-w-2 {
position: relative;
padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
--tw-aspect-w: 2
}
.aspect-w-2 > * {
position: absolute;
height: 100%;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0
}
.aspect-h-2 {
--tw-aspect-h: 2
}
.aspect-w-\\[123\\] {
position: relative;
padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
--tw-aspect-w: 123
}
.aspect-w-\\[123\\] > * {
position: absolute;
height: 100%;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0
}
.aspect-w-\\[var\\(--width\\)\\] {
position: relative;
padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
--tw-aspect-w: var(--width)
}
.aspect-w-\\[var\\(--width\\)\\] > * {
position: absolute;
height: 100%;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0
}
.aspect-h-\\[123\\] {
--tw-aspect-h: 123
}
.aspect-h-\\[var\\(--height\\)\\] {
--tw-aspect-h: var(--height)
}
.aspect-none {
position: static;
padding-bottom: 0
}
.aspect-none > * {
position: static;
height: auto;
width: auto;
top: auto;
right: auto;
bottom: auto;
left: auto
}
`
it('v3', () => {
let css = postcss([
require('tailwindcss')({
content: [
{
raw: 'aspect-none aspect-w-1 aspect-w-2 aspect-h-2 aspect-w-[123] aspect-w-[var(--width)] aspect-h-[123] aspect-h-[var(--height)]',
},
],
plugins: [require('../')],
}),
]).process('@tailwind components').css
expect(css).toBe(expectedV3.trim())
})
let expectedV2 = `
.aspect-w-1,
.aspect-w-2 {
position: relative;
padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%)
}
.aspect-w-1 > *,
.aspect-w-2 > * {
position: absolute;
height: 100%;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0
}
.aspect-none {
position: static;
padding-bottom: 0
}
.aspect-none > * {
position: static;
height: auto;
width: auto;
top: auto;
right: auto;
bottom: auto;
left: auto
}
.aspect-w-1 {
--tw-aspect-w: 1
}
.aspect-w-2 {
--tw-aspect-w: 2
}
.aspect-h-2 {
--tw-aspect-h: 2
}
`
it('v2', () => {
postcss([
require('tailwindcss-v2')({
purge: { enabled: true, content: [{ raw: 'aspect-none aspect-w-1 aspect-w-2 aspect-h-2' }] },
variants: [],
plugins: [require('../')],
}),
])
.process('@tailwind components', { from: undefined })
.then(({ css }) => {
expect(css).toBe(expectedV2.trim())
})
})

View file

@ -0,0 +1 @@
../../tailwindcss@3.4.1/node_modules/tailwindcss

View file

@ -0,0 +1,38 @@
name: Bug Report
description: Create a bug report for @tailwindcss/forms.
labels: []
body:
- type: input
attributes:
label: What version of @tailwindcss/forms are you using?
description: 'For example: v0.1.4'
validations:
required: true
- type: input
attributes:
label: What version of Node.js are you using?
description: 'For example: v12.0.0'
validations:
required: true
- type: input
attributes:
label: What browser are you using?
description: 'For example: Chrome, Safari, or N/A'
validations:
required: true
- type: input
attributes:
label: What operating system are you using?
description: 'For example: macOS, Windows'
validations:
required: true
- type: input
attributes:
label: Reproduction repository
description: A public GitHub repo that includes a minimal reproduction of the bug. Unfortunately we can't provide support without a reproduction, and your issue will be closed and locked with no comment if this is not provided.
validations:
required: true
- type: textarea
attributes:
label: Describe your issue
description: Describe the problem you're seeing, any important steps to reproduce and what behavior you expect instead

View file

@ -0,0 +1,11 @@
blank_issues_enabled: false
contact_links:
- name: Feature Request
url: https://github.com/tailwindlabs/tailwindcss/discussions/new?category=ideas
about: 'Suggest any ideas you have using our discussion forums.'
- name: Help
url: https://github.com/tailwindlabs/tailwindcss/discussions/new?category=help
about: 'If you have a question or need help, ask a question on the discussion forums.'
- name: Kind Words
url: https://github.com/tailwindlabs/tailwindcss/discussions/new?category=kind-words
about: "Have something nice to say about @tailwindcss/forms or Tailwind CSS in general? We'd love to hear it!"

View file

@ -0,0 +1,50 @@
name: Release Insiders
on:
push:
branches: [master]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [12]
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v2
with:
node-version: ${{ matrix.node-version }}
registry-url: 'https://registry.npmjs.org'
- name: Use cached node_modules
id: cache
uses: actions/cache@v2
with:
path: node_modules
key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }}
restore-keys: |
nodeModules-
- name: Install dependencies
if: steps.cache.outputs.cache-hit != 'true'
run: npm install
env:
CI: true
- name: Resolve version
id: vars
run: echo "::set-output name=sha_short::$(git rev-parse --short HEAD)"
- name: "Version based on commit: 0.0.0-insiders.${{ steps.vars.outputs.sha_short }}"
run: npm version 0.0.0-insiders.${{ steps.vars.outputs.sha_short }} --force --no-git-tag-version
- name: Publish
run: npm publish --tag insiders
env:
CI: true
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

View file

@ -0,0 +1,173 @@
# Changelog
All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [Unreleased]
- Nothing yet!
## [0.5.7] - 2023-11-10
### Fixed
- Use normal `checkbox` and `radio` appearance in `forced-colors` mode ([#152](https://github.com/tailwindlabs/tailwindcss-forms/pull/152))
## [0.5.6] - 2023-08-28
### Fixed
- Fix date time bottom spacing on MacOS Safari ([#146](https://github.com/tailwindlabs/tailwindcss-forms/pull/146))
## [0.5.5] - 2023-08-22
### Fixed
- Fix text alignment on date and time inputs on iOS ([#144](https://github.com/tailwindlabs/tailwindcss-forms/pull/144))
## [0.5.4] - 2023-07-13
### Fixed
- Remove chevron for selects with a non-default size ([#137](https://github.com/tailwindlabs/tailwindcss-forms/pull/137))
- Allow for <input> without `type` ([#141](https://github.com/tailwindlabs/tailwindcss-forms/pull/141))
## [0.5.3] - 2022-09-02
### Fixed
- Update TypeScript types ([#126](https://github.com/tailwindlabs/tailwindcss-forms/pull/126))
## [0.5.2] - 2022-05-18
### Added
- Add TypeScript type declarations ([#118](https://github.com/tailwindlabs/tailwindcss-forms/pull/118))
## [0.5.1] - 2022-05-03
### Fixed
- Remove duplicate `outline` property ([#116](https://github.com/tailwindlabs/tailwindcss-forms/pull/116))
- Fix autoprefixer warning about `color-adjust` ([#115](https://github.com/tailwindlabs/tailwindcss-forms/pull/115))
## [0.5.0] - 2022-03-02
### Changed
- Generate both global styles and classes by default ([#71](https://github.com/tailwindlabs/tailwindcss-forms/pull/71))
## [0.4.1] - 2022-03-02
### Added
- Remove `dist` folder and related dependencies ([#96](https://github.com/tailwindlabs/tailwindcss-forms/pull/96))
### Fixed
- Use `addComponents` for class strategy ([#91](https://github.com/tailwindlabs/tailwindcss-forms/pull/91))
- Fix extra height on Safari date/time inputs ([#109](https://github.com/tailwindlabs/tailwindcss-forms/pull/109))
## [0.4.0] - 2021-12-09
### Changed
- Update color palette references for v3 ([#83](https://github.com/tailwindlabs/tailwindcss-forms/pull/83))
- Don't read outline.none value from config ([#89](https://github.com/tailwindlabs/tailwindcss-forms/pull/89))
## [0.3.4] - 2021-09-28
### Fixed
- Fix compatibility with `optimizeUniversalDefaults` experimental feature in Tailwind CSS v2.2 ([#81](https://github.com/tailwindlabs/tailwindcss-forms/pull/81))
## [0.3.3] - 2021-06-03
### Fixed
- Fix typo in selector when using `class` strategy that breaks background colors on checkboxes and radio buttons ([#72](https://github.com/tailwindlabs/tailwindcss-forms/pull/72))
## [0.3.2] - 2021-03-26
### Fixed
- Filter `null` rules for JIT compatibility ([b4c4e03](https://github.com/tailwindlabs/tailwindcss-forms/commit/b4c4e039337c3a5599f5b6d9eabbcc8ab9e8c8d9))
## [0.3.1] - 2021-03-26
### Fixed
- Use `base` as default strategy, not `class` ([#61](https://github.com/tailwindlabs/tailwindcss-forms/pull/61))
## [0.3.0] - 2021-03-25
### Added
- Add `class` strategy for you babies and your custom select and date picker libraries ;) ([#39](https://github.com/tailwindlabs/tailwindcss-forms/pull/39))
## [0.2.1] - 2020-11-17
### Fixed
- Fix issue where default checkbox/radio border color took precedence over user border color on focus ([d0b9fd9](https://github.com/tailwindlabs/tailwindcss-forms/commit/d0b9fd9))
## [0.2.0] - 2020-11-16
### Changed
- Update form styles to be less opinionated and encourage custom styling ([3288709](https://github.com/tailwindlabs/tailwindcss-forms/commit/3288709b59f4101511ec19f30cb2dafe7738251e))
- Update custom property names to match namespaced variables in Tailwind CSS v2.0 ([adb9807](https://github.com/tailwindlabs/tailwindcss-forms/commit/adb98078fc830d0416cb5ea2c895e997d5f0a5ec), [bbd8510](https://github.com/tailwindlabs/tailwindcss-forms/commit/bbd85102ef4a402b3c39d997c025208a33694cc4))
## [0.1.4] - 2020-11-12
### Fixed
- Fix SVG background images not rendering properly in all browsers ([#5](https://github.com/tailwindlabs/tailwindcss-forms/pull/5))
## [0.1.3] - 2020-11-12
### Changed
- Update focus styles to account for changes to `ring` API in latest Tailwind CSS 2.0 alpha ([5c16689](https://github.com/tailwindlabs/tailwindcss-forms/commit/5c166896b06475832bd8364f9f3ef5c4baec585f))
## [0.1.2] - 2020-11-11
### Fixed
- Work around iOS Safari bug that causes date inputs to render with no height when empty ([b98365b](https://github.com/tailwindlabs/tailwindcss-forms/commit/b98365b903b586bfbe7a6ae745ba64b5d87e23e3))
## [0.1.1] - 2020-11-11
### Changed
- Move `tailwindcss` to dependencies, hoping to get it working with Tailwind Play ([d625ea1](https://github.com/tailwindlabs/tailwindcss-forms/commit/d625ea11bd111a4d8cde937e36f3d229ecdf7c6a))
## [0.1.0] - 2020-11-11
Initial release!
[unreleased]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.7...HEAD
[0.5.7]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.6...v0.5.7
[0.5.6]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.5...v0.5.6
[0.5.5]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.4...v0.5.5
[0.5.4]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.3...v0.5.4
[0.5.3]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.2...v0.5.3
[0.5.2]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.1...v0.5.2
[0.5.1]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.0...v0.5.1
[0.5.0]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.4.1...v0.5.0
[0.4.1]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.4.0...v0.4.1
[0.4.0]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.3.3...v0.4.0
[0.3.4]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.3.3...v0.3.4
[0.3.3]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.3.2...v0.3.3
[0.3.2]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.3.1...v0.3.2
[0.3.1]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.3.0...v0.3.1
[0.3.0]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.2.1...v0.3.0
[0.2.1]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.2.0...v0.2.1
[0.2.0]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.1.4...v0.2.0
[0.1.4]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.1.3...v0.1.4
[0.1.3]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.1.2...v0.1.3
[0.1.2]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.1.1...v0.1.2
[0.1.1]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.1.0...v0.1.1
[0.1.0]: https://github.com/tailwindlabs/tailwindcss-forms/releases/tag/v0.1.0

View file

@ -0,0 +1,21 @@
MIT License
Copyright (c) Tailwind Labs, Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View file

@ -0,0 +1,122 @@
# @tailwindcss/forms
A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
## Installation
Install the plugin from npm:
```sh
npm install -D @tailwindcss/forms
```
Then add the plugin to your `tailwind.config.js` file:
```js
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('@tailwindcss/forms'),
// ...
],
}
```
## Basic usage
[**View the live demo**](https://tailwindcss-forms.vercel.app/)
All of the basic form elements you use will now have some simple default styles that are easy to override with utilities.
Currently we add basic utility-friendly form styles for the following form element types:
- `input[type='text']`
- `input[type='password']`
- `input[type='email']`
- `input[type='number']`
- `input[type='url']`
- `input[type='date']`
- `input[type='datetime-local']`
- `input[type='month']`
- `input[type='week']`
- `input[type='time']`
- `input[type='search']`
- `input[type='tel']`
- `input[type='checkbox']`
- `input[type='radio']`
- `select`
- `select[multiple]`
- `textarea`
Every element has been normalized/reset to a simple visually consistent style that is easy to customize with utilities, even elements like `<select>` or `<input type="checkbox">` that normally need to be reset with `appearance: none` and customized using custom CSS:
```html
<!-- You can actually customize padding on a select element now: -->
<select class="px-4 py-3 rounded-full">
<!-- ... -->
</select>
<!-- Or change a checkbox color using text color utilities: -->
<input type="checkbox" class="rounded text-pink-500" />
```
More customization examples and best practices coming soon.
### Using classes to style
In addition to the global styles, we also generate a set of corresponding classes which can be used to explicitly apply the form styles to an element. This can be useful in situations where you need to make a non-form element, such as a `<div>`, look like a form element.
```html
<input type="email" class="form-input px-4 py-3 rounded-full">
<select class="form-select px-4 py-3 rounded-full">
<!-- ... -->
</select>
<input type="checkbox" class="form-checkbox rounded text-pink-500" />
```
Here is a complete table of the provided `form-*` classes for reference:
| Base | Class |
| ------------------------- | ------------------ |
| `[type='text']` | `form-input` |
| `[type='email']` | `form-input` |
| `[type='url']` | `form-input` |
| `[type='password']` | `form-input` |
| `[type='number']` | `form-input` |
| `[type='date']` | `form-input` |
| `[type='datetime-local']` | `form-input` |
| `[type='month']` | `form-input` |
| `[type='search']` | `form-input` |
| `[type='tel']` | `form-input` |
| `[type='time']` | `form-input` |
| `[type='week']` | `form-input` |
| `textarea` | `form-textarea` |
| `select` | `form-select` |
| `select[multiple]` | `form-multiselect` |
| `[type='checkbox']` | `form-checkbox` |
| `[type='radio']` | `form-radio` |
### Using only global styles or only classes
Although we recommend thinking of this plugin as a "form reset" rather than a collection of form component styles, in some cases our default approach may be too heavy-handed, especially when integrating this plugin into existing projects.
If generating both the global (base) styles and classes doesn't work well with your project, you can use the `strategy` option to limit the plugin to just one of these approaches.
```js
// tailwind.config.js
plugins: [
require("@tailwindcss/forms")({
strategy: 'base', // only generate global styles
strategy: 'class', // only generate classes
}),
],
```
When using the `base` strategy, form elements are styled globally, and no `form-{name}` classes are generated.
When using the `class` strategy, form elements are not styled globally, and instead must be styled using the generated `form-{name}` classes.

View file

@ -0,0 +1,255 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@tailwindcss/forms examples</title>
<link rel="stylesheet" href="/dist/tailwind.css" />
</head>
<body>
<div class="antialiased text-gray-900 px-6">
<div class="max-w-xl mx-auto py-12 divide-y md:max-w-4xl">
<div class="py-8">
<h1 class="text-4xl font-bold">@tailwindcss/forms examples</h1>
<p class="mt-2 text-lg text-gray-600">
An opinionated form reset designed to make form elements easy to style with utility
classes.
</p>
<div class="mt-4 flex space-x-4">
<a class="text-lg underline" href="https://github.com/tailwindlabs/tailwindcss-forms"
>Documentation</a
>
<a class="text-lg underline" href="/kitchen-sink.html">Kitchen Sink</a>
</div>
</div>
<div class="py-12">
<h2 class="text-2xl font-bold">Unstyled</h2>
<p class="mt-2 text-lg text-gray-600">This is how form elements look out of the box.</p>
<div class="mt-8 max-w-md">
<div class="grid grid-cols-1 gap-6">
<label class="block">
<span class="text-gray-700">Full name</span>
<input type="text" class="mt-1 block w-full" placeholder="" />
</label>
<label class="block">
<span class="text-gray-700">Email address</span>
<input type="email" class="mt-1 block w-full" placeholder="john@example.com" />
</label>
<label class="block">
<span class="text-gray-700">When is your event?</span>
<input type="date" class="mt-1 block w-full" />
</label>
<label class="block">
<span class="text-gray-700">What type of event is it?</span>
<select class="block w-full mt-1">
<option>Corporate event</option>
<option>Wedding</option>
<option>Birthday</option>
<option>Other</option>
</select>
</label>
<label class="block">
<span class="text-gray-700">Additional details</span>
<textarea class="mt-1 block w-full" rows="3"></textarea>
</label>
<div class="block">
<div class="mt-2">
<div>
<label class="inline-flex items-center">
<input type="checkbox" checked />
<span class="ml-2">Email me news and special offers</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="py-12">
<h2 class="text-2xl font-bold">Simple</h2>
<div class="mt-8 max-w-md">
<div class="grid grid-cols-1 gap-6">
<label class="block">
<span class="text-gray-700">Full name</span>
<input
type="text"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
placeholder=""
/>
</label>
<label class="block">
<span class="text-gray-700">Email address</span>
<input
type="email"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
placeholder="john@example.com"
/>
</label>
<label class="block">
<span class="text-gray-700">When is your event?</span>
<input
type="date"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
/>
</label>
<label class="block">
<span class="text-gray-700">What type of event is it?</span>
<select
class="block w-full mt-1 rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
>
<option>Corporate event</option>
<option>Wedding</option>
<option>Birthday</option>
<option>Other</option>
</select>
</label>
<label class="block">
<span class="text-gray-700">Additional details</span>
<textarea
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
rows="3"
></textarea>
</label>
<div class="block">
<div class="mt-2">
<div>
<label class="inline-flex items-center">
<input
type="checkbox"
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-offset-0 focus:ring-indigo-200 focus:ring-opacity-50"
checked
/>
<span class="ml-2">Email me news and special offers</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="py-12">
<h2 class="text-2xl font-bold">Underline</h2>
<div class="mt-8 max-w-md">
<div class="grid grid-cols-1 gap-6">
<label class="block">
<span class="text-gray-700">Full name</span>
<input
type="text"
class="mt-0 block w-full px-0.5 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
placeholder=""
/>
</label>
<label class="block">
<span class="text-gray-700">Email address</span>
<input
type="email"
class="mt-0 block w-full px-0.5 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
placeholder="john@example.com"
/>
</label>
<label class="block">
<span class="text-gray-700">When is your event?</span>
<input
type="date"
class="mt-0 block w-full px-0.5 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
/>
</label>
<label class="block">
<span class="text-gray-700">What type of event is it?</span>
<select
class="block w-full mt-0 px-0.5 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
>
<option>Corporate event</option>
<option>Wedding</option>
<option>Birthday</option>
<option>Other</option>
</select>
</label>
<label class="block">
<span class="text-gray-700">Additional details</span>
<textarea
class="mt-0 block w-full px-0.5 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
rows="2"
></textarea>
</label>
<div class="block">
<div class="mt-2">
<div>
<label class="inline-flex items-center">
<input
type="checkbox"
class="border-gray-300 border-2 text-black focus:border-gray-300 focus:ring-black"
/>
<span class="ml-2">Email me news and special offers</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="py-12">
<h2 class="text-2xl font-bold">Solid</h2>
<div class="mt-8 max-w-md">
<div class="grid grid-cols-1 gap-6">
<label class="block">
<span class="text-gray-700">Full name</span>
<input
type="text"
class="mt-1 block w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0"
placeholder=""
/>
</label>
<label class="block">
<span class="text-gray-700">Email address</span>
<input
type="email"
class="mt-1 block w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0"
placeholder="john@example.com"
/>
</label>
<label class="block">
<span class="text-gray-700">When is your event?</span>
<input
type="date"
class="mt-1 block w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0"
/>
</label>
<label class="block">
<span class="text-gray-700">What type of event is it?</span>
<select
class="block w-full mt-1 rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0"
>
<option>Corporate event</option>
<option>Wedding</option>
<option>Birthday</option>
<option>Other</option>
</select>
</label>
<label class="block">
<span class="text-gray-700">Additional details</span>
<textarea
class="mt-1 block w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0"
rows="3"
></textarea>
</label>
<div class="block">
<div class="mt-2">
<div>
<label class="inline-flex items-center">
<input
type="checkbox"
class="rounded bg-gray-200 border-transparent focus:border-transparent focus:bg-gray-200 text-gray-700 focus:ring-1 focus:ring-offset-2 focus:ring-gray-500"
/>
<span class="ml-2">Email me news and special offers</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,222 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@tailwindcss/forms Kitchen Sink</title>
<link rel="stylesheet" href="/dist/tailwind.css" />
</head>
<body>
<div class="antialiased text-gray-900 px-6">
<div class="max-w-xl mx-auto py-12 md:max-w-4xl">
<h2 class="text-2xl font-bold">Reset styles</h2>
<p class="mt-2 text-lg text-gray-500">
These are form elements this plugin styles by default.
</p>
<div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
<div class="grid grid-cols-1 gap-6">
<label class="block">
<span class="text-gray-700">Input (text)</span>
<input
type="text"
class="form-input mt-1 block w-full"
placeholder="john@example.com"
/>
</label>
<label class="block">
<span class="text-gray-700">Input (email)</span>
<input
type="email"
class="form-input mt-1 block w-full"
placeholder="john@example.com"
/>
</label>
<label class="block">
<span class="text-gray-700">Input (email, multiple)</span>
<input
type="email"
multiple
class="form-input mt-1 block w-full"
placeholder="john@example.com"
/>
</label>
<label class="block">
<span class="text-gray-700">Input (password)</span>
<input
type="password"
class="form-input mt-1 block w-full"
placeholder="john@example.com"
/>
</label>
<label class="block">
<span class="text-gray-700">Input (date)</span>
<input type="date" class="form-input mt-1 block w-full" />
</label>
<label class="block">
<span class="text-gray-700">Input (datetime-local)</span>
<input type="datetime-local" class="form-input mt-1 block w-full" />
</label>
<label class="block">
<span class="text-gray-700">Input (month)</span>
<input type="month" class="form-input mt-1 block w-full" />
</label>
<label class="block">
<span class="text-gray-700">Input (number)</span>
<input type="number" class="form-input mt-1 block w-full" />
</label>
<label class="block">
<span class="text-gray-700">Input (search)</span>
<input type="search" class="form-input mt-1 block w-full" />
</label>
<label class="block">
<span class="text-gray-700">Input (time)</span>
<input type="time" class="form-input mt-1 block w-full" />
</label>
<label class="block">
<span class="text-gray-700">Input (week)</span>
<input type="week" class="form-input mt-1 block w-full" />
</label>
</div>
<div class="grid grid-cols-1 gap-6">
<label class="block">
<span class="text-gray-700">Input (tel)</span>
<input
type="tel"
multiple
class="form-input mt-1 block w-full"
placeholder="john@example.com"
/>
</label>
<label class="block">
<span class="text-gray-700">Input (url)</span>
<input
type="url"
multiple
class="form-input mt-1 block w-full"
placeholder="john@example.com"
/>
</label>
<label class="block">
<span class="text-gray-700">Select</span>
<select class="form-select block w-full mt-1">
<option>Option 1</option>
<option>Option 2</option>
</select>
</label>
<label class="block">
<span class="text-gray-700">Select (single, with size)</span>
<select class="form-select block w-full mt-1" size="3">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</label>
<label class="block">
<span class="text-gray-700">Select (multiple)</span>
<select class="form-multiselect block w-full mt-1" multiple>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</label>
<label class="block">
<span class="text-gray-700">Select (multiple, with size)</span>
<select class="form-multiselect block w-full mt-1" multiple size="3">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</label>
<label class="block">
<span class="text-gray-700">Textarea</span>
<textarea
class="form-textarea mt-1 block w-full h-24"
rows="3"
placeholder="Enter some long form content."
></textarea>
</label>
<fieldset class="block">
<legend class="text-gray-700">Checkboxes</legend>
<div class="mt-2">
<div>
<label class="inline-flex items-center">
<input class="form-checkbox" type="checkbox" checked />
<span class="ml-2">Option 1</span>
</label>
</div>
<div>
<label class="inline-flex items-center">
<input class="form-checkbox" type="checkbox" />
<span class="ml-2">Option 2</span>
</label>
</div>
<div>
<label class="inline-flex items-center">
<input class="form-checkbox" type="checkbox" />
<span class="ml-2">Option 3</span>
</label>
</div>
</div>
</fieldset>
<fieldset class="block">
<legend class="text-gray-700">Radio Buttons</legend>
<div class="mt-2">
<div>
<label class="inline-flex items-center">
<input class="form-radio" type="radio" checked name="radio-direct" value="1" />
<span class="ml-2">Option 1</span>
</label>
</div>
<div>
<label class="inline-flex items-center">
<input class="form-radio" type="radio" name="radio-direct" value="2" />
<span class="ml-2">Option 2</span>
</label>
</div>
<div>
<label class="inline-flex items-center">
<input class="form-radio" type="radio" name="radio-direct" value="3" />
<span class="ml-2">Option 3</span>
</label>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div class="max-w-4xl mx-auto py-12">
<h2 class="text-2xl font-bold">Untouched</h2>
<p class="mt-2 text-lg text-gray-500">
These are form elements we don't handle (yet?), but we use this to make sure we haven't
accidentally styled them by mistake.
</p>
<div class="mt-8 grid grid-cols-2 gap-6 items-start">
<div class="grid grid-cols-1 gap-6">
<label class="block">
<span class="text-gray-700">Input (range)</span>
<input type="range" class="mt-1 block w-full" />
</label>
<label class="block">
<span class="text-gray-700">Input (color)</span>
<input type="color" class="mt-1 block w-full" />
</label>
<label class="block">
<span class="text-gray-700">Input (file)</span>
<input type="file" class="mt-1 block w-full" />
</label>
<label class="block">
<span class="text-gray-700">Input (file, multiple)</span>
<input type="file" multiple class="mt-1 block w-full" />
</label>
</div>
</div>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,17 @@
#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
case `uname` in
*CYGWIN*) basedir=`cygpath -w "$basedir"`;;
esac
if [ -z "$NODE_PATH" ]; then
export NODE_PATH="/home/speccon18/code/portfolio/node_modules/.pnpm/mini-svg-data-uri@1.4.4/node_modules/mini-svg-data-uri/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/mini-svg-data-uri@1.4.4/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/node_modules"
else
export NODE_PATH="/home/speccon18/code/portfolio/node_modules/.pnpm/mini-svg-data-uri@1.4.4/node_modules/mini-svg-data-uri/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/mini-svg-data-uri@1.4.4/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/node_modules:$NODE_PATH"
fi
if [ -x "$basedir/node" ]; then
exec "$basedir/node" "$basedir/../../../../../../mini-svg-data-uri@1.4.4/node_modules/mini-svg-data-uri/cli.js" "$@"
else
exec node "$basedir/../../../../../../mini-svg-data-uri@1.4.4/node_modules/mini-svg-data-uri/cli.js" "$@"
fi

View file

@ -0,0 +1,17 @@
#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
case `uname` in
*CYGWIN*) basedir=`cygpath -w "$basedir"`;;
esac
if [ -z "$NODE_PATH" ]; then
export NODE_PATH="/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules/tailwindcss/lib/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules/tailwindcss/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/node_modules"
else
export NODE_PATH="/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules/tailwindcss/lib/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules/tailwindcss/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/node_modules:$NODE_PATH"
fi
if [ -x "$basedir/node" ]; then
exec "$basedir/node" "$basedir/../../../../../../tailwindcss@3.4.1/node_modules/tailwindcss/lib/cli.js" "$@"
else
exec node "$basedir/../../../../../../tailwindcss@3.4.1/node_modules/tailwindcss/lib/cli.js" "$@"
fi

View file

@ -0,0 +1,17 @@
#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
case `uname` in
*CYGWIN*) basedir=`cygpath -w "$basedir"`;;
esac
if [ -z "$NODE_PATH" ]; then
export NODE_PATH="/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules/tailwindcss/lib/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules/tailwindcss/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/node_modules"
else
export NODE_PATH="/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules/tailwindcss/lib/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules/tailwindcss/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/node_modules:$NODE_PATH"
fi
if [ -x "$basedir/node" ]; then
exec "$basedir/node" "$basedir/../../../../../../tailwindcss@3.4.1/node_modules/tailwindcss/lib/cli.js" "$@"
else
exec node "$basedir/../../../../../../tailwindcss@3.4.1/node_modules/tailwindcss/lib/cli.js" "$@"
fi

View file

@ -0,0 +1,36 @@
{
"name": "@tailwindcss/forms",
"version": "0.5.7",
"main": "src/index.js",
"types": "src/index.d.ts",
"license": "MIT",
"repository": "https://github.com/tailwindlabs/tailwindcss-forms",
"publishConfig": {
"access": "public"
},
"prettier": {
"printWidth": 100,
"semi": false,
"singleQuote": true,
"trailingComma": "es5"
},
"scripts": {
"dev": "concurrently \"npm run serve\" \"npm run watch\"",
"serve": "live-server .",
"watch": "npm run build -- -w",
"build": "tailwindcss -o dist/tailwind.css"
},
"peerDependencies": {
"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
},
"devDependencies": {
"autoprefixer": "^10.4.6",
"concurrently": "^5.3.0",
"live-server": "^1.2.2",
"postcss": "^8.4.13",
"tailwindcss": "^3.0.24"
},
"dependencies": {
"mini-svg-data-uri": "^1.2.3"
}
}

View file

@ -0,0 +1,7 @@
declare function plugin(options?: Partial<{ strategy: 'base' | 'class' }>): { handler: () => void }
declare namespace plugin {
const __isOptionsFunction: true
}
export = plugin

View file

@ -0,0 +1,358 @@
const svgToDataUri = require('mini-svg-data-uri')
const plugin = require('tailwindcss/plugin')
const defaultTheme = require('tailwindcss/defaultTheme')
const colors = require('tailwindcss/colors')
const [baseFontSize, { lineHeight: baseLineHeight }] = defaultTheme.fontSize.base
const { spacing, borderWidth, borderRadius } = defaultTheme
function resolveColor(color, opacityVariableName) {
return color.replace('<alpha-value>', `var(${opacityVariableName}, 1)`)
}
const forms = plugin.withOptions(function (options = { strategy: undefined }) {
return function ({ addBase, addComponents, theme }) {
const strategy = options.strategy === undefined ? ['base', 'class'] : [options.strategy]
const rules = [
{
base: [
"[type='text']",
'input:where(:not([type]))',
"[type='email']",
"[type='url']",
"[type='password']",
"[type='number']",
"[type='date']",
"[type='datetime-local']",
"[type='month']",
"[type='search']",
"[type='tel']",
"[type='time']",
"[type='week']",
'[multiple]',
'textarea',
'select',
],
class: ['.form-input', '.form-textarea', '.form-select', '.form-multiselect'],
styles: {
appearance: 'none',
'background-color': '#fff',
'border-color': resolveColor(
theme('colors.gray.500', colors.gray[500]),
'--tw-border-opacity'
),
'border-width': borderWidth['DEFAULT'],
'border-radius': borderRadius.none,
'padding-top': spacing[2],
'padding-right': spacing[3],
'padding-bottom': spacing[2],
'padding-left': spacing[3],
'font-size': baseFontSize,
'line-height': baseLineHeight,
'--tw-shadow': '0 0 #0000',
'&:focus': {
outline: '2px solid transparent',
'outline-offset': '2px',
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-ring-offset-width': '0px',
'--tw-ring-offset-color': '#fff',
'--tw-ring-color': resolveColor(
theme('colors.blue.600', colors.blue[600]),
'--tw-ring-opacity'
),
'--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
'--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
'box-shadow': `var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)`,
'border-color': resolveColor(
theme('colors.blue.600', colors.blue[600]),
'--tw-border-opacity'
),
},
},
},
{
base: ['input::placeholder', 'textarea::placeholder'],
class: ['.form-input::placeholder', '.form-textarea::placeholder'],
styles: {
color: resolveColor(theme('colors.gray.500', colors.gray[500]), '--tw-text-opacity'),
opacity: '1',
},
},
{
base: ['::-webkit-datetime-edit-fields-wrapper'],
class: ['.form-input::-webkit-datetime-edit-fields-wrapper'],
styles: {
padding: '0',
},
},
{
// Unfortunate hack until https://bugs.webkit.org/show_bug.cgi?id=198959 is fixed.
// This sucks because users can't change line-height with a utility on date inputs now.
// Reference: https://github.com/twbs/bootstrap/pull/31993
base: ['::-webkit-date-and-time-value'],
class: ['.form-input::-webkit-date-and-time-value'],
styles: {
'min-height': '1.5em',
},
},
{
// In Safari on iOS date and time inputs are centered instead of left-aligned and can't be
// changed with `text-align` utilities on the input by default. Resetting this to `inherit`
// makes them left-aligned by default and makes it possible to override the alignment with
// utility classes without using an arbitrary variant to target the pseudo-elements.
base: ['::-webkit-date-and-time-value'],
class: ['.form-input::-webkit-date-and-time-value'],
styles: {
'text-align': 'inherit',
},
},
{
// In Safari on macOS date time inputs that are set to `display: block` have unexpected
// extra bottom spacing. This can be corrected by setting the `::-webkit-datetime-edit`
// pseudo-element to `display: inline-flex`, instead of the browser default of
// `display: inline-block`.
base: ['::-webkit-datetime-edit'],
class: ['.form-input::-webkit-datetime-edit'],
styles: {
display: 'inline-flex',
},
},
{
// In Safari on macOS date time inputs are 4px taller than normal inputs
// This is because there is extra padding on the datetime-edit and datetime-edit-{part}-field pseudo elements
// See https://github.com/tailwindlabs/tailwindcss-forms/issues/95
base: [
'::-webkit-datetime-edit',
'::-webkit-datetime-edit-year-field',
'::-webkit-datetime-edit-month-field',
'::-webkit-datetime-edit-day-field',
'::-webkit-datetime-edit-hour-field',
'::-webkit-datetime-edit-minute-field',
'::-webkit-datetime-edit-second-field',
'::-webkit-datetime-edit-millisecond-field',
'::-webkit-datetime-edit-meridiem-field',
],
class: [
'.form-input::-webkit-datetime-edit',
'.form-input::-webkit-datetime-edit-year-field',
'.form-input::-webkit-datetime-edit-month-field',
'.form-input::-webkit-datetime-edit-day-field',
'.form-input::-webkit-datetime-edit-hour-field',
'.form-input::-webkit-datetime-edit-minute-field',
'.form-input::-webkit-datetime-edit-second-field',
'.form-input::-webkit-datetime-edit-millisecond-field',
'.form-input::-webkit-datetime-edit-meridiem-field',
],
styles: {
'padding-top': 0,
'padding-bottom': 0,
},
},
{
base: ['select'],
class: ['.form-select'],
styles: {
'background-image': `url("${svgToDataUri(
`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="${resolveColor(
theme('colors.gray.500', colors.gray[500]),
'--tw-stroke-opacity'
)}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>`
)}")`,
'background-position': `right ${spacing[2]} center`,
'background-repeat': `no-repeat`,
'background-size': `1.5em 1.5em`,
'padding-right': spacing[10],
'print-color-adjust': `exact`,
},
},
{
base: ['[multiple]', '[size]:where(select:not([size="1"]))'],
class: ['.form-select:where([size]:not([size="1"]))'],
styles: {
'background-image': 'initial',
'background-position': 'initial',
'background-repeat': 'unset',
'background-size': 'initial',
'padding-right': spacing[3],
'print-color-adjust': 'unset',
},
},
{
base: [`[type='checkbox']`, `[type='radio']`],
class: ['.form-checkbox', '.form-radio'],
styles: {
appearance: 'none',
padding: '0',
'print-color-adjust': 'exact',
display: 'inline-block',
'vertical-align': 'middle',
'background-origin': 'border-box',
'user-select': 'none',
'flex-shrink': '0',
height: spacing[4],
width: spacing[4],
color: resolveColor(theme('colors.blue.600', colors.blue[600]), '--tw-text-opacity'),
'background-color': '#fff',
'border-color': resolveColor(
theme('colors.gray.500', colors.gray[500]),
'--tw-border-opacity'
),
'border-width': borderWidth['DEFAULT'],
'--tw-shadow': '0 0 #0000',
},
},
{
base: [`[type='checkbox']`],
class: ['.form-checkbox'],
styles: {
'border-radius': borderRadius['none'],
},
},
{
base: [`[type='radio']`],
class: ['.form-radio'],
styles: {
'border-radius': '100%',
},
},
{
base: [`[type='checkbox']:focus`, `[type='radio']:focus`],
class: ['.form-checkbox:focus', '.form-radio:focus'],
styles: {
outline: '2px solid transparent',
'outline-offset': '2px',
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-ring-offset-width': '2px',
'--tw-ring-offset-color': '#fff',
'--tw-ring-color': resolveColor(
theme('colors.blue.600', colors.blue[600]),
'--tw-ring-opacity'
),
'--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
'--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
'box-shadow': `var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)`,
},
},
{
base: [`[type='checkbox']:checked`, `[type='radio']:checked`],
class: ['.form-checkbox:checked', '.form-radio:checked'],
styles: {
'border-color': `transparent`,
'background-color': `currentColor`,
'background-size': `100% 100%`,
'background-position': `center`,
'background-repeat': `no-repeat`,
},
},
{
base: [`[type='checkbox']:checked`],
class: ['.form-checkbox:checked'],
styles: {
'background-image': `url("${svgToDataUri(
`<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>`
)}")`,
'@media (forced-colors: active) ': {
appearance: 'auto',
},
},
},
{
base: [`[type='radio']:checked`],
class: ['.form-radio:checked'],
styles: {
'background-image': `url("${svgToDataUri(
`<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>`
)}")`,
'@media (forced-colors: active) ': {
appearance: 'auto',
},
},
},
{
base: [
`[type='checkbox']:checked:hover`,
`[type='checkbox']:checked:focus`,
`[type='radio']:checked:hover`,
`[type='radio']:checked:focus`,
],
class: [
'.form-checkbox:checked:hover',
'.form-checkbox:checked:focus',
'.form-radio:checked:hover',
'.form-radio:checked:focus',
],
styles: {
'border-color': 'transparent',
'background-color': 'currentColor',
},
},
{
base: [`[type='checkbox']:indeterminate`],
class: ['.form-checkbox:indeterminate'],
styles: {
'background-image': `url("${svgToDataUri(
`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h8"/></svg>`
)}")`,
'border-color': `transparent`,
'background-color': `currentColor`,
'background-size': `100% 100%`,
'background-position': `center`,
'background-repeat': `no-repeat`,
'@media (forced-colors: active) ': {
appearance: 'auto',
},
},
},
{
base: [`[type='checkbox']:indeterminate:hover`, `[type='checkbox']:indeterminate:focus`],
class: ['.form-checkbox:indeterminate:hover', '.form-checkbox:indeterminate:focus'],
styles: {
'border-color': 'transparent',
'background-color': 'currentColor',
},
},
{
base: [`[type='file']`],
class: null,
styles: {
background: 'unset',
'border-color': 'inherit',
'border-width': '0',
'border-radius': '0',
padding: '0',
'font-size': 'unset',
'line-height': 'inherit',
},
},
{
base: [`[type='file']:focus`],
class: null,
styles: {
outline: [`1px solid ButtonText`, `1px auto -webkit-focus-ring-color`],
},
},
]
const getStrategyRules = (strategy) =>
rules
.map((rule) => {
if (rule[strategy] === null) return null
return { [rule[strategy]]: rule.styles }
})
.filter(Boolean)
if (strategy.includes('base')) {
addBase(getStrategyRules('base'))
}
if (strategy.includes('class')) {
addComponents(getStrategyRules('class'))
}
}
})
module.exports = forms

View file

@ -0,0 +1,9 @@
module.exports = {
content: ['./index.html', './kitchen-sink.html'],
theme: {
extend: {
//
},
},
plugins: [require('./src')],
}

View file

@ -0,0 +1 @@
../../mini-svg-data-uri@1.4.4/node_modules/mini-svg-data-uri

View file

@ -0,0 +1 @@
../../tailwindcss@3.4.1/node_modules/tailwindcss

View file

@ -0,0 +1,21 @@
MIT License
Copyright (c) Tailwind Labs, Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View file

@ -0,0 +1,27 @@
<p>
<a href="https://tailwindcss.com/docs/typography-plugin" target="_blank">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss-typography/HEAD/.github/logo-dark.svg">
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss-typography/HEAD/.github/logo-light.svg">
<img alt="Tailwind CSS Typography" src="https://raw.githubusercontent.com/tailwindlabs/tailwindcss-typography/HEAD/.github/logo-light.svg" width="450" height="70" style="max-width: 100%;">
</picture>
</a>
</p>
A plugin that provides a set of `prose` classes you can use to add beautiful typographic defaults to any vanilla HTML you don't control, like HTML rendered from Markdown, or pulled from a CMS.
---
## Documentation
For full documentation, visit [tailwindcss.com/docs/typography-plugin](https://tailwindcss.com/docs/typography-plugin).
## Community
For help, discussion about best practices, or any other conversation that would benefit from being searchable:
[Discuss the Tailwind CSS Typography plugin on GitHub](https://github.com/tailwindlabs/tailwindcss/discussions)
For casual chit-chat with others using the framework:
[Join the Tailwind CSS Discord Server](https://tailwindcss.com/discord)

View file

@ -0,0 +1,17 @@
#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
case `uname` in
*CYGWIN*) basedir=`cygpath -w "$basedir"`;;
esac
if [ -z "$NODE_PATH" ]; then
export NODE_PATH="/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules/tailwindcss/lib/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules/tailwindcss/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/node_modules"
else
export NODE_PATH="/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules/tailwindcss/lib/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules/tailwindcss/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/node_modules:$NODE_PATH"
fi
if [ -x "$basedir/node" ]; then
exec "$basedir/node" "$basedir/../../../../../../tailwindcss@3.4.1/node_modules/tailwindcss/lib/cli.js" "$@"
else
exec node "$basedir/../../../../../../tailwindcss@3.4.1/node_modules/tailwindcss/lib/cli.js" "$@"
fi

View file

@ -0,0 +1,17 @@
#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
case `uname` in
*CYGWIN*) basedir=`cygpath -w "$basedir"`;;
esac
if [ -z "$NODE_PATH" ]; then
export NODE_PATH="/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules/tailwindcss/lib/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules/tailwindcss/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/node_modules"
else
export NODE_PATH="/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules/tailwindcss/lib/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules/tailwindcss/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/tailwindcss@3.4.1/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/node_modules:$NODE_PATH"
fi
if [ -x "$basedir/node" ]; then
exec "$basedir/node" "$basedir/../../../../../../tailwindcss@3.4.1/node_modules/tailwindcss/lib/cli.js" "$@"
else
exec node "$basedir/../../../../../../tailwindcss@3.4.1/node_modules/tailwindcss/lib/cli.js" "$@"
fi

View file

@ -0,0 +1,59 @@
{
"name": "@tailwindcss/typography",
"version": "0.5.10",
"description": "A Tailwind CSS plugin for automatically styling plain HTML content with beautiful typographic defaults.",
"main": "src/index.js",
"types": "src/index.d.ts",
"files": [
"src/*.js",
"src/*.d.ts",
"dist/"
],
"repository": "https://github.com/tailwindcss/typography",
"license": "MIT",
"publishConfig": {
"access": "public"
},
"prettier": {
"printWidth": 100,
"semi": false,
"singleQuote": true,
"trailingComma": "es5"
},
"scripts": {
"test": "jest",
"dev": "next dev demo",
"build": "next build demo",
"export": "next export demo",
"start": "next start demo"
},
"peerDependencies": {
"tailwindcss": ">=3.0.0 || insiders"
},
"devDependencies": {
"@mdx-js/loader": "^1.0.19",
"@mdx-js/mdx": "^1.6.6",
"@next/mdx": "^8.1.0",
"autoprefixer": "^10.2.1",
"highlight.js": "^10.4.1",
"jest": "^26.6.1",
"jest-diff": "^27.3.1",
"next": "^12.0.1",
"postcss": "^8.2.3",
"prettier": "^2.1.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"tailwindcss": "^3.2.2"
},
"dependencies": {
"lodash.castarray": "^4.4.0",
"lodash.isplainobject": "^4.0.6",
"lodash.merge": "^4.6.2",
"postcss-selector-parser": "6.0.10"
},
"jest": {
"setupFilesAfterEnv": [
"<rootDir>/jest/customMatchers.js"
]
}
}

View file

@ -0,0 +1,9 @@
declare function plugin(options?: Partial<{ className: string; target: 'modern' | 'legacy' }>): {
handler: () => void
}
declare namespace plugin {
const __isOptionsFunction: true
}
export = plugin

View file

@ -0,0 +1,139 @@
const plugin = require('tailwindcss/plugin')
const merge = require('lodash.merge')
const castArray = require('lodash.castarray')
const styles = require('./styles')
const { commonTrailingPseudos } = require('./utils')
const computed = {
// Reserved for future "magic properties", for example:
// bulletColor: (color) => ({ 'ul > li::before': { backgroundColor: color } }),
}
function inWhere(selector, { className, modifier, prefix }) {
let prefixedNot = prefix(`.not-${className}`).slice(1)
let selectorPrefix = selector.startsWith('>')
? `${modifier === 'DEFAULT' ? `.${className}` : `.${className}-${modifier}`} `
: ''
// Parse the selector, if every component ends in the same pseudo element(s) then move it to the end
let [trailingPseudo, rebuiltSelector] = commonTrailingPseudos(selector)
if (trailingPseudo) {
return `:where(${selectorPrefix}${rebuiltSelector}):not(:where([class~="${prefixedNot}"],[class~="${prefixedNot}"] *))${trailingPseudo}`
}
return `:where(${selectorPrefix}${selector}):not(:where([class~="${prefixedNot}"],[class~="${prefixedNot}"] *))`
}
function isObject(value) {
return typeof value === 'object' && value !== null
}
function configToCss(config = {}, { target, className, modifier, prefix }) {
function updateSelector(k, v) {
if (target === 'legacy') {
return [k, v]
}
if (Array.isArray(v)) {
return [k, v]
}
if (isObject(v)) {
let nested = Object.values(v).some(isObject)
if (nested) {
return [
inWhere(k, { className, modifier, prefix }),
v,
Object.fromEntries(Object.entries(v).map(([k, v]) => updateSelector(k, v))),
]
}
return [inWhere(k, { className, modifier, prefix }), v]
}
return [k, v]
}
return Object.fromEntries(
Object.entries(
merge(
{},
...Object.keys(config)
.filter((key) => computed[key])
.map((key) => computed[key](config[key])),
...castArray(config.css || {})
)
).map(([k, v]) => updateSelector(k, v))
)
}
module.exports = plugin.withOptions(
({ className = 'prose', target = 'modern' } = {}) => {
return function ({ addVariant, addComponents, theme, prefix }) {
let modifiers = theme('typography')
let options = { className, prefix }
for (let [name, ...selectors] of [
['headings', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'th'],
['h1'],
['h2'],
['h3'],
['h4'],
['h5'],
['h6'],
['p'],
['a'],
['blockquote'],
['figure'],
['figcaption'],
['strong'],
['em'],
['code'],
['pre'],
['ol'],
['ul'],
['li'],
['table'],
['thead'],
['tr'],
['th'],
['td'],
['img'],
['video'],
['hr'],
['lead', '[class~="lead"]'],
]) {
selectors = selectors.length === 0 ? [name] : selectors
let selector =
target === 'legacy' ? selectors.map((selector) => `& ${selector}`) : selectors.join(', ')
addVariant(
`${className}-${name}`,
target === 'legacy' ? selector : `& :is(${inWhere(selector, options)})`
)
}
addComponents(
Object.keys(modifiers).map((modifier) => ({
[modifier === 'DEFAULT' ? `.${className}` : `.${className}-${modifier}`]: configToCss(
modifiers[modifier],
{
target,
className,
modifier,
prefix,
}
),
}))
)
}
},
() => {
return {
theme: { typography: styles },
}
}
)

View file

@ -0,0 +1,62 @@
const isPlainObject = require('lodash.isplainobject')
const parser = require('postcss-selector-parser')
const parseSelector = parser()
module.exports = {
isUsableColor(color, values) {
return isPlainObject(values) && color !== 'gray' && values[600]
},
/**
* @param {string} selector
*/
commonTrailingPseudos(selector) {
let ast = parseSelector.astSync(selector)
/** @type {import('postcss-selector-parser').Pseudo[][]} */
let matrix = []
// Put the pseudo elements in reverse order in a sparse, column-major 2D array
for (let [i, sel] of ast.nodes.entries()) {
for (const [j, child] of [...sel.nodes].reverse().entries()) {
// We only care about pseudo elements
if (child.type !== 'pseudo' || !child.value.startsWith('::')) {
break
}
matrix[j] = matrix[j] || []
matrix[j][i] = child
}
}
let trailingPseudos = parser.selector()
// At this point the pseudo elements are in a column-major 2D array
// This means each row contains one "column" of pseudo elements from each selector
// We can compare all the pseudo elements in a row to see if they are the same
for (const pseudos of matrix) {
// It's a sparse 2D array so there are going to be holes in the rows
// We skip those
if (!pseudos) {
continue
}
let values = new Set([...pseudos.map((p) => p.value)])
// The pseudo elements are not the same
if (values.size > 1) {
break
}
pseudos.forEach((pseudo) => pseudo.remove())
trailingPseudos.prepend(pseudos[0])
}
if (trailingPseudos.nodes.length) {
return [trailingPseudos.toString(), ast.toString()]
}
return [null, selector]
},
}

View file

@ -0,0 +1 @@
../../lodash.castarray@4.4.0/node_modules/lodash.castarray

View file

@ -0,0 +1 @@
../../lodash.isplainobject@4.0.6/node_modules/lodash.isplainobject

View file

@ -0,0 +1 @@
../../lodash.merge@4.6.2/node_modules/lodash.merge

View file

@ -0,0 +1 @@
../../postcss-selector-parser@6.0.10/node_modules/postcss-selector-parser

View file

@ -0,0 +1 @@
../../tailwindcss@3.4.1/node_modules/tailwindcss

63
node_modules/.pnpm/lock.yaml generated vendored
View file

@ -5,6 +5,15 @@ settings:
excludeLinksFromLockfile: false
devDependencies:
'@tailwindcss/aspect-ratio':
specifier: ^0.4.2
version: 0.4.2(tailwindcss@3.4.1)
'@tailwindcss/forms':
specifier: ^0.5.7
version: 0.5.7(tailwindcss@3.4.1)
'@tailwindcss/typography':
specifier: ^0.5.10
version: 0.5.10(tailwindcss@3.4.1)
prettier:
specifier: ^3.2.5
version: 3.2.5
@ -92,6 +101,35 @@ packages:
dev: true
optional: true
/@tailwindcss/aspect-ratio@0.4.2(tailwindcss@3.4.1):
resolution: {integrity: sha512-8QPrypskfBa7QIMuKHg2TA7BqES6vhBrDLOv8Unb6FcFyd3TjKbc6lcmb9UPQHxfl24sXoJ41ux/H7qQQvfaSQ==}
peerDependencies:
tailwindcss: '>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1'
dependencies:
tailwindcss: 3.4.1
dev: true
/@tailwindcss/forms@0.5.7(tailwindcss@3.4.1):
resolution: {integrity: sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==}
peerDependencies:
tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1'
dependencies:
mini-svg-data-uri: 1.4.4
tailwindcss: 3.4.1
dev: true
/@tailwindcss/typography@0.5.10(tailwindcss@3.4.1):
resolution: {integrity: sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==}
peerDependencies:
tailwindcss: '>=3.0.0 || insiders'
dependencies:
lodash.castarray: 4.4.0
lodash.isplainobject: 4.0.6
lodash.merge: 4.6.2
postcss-selector-parser: 6.0.10
tailwindcss: 3.4.1
dev: true
/ansi-regex@5.0.1:
resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
engines: {node: '>=8'}
@ -367,6 +405,18 @@ packages:
resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
dev: true
/lodash.castarray@4.4.0:
resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
dev: true
/lodash.isplainobject@4.0.6:
resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
dev: true
/lodash.merge@4.6.2:
resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
dev: true
/lru-cache@10.2.0:
resolution: {integrity: sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==}
engines: {node: 14 || >=16.14}
@ -385,6 +435,11 @@ packages:
picomatch: 2.3.1
dev: true
/mini-svg-data-uri@1.4.4:
resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
hasBin: true
dev: true
/minimatch@9.0.3:
resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
engines: {node: '>=16 || 14 >=14.17'}
@ -511,6 +566,14 @@ packages:
postcss-selector-parser: 6.0.15
dev: true
/postcss-selector-parser@6.0.10:
resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
engines: {node: '>=4'}
dependencies:
cssesc: 3.0.0
util-deprecate: 1.0.2
dev: true
/postcss-selector-parser@6.0.15:
resolution: {integrity: sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==}
engines: {node: '>=4'}

View file

@ -0,0 +1,23 @@
The MIT License (MIT)
Copyright 2012-2016 The Dojo Foundation <http://dojofoundation.org/>
Based on Underscore.js, copyright 2009-2016 Jeremy Ashkenas,
DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View file

@ -0,0 +1,18 @@
# lodash.castarray v4.4.0
The [lodash](https://lodash.com/) method `_.castArray` exported as a [Node.js](https://nodejs.org/) module.
## Installation
Using npm:
```bash
$ {sudo -H} npm i -g npm
$ npm i --save lodash.castarray
```
In Node.js:
```js
var castArray = require('lodash.castarray');
```
See the [documentation](https://lodash.com/docs#castArray) or [package source](https://github.com/lodash/lodash/blob/4.4.0-npm-packages/lodash.castarray) for more details.

View file

@ -0,0 +1,75 @@
/**
* lodash 4.4.0 (Custom Build) <https://lodash.com/>
* Build: `lodash modularize exports="npm" -o ./`
* Copyright 2012-2016 The Dojo Foundation <http://dojofoundation.org/>
* Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
* Copyright 2009-2016 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
* Available under MIT license <https://lodash.com/license>
*/
/**
* Casts `value` as an array if it's not one.
*
* @static
* @memberOf _
* @category Lang
* @param {*} value The value to inspect.
* @returns {Array} Returns the cast array.
* @example
*
* _.castArray(1);
* // => [1]
*
* _.castArray({ 'a': 1 });
* // => [{ 'a': 1 }]
*
* _.castArray('abc');
* // => ['abc']
*
* _.castArray(null);
* // => [null]
*
* _.castArray(undefined);
* // => [undefined]
*
* _.castArray();
* // => []
*
* var array = [1, 2, 3];
* console.log(_.castArray(array) === array);
* // => true
*/
function castArray() {
if (!arguments.length) {
return [];
}
var value = arguments[0];
return isArray(value) ? value : [value];
}
/**
* Checks if `value` is classified as an `Array` object.
*
* @static
* @memberOf _
* @type {Function}
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is correctly classified, else `false`.
* @example
*
* _.isArray([1, 2, 3]);
* // => true
*
* _.isArray(document.body.children);
* // => false
*
* _.isArray('abc');
* // => false
*
* _.isArray(_.noop);
* // => false
*/
var isArray = Array.isArray;
module.exports = castArray;

View file

@ -0,0 +1,17 @@
{
"name": "lodash.castarray",
"version": "4.4.0",
"description": "The lodash method `_.castArray` exported as a module.",
"homepage": "https://lodash.com/",
"icon": "https://lodash.com/icon.svg",
"license": "MIT",
"keywords": "lodash-modularized, castarray",
"author": "John-David Dalton <john.david.dalton@gmail.com> (http://allyoucanleet.com/)",
"contributors": [
"John-David Dalton <john.david.dalton@gmail.com> (http://allyoucanleet.com/)",
"Blaine Bublitz <blaine@iceddev.com> (https://github.com/phated)",
"Mathias Bynens <mathias@qiwi.be> (https://mathiasbynens.be/)"
],
"repository": "lodash/lodash",
"scripts": { "test": "echo \"See https://travis-ci.org/lodash/lodash-cli for testing details.\"" }
}

View file

@ -0,0 +1,47 @@
Copyright jQuery Foundation and other contributors <https://jquery.org/>
Based on Underscore.js, copyright Jeremy Ashkenas,
DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>
This software consists of voluntary contributions made by many
individuals. For exact contribution history, see the revision history
available at https://github.com/lodash/lodash
The following license applies to all parts of this software except as
documented below:
====
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
====
Copyright and related rights for sample code are waived via CC0. Sample
code is defined as all source code displayed within the prose of the
documentation.
CC0: http://creativecommons.org/publicdomain/zero/1.0/
====
Files located in the node_modules and vendor directories are externally
maintained libraries used by this software which have their own
licenses; we recommend you read them, as their terms may differ from the
terms above.

View file

@ -0,0 +1,18 @@
# lodash.isplainobject v4.0.6
The [lodash](https://lodash.com/) method `_.isPlainObject` exported as a [Node.js](https://nodejs.org/) module.
## Installation
Using npm:
```bash
$ {sudo -H} npm i -g npm
$ npm i --save lodash.isplainobject
```
In Node.js:
```js
var isPlainObject = require('lodash.isplainobject');
```
See the [documentation](https://lodash.com/docs#isPlainObject) or [package source](https://github.com/lodash/lodash/blob/4.0.6-npm-packages/lodash.isplainobject) for more details.

View file

@ -0,0 +1,139 @@
/**
* lodash (Custom Build) <https://lodash.com/>
* Build: `lodash modularize exports="npm" -o ./`
* Copyright jQuery Foundation and other contributors <https://jquery.org/>
* Released under MIT license <https://lodash.com/license>
* Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
* Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
*/
/** `Object#toString` result references. */
var objectTag = '[object Object]';
/**
* Checks if `value` is a host object in IE < 9.
*
* @private
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a host object, else `false`.
*/
function isHostObject(value) {
// Many host objects are `Object` objects that can coerce to strings
// despite having improperly defined `toString` methods.
var result = false;
if (value != null && typeof value.toString != 'function') {
try {
result = !!(value + '');
} catch (e) {}
}
return result;
}
/**
* Creates a unary function that invokes `func` with its argument transformed.
*
* @private
* @param {Function} func The function to wrap.
* @param {Function} transform The argument transform.
* @returns {Function} Returns the new function.
*/
function overArg(func, transform) {
return function(arg) {
return func(transform(arg));
};
}
/** Used for built-in method references. */
var funcProto = Function.prototype,
objectProto = Object.prototype;
/** Used to resolve the decompiled source of functions. */
var funcToString = funcProto.toString;
/** Used to check objects for own properties. */
var hasOwnProperty = objectProto.hasOwnProperty;
/** Used to infer the `Object` constructor. */
var objectCtorString = funcToString.call(Object);
/**
* Used to resolve the
* [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
* of values.
*/
var objectToString = objectProto.toString;
/** Built-in value references. */
var getPrototype = overArg(Object.getPrototypeOf, Object);
/**
* Checks if `value` is object-like. A value is object-like if it's not `null`
* and has a `typeof` result of "object".
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is object-like, else `false`.
* @example
*
* _.isObjectLike({});
* // => true
*
* _.isObjectLike([1, 2, 3]);
* // => true
*
* _.isObjectLike(_.noop);
* // => false
*
* _.isObjectLike(null);
* // => false
*/
function isObjectLike(value) {
return !!value && typeof value == 'object';
}
/**
* Checks if `value` is a plain object, that is, an object created by the
* `Object` constructor or one with a `[[Prototype]]` of `null`.
*
* @static
* @memberOf _
* @since 0.8.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a plain object, else `false`.
* @example
*
* function Foo() {
* this.a = 1;
* }
*
* _.isPlainObject(new Foo);
* // => false
*
* _.isPlainObject([1, 2, 3]);
* // => false
*
* _.isPlainObject({ 'x': 0, 'y': 0 });
* // => true
*
* _.isPlainObject(Object.create(null));
* // => true
*/
function isPlainObject(value) {
if (!isObjectLike(value) ||
objectToString.call(value) != objectTag || isHostObject(value)) {
return false;
}
var proto = getPrototype(value);
if (proto === null) {
return true;
}
var Ctor = hasOwnProperty.call(proto, 'constructor') && proto.constructor;
return (typeof Ctor == 'function' &&
Ctor instanceof Ctor && funcToString.call(Ctor) == objectCtorString);
}
module.exports = isPlainObject;

View file

@ -0,0 +1,17 @@
{
"name": "lodash.isplainobject",
"version": "4.0.6",
"description": "The lodash method `_.isPlainObject` exported as a module.",
"homepage": "https://lodash.com/",
"icon": "https://lodash.com/icon.svg",
"license": "MIT",
"keywords": "lodash-modularized, isplainobject",
"author": "John-David Dalton <john.david.dalton@gmail.com> (http://allyoucanleet.com/)",
"contributors": [
"John-David Dalton <john.david.dalton@gmail.com> (http://allyoucanleet.com/)",
"Blaine Bublitz <blaine.bublitz@gmail.com> (https://github.com/phated)",
"Mathias Bynens <mathias@qiwi.be> (https://mathiasbynens.be/)"
],
"repository": "lodash/lodash",
"scripts": { "test": "echo \"See https://travis-ci.org/lodash/lodash-cli for testing details.\"" }
}

View file

@ -0,0 +1,47 @@
Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
Based on Underscore.js, copyright Jeremy Ashkenas,
DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>
This software consists of voluntary contributions made by many
individuals. For exact contribution history, see the revision history
available at https://github.com/lodash/lodash
The following license applies to all parts of this software except as
documented below:
====
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
====
Copyright and related rights for sample code are waived via CC0. Sample
code is defined as all source code displayed within the prose of the
documentation.
CC0: http://creativecommons.org/publicdomain/zero/1.0/
====
Files located in the node_modules and vendor directories are externally
maintained libraries used by this software which have their own
licenses; we recommend you read them, as their terms may differ from the
terms above.

View file

@ -0,0 +1,18 @@
# lodash.merge v4.6.2
The [Lodash](https://lodash.com/) method `_.merge` exported as a [Node.js](https://nodejs.org/) module.
## Installation
Using npm:
```bash
$ {sudo -H} npm i -g npm
$ npm i --save lodash.merge
```
In Node.js:
```js
var merge = require('lodash.merge');
```
See the [documentation](https://lodash.com/docs#merge) or [package source](https://github.com/lodash/lodash/blob/4.6.2-npm-packages/lodash.merge) for more details.

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,16 @@
{
"name": "lodash.merge",
"version": "4.6.2",
"description": "The Lodash method `_.merge` exported as a module.",
"homepage": "https://lodash.com/",
"icon": "https://lodash.com/icon.svg",
"license": "MIT",
"keywords": "lodash-modularized, merge",
"author": "John-David Dalton <john.david.dalton@gmail.com>",
"contributors": [
"John-David Dalton <john.david.dalton@gmail.com>",
"Mathias Bynens <mathias@qiwi.be>"
],
"repository": "lodash/lodash",
"scripts": { "test": "echo \"See https://travis-ci.org/lodash/lodash-cli for testing details.\"" }
}

View file

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2018 Taylor Hunt
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View file

@ -0,0 +1,109 @@
Mini SVG `data:` URI
====================
This tool converts SVGs into the most compact, compressible `data:` URI that SVG-supporting browsers tolerate. The results look like this (169 bytes):
```url
data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'
%3e%3cpath d='M22 38V51L32 32l19-19v12C44 26 43 10 38 0 52 15 49 39 22 38z'/%3e
%3c/svg%3e
```
Compare to the Base64 version (210 bytes):
```url
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIH
ZpZXdCb3g9IjAgMCA1MCA1MCI+PHBhdGggZD0iTTIyIDM4VjUxTDMyIDMybDE5LTE5djEyQzQ0IDI2ID
QzIDEwIDM4IDAgNTIgMTUgNDkgMzkgMjIgMzh6Ii8+PC9zdmc+
```
Or the URL-encoded version other tools produce (256 bytes):
```url
data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%
2F2000%2Fsvg%22%20viewBox%3D%220%200%2050%2050%22%3E%3Cpath%20d%3D%22M22%2038V51
L32%2032l19-19v12C44%2026%2043%2010%2038%200%2052%2015%2049%2039%2022%2038z%22%2
F%3E%3C%2Fsvg%3E
```
For a more realistic example, I inlined the icons from the [Open Iconic](https://useiconic.com/open) project into CSS files with the 3 above methods:
| Compression | Base64 | Basic %-encoding | `mini-svg-data-uri` |
|-------------|----------:|-----------------:|--------------------:|
| None | 96.459 kB | 103.268 kB | 76.583 kB |
| `gzip -9` | 17.902 kB | 13.780 kB | 12.974 kB |
| `brotli -Z` | 15.797 kB | 11.693 kB | 10.976 kB |
Roughly 6% smaller compressed, but don't write off the ≈20% uncompressed savings either. [Some browser caches decompress before store](https://blogs.msdn.microsoft.com/ieinternals/2014/10/21/compressing-the-web/), and parsing time/memory usage scale linearly with uncompressed filesize.
Usage
-----
```js
var svgToMiniDataURI = require('mini-svg-data-uri');
var svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M22 38V51L32 32l19-19v12C44 26 43 10 38 0 52 15 49 39 22 38z"/></svg>';
var optimizedSVGDataURI = svgToMiniDataURI(svg);
// "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3e%3cpath d='M22 38V51L32 32l19-19v12C44 26 43 10 38 0 52 15 49 39 22 38z'/%3e%3c/svg%3e"
```
You can also [try it in your browser at RunKit](https://npm.runkit.com/mini-svg-data-uri).
### CLI
If you have it installed globally, or as some kind of dependency inside your projects directory:
```sh
mini-svg-data-uri file.svg # writes to stdout
mini-svg-data-uri file.svg file.svg.uri # writes to the given output filename
```
Use `--help` for more info.
### Warning
* This **does not optimize the SVG source file**. Youll want [svgo](https://github.com/svg/svgo) or its brother [SVGOMG](https://jakearchibald.github.io/svgomg/) for that.
* The default output **does not work inside `srcset` attributes**. Use the `.toSrcset` method for that:
```js
var srcsetExample = html`
<picture>
<source srcset="${svgToMiniDataURI.toSrcset(svg)}">
<img src="${svgToMiniDataURI(svg)}">
</picture>`;
```
* The resulting Data URI should be wrapped with double quotes: `url("…")`, `<img src="…">`, etc.
* This might change or break SVGs that use `"` in character data, like inside `<text>` or `aria-label` or something. Try curly quotes (`“”`) or `&quot;` instead.
FAQ
---
### Dont you need a `charset` in the MIME Type?
`charset` does nothing for Data URIs. The URI can only be the encoding of its parent file — its included in it!
### Why lowercase the URL-encoded hex pairs?
It compresses slightly better. No, really. Using the same files from earlier:
| Compression | Uppercase (`%AF`) | Lowercase (`%af`) |
|-------------|------------------:|------------------:|
| `gzip -9` | 12.978 kB | 12.974 kB |
| `brotli -Z` | 10.988 kB | 10.976 kB |
I did say *slightly*.
Browser support
---------------
* Internet Explorer 9 and up, including Edge
* Firefox, Safari, Chrome, whatever else uses their engines
* Android WebKit 3+
* Opera Minis server-side Presto

View file

@ -0,0 +1,41 @@
#!/usr/bin/env node
let help = `
Usage: mini-svg-data-uri <source> [dest]
Options:
-v, --version Output the version number
-h, --help Display help for command
Examples:
mini-svg-data-uri file.svg Write to stdout
mini-svg-data-uri icon.svg icon.uri Write to file
`;
let [source, dest] = process.argv.slice(2);
switch (source) {
case '-h':
case '--help':
case undefined:
console.log(help);
process.exit();
case '-v':
case '--version':
console.log(require('./package').version);
process.exit();
}
const fs = require('fs');
const svgToMiniDataURI = require('.');
fs.readFile(source, 'utf8', (err, data) => {
if (err) {
console.error(err.message);
console.log(help);
process.exit(1);
}
const out = svgToMiniDataURI(data);
dest ? fs.writeFileSync(dest, out) : console.log(out);
});

View file

@ -0,0 +1,7 @@
declare function svgToTinyDataUri(svgString: string): string;
declare namespace svgToTinyDataUri {
function toSrcset(svgString: string): string;
}
export = svgToTinyDataUri;

View file

@ -0,0 +1,55 @@
var shorterNames = require('./shorter-css-color-names');
var REGEX = {
whitespace: /\s+/g,
urlHexPairs: /%[\dA-F]{2}/g,
quotes: /"/g,
}
function collapseWhitespace(str) {
return str.trim().replace(REGEX.whitespace, ' ');
}
function dataURIPayload(string) {
return encodeURIComponent(string)
.replace(REGEX.urlHexPairs, specialHexEncode);
}
// `#` gets converted to `%23`, so quite a few CSS named colors are shorter than
// their equivalent URL-encoded hex codes.
function colorCodeToShorterNames(string) {
Object.keys(shorterNames).forEach(function(key) {
if (shorterNames[key].test(string)) {
string = string.replace(shorterNames[key], key);
}
});
return string;
}
function specialHexEncode(match) {
switch (match) { // Browsers tolerate these characters, and they're frequent
case '%20': return ' ';
case '%3D': return '=';
case '%3A': return ':';
case '%2F': return '/';
default: return match.toLowerCase(); // compresses better
}
}
function svgToTinyDataUri(svgString) {
if (typeof svgString !== 'string') {
throw new TypeError('Expected a string, but received ' + typeof svgString);
}
// Strip the Byte-Order Mark if the SVG has one
if (svgString.charCodeAt(0) === 0xfeff) { svgString = svgString.slice(1) }
var body = colorCodeToShorterNames(collapseWhitespace(svgString))
.replace(REGEX.quotes, "'");
return 'data:image/svg+xml,' + dataURIPayload(body);
}
svgToTinyDataUri.toSrcset = function toSrcset(svgString) {
return svgToTinyDataUri(svgString).replace(/ /g, '%20');
}
module.exports = svgToTinyDataUri;

View file

@ -0,0 +1,5 @@
import svgToTinyDataUri from ".";
svgToTinyDataUri('xx');
svgToTinyDataUri.toSrcset('xxx');

View file

@ -0,0 +1,17 @@
#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
case `uname` in
*CYGWIN*) basedir=`cygpath -w "$basedir"`;;
esac
if [ -z "$NODE_PATH" ]; then
export NODE_PATH="/home/speccon18/code/portfolio/node_modules/.pnpm/mini-svg-data-uri@1.4.4/node_modules/mini-svg-data-uri/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/mini-svg-data-uri@1.4.4/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/node_modules"
else
export NODE_PATH="/home/speccon18/code/portfolio/node_modules/.pnpm/mini-svg-data-uri@1.4.4/node_modules/mini-svg-data-uri/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/mini-svg-data-uri@1.4.4/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/node_modules:$NODE_PATH"
fi
if [ -x "$basedir/node" ]; then
exec "$basedir/node" "$basedir/../../cli.js" "$@"
else
exec node "$basedir/../../cli.js" "$@"
fi

View file

@ -0,0 +1,26 @@
{
"name": "mini-svg-data-uri",
"version": "1.4.4",
"description": "Small, efficient encoding of SVG data URIs for CSS, HTML, etc.",
"main": "index.js",
"types": "index.d.ts",
"bin": "cli.js",
"repository": {
"type": "git",
"url": "git+https://github.com/tigt/mini-svg-data-uri.git"
},
"keywords": [
"svg",
"url",
"data",
"uri",
"minification",
"url encoding"
],
"author": "Taylor “Tigt” Hunt <holla@ti.gt> (https://ti.gt/)",
"license": "MIT",
"bugs": {
"url": "https://github.com/tigt/mini-svg-data-uri/issues"
},
"homepage": "https://github.com/tigt/mini-svg-data-uri#readme"
}

View file

@ -0,0 +1,56 @@
module.exports = {
aqua: /#00ffff(ff)?(?!\w)|#0ff(f)?(?!\w)/gi,
azure: /#f0ffff(ff)?(?!\w)/gi,
beige: /#f5f5dc(ff)?(?!\w)/gi,
bisque: /#ffe4c4(ff)?(?!\w)/gi,
black: /#000000(ff)?(?!\w)|#000(f)?(?!\w)/gi,
blue: /#0000ff(ff)?(?!\w)|#00f(f)?(?!\w)/gi,
brown: /#a52a2a(ff)?(?!\w)/gi,
coral: /#ff7f50(ff)?(?!\w)/gi,
cornsilk: /#fff8dc(ff)?(?!\w)/gi,
crimson: /#dc143c(ff)?(?!\w)/gi,
cyan: /#00ffff(ff)?(?!\w)|#0ff(f)?(?!\w)/gi,
darkblue: /#00008b(ff)?(?!\w)/gi,
darkcyan: /#008b8b(ff)?(?!\w)/gi,
darkgrey: /#a9a9a9(ff)?(?!\w)/gi,
darkred: /#8b0000(ff)?(?!\w)/gi,
deeppink: /#ff1493(ff)?(?!\w)/gi,
dimgrey: /#696969(ff)?(?!\w)/gi,
gold: /#ffd700(ff)?(?!\w)/gi,
green: /#008000(ff)?(?!\w)/gi,
grey: /#808080(ff)?(?!\w)/gi,
honeydew: /#f0fff0(ff)?(?!\w)/gi,
hotpink: /#ff69b4(ff)?(?!\w)/gi,
indigo: /#4b0082(ff)?(?!\w)/gi,
ivory: /#fffff0(ff)?(?!\w)/gi,
khaki: /#f0e68c(ff)?(?!\w)/gi,
lavender: /#e6e6fa(ff)?(?!\w)/gi,
lime: /#00ff00(ff)?(?!\w)|#0f0(f)?(?!\w)/gi,
linen: /#faf0e6(ff)?(?!\w)/gi,
maroon: /#800000(ff)?(?!\w)/gi,
moccasin: /#ffe4b5(ff)?(?!\w)/gi,
navy: /#000080(ff)?(?!\w)/gi,
oldlace: /#fdf5e6(ff)?(?!\w)/gi,
olive: /#808000(ff)?(?!\w)/gi,
orange: /#ffa500(ff)?(?!\w)/gi,
orchid: /#da70d6(ff)?(?!\w)/gi,
peru: /#cd853f(ff)?(?!\w)/gi,
pink: /#ffc0cb(ff)?(?!\w)/gi,
plum: /#dda0dd(ff)?(?!\w)/gi,
purple: /#800080(ff)?(?!\w)/gi,
red: /#ff0000(ff)?(?!\w)|#f00(f)?(?!\w)/gi,
salmon: /#fa8072(ff)?(?!\w)/gi,
seagreen: /#2e8b57(ff)?(?!\w)/gi,
seashell: /#fff5ee(ff)?(?!\w)/gi,
sienna: /#a0522d(ff)?(?!\w)/gi,
silver: /#c0c0c0(ff)?(?!\w)/gi,
skyblue: /#87ceeb(ff)?(?!\w)/gi,
snow: /#fffafa(ff)?(?!\w)/gi,
tan: /#d2b48c(ff)?(?!\w)/gi,
teal: /#008080(ff)?(?!\w)/gi,
thistle: /#d8bfd8(ff)?(?!\w)/gi,
tomato: /#ff6347(ff)?(?!\w)/gi,
violet: /#ee82ee(ff)?(?!\w)/gi,
wheat: /#f5deb3(ff)?(?!\w)/gi,
white: /#ffffff(ff)?(?!\w)|#fff(f)?(?!\w)/gi,
};

17
node_modules/.pnpm/node_modules/.bin/mini-svg-data-uri generated vendored Executable file
View file

@ -0,0 +1,17 @@
#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
case `uname` in
*CYGWIN*) basedir=`cygpath -w "$basedir"`;;
esac
if [ -z "$NODE_PATH" ]; then
export NODE_PATH="/home/speccon18/code/portfolio/node_modules/.pnpm/mini-svg-data-uri@1.4.4/node_modules/mini-svg-data-uri/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/mini-svg-data-uri@1.4.4/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/node_modules"
else
export NODE_PATH="/home/speccon18/code/portfolio/node_modules/.pnpm/mini-svg-data-uri@1.4.4/node_modules/mini-svg-data-uri/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/mini-svg-data-uri@1.4.4/node_modules:/home/speccon18/code/portfolio/node_modules/.pnpm/node_modules:$NODE_PATH"
fi
if [ -x "$basedir/node" ]; then
exec "$basedir/node" "$basedir/../mini-svg-data-uri/cli.js" "$@"
else
exec node "$basedir/../mini-svg-data-uri/cli.js" "$@"
fi

1
node_modules/.pnpm/node_modules/lodash.castarray generated vendored Symbolic link
View file

@ -0,0 +1 @@
../lodash.castarray@4.4.0/node_modules/lodash.castarray

1
node_modules/.pnpm/node_modules/lodash.isplainobject generated vendored Symbolic link
View file

@ -0,0 +1 @@
../lodash.isplainobject@4.0.6/node_modules/lodash.isplainobject

1
node_modules/.pnpm/node_modules/lodash.merge generated vendored Symbolic link
View file

@ -0,0 +1 @@
../lodash.merge@4.6.2/node_modules/lodash.merge

1
node_modules/.pnpm/node_modules/mini-svg-data-uri generated vendored Symbolic link
View file

@ -0,0 +1 @@
../mini-svg-data-uri@1.4.4/node_modules/mini-svg-data-uri

View file

@ -1 +1 @@
../postcss-selector-parser@6.0.15/node_modules/postcss-selector-parser
../postcss-selector-parser@6.0.10/node_modules/postcss-selector-parser

View file

@ -0,0 +1 @@
../../cssesc@3.0.0/node_modules/cssesc

View file

@ -0,0 +1,873 @@
# API Documentation
*Please use only this documented API when working with the parser. Methods
not documented here are subject to change at any point.*
## `parser` function
This is the module's main entry point.
```js
const parser = require('postcss-selector-parser');
```
### `parser([transform], [options])`
Creates a new `processor` instance
```js
const processor = parser();
```
Or, with optional transform function
```js
const transform = selectors => {
selectors.walkUniversals(selector => {
selector.remove();
});
};
const processor = parser(transform)
// Example
const result = processor.processSync('*.class');
// => .class
```
[See processor documentation](#processor)
Arguments:
* `transform (function)`: Provide a function to work with the parsed AST.
* `options (object)`: Provide default options for all calls on the returned `Processor`.
### `parser.attribute([props])`
Creates a new attribute selector.
```js
parser.attribute({attribute: 'href'});
// => [href]
```
Arguments:
* `props (object)`: The new node's properties.
### `parser.className([props])`
Creates a new class selector.
```js
parser.className({value: 'button'});
// => .button
```
Arguments:
* `props (object)`: The new node's properties.
### `parser.combinator([props])`
Creates a new selector combinator.
```js
parser.combinator({value: '+'});
// => +
```
Arguments:
* `props (object)`: The new node's properties.
Notes:
* **Descendant Combinators** The value of descendant combinators created by the
parser always just a single space (`" "`). For descendant selectors with no
comments, additional space is now stored in `node.spaces.before`. Depending
on the location of comments, additional spaces may be stored in
`node.raws.spaces.before`, `node.raws.spaces.after`, or `node.raws.value`.
* **Named Combinators** Although, nonstandard and unlikely to ever become a standard,
named combinators like `/deep/` and `/for/` are parsed as combinators. The
`node.value` is name after being unescaped and normalized as lowercase. The
original value for the combinator name is stored in `node.raws.value`.
### `parser.comment([props])`
Creates a new comment.
```js
parser.comment({value: '/* Affirmative, Dave. I read you. */'});
// => /* Affirmative, Dave. I read you. */
```
Arguments:
* `props (object)`: The new node's properties.
### `parser.id([props])`
Creates a new id selector.
```js
parser.id({value: 'search'});
// => #search
```
Arguments:
* `props (object)`: The new node's properties.
### `parser.nesting([props])`
Creates a new nesting selector.
```js
parser.nesting();
// => &
```
Arguments:
* `props (object)`: The new node's properties.
### `parser.pseudo([props])`
Creates a new pseudo selector.
```js
parser.pseudo({value: '::before'});
// => ::before
```
Arguments:
* `props (object)`: The new node's properties.
### `parser.root([props])`
Creates a new root node.
```js
parser.root();
// => (empty)
```
Arguments:
* `props (object)`: The new node's properties.
### `parser.selector([props])`
Creates a new selector node.
```js
parser.selector();
// => (empty)
```
Arguments:
* `props (object)`: The new node's properties.
### `parser.string([props])`
Creates a new string node.
```js
parser.string();
// => (empty)
```
Arguments:
* `props (object)`: The new node's properties.
### `parser.tag([props])`
Creates a new tag selector.
```js
parser.tag({value: 'button'});
// => button
```
Arguments:
* `props (object)`: The new node's properties.
### `parser.universal([props])`
Creates a new universal selector.
```js
parser.universal();
// => *
```
Arguments:
* `props (object)`: The new node's properties.
## Node types
### `node.type`
A string representation of the selector type. It can be one of the following;
`attribute`, `class`, `combinator`, `comment`, `id`, `nesting`, `pseudo`,
`root`, `selector`, `string`, `tag`, or `universal`. Note that for convenience,
these constants are exposed on the main `parser` as uppercased keys. So for
example you can get `id` by querying `parser.ID`.
```js
parser.attribute({attribute: 'href'}).type;
// => 'attribute'
```
### `node.parent`
Returns the parent node.
```js
root.nodes[0].parent === root;
```
### `node.toString()`, `String(node)`, or `'' + node`
Returns a string representation of the node.
```js
const id = parser.id({value: 'search'});
console.log(String(id));
// => #search
```
### `node.next()` & `node.prev()`
Returns the next/previous child of the parent node.
```js
const next = id.next();
if (next && next.type !== 'combinator') {
throw new Error('Qualified IDs are not allowed!');
}
```
### `node.replaceWith(node)`
Replace a node with another.
```js
const attr = selectors.first.first;
const className = parser.className({value: 'test'});
attr.replaceWith(className);
```
Arguments:
* `node`: The node to substitute the original with.
### `node.remove()`
Removes the node from its parent node.
```js
if (node.type === 'id') {
node.remove();
}
```
### `node.clone()`
Returns a copy of a node, detached from any parent containers that the
original might have had.
```js
const cloned = parser.id({value: 'search'});
String(cloned);
// => #search
```
### `node.isAtPosition(line, column)`
Return a `boolean` indicating whether this node includes the character at the
position of the given line and column. Returns `undefined` if the nodes lack
sufficient source metadata to determine the position.
Arguments:
* `line`: 1-index based line number relative to the start of the selector.
* `column`: 1-index based column number relative to the start of the selector.
### `node.spaces`
Extra whitespaces around the node will be moved into `node.spaces.before` and
`node.spaces.after`. So for example, these spaces will be moved as they have
no semantic meaning:
```css
h1 , h2 {}
```
For descendent selectors, the value is always a single space.
```css
h1 h2 {}
```
Additional whitespace is found in either the `node.spaces.before` and `node.spaces.after` depending on the presence of comments or other whitespace characters. If the actual whitespace does not start or end with a single space, the node's raw value is set to the actual space(s) found in the source.
### `node.source`
An object describing the node's start/end, line/column source position.
Within the following CSS, the `.bar` class node ...
```css
.foo,
.bar {}
```
... will contain the following `source` object.
```js
source: {
start: {
line: 2,
column: 3
},
end: {
line: 2,
column: 6
}
}
```
### `node.sourceIndex`
The zero-based index of the node within the original source string.
Within the following CSS, the `.baz` class node will have a `sourceIndex` of `12`.
```css
.foo, .bar, .baz {}
```
## Container types
The `root`, `selector`, and `pseudo` nodes have some helper methods for working
with their children.
### `container.nodes`
An array of the container's children.
```js
// Input: h1 h2
selectors.at(0).nodes.length // => 3
selectors.at(0).nodes[0].value // => 'h1'
selectors.at(0).nodes[1].value // => ' '
```
### `container.first` & `container.last`
The first/last child of the container.
```js
selector.first === selector.nodes[0];
selector.last === selector.nodes[selector.nodes.length - 1];
```
### `container.at(index)`
Returns the node at position `index`.
```js
selector.at(0) === selector.first;
selector.at(0) === selector.nodes[0];
```
Arguments:
* `index`: The index of the node to return.
### `container.atPosition(line, column)`
Returns the node at the source position `index`.
```js
selector.at(0) === selector.first;
selector.at(0) === selector.nodes[0];
```
Arguments:
* `index`: The index of the node to return.
### `container.index(node)`
Return the index of the node within its container.
```js
selector.index(selector.nodes[2]) // => 2
```
Arguments:
* `node`: A node within the current container.
### `container.length`
Proxy to the length of the container's nodes.
```js
container.length === container.nodes.length
```
### `container` Array iterators
The container class provides proxies to certain Array methods; these are:
* `container.map === container.nodes.map`
* `container.reduce === container.nodes.reduce`
* `container.every === container.nodes.every`
* `container.some === container.nodes.some`
* `container.filter === container.nodes.filter`
* `container.sort === container.nodes.sort`
Note that these methods only work on a container's immediate children; recursive
iteration is provided by `container.walk`.
### `container.each(callback)`
Iterate the container's immediate children, calling `callback` for each child.
You may return `false` within the callback to break the iteration.
```js
let className;
selectors.each((selector, index) => {
if (selector.type === 'class') {
className = selector.value;
return false;
}
});
```
Note that unlike `Array#forEach()`, this iterator is safe to use whilst adding
or removing nodes from the container.
Arguments:
* `callback (function)`: A function to call for each node, which receives `node`
and `index` arguments.
### `container.walk(callback)`
Like `container#each`, but will also iterate child nodes as long as they are
`container` types.
```js
selectors.walk((selector, index) => {
// all nodes
});
```
Arguments:
* `callback (function)`: A function to call for each node, which receives `node`
and `index` arguments.
This iterator is safe to use whilst mutating `container.nodes`,
like `container#each`.
### `container.walk` proxies
The container class provides proxy methods for iterating over types of nodes,
so that it is easier to write modules that target specific selectors. Those
methods are:
* `container.walkAttributes`
* `container.walkClasses`
* `container.walkCombinators`
* `container.walkComments`
* `container.walkIds`
* `container.walkNesting`
* `container.walkPseudos`
* `container.walkTags`
* `container.walkUniversals`
### `container.split(callback)`
This method allows you to split a group of nodes by returning `true` from
a callback. It returns an array of arrays, where each inner array corresponds
to the groups that you created via the callback.
```js
// (input) => h1 h2>>h3
const list = selectors.first.split(selector => {
return selector.type === 'combinator';
});
// (node values) => [['h1', ' '], ['h2', '>>'], ['h3']]
```
Arguments:
* `callback (function)`: A function to call for each node, which receives `node`
as an argument.
### `container.prepend(node)` & `container.append(node)`
Add a node to the start/end of the container. Note that doing so will set
the parent property of the node to this container.
```js
const id = parser.id({value: 'search'});
selector.append(id);
```
Arguments:
* `node`: The node to add.
### `container.insertBefore(old, new)` & `container.insertAfter(old, new)`
Add a node before or after an existing node in a container:
```js
selectors.walk(selector => {
if (selector.type !== 'class') {
const className = parser.className({value: 'theme-name'});
selector.parent.insertAfter(selector, className);
}
});
```
Arguments:
* `old`: The existing node in the container.
* `new`: The new node to add before/after the existing node.
### `container.removeChild(node)`
Remove the node from the container. Note that you can also use
`node.remove()` if you would like to remove just a single node.
```js
selector.length // => 2
selector.remove(id)
selector.length // => 1;
id.parent // undefined
```
Arguments:
* `node`: The node to remove.
### `container.removeAll()` or `container.empty()`
Remove all children from the container.
```js
selector.removeAll();
selector.length // => 0
```
## Root nodes
A root node represents a comma separated list of selectors. Indeed, all
a root's `toString()` method does is join its selector children with a ','.
Other than this, it has no special functionality and acts like a container.
### `root.trailingComma`
This will be set to `true` if the input has a trailing comma, in order to
support parsing of legacy CSS hacks.
## Selector nodes
A selector node represents a single complex selector. For example, this
selector string `h1 h2 h3, [href] > p`, is represented as two selector nodes.
It has no special functionality of its own.
## Pseudo nodes
A pseudo selector extends a container node; if it has any parameters of its
own (such as `h1:not(h2, h3)`), they will be its children. Note that the pseudo
`value` will always contain the colons preceding the pseudo identifier. This
is so that both `:before` and `::before` are properly represented in the AST.
## Attribute nodes
### `attribute.quoted`
Returns `true` if the attribute's value is wrapped in quotation marks, false if it is not.
Remains `undefined` if there is no attribute value.
```css
[href=foo] /* false */
[href='foo'] /* true */
[href="foo"] /* true */
[href] /* undefined */
```
### `attribute.qualifiedAttribute`
Returns the attribute name qualified with the namespace if one is given.
### `attribute.offsetOf(part)`
Returns the offset of the attribute part specified relative to the
start of the node of the output string. This is useful in raising
error messages about a specific part of the attribute, especially
in combination with `attribute.sourceIndex`.
Returns `-1` if the name is invalid or the value doesn't exist in this
attribute.
The legal values for `part` are:
* `"ns"` - alias for "namespace"
* `"namespace"` - the namespace if it exists.
* `"attribute"` - the attribute name
* `"attributeNS"` - the start of the attribute or its namespace
* `"operator"` - the match operator of the attribute
* `"value"` - The value (string or identifier)
* `"insensitive"` - the case insensitivity flag
### `attribute.raws.unquoted`
Returns the unquoted content of the attribute's value.
Remains `undefined` if there is no attribute value.
```css
[href=foo] /* foo */
[href='foo'] /* foo */
[href="foo"] /* foo */
[href] /* undefined */
```
### `attribute.spaces`
Like `node.spaces` with the `before` and `after` values containing the spaces
around the element, the parts of the attribute can also have spaces before
and after them. The for each of `attribute`, `operator`, `value` and
`insensitive` there is corresponding property of the same nam in
`node.spaces` that has an optional `before` or `after` string containing only
whitespace.
Note that corresponding values in `attributes.raws.spaces` contain values
including any comments. If set, these values will override the
`attribute.spaces` value. Take care to remove them if changing
`attribute.spaces`.
### `attribute.raws`
The raws object stores comments and other information necessary to re-render
the node exactly as it was in the source.
If a comment is embedded within the identifiers for the `namespace`, `attribute`
or `value` then a property is placed in the raws for that value containing the full source of the propery including comments.
If a comment is embedded within the space between parts of the attribute
then the raw for that space is set accordingly.
Setting an attribute's property `raws` value to be deleted.
For now, changing the spaces required also updating or removing any of the
raws values that override them.
Example: `[ /*before*/ href /* after-attr */ = /* after-operator */ te/*inside-value*/st/* wow */ /*omg*/i/*bbq*/ /*whodoesthis*/]` would parse as:
```js
{
attribute: "href",
operator: "=",
value: "test",
spaces: {
before: '',
after: '',
attribute: { before: ' ', after: ' ' },
operator: { after: ' ' },
value: { after: ' ' },
insensitive: { after: ' ' }
},
raws: {
spaces: {
attribute: { before: ' /*before*/ ', after: ' /* after-attr */ ' },
operator: { after: ' /* after-operator */ ' },
value: { after: '/* wow */ /*omg*/' },
insensitive: { after: '/*bbq*/ /*whodoesthis*/' }
},
unquoted: 'test',
value: 'te/*inside-value*/st'
}
}
```
## `Processor`
### `ProcessorOptions`
* `lossless` - When `true`, whitespace is preserved. Defaults to `true`.
* `updateSelector` - When `true`, if any processor methods are passed a postcss
`Rule` node instead of a string, then that Rule's selector is updated
with the results of the processing. Defaults to `true`.
### `process|processSync(selectors, [options])`
Processes the `selectors`, returning a string from the result of processing.
Note: when the `updateSelector` option is set, the rule's selector
will be updated with the resulting string.
**Example:**
```js
const parser = require("postcss-selector-parser");
const processor = parser();
let result = processor.processSync(' .class');
console.log(result);
// => .class
// Asynchronous operation
let promise = processor.process(' .class').then(result => {
console.log(result)
// => .class
});
// To have the parser normalize whitespace values, utilize the options
result = processor.processSync(' .class ', {lossless: false});
console.log(result);
// => .class
// For better syntax errors, pass a PostCSS Rule node.
const postcss = require('postcss');
rule = postcss.rule({selector: ' #foo > a, .class '});
processor.process(rule, {lossless: false, updateSelector: true}).then(result => {
console.log(result);
// => #foo>a,.class
console.log("rule:", rule.selector);
// => rule: #foo>a,.class
})
```
Arguments:
* `selectors (string|postcss.Rule)`: Either a selector string or a PostCSS Rule
node.
* `[options] (object)`: Process options
### `ast|astSync(selectors, [options])`
Like `process()` and `processSync()` but after
processing the `selectors` these methods return the `Root` node of the result
instead of a string.
Note: when the `updateSelector` option is set, the rule's selector
will be updated with the resulting string.
### `transform|transformSync(selectors, [options])`
Like `process()` and `processSync()` but after
processing the `selectors` these methods return the value returned by the
processor callback.
Note: when the `updateSelector` option is set, the rule's selector
will be updated with the resulting string.
### Error Handling Within Selector Processors
The root node passed to the selector processor callback
has a method `error(message, options)` that returns an
error object. This method should always be used to raise
errors relating to the syntax of selectors. The options
to this method are passed to postcss's error constructor
([documentation](http://api.postcss.org/Container.html#error)).
#### Async Error Example
```js
let processor = (root) => {
return new Promise((resolve, reject) => {
root.walkClasses((classNode) => {
if (/^(.*)[-_]/.test(classNode.value)) {
let msg = "classes may not have underscores or dashes in them";
reject(root.error(msg, {
index: classNode.sourceIndex + RegExp.$1.length + 1,
word: classNode.value
}));
}
});
resolve();
});
};
const postcss = require("postcss");
const parser = require("postcss-selector-parser");
const selectorProcessor = parser(processor);
const plugin = postcss.plugin('classValidator', (options) => {
return (root) => {
let promises = [];
root.walkRules(rule => {
promises.push(selectorProcessor.process(rule));
});
return Promise.all(promises);
};
});
postcss(plugin()).process(`
.foo-bar {
color: red;
}
`.trim(), {from: 'test.css'}).catch((e) => console.error(e.toString()));
// CssSyntaxError: classValidator: ./test.css:1:5: classes may not have underscores or dashes in them
//
// > 1 | .foo-bar {
// | ^
// 2 | color: red;
// 3 | }
```
#### Synchronous Error Example
```js
let processor = (root) => {
root.walkClasses((classNode) => {
if (/.*[-_]/.test(classNode.value)) {
let msg = "classes may not have underscores or dashes in them";
throw root.error(msg, {
index: classNode.sourceIndex,
word: classNode.value
});
}
});
};
const postcss = require("postcss");
const parser = require("postcss-selector-parser");
const selectorProcessor = parser(processor);
const plugin = postcss.plugin('classValidator', (options) => {
return (root) => {
root.walkRules(rule => {
selectorProcessor.processSync(rule);
});
};
});
postcss(plugin()).process(`
.foo-bar {
color: red;
}
`.trim(), {from: 'test.css'}).catch((e) => console.error(e.toString()));
// CssSyntaxError: classValidator: ./test.css:1:5: classes may not have underscores or dashes in them
//
// > 1 | .foo-bar {
// | ^
// 2 | color: red;
// 3 | }
```

View file

@ -0,0 +1,513 @@
# 6.0.10
- Fixed: `isPseudoElement()` supports `:first-letter` and `:first-line`
# 6.0.9
- Fixed: `Combinator.raws` property type
# 6.0.8
- Fixed: reduced size
# 6.0.7
- Fixed: parse animation percents
# 6.0.6
- Fixed: parse quoted attributes containing a newline correctly
# 6.0.5
- Perf: rework unesc for a 63+% performance boost
# 6.0.4
- Fixed: ts errors
# 6.0.3
- Fixed: replace node built-in "util" module with "util-deprecate"
- Fixed: handle uppercase pseudo elements
- Fixed: do not create invalid combinator before comment
# 6.0.2
- Fixed an issue with parsing and stringifying an empty attribute value
# 6.0.1
- Fixed an issue with unicode surrogate pair parsing
# 6.0.0
- Updated: `cssesc` to 3.0.0 (major)
- Fixed: Issues with escaped `id` and `class` selectors
# 5.0.0
- Allow escaped dot within class name.
- Update PostCSS to 7.0.7 (patch)
# 5.0.0-rc.4
- Fixed an issue where comments immediately after an insensitive (in attribute)
were not parsed correctly.
- Updated `cssesc` to 2.0.0 (major).
- Removed outdated integration tests.
- Added tests for custom selectors, tags with attributes, the universal
selector with pseudos, and tokens after combinators.
# 5.0.0-rc.1
To ease adoption of the v5.0 release, we have relaxed the node version
check performed by npm at installation time to allow for node 4, which
remains officially unsupported, but likely to continue working for the
time being.
# 5.0.0-rc.0
This release has **BREAKING CHANGES** that were required to fix regressions
in 4.0.0 and to make the Combinator Node API consistent for all combinator
types. Please read carefully.
## Summary of Changes
* The way a descendent combinator that isn't a single space character (E.g. `.a .b`) is stored in the AST has changed.
* Named Combinators (E.g. `.a /for/ .b`) are now properly parsed as a combinator.
* It is now possible to look up a node based on the source location of a character in that node and to query nodes if they contain some character.
* Several bug fixes that caused the parser to hang and run out of memory when a `/` was encountered have been fixed.
* The minimum supported version of Node is now `v6.0.0`.
### Changes to the Descendent Combinator
In prior releases, the value of a descendant combinator with multiple spaces included all the spaces.
* `.a .b`: Extra spaces are now stored as space before.
- Old & Busted:
- `combinator.value === " "`
- New hotness:
- `combinator.value === " " && combinator.spaces.before === " "`
* `.a /*comment*/.b`: A comment at the end of the combinator causes extra space to become after space.
- Old & Busted:
- `combinator.value === " "`
- `combinator.raws.value === " /*comment/"`
- New hotness:
- `combinator.value === " "`
- `combinator.spaces.after === " "`
- `combinator.raws.spaces.after === " /*comment*/"`
* `.a<newline>.b`: whitespace that doesn't start or end with a single space character is stored as a raw value.
- Old & Busted:
- `combinator.value === "\n"`
- `combinator.raws.value === undefined`
- New hotness:
- `combinator.value === " "`
- `combinator.raws.value === "\n"`
### Support for "Named Combinators"
Although, nonstandard and unlikely to ever become a standard, combinators like `/deep/` and `/for/` are now properly supported.
Because they've been taken off the standardization track, there is no spec-official name for combinators of the form `/<ident>/`. However, I talked to [Tab Atkins](https://twitter.com/tabatkins) and we agreed to call them "named combinators" so now they are called that.
Before this release such named combinators were parsed without intention and generated three nodes of type `"tag"` where the first and last nodes had a value of `"/"`.
* `.a /for/ .b` is parsed as a combinator.
- Old & Busted:
- `root.nodes[0].nodes[1].type === "tag"`
- `root.nodes[0].nodes[1].value === "/"`
- New hotness:
- `root.nodes[0].nodes[1].type === "combinator"`
- `root.nodes[0].nodes[1].value === "/for/"`
* `.a /F\6fR/ .b` escapes are handled and uppercase is normalized.
- Old & Busted:
- `root.nodes[0].nodes[2].type === "tag"`
- `root.nodes[0].nodes[2].value === "F\\6fR"`
- New hotness:
- `root.nodes[0].nodes[1].type === "combinator"`
- `root.nodes[0].nodes[1].value === "/for/"`
- `root.nodes[0].nodes[1].raws.value === "/F\\6fR/"`
### Source position checks and lookups
A new API was added to look up a node based on the source location.
```js
const selectorParser = require("postcss-selector-parser");
// You can find the most specific node for any given character
let combinator = selectorParser.astSync(".a > .b").atPosition(1,4);
combinator.toString() === " > ";
// You can check if a node includes a specific character
// Whitespace surrounding the node that is owned by that node
// is included in the check.
[2,3,4,5,6].map(column => combinator.isAtPosition(1, column));
// => [false, true, true, true, false]
```
# 4.0.0
This release has **BREAKING CHANGES** that were required to fix bugs regarding values with escape sequences. Please read carefully.
* **Identifiers with escapes** - CSS escape sequences are now hidden from the public API by default.
The normal value of a node like a class name or ID, or an aspect of a node such as attribute
selector's value, is unescaped. Escapes representing Non-ascii characters are unescaped into
unicode characters. For example: `bu\tton, .\31 00, #i\2764\FE0Fu, [attr="value is \"quoted\""]`
will parse respectively to the values `button`, `100`, `i❤u`, `value is "quoted"`.
The original escape sequences for these values can be found in the corresponding property name
in `node.raws`. Where possible, deprecation warnings were added, but the nature
of escape handling makes it impossible to detect what is escaped or not. Our expectation is
that most users are neither expecting nor handling escape sequences in their use of this library,
and so for them, this is a bug fix. Users who are taking care to handle escapes correctly can
now update their code to remove the escape handling and let us do it for them.
* **Mutating values with escapes** - When you make an update to a node property that has escape handling
The value is assumed to be unescaped, and any special characters are escaped automatically and
the corresponding `raws` value is immediately updated. This can result in changes to the original
escape format. Where the exact value of the escape sequence is important there are methods that
allow both values to be set in conjunction. There are a number of new convenience methods for
manipulating values that involve escapes, especially for attributes values where the quote mark
is involved. See https://github.com/postcss/postcss-selector-parser/pull/133 for an extensive
write-up on these changes.
**Upgrade/API Example**
In `3.x` there was no unescape handling and internal consistency of several properties was the caller's job to maintain. It was very easy for the developer
to create a CSS file that did not parse correctly when some types of values
were in use.
```js
const selectorParser = require("postcss-selector-parser");
let attr = selectorParser.attribute({attribute: "id", operator: "=", value: "a-value"});
attr.value; // => "a-value"
attr.toString(); // => [id=a-value]
// Add quotes to an attribute's value.
// All these values have to be set by the caller to be consistent:
// no internal consistency is maintained.
attr.raws.unquoted = attr.value
attr.value = "'" + attr.value + "'";
attr.value; // => "'a-value'"
attr.quoted = true;
attr.toString(); // => "[id='a-value']"
```
In `4.0` there is a convenient API for setting and mutating values
that may need escaping. Especially for attributes.
```js
const selectorParser = require("postcss-selector-parser");
// The constructor requires you specify the exact escape sequence
let className = selectorParser.className({value: "illegal class name", raws: {value: "illegal\\ class\\ name"}});
className.toString(); // => '.illegal\\ class\\ name'
// So it's better to set the value as a property
className = selectorParser.className();
// Most properties that deal with identifiers work like this
className.value = "escape for me";
className.value; // => 'escape for me'
className.toString(); // => '.escape\\ for\\ me'
// emoji and all non-ascii are escaped to ensure it works in every css file.
className.value = "😱🦄😍";
className.value; // => '😱🦄😍'
className.toString(); // => '.\\1F631\\1F984\\1F60D'
// you can control the escape sequence if you want, or do bad bad things
className.setPropertyAndEscape('value', 'xxxx', 'yyyy');
className.value; // => "xxxx"
className.toString(); // => ".yyyy"
// Pass a value directly through to the css output without escaping it.
className.setPropertyWithoutEscape('value', '$REPLACE_ME$');
className.value; // => "$REPLACE_ME$"
className.toString(); // => ".$REPLACE_ME$"
// The biggest changes are to the Attribute class
// passing quoteMark explicitly is required to avoid a deprecation warning.
let attr = selectorParser.attribute({attribute: "id", operator: "=", value: "a-value", quoteMark: null});
attr.toString(); // => "[id=a-value]"
// Get the value with quotes on it and any necessary escapes.
// This is the same as reading attr.value in 3.x.
attr.getQuotedValue(); // => "a-value";
attr.quoteMark; // => null
// Add quotes to an attribute's value.
attr.quoteMark = "'"; // This is all that's required.
attr.toString(); // => "[id='a-value']"
attr.quoted; // => true
// The value is still the same, only the quotes have changed.
attr.value; // => a-value
attr.getQuotedValue(); // => "'a-value'";
// deprecated assignment, no warning because there's no escapes
attr.value = "new-value";
// no quote mark is needed so it is removed
attr.getQuotedValue(); // => "new-value";
// deprecated assignment,
attr.value = "\"a 'single quoted' value\"";
// > (node:27859) DeprecationWarning: Assigning an attribute a value containing characters that might need to be escaped is deprecated. Call attribute.setValue() instead.
attr.getQuotedValue(); // => '"a \'single quoted\' value"';
// quote mark inferred from first and last characters.
attr.quoteMark; // => '"'
// setValue takes options to make manipulating the value simple.
attr.setValue('foo', {smart: true});
// foo doesn't require any escapes or quotes.
attr.toString(); // => '[id=foo]'
attr.quoteMark; // => null
// An explicit quote mark can be specified
attr.setValue('foo', {quoteMark: '"'});
attr.toString(); // => '[id="foo"]'
// preserves quote mark by default
attr.setValue('bar');
attr.toString(); // => '[id="bar"]'
attr.quoteMark = null;
attr.toString(); // => '[id=bar]'
// with no arguments, it preserves quote mark even when it's not a great idea
attr.setValue('a value \n that should be quoted');
attr.toString(); // => '[id=a\\ value\\ \\A\\ that\\ should\\ be\\ quoted]'
// smart preservation with a specified default
attr.setValue('a value \n that should be quoted', {smart: true, preferCurrentQuoteMark: true, quoteMark: "'"});
// => "[id='a value \\A that should be quoted']"
attr.quoteMark = '"';
// => '[id="a value \\A that should be quoted"]'
// this keeps double quotes because it wants to quote the value and the existing value has double quotes.
attr.setValue('this should be quoted', {smart: true, preferCurrentQuoteMark: true, quoteMark: "'"});
// => '[id="this should be quoted"]'
// picks single quotes because the value has double quotes
attr.setValue('a "double quoted" value', {smart: true, preferCurrentQuoteMark: true, quoteMark: "'"});
// => "[id='a "double quoted" value']"
// setPropertyAndEscape lets you do anything you want. Even things that are a bad idea and illegal.
attr.setPropertyAndEscape('value', 'xxxx', 'the password is 42');
attr.value; // => "xxxx"
attr.toString(); // => "[id=the password is 42]"
// Pass a value directly through to the css output without escaping it.
attr.setPropertyWithoutEscape('value', '$REPLACEMENT$');
attr.value; // => "$REPLACEMENT$"
attr.toString(); // => "[id=$REPLACEMENT$]"
```
# 3.1.2
* Fix: Removed dot-prop dependency since it's no longer written in es5.
# 3.1.1
* Fix: typescript definitions weren't in the published package.
# 3.1.0
* Fixed numerous bugs in attribute nodes relating to the handling of comments
and whitespace. There's significant changes to `attrNode.spaces` and `attrNode.raws` since the `3.0.0` release.
* Added `Attribute#offsetOf(part)` to get the offset location of
attribute parts like `"operator"` and `"value"`. This is most
often added to `Attribute#sourceIndex` for error reporting.
# 3.0.0
## Breaking changes
* Some tweaks to the tokenizer/attribute selector parsing mean that whitespace
locations might be slightly different to the 2.x code.
* Better attribute selector parsing with more validation; postcss-selector-parser
no longer uses regular expressions to parse attribute selectors.
* Added an async API (thanks to @jacobp100); the default `process` API is now
async, and the sync API is now accessed through `processSync` instead.
* `process()` and `processSync()` now return a string instead of the Processor
instance.
* Tweaks handling of Less interpolation (thanks to @jwilsson).
* Removes support for Node 0.12.
## Other changes
* `ast()` and `astSync()` methods have been added to the `Processor`. These
return the `Root` node of the selectors after processing them.
* `transform()` and `transformSync()` methods have been added to the
`Processor`. These return the value returned by the processor callback
after processing the selectors.
* Set the parent when inserting a node (thanks to @chriseppstein).
* Correctly adjust indices when using insertBefore/insertAfter (thanks to @tivac).
* Fixes handling of namespaces with qualified tag selectors.
* `process`, `ast` and `transform` (and their sync variants) now accept a
`postcss` rule node. When provided, better errors are generated and selector
processing is automatically set back to the rule selector (unless the `updateSelector` option is set to `false`.)
* Now more memory efficient when tokenizing selectors.
### Upgrade hints
The pattern of:
`rule.selector = processor.process(rule.selector).result.toString();`
is now:
`processor.processSync(rule)`
# 2.2.3
* Resolves an issue where the parser would not reduce multiple spaces between an
ampersand and another simple selector in lossy mode (thanks to @adam-26).
# 2.2.2
* No longer hangs on an unescaped semicolon; instead the parser will throw
an exception for these cases.
# 2.2.1
* Allows a consumer to specify whitespace tokens when creating a new Node
(thanks to @Semigradsky).
# 2.2.0
* Added a new option to normalize whitespace when parsing the selector string
(thanks to @adam-26).
# 2.1.1
* Better unquoted value handling within attribute selectors
(thanks to @evilebottnawi).
# 2.1.0
* Added: Use string constants for all node types & expose them on the main
parser instance (thanks to @Aweary).
# 2.0.0
This release contains the following breaking changes:
* Renamed all `eachInside` iterators to `walk`. For example, `eachTag` is now
`walkTags`, and `eachInside` is now `walk`.
* Renamed `Node#removeSelf()` to `Node#remove()`.
* Renamed `Container#remove()` to `Container#removeChild()`.
* Renamed `Node#raw` to `Node#raws` (thanks to @davidtheclark).
* Now parses `&` as the *nesting* selector, rather than a *tag* selector.
* Fixes misinterpretation of Sass interpolation (e.g. `#{foo}`) as an
id selector (thanks to @davidtheclark).
and;
* Fixes parsing of attribute selectors with equals signs in them
(e.g. `[data-attr="foo=bar"]`) (thanks to @montmanu).
* Adds `quoted` and `raw.unquoted` properties to attribute nodes
(thanks to @davidtheclark).
# 1.3.3
* Fixes an infinite loop on `)` and `]` tokens when they had no opening pairs.
Now postcss-selector-parser will throw when it encounters these lone tokens.
# 1.3.2
* Now uses plain integers rather than `str.charCodeAt(0)` for compiled builds.
# 1.3.1
* Update flatten to v1.x (thanks to @shinnn).
# 1.3.0
* Adds a new node type, `String`, to fix a crash on selectors such as
`foo:bar("test")`.
# 1.2.1
* Fixes a crash when the parser encountered a trailing combinator.
# 1.2.0
* A more descriptive error is thrown when the parser expects to find a
pseudo-class/pseudo-element (thanks to @ashelley).
* Adds support for line/column locations for selector nodes, as well as a
`Node#sourceIndex` method (thanks to @davidtheclark).
# 1.1.4
* Fixes a crash when a selector started with a `>` combinator. The module will
now no longer throw if a selector has a leading/trailing combinator node.
# 1.1.3
* Fixes a crash on `@` tokens.
# 1.1.2
* Fixes an infinite loop caused by using parentheses in a non-pseudo element
context.
# 1.1.1
* Fixes a crash when a backslash ended a selector string.
# 1.1.0
* Adds support for replacing multiple nodes at once with `replaceWith`
(thanks to @jonathantneal).
* Parser no longer throws on sequential IDs and trailing commas, to support
parsing of selector hacks.
# 1.0.1
* Fixes using `insertAfter` and `insertBefore` during iteration.
# 1.0.0
* Adds `clone` and `replaceWith` methods to nodes.
* Adds `insertBefore` and `insertAfter` to containers.
* Stabilises API.
# 0.0.5
* Fixes crash on extra whitespace inside a pseudo selector's parentheses.
* Adds sort function to the container class.
* Enables the parser to pass its input through without transforming.
* Iteration-safe `each` and `eachInside`.
# 0.0.4
* Tidy up redundant duplication.
* Fixes a bug where the parser would loop infinitely on universal selectors
inside pseudo selectors.
* Adds `length` getter and `eachInside`, `map`, `reduce` to the container class.
* When a selector has been removed from the tree, the root node will no longer
cast it to a string.
* Adds node type iterators to the container class (e.g. `eachComment`).
* Adds filter function to the container class.
* Adds split function to the container class.
* Create new node types by doing `parser.id(opts)` etc.
* Adds support for pseudo classes anywhere in the selector.
# 0.0.3
* Adds `next` and `prev` to the node class.
* Adds `first` and `last` getters to the container class.
* Adds `every` and `some` iterators to the container class.
* Add `empty` alias for `removeAll`.
* Combinators are now types of node.
* Fixes the at method so that it is not an alias for `index`.
* Tidy up creation of new nodes in the parser.
* Refactors how namespaces are handled for consistency & less redundant code.
* Refactors AST to use `nodes` exclusively, and eliminates excessive nesting.
* Fixes nested pseudo parsing.
* Fixes whitespace parsing.
# 0.0.2
* Adds support for namespace selectors.
* Adds support for selectors joined by escaped spaces - such as `.\31\ 0`.
# 0.0.1
* Initial release.

View file

@ -0,0 +1,22 @@
Copyright (c) Ben Briggs <beneb.info@gmail.com> (http://beneb.info)
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.

View file

@ -0,0 +1,49 @@
# postcss-selector-parser [![Build Status](https://travis-ci.org/postcss/postcss-selector-parser.svg?branch=master)](https://travis-ci.org/postcss/postcss-selector-parser)
> Selector parser with built in methods for working with selector strings.
## Install
With [npm](https://npmjs.com/package/postcss-selector-parser) do:
```
npm install postcss-selector-parser
```
## Quick Start
```js
const parser = require('postcss-selector-parser');
const transform = selectors => {
selectors.walk(selector => {
// do something with the selector
console.log(String(selector))
});
};
const transformed = parser(transform).processSync('h1, h2, h3');
```
To normalize selector whitespace:
```js
const parser = require('postcss-selector-parser');
const normalized = parser().processSync('h1, h2, h3', {lossless: false});
// -> h1,h2,h3
```
Async support is provided through `parser.process` and will resolve a Promise
with the resulting selector string.
## API
Please see [API.md](API.md).
## Credits
* Huge thanks to Andrey Sitnik (@ai) for work on PostCSS which helped
accelerate this module's development.
## License
MIT

View file

@ -0,0 +1,24 @@
"use strict";
exports.__esModule = true;
exports["default"] = void 0;
var _processor = _interopRequireDefault(require("./processor"));
var selectors = _interopRequireWildcard(require("./selectors"));
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var parser = function parser(processor) {
return new _processor["default"](processor);
};
Object.assign(parser, selectors);
delete parser.__esModule;
var _default = parser;
exports["default"] = _default;
module.exports = exports.default;

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,206 @@
"use strict";
exports.__esModule = true;
exports["default"] = void 0;
var _parser = _interopRequireDefault(require("./parser"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var Processor = /*#__PURE__*/function () {
function Processor(func, options) {
this.func = func || function noop() {};
this.funcRes = null;
this.options = options;
}
var _proto = Processor.prototype;
_proto._shouldUpdateSelector = function _shouldUpdateSelector(rule, options) {
if (options === void 0) {
options = {};
}
var merged = Object.assign({}, this.options, options);
if (merged.updateSelector === false) {
return false;
} else {
return typeof rule !== "string";
}
};
_proto._isLossy = function _isLossy(options) {
if (options === void 0) {
options = {};
}
var merged = Object.assign({}, this.options, options);
if (merged.lossless === false) {
return true;
} else {
return false;
}
};
_proto._root = function _root(rule, options) {
if (options === void 0) {
options = {};
}
var parser = new _parser["default"](rule, this._parseOptions(options));
return parser.root;
};
_proto._parseOptions = function _parseOptions(options) {
return {
lossy: this._isLossy(options)
};
};
_proto._run = function _run(rule, options) {
var _this = this;
if (options === void 0) {
options = {};
}
return new Promise(function (resolve, reject) {
try {
var root = _this._root(rule, options);
Promise.resolve(_this.func(root)).then(function (transform) {
var string = undefined;
if (_this._shouldUpdateSelector(rule, options)) {
string = root.toString();
rule.selector = string;
}
return {
transform: transform,
root: root,
string: string
};
}).then(resolve, reject);
} catch (e) {
reject(e);
return;
}
});
};
_proto._runSync = function _runSync(rule, options) {
if (options === void 0) {
options = {};
}
var root = this._root(rule, options);
var transform = this.func(root);
if (transform && typeof transform.then === "function") {
throw new Error("Selector processor returned a promise to a synchronous call.");
}
var string = undefined;
if (options.updateSelector && typeof rule !== "string") {
string = root.toString();
rule.selector = string;
}
return {
transform: transform,
root: root,
string: string
};
}
/**
* Process rule into a selector AST.
*
* @param rule {postcss.Rule | string} The css selector to be processed
* @param options The options for processing
* @returns {Promise<parser.Root>} The AST of the selector after processing it.
*/
;
_proto.ast = function ast(rule, options) {
return this._run(rule, options).then(function (result) {
return result.root;
});
}
/**
* Process rule into a selector AST synchronously.
*
* @param rule {postcss.Rule | string} The css selector to be processed
* @param options The options for processing
* @returns {parser.Root} The AST of the selector after processing it.
*/
;
_proto.astSync = function astSync(rule, options) {
return this._runSync(rule, options).root;
}
/**
* Process a selector into a transformed value asynchronously
*
* @param rule {postcss.Rule | string} The css selector to be processed
* @param options The options for processing
* @returns {Promise<any>} The value returned by the processor.
*/
;
_proto.transform = function transform(rule, options) {
return this._run(rule, options).then(function (result) {
return result.transform;
});
}
/**
* Process a selector into a transformed value synchronously.
*
* @param rule {postcss.Rule | string} The css selector to be processed
* @param options The options for processing
* @returns {any} The value returned by the processor.
*/
;
_proto.transformSync = function transformSync(rule, options) {
return this._runSync(rule, options).transform;
}
/**
* Process a selector into a new selector string asynchronously.
*
* @param rule {postcss.Rule | string} The css selector to be processed
* @param options The options for processing
* @returns {string} the selector after processing.
*/
;
_proto.process = function process(rule, options) {
return this._run(rule, options).then(function (result) {
return result.string || result.root.toString();
});
}
/**
* Process a selector into a new selector string synchronously.
*
* @param rule {postcss.Rule | string} The css selector to be processed
* @param options The options for processing
* @returns {string} the selector after processing.
*/
;
_proto.processSync = function processSync(rule, options) {
var result = this._runSync(rule, options);
return result.string || result.root.toString();
};
return Processor;
}();
exports["default"] = Processor;
module.exports = exports.default;

View file

@ -0,0 +1,515 @@
"use strict";
exports.__esModule = true;
exports.unescapeValue = unescapeValue;
exports["default"] = void 0;
var _cssesc = _interopRequireDefault(require("cssesc"));
var _unesc = _interopRequireDefault(require("../util/unesc"));
var _namespace = _interopRequireDefault(require("./namespace"));
var _types = require("./types");
var _CSSESC_QUOTE_OPTIONS;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
var deprecate = require("util-deprecate");
var WRAPPED_IN_QUOTES = /^('|")([^]*)\1$/;
var warnOfDeprecatedValueAssignment = deprecate(function () {}, "Assigning an attribute a value containing characters that might need to be escaped is deprecated. " + "Call attribute.setValue() instead.");
var warnOfDeprecatedQuotedAssignment = deprecate(function () {}, "Assigning attr.quoted is deprecated and has no effect. Assign to attr.quoteMark instead.");
var warnOfDeprecatedConstructor = deprecate(function () {}, "Constructing an Attribute selector with a value without specifying quoteMark is deprecated. Note: The value should be unescaped now.");
function unescapeValue(value) {
var deprecatedUsage = false;
var quoteMark = null;
var unescaped = value;
var m = unescaped.match(WRAPPED_IN_QUOTES);
if (m) {
quoteMark = m[1];
unescaped = m[2];
}
unescaped = (0, _unesc["default"])(unescaped);
if (unescaped !== value) {
deprecatedUsage = true;
}
return {
deprecatedUsage: deprecatedUsage,
unescaped: unescaped,
quoteMark: quoteMark
};
}
function handleDeprecatedContructorOpts(opts) {
if (opts.quoteMark !== undefined) {
return opts;
}
if (opts.value === undefined) {
return opts;
}
warnOfDeprecatedConstructor();
var _unescapeValue = unescapeValue(opts.value),
quoteMark = _unescapeValue.quoteMark,
unescaped = _unescapeValue.unescaped;
if (!opts.raws) {
opts.raws = {};
}
if (opts.raws.value === undefined) {
opts.raws.value = opts.value;
}
opts.value = unescaped;
opts.quoteMark = quoteMark;
return opts;
}
var Attribute = /*#__PURE__*/function (_Namespace) {
_inheritsLoose(Attribute, _Namespace);
function Attribute(opts) {
var _this;
if (opts === void 0) {
opts = {};
}
_this = _Namespace.call(this, handleDeprecatedContructorOpts(opts)) || this;
_this.type = _types.ATTRIBUTE;
_this.raws = _this.raws || {};
Object.defineProperty(_this.raws, 'unquoted', {
get: deprecate(function () {
return _this.value;
}, "attr.raws.unquoted is deprecated. Call attr.value instead."),
set: deprecate(function () {
return _this.value;
}, "Setting attr.raws.unquoted is deprecated and has no effect. attr.value is unescaped by default now.")
});
_this._constructed = true;
return _this;
}
/**
* Returns the Attribute's value quoted such that it would be legal to use
* in the value of a css file. The original value's quotation setting
* used for stringification is left unchanged. See `setValue(value, options)`
* if you want to control the quote settings of a new value for the attribute.
*
* You can also change the quotation used for the current value by setting quoteMark.
*
* Options:
* * quoteMark {'"' | "'" | null} - Use this value to quote the value. If this
* option is not set, the original value for quoteMark will be used. If
* indeterminate, a double quote is used. The legal values are:
* * `null` - the value will be unquoted and characters will be escaped as necessary.
* * `'` - the value will be quoted with a single quote and single quotes are escaped.
* * `"` - the value will be quoted with a double quote and double quotes are escaped.
* * preferCurrentQuoteMark {boolean} - if true, prefer the source quote mark
* over the quoteMark option value.
* * smart {boolean} - if true, will select a quote mark based on the value
* and the other options specified here. See the `smartQuoteMark()`
* method.
**/
var _proto = Attribute.prototype;
_proto.getQuotedValue = function getQuotedValue(options) {
if (options === void 0) {
options = {};
}
var quoteMark = this._determineQuoteMark(options);
var cssescopts = CSSESC_QUOTE_OPTIONS[quoteMark];
var escaped = (0, _cssesc["default"])(this._value, cssescopts);
return escaped;
};
_proto._determineQuoteMark = function _determineQuoteMark(options) {
return options.smart ? this.smartQuoteMark(options) : this.preferredQuoteMark(options);
}
/**
* Set the unescaped value with the specified quotation options. The value
* provided must not include any wrapping quote marks -- those quotes will
* be interpreted as part of the value and escaped accordingly.
*/
;
_proto.setValue = function setValue(value, options) {
if (options === void 0) {
options = {};
}
this._value = value;
this._quoteMark = this._determineQuoteMark(options);
this._syncRawValue();
}
/**
* Intelligently select a quoteMark value based on the value's contents. If
* the value is a legal CSS ident, it will not be quoted. Otherwise a quote
* mark will be picked that minimizes the number of escapes.
*
* If there's no clear winner, the quote mark from these options is used,
* then the source quote mark (this is inverted if `preferCurrentQuoteMark` is
* true). If the quoteMark is unspecified, a double quote is used.
*
* @param options This takes the quoteMark and preferCurrentQuoteMark options
* from the quoteValue method.
*/
;
_proto.smartQuoteMark = function smartQuoteMark(options) {
var v = this.value;
var numSingleQuotes = v.replace(/[^']/g, '').length;
var numDoubleQuotes = v.replace(/[^"]/g, '').length;
if (numSingleQuotes + numDoubleQuotes === 0) {
var escaped = (0, _cssesc["default"])(v, {
isIdentifier: true
});
if (escaped === v) {
return Attribute.NO_QUOTE;
} else {
var pref = this.preferredQuoteMark(options);
if (pref === Attribute.NO_QUOTE) {
// pick a quote mark that isn't none and see if it's smaller
var quote = this.quoteMark || options.quoteMark || Attribute.DOUBLE_QUOTE;
var opts = CSSESC_QUOTE_OPTIONS[quote];
var quoteValue = (0, _cssesc["default"])(v, opts);
if (quoteValue.length < escaped.length) {
return quote;
}
}
return pref;
}
} else if (numDoubleQuotes === numSingleQuotes) {
return this.preferredQuoteMark(options);
} else if (numDoubleQuotes < numSingleQuotes) {
return Attribute.DOUBLE_QUOTE;
} else {
return Attribute.SINGLE_QUOTE;
}
}
/**
* Selects the preferred quote mark based on the options and the current quote mark value.
* If you want the quote mark to depend on the attribute value, call `smartQuoteMark(opts)`
* instead.
*/
;
_proto.preferredQuoteMark = function preferredQuoteMark(options) {
var quoteMark = options.preferCurrentQuoteMark ? this.quoteMark : options.quoteMark;
if (quoteMark === undefined) {
quoteMark = options.preferCurrentQuoteMark ? options.quoteMark : this.quoteMark;
}
if (quoteMark === undefined) {
quoteMark = Attribute.DOUBLE_QUOTE;
}
return quoteMark;
};
_proto._syncRawValue = function _syncRawValue() {
var rawValue = (0, _cssesc["default"])(this._value, CSSESC_QUOTE_OPTIONS[this.quoteMark]);
if (rawValue === this._value) {
if (this.raws) {
delete this.raws.value;
}
} else {
this.raws.value = rawValue;
}
};
_proto._handleEscapes = function _handleEscapes(prop, value) {
if (this._constructed) {
var escaped = (0, _cssesc["default"])(value, {
isIdentifier: true
});
if (escaped !== value) {
this.raws[prop] = escaped;
} else {
delete this.raws[prop];
}
}
};
_proto._spacesFor = function _spacesFor(name) {
var attrSpaces = {
before: '',
after: ''
};
var spaces = this.spaces[name] || {};
var rawSpaces = this.raws.spaces && this.raws.spaces[name] || {};
return Object.assign(attrSpaces, spaces, rawSpaces);
};
_proto._stringFor = function _stringFor(name, spaceName, concat) {
if (spaceName === void 0) {
spaceName = name;
}
if (concat === void 0) {
concat = defaultAttrConcat;
}
var attrSpaces = this._spacesFor(spaceName);
return concat(this.stringifyProperty(name), attrSpaces);
}
/**
* returns the offset of the attribute part specified relative to the
* start of the node of the output string.
*
* * "ns" - alias for "namespace"
* * "namespace" - the namespace if it exists.
* * "attribute" - the attribute name
* * "attributeNS" - the start of the attribute or its namespace
* * "operator" - the match operator of the attribute
* * "value" - The value (string or identifier)
* * "insensitive" - the case insensitivity flag;
* @param part One of the possible values inside an attribute.
* @returns -1 if the name is invalid or the value doesn't exist in this attribute.
*/
;
_proto.offsetOf = function offsetOf(name) {
var count = 1;
var attributeSpaces = this._spacesFor("attribute");
count += attributeSpaces.before.length;
if (name === "namespace" || name === "ns") {
return this.namespace ? count : -1;
}
if (name === "attributeNS") {
return count;
}
count += this.namespaceString.length;
if (this.namespace) {
count += 1;
}
if (name === "attribute") {
return count;
}
count += this.stringifyProperty("attribute").length;
count += attributeSpaces.after.length;
var operatorSpaces = this._spacesFor("operator");
count += operatorSpaces.before.length;
var operator = this.stringifyProperty("operator");
if (name === "operator") {
return operator ? count : -1;
}
count += operator.length;
count += operatorSpaces.after.length;
var valueSpaces = this._spacesFor("value");
count += valueSpaces.before.length;
var value = this.stringifyProperty("value");
if (name === "value") {
return value ? count : -1;
}
count += value.length;
count += valueSpaces.after.length;
var insensitiveSpaces = this._spacesFor("insensitive");
count += insensitiveSpaces.before.length;
if (name === "insensitive") {
return this.insensitive ? count : -1;
}
return -1;
};
_proto.toString = function toString() {
var _this2 = this;
var selector = [this.rawSpaceBefore, '['];
selector.push(this._stringFor('qualifiedAttribute', 'attribute'));
if (this.operator && (this.value || this.value === '')) {
selector.push(this._stringFor('operator'));
selector.push(this._stringFor('value'));
selector.push(this._stringFor('insensitiveFlag', 'insensitive', function (attrValue, attrSpaces) {
if (attrValue.length > 0 && !_this2.quoted && attrSpaces.before.length === 0 && !(_this2.spaces.value && _this2.spaces.value.after)) {
attrSpaces.before = " ";
}
return defaultAttrConcat(attrValue, attrSpaces);
}));
}
selector.push(']');
selector.push(this.rawSpaceAfter);
return selector.join('');
};
_createClass(Attribute, [{
key: "quoted",
get: function get() {
var qm = this.quoteMark;
return qm === "'" || qm === '"';
},
set: function set(value) {
warnOfDeprecatedQuotedAssignment();
}
/**
* returns a single (`'`) or double (`"`) quote character if the value is quoted.
* returns `null` if the value is not quoted.
* returns `undefined` if the quotation state is unknown (this can happen when
* the attribute is constructed without specifying a quote mark.)
*/
}, {
key: "quoteMark",
get: function get() {
return this._quoteMark;
}
/**
* Set the quote mark to be used by this attribute's value.
* If the quote mark changes, the raw (escaped) value at `attr.raws.value` of the attribute
* value is updated accordingly.
*
* @param {"'" | '"' | null} quoteMark The quote mark or `null` if the value should be unquoted.
*/
,
set: function set(quoteMark) {
if (!this._constructed) {
this._quoteMark = quoteMark;
return;
}
if (this._quoteMark !== quoteMark) {
this._quoteMark = quoteMark;
this._syncRawValue();
}
}
}, {
key: "qualifiedAttribute",
get: function get() {
return this.qualifiedName(this.raws.attribute || this.attribute);
}
}, {
key: "insensitiveFlag",
get: function get() {
return this.insensitive ? 'i' : '';
}
}, {
key: "value",
get: function get() {
return this._value;
}
/**
* Before 3.0, the value had to be set to an escaped value including any wrapped
* quote marks. In 3.0, the semantics of `Attribute.value` changed so that the value
* is unescaped during parsing and any quote marks are removed.
*
* Because the ambiguity of this semantic change, if you set `attr.value = newValue`,
* a deprecation warning is raised when the new value contains any characters that would
* require escaping (including if it contains wrapped quotes).
*
* Instead, you should call `attr.setValue(newValue, opts)` and pass options that describe
* how the new value is quoted.
*/
,
set: function set(v) {
if (this._constructed) {
var _unescapeValue2 = unescapeValue(v),
deprecatedUsage = _unescapeValue2.deprecatedUsage,
unescaped = _unescapeValue2.unescaped,
quoteMark = _unescapeValue2.quoteMark;
if (deprecatedUsage) {
warnOfDeprecatedValueAssignment();
}
if (unescaped === this._value && quoteMark === this._quoteMark) {
return;
}
this._value = unescaped;
this._quoteMark = quoteMark;
this._syncRawValue();
} else {
this._value = v;
}
}
}, {
key: "attribute",
get: function get() {
return this._attribute;
},
set: function set(name) {
this._handleEscapes("attribute", name);
this._attribute = name;
}
}]);
return Attribute;
}(_namespace["default"]);
exports["default"] = Attribute;
Attribute.NO_QUOTE = null;
Attribute.SINGLE_QUOTE = "'";
Attribute.DOUBLE_QUOTE = '"';
var CSSESC_QUOTE_OPTIONS = (_CSSESC_QUOTE_OPTIONS = {
"'": {
quotes: 'single',
wrap: true
},
'"': {
quotes: 'double',
wrap: true
}
}, _CSSESC_QUOTE_OPTIONS[null] = {
isIdentifier: true
}, _CSSESC_QUOTE_OPTIONS);
function defaultAttrConcat(attrValue, attrSpaces) {
return "" + attrSpaces.before + attrValue + attrSpaces.after;
}

View file

@ -0,0 +1,69 @@
"use strict";
exports.__esModule = true;
exports["default"] = void 0;
var _cssesc = _interopRequireDefault(require("cssesc"));
var _util = require("../util");
var _node = _interopRequireDefault(require("./node"));
var _types = require("./types");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
var ClassName = /*#__PURE__*/function (_Node) {
_inheritsLoose(ClassName, _Node);
function ClassName(opts) {
var _this;
_this = _Node.call(this, opts) || this;
_this.type = _types.CLASS;
_this._constructed = true;
return _this;
}
var _proto = ClassName.prototype;
_proto.valueToString = function valueToString() {
return '.' + _Node.prototype.valueToString.call(this);
};
_createClass(ClassName, [{
key: "value",
get: function get() {
return this._value;
},
set: function set(v) {
if (this._constructed) {
var escaped = (0, _cssesc["default"])(v, {
isIdentifier: true
});
if (escaped !== v) {
(0, _util.ensureObject)(this, "raws");
this.raws.value = escaped;
} else if (this.raws) {
delete this.raws.value;
}
}
this._value = v;
}
}]);
return ClassName;
}(_node["default"]);
exports["default"] = ClassName;
module.exports = exports.default;

View file

@ -0,0 +1,31 @@
"use strict";
exports.__esModule = true;
exports["default"] = void 0;
var _node = _interopRequireDefault(require("./node"));
var _types = require("./types");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
var Combinator = /*#__PURE__*/function (_Node) {
_inheritsLoose(Combinator, _Node);
function Combinator(opts) {
var _this;
_this = _Node.call(this, opts) || this;
_this.type = _types.COMBINATOR;
return _this;
}
return Combinator;
}(_node["default"]);
exports["default"] = Combinator;
module.exports = exports.default;

View file

@ -0,0 +1,31 @@
"use strict";
exports.__esModule = true;
exports["default"] = void 0;
var _node = _interopRequireDefault(require("./node"));
var _types = require("./types");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
var Comment = /*#__PURE__*/function (_Node) {
_inheritsLoose(Comment, _Node);
function Comment(opts) {
var _this;
_this = _Node.call(this, opts) || this;
_this.type = _types.COMMENT;
return _this;
}
return Comment;
}(_node["default"]);
exports["default"] = Comment;
module.exports = exports.default;

View file

@ -0,0 +1,102 @@
"use strict";
exports.__esModule = true;
exports.universal = exports.tag = exports.string = exports.selector = exports.root = exports.pseudo = exports.nesting = exports.id = exports.comment = exports.combinator = exports.className = exports.attribute = void 0;
var _attribute = _interopRequireDefault(require("./attribute"));
var _className = _interopRequireDefault(require("./className"));
var _combinator = _interopRequireDefault(require("./combinator"));
var _comment = _interopRequireDefault(require("./comment"));
var _id = _interopRequireDefault(require("./id"));
var _nesting = _interopRequireDefault(require("./nesting"));
var _pseudo = _interopRequireDefault(require("./pseudo"));
var _root = _interopRequireDefault(require("./root"));
var _selector = _interopRequireDefault(require("./selector"));
var _string = _interopRequireDefault(require("./string"));
var _tag = _interopRequireDefault(require("./tag"));
var _universal = _interopRequireDefault(require("./universal"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var attribute = function attribute(opts) {
return new _attribute["default"](opts);
};
exports.attribute = attribute;
var className = function className(opts) {
return new _className["default"](opts);
};
exports.className = className;
var combinator = function combinator(opts) {
return new _combinator["default"](opts);
};
exports.combinator = combinator;
var comment = function comment(opts) {
return new _comment["default"](opts);
};
exports.comment = comment;
var id = function id(opts) {
return new _id["default"](opts);
};
exports.id = id;
var nesting = function nesting(opts) {
return new _nesting["default"](opts);
};
exports.nesting = nesting;
var pseudo = function pseudo(opts) {
return new _pseudo["default"](opts);
};
exports.pseudo = pseudo;
var root = function root(opts) {
return new _root["default"](opts);
};
exports.root = root;
var selector = function selector(opts) {
return new _selector["default"](opts);
};
exports.selector = selector;
var string = function string(opts) {
return new _string["default"](opts);
};
exports.string = string;
var tag = function tag(opts) {
return new _tag["default"](opts);
};
exports.tag = tag;
var universal = function universal(opts) {
return new _universal["default"](opts);
};
exports.universal = universal;

View file

@ -0,0 +1,395 @@
"use strict";
exports.__esModule = true;
exports["default"] = void 0;
var _node = _interopRequireDefault(require("./node"));
var types = _interopRequireWildcard(require("./types"));
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } it = o[Symbol.iterator](); return it.next.bind(it); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
var Container = /*#__PURE__*/function (_Node) {
_inheritsLoose(Container, _Node);
function Container(opts) {
var _this;
_this = _Node.call(this, opts) || this;
if (!_this.nodes) {
_this.nodes = [];
}
return _this;
}
var _proto = Container.prototype;
_proto.append = function append(selector) {
selector.parent = this;
this.nodes.push(selector);
return this;
};
_proto.prepend = function prepend(selector) {
selector.parent = this;
this.nodes.unshift(selector);
return this;
};
_proto.at = function at(index) {
return this.nodes[index];
};
_proto.index = function index(child) {
if (typeof child === 'number') {
return child;
}
return this.nodes.indexOf(child);
};
_proto.removeChild = function removeChild(child) {
child = this.index(child);
this.at(child).parent = undefined;
this.nodes.splice(child, 1);
var index;
for (var id in this.indexes) {
index = this.indexes[id];
if (index >= child) {
this.indexes[id] = index - 1;
}
}
return this;
};
_proto.removeAll = function removeAll() {
for (var _iterator = _createForOfIteratorHelperLoose(this.nodes), _step; !(_step = _iterator()).done;) {
var node = _step.value;
node.parent = undefined;
}
this.nodes = [];
return this;
};
_proto.empty = function empty() {
return this.removeAll();
};
_proto.insertAfter = function insertAfter(oldNode, newNode) {
newNode.parent = this;
var oldIndex = this.index(oldNode);
this.nodes.splice(oldIndex + 1, 0, newNode);
newNode.parent = this;
var index;
for (var id in this.indexes) {
index = this.indexes[id];
if (oldIndex <= index) {
this.indexes[id] = index + 1;
}
}
return this;
};
_proto.insertBefore = function insertBefore(oldNode, newNode) {
newNode.parent = this;
var oldIndex = this.index(oldNode);
this.nodes.splice(oldIndex, 0, newNode);
newNode.parent = this;
var index;
for (var id in this.indexes) {
index = this.indexes[id];
if (index <= oldIndex) {
this.indexes[id] = index + 1;
}
}
return this;
};
_proto._findChildAtPosition = function _findChildAtPosition(line, col) {
var found = undefined;
this.each(function (node) {
if (node.atPosition) {
var foundChild = node.atPosition(line, col);
if (foundChild) {
found = foundChild;
return false;
}
} else if (node.isAtPosition(line, col)) {
found = node;
return false;
}
});
return found;
}
/**
* Return the most specific node at the line and column number given.
* The source location is based on the original parsed location, locations aren't
* updated as selector nodes are mutated.
*
* Note that this location is relative to the location of the first character
* of the selector, and not the location of the selector in the overall document
* when used in conjunction with postcss.
*
* If not found, returns undefined.
* @param {number} line The line number of the node to find. (1-based index)
* @param {number} col The column number of the node to find. (1-based index)
*/
;
_proto.atPosition = function atPosition(line, col) {
if (this.isAtPosition(line, col)) {
return this._findChildAtPosition(line, col) || this;
} else {
return undefined;
}
};
_proto._inferEndPosition = function _inferEndPosition() {
if (this.last && this.last.source && this.last.source.end) {
this.source = this.source || {};
this.source.end = this.source.end || {};
Object.assign(this.source.end, this.last.source.end);
}
};
_proto.each = function each(callback) {
if (!this.lastEach) {
this.lastEach = 0;
}
if (!this.indexes) {
this.indexes = {};
}
this.lastEach++;
var id = this.lastEach;
this.indexes[id] = 0;
if (!this.length) {
return undefined;
}
var index, result;
while (this.indexes[id] < this.length) {
index = this.indexes[id];
result = callback(this.at(index), index);
if (result === false) {
break;
}
this.indexes[id] += 1;
}
delete this.indexes[id];
if (result === false) {
return false;
}
};
_proto.walk = function walk(callback) {
return this.each(function (node, i) {
var result = callback(node, i);
if (result !== false && node.length) {
result = node.walk(callback);
}
if (result === false) {
return false;
}
});
};
_proto.walkAttributes = function walkAttributes(callback) {
var _this2 = this;
return this.walk(function (selector) {
if (selector.type === types.ATTRIBUTE) {
return callback.call(_this2, selector);
}
});
};
_proto.walkClasses = function walkClasses(callback) {
var _this3 = this;
return this.walk(function (selector) {
if (selector.type === types.CLASS) {
return callback.call(_this3, selector);
}
});
};
_proto.walkCombinators = function walkCombinators(callback) {
var _this4 = this;
return this.walk(function (selector) {
if (selector.type === types.COMBINATOR) {
return callback.call(_this4, selector);
}
});
};
_proto.walkComments = function walkComments(callback) {
var _this5 = this;
return this.walk(function (selector) {
if (selector.type === types.COMMENT) {
return callback.call(_this5, selector);
}
});
};
_proto.walkIds = function walkIds(callback) {
var _this6 = this;
return this.walk(function (selector) {
if (selector.type === types.ID) {
return callback.call(_this6, selector);
}
});
};
_proto.walkNesting = function walkNesting(callback) {
var _this7 = this;
return this.walk(function (selector) {
if (selector.type === types.NESTING) {
return callback.call(_this7, selector);
}
});
};
_proto.walkPseudos = function walkPseudos(callback) {
var _this8 = this;
return this.walk(function (selector) {
if (selector.type === types.PSEUDO) {
return callback.call(_this8, selector);
}
});
};
_proto.walkTags = function walkTags(callback) {
var _this9 = this;
return this.walk(function (selector) {
if (selector.type === types.TAG) {
return callback.call(_this9, selector);
}
});
};
_proto.walkUniversals = function walkUniversals(callback) {
var _this10 = this;
return this.walk(function (selector) {
if (selector.type === types.UNIVERSAL) {
return callback.call(_this10, selector);
}
});
};
_proto.split = function split(callback) {
var _this11 = this;
var current = [];
return this.reduce(function (memo, node, index) {
var split = callback.call(_this11, node);
current.push(node);
if (split) {
memo.push(current);
current = [];
} else if (index === _this11.length - 1) {
memo.push(current);
}
return memo;
}, []);
};
_proto.map = function map(callback) {
return this.nodes.map(callback);
};
_proto.reduce = function reduce(callback, memo) {
return this.nodes.reduce(callback, memo);
};
_proto.every = function every(callback) {
return this.nodes.every(callback);
};
_proto.some = function some(callback) {
return this.nodes.some(callback);
};
_proto.filter = function filter(callback) {
return this.nodes.filter(callback);
};
_proto.sort = function sort(callback) {
return this.nodes.sort(callback);
};
_proto.toString = function toString() {
return this.map(String).join('');
};
_createClass(Container, [{
key: "first",
get: function get() {
return this.at(0);
}
}, {
key: "last",
get: function get() {
return this.at(this.length - 1);
}
}, {
key: "length",
get: function get() {
return this.nodes.length;
}
}]);
return Container;
}(_node["default"]);
exports["default"] = Container;
module.exports = exports.default;

View file

@ -0,0 +1,64 @@
"use strict";
exports.__esModule = true;
exports.isNode = isNode;
exports.isPseudoElement = isPseudoElement;
exports.isPseudoClass = isPseudoClass;
exports.isContainer = isContainer;
exports.isNamespace = isNamespace;
exports.isUniversal = exports.isTag = exports.isString = exports.isSelector = exports.isRoot = exports.isPseudo = exports.isNesting = exports.isIdentifier = exports.isComment = exports.isCombinator = exports.isClassName = exports.isAttribute = void 0;
var _types = require("./types");
var _IS_TYPE;
var IS_TYPE = (_IS_TYPE = {}, _IS_TYPE[_types.ATTRIBUTE] = true, _IS_TYPE[_types.CLASS] = true, _IS_TYPE[_types.COMBINATOR] = true, _IS_TYPE[_types.COMMENT] = true, _IS_TYPE[_types.ID] = true, _IS_TYPE[_types.NESTING] = true, _IS_TYPE[_types.PSEUDO] = true, _IS_TYPE[_types.ROOT] = true, _IS_TYPE[_types.SELECTOR] = true, _IS_TYPE[_types.STRING] = true, _IS_TYPE[_types.TAG] = true, _IS_TYPE[_types.UNIVERSAL] = true, _IS_TYPE);
function isNode(node) {
return typeof node === "object" && IS_TYPE[node.type];
}
function isNodeType(type, node) {
return isNode(node) && node.type === type;
}
var isAttribute = isNodeType.bind(null, _types.ATTRIBUTE);
exports.isAttribute = isAttribute;
var isClassName = isNodeType.bind(null, _types.CLASS);
exports.isClassName = isClassName;
var isCombinator = isNodeType.bind(null, _types.COMBINATOR);
exports.isCombinator = isCombinator;
var isComment = isNodeType.bind(null, _types.COMMENT);
exports.isComment = isComment;
var isIdentifier = isNodeType.bind(null, _types.ID);
exports.isIdentifier = isIdentifier;
var isNesting = isNodeType.bind(null, _types.NESTING);
exports.isNesting = isNesting;
var isPseudo = isNodeType.bind(null, _types.PSEUDO);
exports.isPseudo = isPseudo;
var isRoot = isNodeType.bind(null, _types.ROOT);
exports.isRoot = isRoot;
var isSelector = isNodeType.bind(null, _types.SELECTOR);
exports.isSelector = isSelector;
var isString = isNodeType.bind(null, _types.STRING);
exports.isString = isString;
var isTag = isNodeType.bind(null, _types.TAG);
exports.isTag = isTag;
var isUniversal = isNodeType.bind(null, _types.UNIVERSAL);
exports.isUniversal = isUniversal;
function isPseudoElement(node) {
return isPseudo(node) && node.value && (node.value.startsWith("::") || node.value.toLowerCase() === ":before" || node.value.toLowerCase() === ":after" || node.value.toLowerCase() === ":first-letter" || node.value.toLowerCase() === ":first-line");
}
function isPseudoClass(node) {
return isPseudo(node) && !isPseudoElement(node);
}
function isContainer(node) {
return !!(isNode(node) && node.walk);
}
function isNamespace(node) {
return isAttribute(node) || isTag(node);
}

View file

@ -0,0 +1,37 @@
"use strict";
exports.__esModule = true;
exports["default"] = void 0;
var _node = _interopRequireDefault(require("./node"));
var _types = require("./types");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
var ID = /*#__PURE__*/function (_Node) {
_inheritsLoose(ID, _Node);
function ID(opts) {
var _this;
_this = _Node.call(this, opts) || this;
_this.type = _types.ID;
return _this;
}
var _proto = ID.prototype;
_proto.valueToString = function valueToString() {
return '#' + _Node.prototype.valueToString.call(this);
};
return ID;
}(_node["default"]);
exports["default"] = ID;
module.exports = exports.default;

View file

@ -0,0 +1,27 @@
"use strict";
exports.__esModule = true;
var _types = require("./types");
Object.keys(_types).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (key in exports && exports[key] === _types[key]) return;
exports[key] = _types[key];
});
var _constructors = require("./constructors");
Object.keys(_constructors).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (key in exports && exports[key] === _constructors[key]) return;
exports[key] = _constructors[key];
});
var _guards = require("./guards");
Object.keys(_guards).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (key in exports && exports[key] === _guards[key]) return;
exports[key] = _guards[key];
});

View file

@ -0,0 +1,101 @@
"use strict";
exports.__esModule = true;
exports["default"] = void 0;
var _cssesc = _interopRequireDefault(require("cssesc"));
var _util = require("../util");
var _node = _interopRequireDefault(require("./node"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
var Namespace = /*#__PURE__*/function (_Node) {
_inheritsLoose(Namespace, _Node);
function Namespace() {
return _Node.apply(this, arguments) || this;
}
var _proto = Namespace.prototype;
_proto.qualifiedName = function qualifiedName(value) {
if (this.namespace) {
return this.namespaceString + "|" + value;
} else {
return value;
}
};
_proto.valueToString = function valueToString() {
return this.qualifiedName(_Node.prototype.valueToString.call(this));
};
_createClass(Namespace, [{
key: "namespace",
get: function get() {
return this._namespace;
},
set: function set(namespace) {
if (namespace === true || namespace === "*" || namespace === "&") {
this._namespace = namespace;
if (this.raws) {
delete this.raws.namespace;
}
return;
}
var escaped = (0, _cssesc["default"])(namespace, {
isIdentifier: true
});
this._namespace = namespace;
if (escaped !== namespace) {
(0, _util.ensureObject)(this, "raws");
this.raws.namespace = escaped;
} else if (this.raws) {
delete this.raws.namespace;
}
}
}, {
key: "ns",
get: function get() {
return this._namespace;
},
set: function set(namespace) {
this.namespace = namespace;
}
}, {
key: "namespaceString",
get: function get() {
if (this.namespace) {
var ns = this.stringifyProperty("namespace");
if (ns === true) {
return '';
} else {
return ns;
}
} else {
return '';
}
}
}]);
return Namespace;
}(_node["default"]);
exports["default"] = Namespace;
;
module.exports = exports.default;

View file

@ -0,0 +1,32 @@
"use strict";
exports.__esModule = true;
exports["default"] = void 0;
var _node = _interopRequireDefault(require("./node"));
var _types = require("./types");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
var Nesting = /*#__PURE__*/function (_Node) {
_inheritsLoose(Nesting, _Node);
function Nesting(opts) {
var _this;
_this = _Node.call(this, opts) || this;
_this.type = _types.NESTING;
_this.value = '&';
return _this;
}
return Nesting;
}(_node["default"]);
exports["default"] = Nesting;
module.exports = exports.default;

View file

@ -0,0 +1,239 @@
"use strict";
exports.__esModule = true;
exports["default"] = void 0;
var _util = require("../util");
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var cloneNode = function cloneNode(obj, parent) {
if (typeof obj !== 'object' || obj === null) {
return obj;
}
var cloned = new obj.constructor();
for (var i in obj) {
if (!obj.hasOwnProperty(i)) {
continue;
}
var value = obj[i];
var type = typeof value;
if (i === 'parent' && type === 'object') {
if (parent) {
cloned[i] = parent;
}
} else if (value instanceof Array) {
cloned[i] = value.map(function (j) {
return cloneNode(j, cloned);
});
} else {
cloned[i] = cloneNode(value, cloned);
}
}
return cloned;
};
var Node = /*#__PURE__*/function () {
function Node(opts) {
if (opts === void 0) {
opts = {};
}
Object.assign(this, opts);
this.spaces = this.spaces || {};
this.spaces.before = this.spaces.before || '';
this.spaces.after = this.spaces.after || '';
}
var _proto = Node.prototype;
_proto.remove = function remove() {
if (this.parent) {
this.parent.removeChild(this);
}
this.parent = undefined;
return this;
};
_proto.replaceWith = function replaceWith() {
if (this.parent) {
for (var index in arguments) {
this.parent.insertBefore(this, arguments[index]);
}
this.remove();
}
return this;
};
_proto.next = function next() {
return this.parent.at(this.parent.index(this) + 1);
};
_proto.prev = function prev() {
return this.parent.at(this.parent.index(this) - 1);
};
_proto.clone = function clone(overrides) {
if (overrides === void 0) {
overrides = {};
}
var cloned = cloneNode(this);
for (var name in overrides) {
cloned[name] = overrides[name];
}
return cloned;
}
/**
* Some non-standard syntax doesn't follow normal escaping rules for css.
* This allows non standard syntax to be appended to an existing property
* by specifying the escaped value. By specifying the escaped value,
* illegal characters are allowed to be directly inserted into css output.
* @param {string} name the property to set
* @param {any} value the unescaped value of the property
* @param {string} valueEscaped optional. the escaped value of the property.
*/
;
_proto.appendToPropertyAndEscape = function appendToPropertyAndEscape(name, value, valueEscaped) {
if (!this.raws) {
this.raws = {};
}
var originalValue = this[name];
var originalEscaped = this.raws[name];
this[name] = originalValue + value; // this may trigger a setter that updates raws, so it has to be set first.
if (originalEscaped || valueEscaped !== value) {
this.raws[name] = (originalEscaped || originalValue) + valueEscaped;
} else {
delete this.raws[name]; // delete any escaped value that was created by the setter.
}
}
/**
* Some non-standard syntax doesn't follow normal escaping rules for css.
* This allows the escaped value to be specified directly, allowing illegal
* characters to be directly inserted into css output.
* @param {string} name the property to set
* @param {any} value the unescaped value of the property
* @param {string} valueEscaped the escaped value of the property.
*/
;
_proto.setPropertyAndEscape = function setPropertyAndEscape(name, value, valueEscaped) {
if (!this.raws) {
this.raws = {};
}
this[name] = value; // this may trigger a setter that updates raws, so it has to be set first.
this.raws[name] = valueEscaped;
}
/**
* When you want a value to passed through to CSS directly. This method
* deletes the corresponding raw value causing the stringifier to fallback
* to the unescaped value.
* @param {string} name the property to set.
* @param {any} value The value that is both escaped and unescaped.
*/
;
_proto.setPropertyWithoutEscape = function setPropertyWithoutEscape(name, value) {
this[name] = value; // this may trigger a setter that updates raws, so it has to be set first.
if (this.raws) {
delete this.raws[name];
}
}
/**
*
* @param {number} line The number (starting with 1)
* @param {number} column The column number (starting with 1)
*/
;
_proto.isAtPosition = function isAtPosition(line, column) {
if (this.source && this.source.start && this.source.end) {
if (this.source.start.line > line) {
return false;
}
if (this.source.end.line < line) {
return false;
}
if (this.source.start.line === line && this.source.start.column > column) {
return false;
}
if (this.source.end.line === line && this.source.end.column < column) {
return false;
}
return true;
}
return undefined;
};
_proto.stringifyProperty = function stringifyProperty(name) {
return this.raws && this.raws[name] || this[name];
};
_proto.valueToString = function valueToString() {
return String(this.stringifyProperty("value"));
};
_proto.toString = function toString() {
return [this.rawSpaceBefore, this.valueToString(), this.rawSpaceAfter].join('');
};
_createClass(Node, [{
key: "rawSpaceBefore",
get: function get() {
var rawSpace = this.raws && this.raws.spaces && this.raws.spaces.before;
if (rawSpace === undefined) {
rawSpace = this.spaces && this.spaces.before;
}
return rawSpace || "";
},
set: function set(raw) {
(0, _util.ensureObject)(this, "raws", "spaces");
this.raws.spaces.before = raw;
}
}, {
key: "rawSpaceAfter",
get: function get() {
var rawSpace = this.raws && this.raws.spaces && this.raws.spaces.after;
if (rawSpace === undefined) {
rawSpace = this.spaces.after;
}
return rawSpace || "";
},
set: function set(raw) {
(0, _util.ensureObject)(this, "raws", "spaces");
this.raws.spaces.after = raw;
}
}]);
return Node;
}();
exports["default"] = Node;
module.exports = exports.default;

View file

@ -0,0 +1,38 @@
"use strict";
exports.__esModule = true;
exports["default"] = void 0;
var _container = _interopRequireDefault(require("./container"));
var _types = require("./types");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
var Pseudo = /*#__PURE__*/function (_Container) {
_inheritsLoose(Pseudo, _Container);
function Pseudo(opts) {
var _this;
_this = _Container.call(this, opts) || this;
_this.type = _types.PSEUDO;
return _this;
}
var _proto = Pseudo.prototype;
_proto.toString = function toString() {
var params = this.length ? '(' + this.map(String).join(',') + ')' : '';
return [this.rawSpaceBefore, this.stringifyProperty("value"), params, this.rawSpaceAfter].join('');
};
return Pseudo;
}(_container["default"]);
exports["default"] = Pseudo;
module.exports = exports.default;

View file

@ -0,0 +1,60 @@
"use strict";
exports.__esModule = true;
exports["default"] = void 0;
var _container = _interopRequireDefault(require("./container"));
var _types = require("./types");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
var Root = /*#__PURE__*/function (_Container) {
_inheritsLoose(Root, _Container);
function Root(opts) {
var _this;
_this = _Container.call(this, opts) || this;
_this.type = _types.ROOT;
return _this;
}
var _proto = Root.prototype;
_proto.toString = function toString() {
var str = this.reduce(function (memo, selector) {
memo.push(String(selector));
return memo;
}, []).join(',');
return this.trailingComma ? str + ',' : str;
};
_proto.error = function error(message, options) {
if (this._error) {
return this._error(message, options);
} else {
return new Error(message);
}
};
_createClass(Root, [{
key: "errorGenerator",
set: function set(handler) {
this._error = handler;
}
}]);
return Root;
}(_container["default"]);
exports["default"] = Root;
module.exports = exports.default;

View file

@ -0,0 +1,31 @@
"use strict";
exports.__esModule = true;
exports["default"] = void 0;
var _container = _interopRequireDefault(require("./container"));
var _types = require("./types");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
var Selector = /*#__PURE__*/function (_Container) {
_inheritsLoose(Selector, _Container);
function Selector(opts) {
var _this;
_this = _Container.call(this, opts) || this;
_this.type = _types.SELECTOR;
return _this;
}
return Selector;
}(_container["default"]);
exports["default"] = Selector;
module.exports = exports.default;

View file

@ -0,0 +1,31 @@
"use strict";
exports.__esModule = true;
exports["default"] = void 0;
var _node = _interopRequireDefault(require("./node"));
var _types = require("./types");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
var String = /*#__PURE__*/function (_Node) {
_inheritsLoose(String, _Node);
function String(opts) {
var _this;
_this = _Node.call(this, opts) || this;
_this.type = _types.STRING;
return _this;
}
return String;
}(_node["default"]);
exports["default"] = String;
module.exports = exports.default;

View file

@ -0,0 +1,31 @@
"use strict";
exports.__esModule = true;
exports["default"] = void 0;
var _namespace = _interopRequireDefault(require("./namespace"));
var _types = require("./types");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
var Tag = /*#__PURE__*/function (_Namespace) {
_inheritsLoose(Tag, _Namespace);
function Tag(opts) {
var _this;
_this = _Namespace.call(this, opts) || this;
_this.type = _types.TAG;
return _this;
}
return Tag;
}(_namespace["default"]);
exports["default"] = Tag;
module.exports = exports.default;

Some files were not shown because too many files have changed in this diff Show more