Top 17 TypeScript PostCSS Projects

• styled-components

  67 39,048 9.3 TypeScript

  Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

  

  Project mention: 20 Essential Parts Of Any Large Scale React App | dev.to | 2023-06-02

  styled-components

• PostCSS

  24 27,508 9.3 TypeScript

  Transforming styles with JS plugins

  

  Project mention: How to setup a simple static website using Svelte (with login) | dev.to | 2023-05-19

  Usually, one of the first things I do on creating a new web app is to throw a UI library in to help style components. There are several UI libraries that can be used by Svelte, but in this case I went with daisyUI because it's a fairly popular UI library which includes tailwind. To install daisyUI, you first need to install tailwind. There's a few different ways to do this (such as this guide), but the easiest way I've found is the following command, which also adds PostCSS and AutoPrefixer:

• Klotho

  klo.dev

  sponsored

  AWS Cloud-aware infrastructure-from-code toolbox [NEW]. Build cloud backends with Infrastructure-from-Code (IfC), a revolutionary technique for generating and updating cloud infrastructure. Try IfC with AWS and Klotho now (Now open-source)

  

• linaria

  25 10,544 9.4 TypeScript

  Zero-runtime CSS in JS library

  

  Project mention: How bad is it to use CSS-in-JS with regards to the future of React? | /r/react | 2023-05-17

  I know that there are solutions that generate static css files (like vanilla-extract or linaria), but neither of them work with app router currently (1, 2).

• purgecss

  11 7,393 9.3 TypeScript

  Remove unused CSS

  

  Project mention: How to speed up your web application | dev.to | 2023-03-26

  Webpack minifies JS and CSS files by default when we build them in production mode. But it does not remove useless styles or classes. For this, you can use libraries like https://purgecss.com/ Do not forget to check the dependency, connect only the functionality that you use.

• Next-js-Boilerplate

  26 3,967 6.7 TypeScript

  🚀🎉📚 Boilerplate and Starter for Next.js 13+, Tailwind CSS 3.3 and TypeScript ⚡️ Made with developer experience first: Next.js + TypeScript + ESLint + Prettier + Husky + Lint-Staged + Jest + Testing Library + Cypress + Storybook + Commitlint + VSCode + Netlify + PostCSS + Tailwind CSS

  Project mention: I made a Free and Open Source React Native Starter Template built with Expo + NativeWind + ESLint + Prettier + Husky + Lint-Staged + Jest + Detox + VSCode | /r/reactjs | 2023-04-25

  For your information, I'm also the author of Next.js Boilerplate, soon reaching 4000 ⭐ on GitHub. And, I hope the React Native Boilerplate can also reached the same number of stars 😀

• styletron

  0 3,321 4.8 TypeScript

  :zap: Toolkit for component-oriented styling

  

• jsxstyle

  0 2,020 8.8 TypeScript

  Inline style system for JSX

  

• Appwrite

  appwrite.io

  sponsored

  Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  

• lume

  6 1,296 8.7 TypeScript

  🔥 Static site generator for Deno 🦕

  

  Project mention: A tool to convert text and pdf files to HTML | /r/InternetIsBeautiful | 2023-01-20

  Agreed, it really does need to be sorted out. I guess for me, what would happen if someone created a wrapper around Pandoc in NodeJS and published it to NPM... would that package need to inherit the GPL licence? I'd say yes otherwise the very purpose of GPL is undermined and closed-source projects could bypass the licence terms with ease. Now let's say that someone creates a Lume plugin that imports that NPM package so users can convert their assets at build time into more permanent versions, like DOCX to PDF. Should this plugin inherit the package's GPL licence? Now let's say someone uses that Lume plugin in their site. Does that site then need to inherit the plugin's GPL licence? Ambiguity in the first instance creates a chain of ambiguity down the line. This kind of thing is so prevalent on NPM too, just search for git wrappers. Git doesn't even have a runtime exception like GCC does.

