@unocss/postcss
Advanced tools
@unocss/postcss - npm Package Compare versions
Comparing version 0.50.8 to 0.51.0
| { | ||
| "name": "@unocss/postcss", | ||
| "version": "0.50.8", | ||
| "version": "0.51.0", | ||
| "description": "PostCSS plugin for UnoCSS", | ||
@@ -43,4 +43,4 @@ "author": "sibbng <sibbngheid@gmail.com>", | ||
| "postcss": "^8.4.21", | ||
| "@unocss/config": "0.50.8", | ||
| "@unocss/core": "0.50.8" | ||
| "@unocss/config": "0.51.0", | ||
| "@unocss/core": "0.51.0" | ||
| }, | ||
@@ -47,0 +47,0 @@ "scripts": { |
232
README.md
@@ -8,236 +8,8 @@ # @unocss/postcss | ||
| <!-- @unocss-ignore --> | ||
| ## Documentation | ||
| ## Install | ||
| Please refer to the [documentation](https://unocss.dev/integrations/postcss). | ||
| ```bash | ||
| npm i -D @unocss/postcss | ||
| ``` | ||
| ```ts | ||
| // postcss.config.cjs | ||
| module.exports = { | ||
| plugins: { | ||
| '@unocss/postcss': { | ||
| // Optional | ||
| content: ['**/*.{html,js,ts,jsx,tsx,vue,svelte,astro}'], | ||
| }, | ||
| }, | ||
| } | ||
| ``` | ||
| ```ts | ||
| // uno.config.ts | ||
| import { defineConfig, presetUno } from 'unocss' | ||
| export default defineConfig({ | ||
| presets: [ | ||
| presetUno(), | ||
| ], | ||
| }) | ||
| ``` | ||
| ```css | ||
| /* style.css */ | ||
| @unocss; | ||
| ``` | ||
| ## Usage | ||
| ### `@unocss` | ||
| `@unocss` at-rule is a placeholder. It will be replaced by the generated CSS. | ||
| You can also inject each layer individually: | ||
| ```css | ||
| /* style.css */ | ||
| @unocss preflights; | ||
| @unocss default; | ||
| /* | ||
| Fallback layer. It's always recommended to include. | ||
| Only unused layers will be injected here. | ||
| */ | ||
| @unocss; | ||
| ``` | ||
| If you want to include all layers no matter whether they are previously included or not, you can use `@unocss all`. This is useful if you want to include generated CSS in multiple files. | ||
| ```css | ||
| @unocss all; | ||
| ``` | ||
| ### `@apply` | ||
| ```css | ||
| .custom-div { | ||
| @apply text-center my-0 font-medium; | ||
| } | ||
| ``` | ||
| Will be transformed to: | ||
| ```css | ||
| .custom-div { | ||
| margin-top: 0rem; | ||
| margin-bottom: 0rem; | ||
| text-align: center; | ||
| font-weight: 500; | ||
| } | ||
| ``` | ||
| ### `@screen` | ||
| The `@screen` directive allows you to create media queries that reference your breakpoints by name comes from [`theme.breakpoints`](https://github.com/unocss/unocss/blob/main/README.md#extend-theme). | ||
| ```css | ||
| .grid { | ||
| @apply grid grid-cols-2; | ||
| } | ||
| @screen xs { | ||
| .grid { | ||
| @apply grid-cols-1; | ||
| } | ||
| } | ||
| @screen sm { | ||
| .grid { | ||
| @apply grid-cols-3; | ||
| } | ||
| } | ||
| /* ... */ | ||
| ... | ||
| ``` | ||
| Will be transformed to: | ||
| ```css | ||
| .grid { | ||
| display: grid; | ||
| grid-template-columns: repeat(2, minmax(0, 1fr)); | ||
| } | ||
| @media (min-width: 320px) { | ||
| .grid { | ||
| grid-template-columns: repeat(1, minmax(0, 1fr)); | ||
| } | ||
| } | ||
| @media (min-width: 640px) { | ||
| .grid { | ||
| grid-template-columns: repeat(3, minmax(0, 1fr)); | ||
| } | ||
| } | ||
| /* ... */ | ||
| ``` | ||
| #### Breakpoint Variant Support | ||
| `@screen` also supports `lt`、`at` variants | ||
| ##### `@screen lt` | ||
| ```css | ||
| .grid { | ||
| @apply grid grid-cols-2; | ||
| } | ||
| @screen lt-xs { | ||
| .grid { | ||
| @apply grid-cols-1; | ||
| } | ||
| } | ||
| @screen lt-sm { | ||
| .grid { | ||
| @apply grid-cols-3; | ||
| } | ||
| } | ||
| /* ... */ | ||
| ``` | ||
| Will be transformed to: | ||
| ```css | ||
| .grid { | ||
| display: grid; | ||
| grid-template-columns: repeat(2, minmax(0, 1fr)); | ||
| } | ||
| @media (max-width: 319.9px) { | ||
| .grid { | ||
| grid-template-columns: repeat(1, minmax(0, 1fr)); | ||
| } | ||
| } | ||
| @media (max-width: 639.9px) { | ||
| .grid { | ||
| grid-template-columns: repeat(3, minmax(0, 1fr)); | ||
| } | ||
| } | ||
| /* ... */ | ||
| ``` | ||
| ##### `@screen at` | ||
| ```css | ||
| .grid { | ||
| @apply grid grid-cols-2; | ||
| } | ||
| @screen at-xs { | ||
| .grid { | ||
| @apply grid-cols-1; | ||
| } | ||
| } | ||
| @screen at-xl { | ||
| .grid { | ||
| @apply grid-cols-3; | ||
| } | ||
| } | ||
| @screen at-xxl { | ||
| .grid { | ||
| @apply grid-cols-4; | ||
| } | ||
| } | ||
| /* ... */ | ||
| ``` | ||
| Will be transformed to: | ||
| ```css | ||
| .grid { | ||
| display: grid; | ||
| grid-template-columns: repeat(2, minmax(0, 1fr)); | ||
| } | ||
| @media (min-width: 320px) and (max-width: 639.9px) { | ||
| .grid { | ||
| grid-template-columns: repeat(1, minmax(0, 1fr)); | ||
| } | ||
| } | ||
| @media (min-width: 1280px) and (max-width: 1535.9px) { | ||
| .grid { | ||
| grid-template-columns: repeat(3, minmax(0, 1fr)); | ||
| } | ||
| } | ||
| @media (min-width: 1536px) { | ||
| .grid { | ||
| grid-template-columns: repeat(4, minmax(0, 1fr)); | ||
| } | ||
| } | ||
| /* ... */ | ||
| ``` | ||
| ### `theme()` | ||
| Use the `theme()` function to access your theme config values using dot notation. | ||
| ```css | ||
| .btn-blue { | ||
| background-color: theme('colors.blue.500'); | ||
| } | ||
| ``` | ||
| Will be compiled to: | ||
| ```css | ||
| .btn-blue { | ||
| background-color: #3b82f6; | ||
| } | ||
| ``` | ||
| ## License | ||
| MIT License © 2022-PRESENT [hannoeru](https://github.com/hannoeru) [sibbng](https://github.com/sibbng) |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-11.54%
25911
- Number of lines in readme file
- decreased by-93.83%
15
Dependency changes
+ Added@unocss/config@0.51.0(transitive)
+ Added@unocss/core@0.51.0(transitive)
- Removed@unocss/config@0.50.8(transitive)
- Removed@unocss/core@0.50.8(transitive)
Updated@unocss/config@0.51.0
Updated@unocss/core@0.51.0