diff --git a/website/bundling.html b/website/bundling.html index 67be3901..70fd3b8a 100644 --- a/website/bundling.html +++ b/website/bundling.html @@ -1 +1,4 @@ - + diff --git a/website/css-modules.html b/website/css-modules.html index b9b53a8c..d60d3935 100644 --- a/website/css-modules.html +++ b/website/css-modules.html @@ -1 +1,4 @@ - + diff --git a/website/docs.css b/website/docs.css index c0711625..59c4f64b 100644 --- a/website/docs.css +++ b/website/docs.css @@ -1,4 +1,4 @@ -@import "synthwave.css"; +@import 'synthwave.css'; html { color-scheme: dark; @@ -6,19 +6,35 @@ html { font-family: system-ui; --gold: lch(80% 82.34 80.104); --gold-text: lch(85% 82.34 80.104); - --gold-shadow: lch(80% 82.34 80.104 / .7); + --gold-shadow: lch(80% 82.34 80.104 / 0.7); } @font-face { - font-family:"din-1451-lt-pro-engschrift"; - src:url("https://use.typekit.net/af/7fa6e1/00000000000000007735bbcd/30/l?primer=388f68b35a7cbf1ee3543172445c23e26935269fadd3b392a13ac7b2903677eb&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/7fa6e1/00000000000000007735bbcd/30/d?primer=388f68b35a7cbf1ee3543172445c23e26935269fadd3b392a13ac7b2903677eb&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/7fa6e1/00000000000000007735bbcd/30/a?primer=388f68b35a7cbf1ee3543172445c23e26935269fadd3b392a13ac7b2903677eb&fvd=n4&v=3") format("opentype"); - font-display:auto;font-style:normal;font-weight:400;font-stretch:normal; + font-family: 'din-1451-lt-pro-engschrift'; + src: url('https://use.typekit.net/af/7fa6e1/00000000000000007735bbcd/30/l?primer=388f68b35a7cbf1ee3543172445c23e26935269fadd3b392a13ac7b2903677eb&fvd=n4&v=3') + format('woff2'), + url('https://use.typekit.net/af/7fa6e1/00000000000000007735bbcd/30/d?primer=388f68b35a7cbf1ee3543172445c23e26935269fadd3b392a13ac7b2903677eb&fvd=n4&v=3') + format('woff'), + url('https://use.typekit.net/af/7fa6e1/00000000000000007735bbcd/30/a?primer=388f68b35a7cbf1ee3543172445c23e26935269fadd3b392a13ac7b2903677eb&fvd=n4&v=3') + format('opentype'); + font-display: auto; + font-style: normal; + font-weight: 400; + font-stretch: normal; } @font-face { - font-family:"urbane-rounded"; - src:url("https://use.typekit.net/af/916187/00000000000000007735bfa0/30/l?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/916187/00000000000000007735bfa0/30/d?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/916187/00000000000000007735bfa0/30/a?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n6&v=3") format("opentype"); - font-display:auto;font-style:normal;font-weight:600;font-stretch:normal; + font-family: 'urbane-rounded'; + src: url('https://use.typekit.net/af/916187/00000000000000007735bfa0/30/l?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n6&v=3') + format('woff2'), + url('https://use.typekit.net/af/916187/00000000000000007735bfa0/30/d?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n6&v=3') + format('woff'), + url('https://use.typekit.net/af/916187/00000000000000007735bfa0/30/a?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n6&v=3') + format('opentype'); + font-display: auto; + font-style: normal; + font-weight: 600; + font-stretch: normal; } header { @@ -27,17 +43,23 @@ header { margin: 0 auto; padding: 50px 0; font-size: 16px; - background: radial-gradient(closest-side, lch(80% 82.34 80.104 / .25), transparent); + background: radial-gradient( + closest-side, + lch(80% 82.34 80.104 / 0.25), + transparent + ); display: grid; column-gap: 30px; grid-area: header; - grid-template-areas: "logo header" - "logo subheader" - ". links"; + grid-template-areas: + 'logo header' + 'logo subheader' + '. links'; } header svg { - filter: drop-shadow(0 0 5px var(--gold-shadow)) drop-shadow(0 0 15px var(--gold-shadow)); + filter: drop-shadow(0 0 5px var(--gold-shadow)) + drop-shadow(0 0 15px var(--gold-shadow)); grid-area: logo; place-self: center end; width: 50px; @@ -58,7 +80,8 @@ header .title { font-weight: 600; -webkit-text-stroke: 2px var(--gold-text); color: transparent; - filter: drop-shadow(0 0 3px var(--gold-shadow)) drop-shadow(0 0 10px var(--gold)); + filter: drop-shadow(0 0 3px var(--gold-shadow)) + drop-shadow(0 0 10px var(--gold)); margin: 0; letter-spacing: -0.02em; text-decoration: none; @@ -69,11 +92,13 @@ header .title::selection { background-color: var(--gold-text); } -h1, h2, h3 { +h1, +h2, +h3 { font-family: urbane-rounded, ui-rounded; font-weight: 600; color: lch(65% 85 35); - margin: 2em 0 .5em 0; + margin: 2em 0 0.5em 0; letter-spacing: -0.02em; } @@ -91,7 +116,7 @@ header p a { font-weight: 600; font-size: 1em; color: lch(90% 50.34 80.104); - filter: drop-shadow(0 0 8px lch(90% 50.34 80.104 / .7)); + filter: drop-shadow(0 0 8px lch(90% 50.34 80.104 / 0.7)); text-decoration-color: lch(90% 50.34 80.104 / 0); text-decoration-style: wavy; text-decoration-thickness: 2px; @@ -106,10 +131,11 @@ header a:hover { @media (width < 500px) { header { - grid-template-areas: "logo" - "header" - "subheader" - "links"; + grid-template-areas: + 'logo' + 'header' + 'subheader' + 'links'; place-items: center; text-align: center; gap: 8px; @@ -141,9 +167,10 @@ body { display: grid; grid-template-columns: 180px 1fr; gap: 40px; - grid-template-areas: "header header" - "nav main" - "footer footer"; + grid-template-areas: + 'header header' + 'nav main' + 'footer footer'; } main { @@ -153,7 +180,8 @@ main { position: relative; } -p, li { +p, +li { line-height: 1.5em; } @@ -169,7 +197,7 @@ nav { grid-area: nav; text-align: end; padding-right: 20px; - border-right: 1px solid lch(90% 50.34 80.104 / .1); + border-right: 1px solid lch(90% 50.34 80.104 / 0.1); height: fit-content; position: sticky; top: 40px; @@ -189,7 +217,7 @@ main > aside { position: absolute; left: 100%; margin-left: 40px; - border-left: 1px solid lch(90% 50.34 80.104 / .1); + border-left: 1px solid lch(90% 50.34 80.104 / 0.1); padding-left: 20px; overflow: auto; max-height: calc(100vh - 80px); @@ -264,7 +292,7 @@ a[aria-current] { nav { text-align: start; border-right: none; - border-bottom: 1px solid lch(90% 50.34 80.104 / .1); + border-bottom: 1px solid lch(90% 50.34 80.104 / 0.1); padding-bottom: 20px; position: static; } @@ -272,7 +300,7 @@ a[aria-current] { .warning { border: 4px solid lch(70% 82.34 80.104); - background: lch(80% 82.34 80.104 / .15); + background: lch(80% 82.34 80.104 / 0.15); padding: 20px; border-radius: 8px; margin: 20px 0; @@ -287,7 +315,7 @@ a[aria-current] { } .warning pre { - background: rgb(0 0 0 / .65); + background: rgb(0 0 0 / 0.65); } .warning :is(h1, h2, h3) { diff --git a/website/docs.html b/website/docs.html index f6d60f40..3d737f3e 100644 --- a/website/docs.html +++ b/website/docs.html @@ -1 +1,4 @@ - + diff --git a/website/docs.js b/website/docs.js index 802d17da..5341c6b6 100644 --- a/website/docs.js +++ b/website/docs.js @@ -8,7 +8,7 @@ for (let link of tocLinks) { } let intersectingHeaders = new Set(); -let observer = new IntersectionObserver(entries => { +let observer = new IntersectionObserver((entries) => { for (let entry of entries) { if (entry.isIntersecting) { intersectingHeaders.add(entry.target); diff --git a/website/include/layout.html b/website/include/layout.html index 8172c877..b685d725 100644 --- a/website/include/layout.html +++ b/website/include/layout.html @@ -1,32 +1,55 @@ - - + + {{ title }} – Lightning CSS - - - - - - - - - - - - - - + + + + + + + + + + + + + +
- - + + Lightning CSS -

Playground • Docs • Rust docs • npm • GitHub

+

+ Playground • + Docs • + Rust docs • + npm • + GitHub +

-
- Copyright © 2022 Devon Govett and Parcel Contributors. -
+
Copyright © 2022 Devon Govett and Parcel Contributors.
diff --git a/website/index.html b/website/index.html index 4d5822ee..e9d0a7c3 100644 --- a/website/index.html +++ b/website/index.html @@ -1,63 +1,300 @@ - - + + Lightning CSS - - - - - - - - - - - - - - - + + + + + + + + + + + + + + +
- - + +

Lightning CSS

An extremely fast CSS parser, transformer, bundler, and minifier.

-

Playground • Docs • Rust docs • npm • GitHub

+

+ Playground • + Docs • + Rust docs • + npm • + GitHub +

Light speed

-

Lightning CSS is over 100x faster than comparable JavaScript-based tools. It can minify over 2.7 million lines of code per second on a single thread.

-

Lightning CSS is written in Rust, a native systems programming language. It was built with performance in mind from the start, designed to make efficient use of memory, and limit AST passes.

+

+ Lightning CSS is over 100x faster than comparable JavaScript-based + tools. + It can minify over 2.7 million lines of code per second on a single + thread. +

+

+ Lightning CSS is written in Rust, a native systems programming + language. It was built with performance in mind from the start, + designed to make efficient use of memory, and limit AST passes. +

Get started →

-

Live in the future

-

Lightning CSS lets you use modern CSS features and future syntax today. Features such as CSS nesting, custom media queries, high gamut color spaces, logical properties, and new selector features are automatically converted to more compatible syntax based on your browser targets.

-

Lightning CSS also automatically adds vendor prefixes for your browser targets, so you can keep your source code clean and repetition free.

+

+ Lightning CSS lets you use modern CSS features and future + syntax today. + Features such as CSS nesting, custom media queries, high gamut + color spaces, logical properties, and new selector features are + automatically converted to more compatible syntax based on your + browser targets. +

+

+ Lightning CSS also automatically adds vendor prefixes for your + browser targets, so you can keep your source code clean and + repetition free. +

Learn more →

-

Target Browsers

last 2 versions
-

Input

+            

+              
Target Browsers

+              last 2 versions
+            

+            

+              
Input

+              
 .foo {
   color: oklab(59.686% 0.1009 0.1192);
-}

-            
Output
+}

+            

+            

+              
Output

+              
 .foo {
   color: #c65d07;
   color: color(display-p3 .724144 .386777 .148795);
@@ -107,46 +404,304 @@ 
Live in the future

Crush it!

-

Lightning CSS is not only fast when it comes to build time. It produces smaller output, so your website loads faster too.

-

The Lightning CSS minifier combines longhand properties into shorthands, removes unnecessary vendor prefixes, merges compatible adjacent rules, removes unnecessary default values, reduces calc() expressions, shortens colors, minifies gradients, and much more.

+

+ Lightning CSS is not only fast when it comes to build time. It + produces smaller output, so your website loads faster too. +

+

+ The Lightning CSS minifier combines longhand properties into + shorthands, removes unnecessary vendor prefixes, merges compatible + adjacent rules, removes unnecessary default values, reduces + calc() expressions, shortens colors, minifies gradients, + and much more. +

Details →

-

CSS modules

-

Lightning CSS supports CSS modules, which locally scope classes, ids, @keyframes, CSS variables, and more. This ensures that there are no unintended name clashes between different CSS files.

-

Lightning CSS generates a mapping of the original names to scoped names, which can be used from your JavaScript. This also enables unused classes and variables to be tree-shaken.

+

+ Lightning CSS supports CSS modules, which locally scope classes, + ids, @keyframes, CSS variables, and more. + This ensures that there are no unintended name clashes between + different CSS files. +

+

+ Lightning CSS generates a mapping of the original names to scoped + names, which can be used from your JavaScript. This also enables + unused classes and variables to be tree-shaken. +

Documentation →

.heading {
@@ -170,8 +725,29 @@ 
CSS modules

       

         

           
Browser grade

-          
Lightning CSS is written in Rust, using the cssparser and selectors crates created by Mozilla and used by Firefox. These provide a solid CSS-parsing foundation on top of which Lightning CSS implements support for all specific CSS rules and properties.

-          
Lightning CSS fully parses every CSS rule, property, and value just as a browser would. This reduces duplicate work for transformers, leading to improved performance and minification.

+          

+            Lightning CSS is written in Rust, using the
+              cssparser
+              and
+              selectors
+              crates created by Mozilla and used by Firefox.
+            These provide a solid CSS-parsing foundation on top of which
+            Lightning CSS implements support for all specific CSS rules and
+            properties.
+          

+          

+            Lightning CSS fully parses every CSS rule, property, and value just
+            as a browser would. This reduces duplicate work for transformers,
+            leading to improved performance and minification.
+          

           
Custom transforms →

         

         
Background([Background {
@@ -195,9 +771,7 @@ 
Browser grade

 }])
-
- Copyright © 2022 Devon Govett and Parcel Contributors. -
+
Copyright © 2022 Devon Govett and Parcel Contributors.