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 💅
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.
-
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!
-
https://github.com/callstack/linaria zero runtime CSS-in-JS is a thing too
-
{ 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-26And a collection of popular layouts made with CSS here: https://csslayout.io/
-
-
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-03You 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-11But for VSCode we need setup TypeScript LS to use workspace version. For more information go here or here.
-
$ 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.
npx create-next-app --example https://github.com/ixkaito/nextsss # or yarn create next-app --example https://github.com/ixkaito/nextsss
-
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-25A PostCSS plugin to create Left-To-Right (LTR) and Right-To-Left (RTL) rules in a CSS file
-
-
TypeScript PostCSS related posts
- React: Using native dialogs to make a modal popup
- Zero-Runtime Scoped Component Styling Made Easy!
- how to create a scope CSS class from an existing third-party library (to avoid global class names conflict)?
- Having trouble understanding lifecycle component and how to use it
- How to work with styled components in my react app?
- React Native Styling
- How common is using styled components?
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 |
Are you hiring? Post a new remote job listing for free.