• typescript-plugin-css-modules

  1 1,104 0.0 TypeScript

  A TypeScript language service plugin providing support for CSS Modules.

  Project mention: The Complete Guide for Setting Up React App from Scratch (feat. TypeScript) | dev.to | 2022-12-14

• browser-extension

  6 585 5.4 TypeScript

  Browser Extension Template with ESbuild builds, support for React, Preact, Typescript, Tailwind, Manifest V3/V2 support and multi browser build including Chrome, Firefox, Safari, Edge, Brave.

  Project mention: browser-extension - A Out of the Box Browser Extension Template for all Browsers. | /r/CKsTechNews | 2023-01-22

• react-daisyui

  4 543 8.2 TypeScript

  daisyUI components built with React 🌼

  

  Project mention: Is there a dedicated ui library dedicated for server component? | /r/nextjs | 2022-11-23

  Try react daisy ui which is tailwind based.

• nuxt-purgecss

  2 441 7.8 TypeScript

  Drop superfluous CSS! A neat PurgeCSS wrapper for Nuxt.js

  

  Project mention: How to start optimized Vuetify 3 Nuxt 3 project | dev.to | 2022-12-29

  What about themes. When we analyze the created html bundle .output/public/index.html we imidiately see an large section in the html head. Read more about it in official documentation here. It contains whole configuration for v-theme--light, v-theme--dark and lots of generated selectors for each color configuration.

  We did not specify any theme to use but Vuetify internally by default applies theme light to everything within the v-app block. Therfore in generated index.html we can see that many elements use classes v-theme--light. But what if we disable themes in Vuetify totally? Will this section with unnecessary unused theme selectors and variables disapear? Lets try..

  We can try with disabling themes as described here in plugins/vuetify.ts:
  

  export default createVuetify({
    /* ADD */ theme: false, 
    ...
  })
  

  Enter fullscreen mode Exit fullscreen mode

  After re-generating no theme selectors are applied anymore on any html elements, good, disabling of themes worked as expected. But... the section with unused selectors still remains as before in the head of generated index.html file. 👎

  Consider this a bug? Why does Vuetify add thise code if it is marked that themes are not desired and not used? Is there some way to remove all this redundand code, or only enable light theme and not dark to reduce amout of added code?

  To be updated when I know, but feel free to comment this in comments!

  Clean out unused CSS

  After some digging nuxt-purgecss seems like a good option to try to remove unnecessary css from final bundle. It must be mentioned that removal of unused css is generally a major issue in many projects and a topic of discussions. There does not exist any perfect tool for it at the writing moment. In order not to remove too much of the code we must have knowledge of how purgecss works and of the code whe want to minify. We need to configure purgecss in a way so thatt when/if new persons on the team do introduce new code, to ensure that it will not by accident remove related css in the final build. By my opinion it is better to optimaze to little and left a bit of unused code than risk that some part of page, some unusal state we seldom visit, or test, will stop working.

  I reccomend to read this good article mentioning issues with automatic css removal - How Do You Remove Unused CSS From a Site?.

  Purge css is a dummy tool, it scans html, vue and js files on locations that we provide to it, and create a list of selectors of all classes is finds. In some file x.html with

  it finds bg-red. In a vue file with it finds elevation-6 and so on. Then it analyzes the code that css files that are created by our project and removes all selectors from it not in this list. So customization of such a till to look for code in all locations the code is used from is essential for this to work. This is when it gets tricky with third party plugin like vuetify.

  Vuetify 3 generates its components with styles based on props and with help of render function. It is very tricky to find files in node_modules/vuetify where whe components are created and defining all classes and used selectors.

  I like using Vuetify with Nuxt and it is for the following little trick.

  First build a static site as nuxt provides this possibility in very easy way. Then ALL html will be generated WITH all classes selectors in dist folder.

  Afterward provide the dist folder to purgecss as a content location and do your build. Then purge have all class names and selector it need to keep from removing in the final css bundle.

  Here is how I did:

  Install the nuxt-purgecss plugin
  

  npm i -D nuxt-purgecss 
  

  Enter fullscreen mode Exit fullscreen mode

  Add purgecss module and import our custom purgecss settings in nuxt.config.ts:
  

  /* ADD */ import purgeConfig from './modules/purgecss/config';
  
  ...
  
  export default defineNuxtConfig({
    modules: [
      ...
  
      /* ADD */ ['nuxt-purgecss', purgeConfig],
    ],
  
    ...
  });
  

  Enter fullscreen mode Exit fullscreen mode

  Add file and following settings in modules/pergecss/config.js:
  Note! There is lot of disabled code and I left it there for educational purpose. It can be used for option when we can not use static-generated-html method/trick. Then uncomment the comments, analyze the code and get your head dirty trying to expend the lists as your project grows.
  

  // Default safelist: https://github.com/Developmint/nuxt-purgecss/blob/main/src/config.ts
  const defaultSafelist = [
      // 'body',
      // 'html',
      // 'nuxt-progress',
      // '__nuxt',
      // /-(leave|enter|appear)(|-(to|from|active))$/, // Normal transitions
      // /^nuxt-link(|-exact)-active$/, // Nuxt link classes
      // /^(?!cursor-move).+-move$/, // Move transitions
      // /.*data-v-.*/, // Keep scoped styles
      // // New Vue3 selectors
      // /:slotted/,
      // /:deep/,
      // /:global/,
  ];
  
  // Default content: https://github.com/Developmint/nuxt-purgecss/blob/main/src/config.ts
  const defaultContent = [
      // 'components/**/*.{vue,jsx?,tsx?}',
      // 'layouts/**/*.{vue,jsx?,tsx?}',
      // 'pages/**/*.{vue,jsx?,tsx?}',
      // 'composables/**/*.{vue,jsx?,tsx?}',
      // 'App.{vue,jsx?,tsx?}',
      // 'app.{vue,jsx?,tsx?}',
      // 'plugins/**/*.{js,ts}',
      // 'nuxt.config.{js,ts}',
  ];
  
  /* Vuetify: Additional locations to scan */
  const additionalLocations = ['modules/purgecss/static-generated-html/**/*.html'];
  
  /* Vuetify: Selectors (runtime generated) better never not to remove */
  const vuetifySafelist = [
      // /v-application/, // generated by vApp
      // /v-layout/, // generated by vApp
      // /v-toolbar/, // generated by vAppBar
      // /v-locale/,  // generated runtime by i.e vBtn if locale enabled
      // /v-icon/,  // generated by vBtn
      // /flex-grow-1/, // generated by v-spacer
      // /v-responsive/, // generated eager
  ];
  
  /* Vuetify: Components and directives used in this project */
  const usedComponents = [
      /v-ripple/, // when enabled, generated at runtime by vBtn
      // /v-app/,
      // /v-app-bar/,
      // /v-app-bar-nav-icon/,
      // /v-navigation-drawer/,
      // /v-toolbar-title/,
      // /v-container/,
      // /v-sheet/,
      // /v-main/,
      // /v-card/,
      // /v-btn/,
      // /v-col/,
      // /v-row/,
  ];
  
  export default {
  content: [...defaultContent, ...additionalLocations],
    safelist: {
      greedy: [...vuetifySafelist, ...usedComponents],
      standard: [...defaultSafelist],
    },
  };
  

  Enter fullscreen mode Exit fullscreen mode

  All this can be exchanged with onliner in nuxt.config.ts but I wanted to show how uch configuration is needed for this small about of code for purgecss to let the code it should not remove be. That is when we do not use our little trick with build twice with generated content as input.

  After all those modifications run now npm run generate followed by npm run preview and it will generate static files in .output/public/ folder.

  🩻Analazing generated file:
  .output/public/index.html 14kB (3kB gzipped)
  .output/public/_nuxt/enter.xxx.js 184kB (67kB gzipped)
  .output/public/_nuxt/enter.xxx.css 14kB (3.4kB gzipped)

  The css is much much smaller than from beggining.😀👍
  We started with 370kB and ended up with 14kB (unzipped). It an awsome reduction.

  CONCLUSION

  We created a nice and educational starter template project using Vuetify 3 on top of Nuxt 3. We did did som small optimization to keep the bundle small in production.

  BEFORE OPTIMIZATION
  .output/public/index.html 14kB (3kB gzipped)
  .output/public/_nuxt/enter.xxx.js 408kB (125kB gzipped)
  .output/public/_nuxt/enter.xxx.css 371kB (51kB gzipped)

  AFTER OPTIMIZATION
  .output/public/index.html 14kB (3kB gzipped)
  .output/public/_nuxt/enter.xxx.js 184kB (67kB gzipped)
  .output/public/_nuxt/enter.xxx.css 14kB (3.4kB gzipped)

  We reduced in total from 795kB to 212kB (zipped from 179kB to 73kB)
  Reduction: 75% unzipped and 60% unzipped.

  I know there index.html contains lots of unused themes. At writing moment I have no solution for that but will update here asap I know.

  Do you have any comment what more can be done to minimize bundle for this starter even more?

  Hope you did learn something usefull through this article.

  ✌️

