chore: add example 🍭

Author: fz6m

example/.gitignore

@@ -0,0 +1,2 @@
+/dist
+/node_modules

example/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "example",
+  "private": true,
+  "scripts": {
+    "build": "webpack --mode production"
+  },
+  "devDependencies": {
+    "lightningcss-loader": "file:../",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^6.0.1"
+  },
+  "browserslist": [
+    "chrome 40",
+    "ie 10"
+  ]
+}

example/src/index.js

@@ -0,0 +1,4 @@
+import './styles/index.css'
+import './styles/duplicate.css'
+
+console.log(1)

example/src/styles/duplicate.css

@@ -0,0 +1,5 @@
+@import "./media.css";
+
+body {
+  content: "duplicate";
+}

example/src/styles/index.css

@@ -0,0 +1,12 @@
+@import './media.css';
+
+body {
+  display: flex;
+  background-color: #ffffffff;
+}
+
+@media (--small) {
+  body {
+    width: 10px;
+  }
+}

example/src/styles/media.css

@@ -0,0 +1,9 @@
+@custom-media --small (max-width: 600px);
+
+html {
+  transition: all .1s;
+
+  & .nested {
+    color: red;
+  }
+}

example/webpack.config.js

@@ -0,0 +1,55 @@
+const path = require('path')
+const lightningcssImpl = require('lightningcss')
+
+const LightningCssLoader = path.join(__dirname, '../dist/index.js')
+const LightningCssLoaderMod = require(LightningCssLoader)
+const LightningCssMinifyPlugin = LightningCssLoaderMod.LightningCssMinifyPlugin
+
+// for features testing
+const disableNesting = false
+
+// for custom-media
+const enableCustomMedia = true
+
+/** @type {import('../dist/interface').IMinifyPluginOpts} */
+const minifyOpts = {
+  features: {
+    exclude: lightningcssImpl.Features.Nesting,
+  },
+}
+
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    filename: 'bundle.js',
+  },
+  experiments: {
+    css: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: path.join(__dirname, '../dist/index.js'),
+            options: {
+              drafts: {
+                customMedia: enableCustomMedia,
+              },
+              implementation: lightningcssImpl,
+
+              // for disabling features
+              ...(disableNesting
+                ? {
+                    ...minifyOpts.features,
+                  }
+                : {}),
+            },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [new LightningCssMinifyPlugin(disableNesting ? minifyOpts : {})],
+}

pnpm-lock.yaml

@@ -0,0 +1,3 @@
+packages:
+ - ./
+ - ./example