TypeScript PostCSS

Open-source TypeScript projects categorized as PostCSS | Edit details

Top 14 TypeScript PostCSS Projects

  • styled-components

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

    Project mention: React: Using native dialogs to make a modal popup | dev.to | 2022-05-19

    First of all I'm using Sass and CSS Modules if you've seen some of my earlier posts you'll have seen I used to use styled-components and whilst I think they have their place I'm much happier using CSS Modules.

  • PostCSS

    Transforming styles with JS plugins

    Project mention: PurgeCSS & styled-components: Does It Work? | dev.to | 2022-04-29

    The second of those two reasons is very disappointing, as PostCSS is a rich ecosystem of plugins to extend your CSS' functionality and build process. PostCSS is what Babel is for JavaScript, and unfortunately styled-components is missing out on an entire suite of new functionality.

  • Appwrite

    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!

  • linaria

    Zero-runtime CSS in JS library

    Project mention: How common is using styled components? | reddit.com/r/reactjs | 2022-05-02

    https://github.com/callstack/linaria zero runtime CSS-in-JS is a thing too

  • purgecss

    Remove unused CSS

    Project mention: PurgeCSS & styled-components: Does It Work? | dev.to | 2022-04-29

    { resolve: `gatsby-plugin-purgecss`, options: { // set this to true for debugging purposes; see what was removed printRejected: false, // ignore the antd styles you want to completely keep ignore: [ 'node_modules/antd/lib/select', 'node_modules/antd/lib/checkbox', ], purgeCSSOptions: { content: [ path.join(process.cwd(), 'src/**/!(*.d).{ts,js,jsx,tsx}'), // antd doesn't mesh well w purgecss, so keep the files we use // by listing them as content files. // reference: https://purgecss.com/ant_design.html path.join( process.cwd(), 'node_modules/antd/lib/{tooltip,modal,radio}/**/*.{css,less}' ), // utility styles from ant, let's keep it path.join( process.cwd(), 'node_modules/antd/lib/style/**/*.{css,less}' ), ], extractors: [ { // on top of listing antd files as content, we need an extractor to work // with css/less to get the selectors extractor: (content) => content.match(/([[email protected]&:{}]+)(?= {)/g) || [], extensions: ['css', 'less'], }, ], }, }, }

  • CSS Layout

    A collection of popular layouts and patterns made with CSS. Now it has 100+ patterns and continues growing!

    Project mention: Is there a name for this method/technique? New to web dev and want to implement it on my portfolio. Sorry if it's a dumb question. | reddit.com/r/webdev | 2022-04-26

    And a collection of popular layouts made with CSS here: https://csslayout.io/

  • jsxstyle

    Inline style system for React and Preact

  • Next-js-Boilerplate

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

    Project mention: Just tried the official Jest plugin from Next.js 12.1 works perfectly with VSCode extension for Jest with immediate test feedback, inline code coverage, problem inspector, etc. directly inside VSCode. Writing tests is now much easier and enjoyable. Configuration in the comments. | reddit.com/r/nextjs | 2022-05-03

    You can find the whole configuration on my Boilerplate hosted on GitHub: https://github.com/ixartz/Next-js-Boilerplate

  • Scout APM

    Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.

  • typescript-plugin-css-modules

    A TypeScript language service plugin providing support for CSS Modules.

    Project mention: SASS vs CSS Modules vs CSS-in-JS vs Compile time CSS-in-JS. Who wins? | dev.to | 2022-01-11

    But for VSCode we need setup TypeScript LS to use workspace version. For more information go here or here.

  • lume

    🔥 Static site generator for Deno 🦕 (by lumeland)

    Project mention: Lume, which is the simplest static site generator for Deno | dev.to | 2022-01-12

    $ mkdir lume-example $ cd lume-example $ lume init Use Typescript for the configuration file? [y/N] y How do you want to import lume? Type a number: 1 import lume from "lume/mod.ts" 2 import lume from "https://deno.land/x/lume/mod.ts" 3 import lume from "https:/deno.land/x/[email protected]/mod.ts" [1] Do you want to import plugins? Type the plugins you want to use separated by comma. All available options: - attributes https://lumeland.github.io/plugins/attributes/ - base_path https://lumeland.github.io/plugins/base_path/ - bundler https://lumeland.github.io/plugins/bundler/ - code_highlight https://lumeland.github.io/plugins/code_highlight/ - date https://lumeland.github.io/plugins/date/ - eta https://lumeland.github.io/plugins/eta/ - inline https://lumeland.github.io/plugins/inline/ - jsx https://lumeland.github.io/plugins/jsx/ - liquid https://lumeland.github.io/plugins/liquid/ - modify_urls https://lumeland.github.io/plugins/modify_urls/ - on_demand https://lumeland.github.io/plugins/on_demand/ - postcss https://lumeland.github.io/plugins/postcss/ - pug https://lumeland.github.io/plugins/pug/ - relative_urls https://lumeland.github.io/plugins/relative_urls/ - resolve_urls https://lumeland.github.io/plugins/resolve_urls/ - slugify_urls https://lumeland.github.io/plugins/slugify_urls/ - svgo https://lumeland.github.io/plugins/svgo/ - terser https://lumeland.github.io/plugins/terser/ Example: postcss, terser, base_path Created a config file _config.ts Do you want to configure VS Code? [y/N] y VS Code configured

  • nextsss

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

    Project mention: NextSSS, Next.js static site starter | dev.to | 2021-07-20

    npx create-next-app --example https://github.com/ixkaito/nextsss # or yarn create next-app --example https://github.com/ixkaito/nextsss

  • esbuild-sass-plugin

    esbuild plugin for sass

    Project mention: Progress Report: Bridgetown is Now esbuild-Aware | reddit.com/r/ruby | 2021-12-05

    The config will be totally customizable, so there's nothing stopping you from installing a plugin like this, I just haven't tested it out yet. https://github.com/glromeo/esbuild-sass-plugin

  • postcss-rtlcss

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

    Project mention: postcss-rtl VS postcss-rtlcss - a user suggested alternative | libhunt.com/r/postcss-rtl | 2022-01-25

    A PostCSS plugin to create Left-To-Right (LTR) and Right-To-Left (RTL) rules in a CSS file

  • vite-plugin-inline-css-modules

    Write CSS modules without leaving your javascript!

    Project mention: Zero-Runtime Scoped Component Styling Made Easy! | dev.to | 2022-05-18
  • DHTMLX Widgets with Angular

    Using DHX widgets with Angular

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2022-05-19.

TypeScript PostCSS related posts

Index

What are some of the best open-source PostCSS projects in TypeScript? This list will help you:

Project Stars
1 styled-components 36,578
2 PostCSS 26,249
3 linaria 8,903
4 purgecss 6,945
5 CSS Layout 5,816
6 jsxstyle 1,996
7 Next-js-Boilerplate 1,913
8 typescript-plugin-css-modules 840
9 lume 523
10 nextsss 73
11 esbuild-sass-plugin 67
12 postcss-rtlcss 40
13 vite-plugin-inline-css-modules 23
14 DHTMLX Widgets with Angular 4
Find remote jobs at our new job board 99remotejobs.com. There are 7 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.
Deliver Cleaner and Safer Code - Right in Your IDE of Choice!
SonarLint is a free and open source IDE extension that identifies and catches bugs and vulnerabilities as you code, directly in the IDE. Install from your favorite IDE marketplace today.
www.sonarlint.org