build both min and non minified

.github/workflows/release.yml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
 
     env:
-      RELEASE_FILE_NAME: 'css-pokemon-gameboy-${{ github.ref_name }}.zip'
+      RELEASE_FILE_NAME: 'css-pokemon-gameboy-${{ github.ref_name }}'
 
     steps:
       - name: Checkout
@@ -28,21 +28,32 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: Build the css to dist-release
+      - name: Build the minified css to dist-release
         run: npm run build:css
 
       - name: Zip Release
         uses: TheDoctor0/[email protected]
         with:
           type: 'zip'
-          filename: ${{ env.RELEASE_FILE_NAME }}
+          filename: ../${{ env.RELEASE_FILE_NAME }}.min.zip
+          path: 'template.html styles'
+          directory: 'dist-release'
+
+      - name: Build the full css to dist-release
+        run: npm run build:css:full
+
+      - name: Zip Release
+        uses: TheDoctor0/[email protected]
+        with:
+          type: 'zip'
+          filename: ../${{ env.RELEASE_FILE_NAME }}.zip
           path: 'template.html styles'
           directory: 'dist-release'
 
       - name: Create Release on GitHub
         uses: ncipollo/release-action@v1
         with:
-          artifacts: 'dist-release/${{ env.RELEASE_FILE_NAME }}'
+          artifacts: '${{ env.RELEASE_FILE_NAME }}.min.zip,${{ env.RELEASE_FILE_NAME }}.zip'
           removeArtifacts: true
           body: 'Automatic release created by GitHub Action.'
           prerelease: true

README.md

@@ -38,6 +38,8 @@ This is a joke CSS-framework and it is not intended for use in production. You c
 
 4. To build the css files run `npm run build:css` to build the css file with all needed static files to the `dist-release` directory
 
+5. For the non-minified css file run `npm run build:css:full`
+
 ## Third-party Licenses
 
 **The images in this repository are the property of Nintendo. The style is also property of Nintendo.**

package.json

@@ -14,6 +14,7 @@
     "build": "tsc && vite build --config vite.demo.config.js",
     "preview": "vite preview --config vite.demo.config.js",
     "build:css": "tsc && vite build --config vite.lib.config.js",
+    "build:css:full": "tsc && vite build --config vite.lib.full.config.js",
     "licenses": "npx license-checker-rseidelsohn --plainVertical --excludePackages css-pokemon-gameboy --out LICENSES-THIRD-PARTY.md"
   },
   "files": [

vite.lib.common.js

@@ -0,0 +1,49 @@
+import { resolve, join } from 'path'
+import { defineConfig } from 'vite'
+import fs from 'fs'
+
+const outDir = 'dist-release'
+const outDirCss = `${outDir}/styles`
+
+export default defineConfig({
+  build: {
+    outDir: outDirCss,
+    lib: {
+      entry: resolve(__dirname, 'src/lib.ts'),
+      name: 'CssPokemonGameboy',
+      fileName: 'css-pokemon-gameboy',
+    },
+    rollupOptions: {
+      external: [
+        'prismjs', 'redent'
+      ],
+      output: {
+        assetFileNames: "css-pokemon-gameboy.[ext]",
+      },
+    },
+  },
+  plugins: [
+    {
+      // We are only interested in the compiled css
+      name: 'postbuild-clear-js',
+      closeBundle: async () => {
+        const dist = resolve(__dirname, outDirCss)
+
+        fs.readdirSync(dist).forEach(file => {
+          if (file.endsWith('.js') || file.endsWith('.cjs')) {
+            fs.unlinkSync(join(dist, file))
+          }
+        })
+      }
+    },
+    {
+      name: 'postbuild-copy-template',
+      closeBundle: async () => {
+        const dist = resolve(__dirname, outDir)
+        const template = resolve(__dirname, 'template.html')
+
+        fs.copyFileSync(template, join(dist, 'template.html'))
+      }
+    },
+  ]
+})

vite.lib.config.js

@@ -1,49 +1,3 @@
-import { resolve, join } from 'path'
-import { defineConfig } from 'vite'
-import fs from 'fs'
+import config from './vite.lib.common.js'
 
-const outDir = 'dist-release'
-const outDirCss = `${outDir}/styles`
-
-export default defineConfig({
-  build: {
-    outDir: outDirCss,
-    lib: {
-      entry: resolve(__dirname, 'src/lib.ts'),
-      name: 'CssPokemonGameboy',//todo
-      fileName: 'css-pokemon-gameboy',
-    },
-    rollupOptions: {
-      external: [
-        'prismjs', 'redent'
-      ],
-      output: {
-        assetFileNames: "css-pokemon-gameboy.[ext]",
-      },
-    },
-  },
-  plugins: [
-    {
-      // We are only interested in the compiled css
-      name: 'postbuild-clear-js',
-      closeBundle: async () => {
-        const dist = resolve(__dirname, outDirCss)
-
-        fs.readdirSync(dist).forEach(file => {
-          if (file.endsWith('.js') || file.endsWith('.cjs')) {
-            fs.unlinkSync(join(dist, file))
-          }
-        })
-      }
-    },
-    {
-      name: 'postbuild-copy-template',
-      closeBundle: async () => {
-        const dist = resolve(__dirname, outDir)
-        const template = resolve(__dirname, 'template.html')
-
-        fs.copyFileSync(template, join(dist, 'template.html'))
-      }
-    },
-  ]
-})
+export default config

vite.lib.full.config.js

@@ -0,0 +1,5 @@
+import config from './vite.lib.common.js'
+
+config.build.cssMinify = false
+
+export default config