feat(tailwindcss): add postcss plugins and update configuration for full CSS generation (#203)

* feat(tailwindcss): add postcss plugins and update configuration for full CSS generation

* chore: add license information to index.css

---------

Co-authored-by: goun-choe <goun.choe@linecorp.com>

Author: chiol

packages/tailwindcss/package.json

@@ -46,8 +46,11 @@
     "eslint": "catalog:",
     "glob": "^11.0.3",
     "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
+    "postcss-discard-comments": "^7.0.4",
     "postcss-import": "^16.1.1",
     "postcss-js": "^4.0.1",
+    "postcss-minify": "^1.2.0",
     "postcss-nesting": "^13.0.2",
     "prettier": "catalog:",
     "stylelint": "catalog:",

packages/tailwindcss/src/base/postcss.config.js

@@ -1,3 +1,8 @@
 module.exports = {
-  plugins: [require('postcss-import'), require('tailwindcss/nesting')],
+  plugins: [
+    require("postcss-import"),
+    require("tailwindcss/nesting"),
+    require("postcss-minify"),
+    require("postcss-discard-comments"),
+  ],
 };

packages/tailwindcss/src/build.js

@@ -1,11 +1,25 @@
+const { exec } = require("node:child_process");
+
+function runCommand(command) {
+  return new Promise((resolve, reject) => {
+    exec(command, (error, stdout, stderr) => {
+      if (error) {
+        reject(error);
+      } else {
+        resolve({ stdout, stderr });
+      }
+    });
+  });
+}
+
 const generateCss = require("./build-functions/generate-css");
 const mergeCss = require("./build-functions/merge-css");
 const convertCssToJs = require("./build-functions/convert-css-to-js");
 const log = require("./build-functions/log");
 
 async function executeCommands() {
   try {
-    const totalSteps = 9;
+    const totalSteps = 10;
     let currentStep = 0;
 
     log.info("Starting CSS build process...");
@@ -43,6 +57,12 @@ async function executeCommands() {
     await convertCssToJs("components");
     log.success("Components CSS processing completed");
 
+    log.step(++currentStep, totalSteps, "Generate full css file");
+    await runCommand(
+      "../../node_modules/.bin/postcss src/full/index.css -o dist/full.css --config src/full",
+    );
+    log.success("Full CSS file generated successfully");
+
     log.success("All CSS files built successfully!");
   } catch (error) {
     log.error(`Error executing commands: ${error.message}`);

packages/tailwindcss/src/components/postcss.config.js

@@ -1,7 +1,9 @@
 module.exports = {
   plugins: [
-    require('postcss-import'),
-    require('tailwindcss/nesting'),
-    require('tailwindcss')('./src/components/tailwind.config.js'),
+    require("postcss-import"),
+    require("tailwindcss/nesting"),
+    require("tailwindcss")("./src/components/tailwind.config.js"),
+    require("postcss-discard-comments"),
+    require("postcss-minify"),
   ],
 };

packages/tailwindcss/src/full/index.css

@@ -0,0 +1,21 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+@import "../../dist/base";
+@import "../../dist/components";
+@import "../../dist/utilities";

packages/tailwindcss/src/full/postcss.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  plugins: [
+    require("postcss-import"),
+    require("tailwindcss/nesting"),
+    require("tailwindcss")("./src/full/tailwind.config.js"),
+    require("autoprefixer"),
+    require("postcss-discard-comments"),
+    require("postcss-minify"),
+  ],
+};

packages/tailwindcss/src/full/tailwind.config.js

@@ -0,0 +1,43 @@
+const plugin = require("tailwindcss/plugin");
+const theme = require("../theme");
+
+function filterDefault(values) {
+  return Object.fromEntries(
+    Object.entries(values).filter(([key]) => key !== "DEFAULT"),
+  );
+}
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: "class",
+  content: [{ raw: "" }],
+  safelist: [
+    {
+      pattern:
+        /(fill|text|bg|border|text-above)-neutral-(primary|secondary|tertiary|inverse|disabled|static|hover|transparent|dim)/,
+    },
+    {
+      pattern: /bg-(primary|secondary|tertiary|dim)/,
+    },
+    {
+      pattern: /(fill|text|border)-tint-(red|orange|green|blue)/,
+    },
+    {
+      pattern: /bg-tint-(red|orange|green|blue)-(bold|subtle|hover|)/,
+    },
+    {
+      pattern: /rounded(-|)(0|4|6|8|12|16|24|full|)/,
+    },
+    {
+      pattern: /shadow(-|)(sm|md|lg|xl|2xl|inner|none|)/,
+    },
+  ],
+  theme,
+  plugins: [
+    plugin(({ addBase, addUtilities, addComponents }) => {
+      addBase(require("../../dist/base"));
+      addComponents(require("../../dist/components"));
+      addUtilities(require("../../dist/utilities"));
+    }),
+  ],
+};

packages/tailwindcss/src/utilities/postcss.config.js

@@ -1,7 +1,9 @@
 module.exports = {
   plugins: [
-    require('postcss-import'),
-    require('tailwindcss/nesting'),
-    require('tailwindcss')('./src/utilities/tailwind.config.js'),
+    require("postcss-import"),
+    require("tailwindcss/nesting"),
+    require("tailwindcss")("./src/utilities/tailwind.config.js"),
+    require("postcss-discard-comments"),
+    require("postcss-minify"),
   ],
 };

packages/tailwindcss/src/utilities/tailwind.config.js

@@ -233,8 +233,3 @@ module.exports = {
     }),
   ],
 };
-
-// {
-//   pattern:
-//     /(bg|text|fill|border|text-above)-neutral-(primary|secondary|tertiary|quaternary|dim|)/,
-// },