• packages

  38 390 9.6 TypeScript

  💎 Monorepository for Stylify packages. Stylify uses CSS-like selectors to generate Extremely optimized utility-first CSS dynamically based on what you write 💎. (by stylify)

  

  Project mention: Faster React apps coding: How to migrate from Emotion CSS-in-JS to Stylify Utility-First CSS | dev.to | 2023-02-25

  I will be happy for any feedback! The Stylify is still a new Library and there is a lot of space for improvement 🙂.

• nextsss

  0 82 2.1 TypeScript

  Next.js static site starter including full setup for TypeScript, Tailwind CSS, Google Analytics, Next SEO, etc.

• postcss-rtlcss

  0 68 6.6 TypeScript

  PostCSS plugin to build Cascading Style Sheets (CSS) with Left-To-Right (LTR) and Right-To-Left (RTL) rules using RTLCSS

• vite-plugin-inline-css-modules

  1 46 3.5 TypeScript

  Write CSS modules without leaving your javascript!

  Project mention: Is there a solution for CSS modules that would allow to have TSX and CSS in the same file? | /r/react | 2023-05-26

  This probably doesn't help you solve your problem but it might feel good to know you aren't the only one https://github.com/bluskript/vite-plugin-inline-css-modules

• DHTMLX Widgets with Angular

  0 5 0.0 TypeScript

  Using DHX widgets with Angular

  

• Sonar

  www.sonarsource.com

  sponsored

  Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.

  

TypeScript PostCSS related posts

• Is there a solution for CSS modules that would allow to have TSX and CSS in the same file?
  2 projects | /r/react | 26 May 2023
• Is there any way to apply different CSS files to the same component?
  2 projects | /r/reactjs | 20 May 2023
• How to setup a simple static website using Svelte (with login)
  5 projects | dev.to | 19 May 2023
• The app router is not production-ready yet
  10 projects | /r/nextjs | 18 May 2023
• How bad is it to use CSS-in-JS with regards to the future of React?
  1 project | /r/react | 17 May 2023
• I created a Zero-Runtime CSS-in-JS Library Compatible with Next.js App Router and RSC
  4 projects | dev.to | 16 May 2023
• Need some help
  1 project | /r/nextjs | 8 May 2023
• A note from our sponsor - InfluxDB
  www.influxdata.com | 3 Jun 2023

  Ingest, store, & analyze all types of time series data in a fully-managed, purpose-built database. Keep data forever with low-cost storage and superior data compression. Learn more →

Index

Sponsored

Access the most powerful time series database as a service

Ingest, store, & analyze all types of time series data in a fully-managed, purpose-built database. Keep data forever with low-cost storage and superior data compression.

www.influxdata.com

Do not miss the trending TypeScript projects with our weekly report!