JavaScript Style

Open-source JavaScript projects categorized as Style

Top 10 JavaScript Style Projects

  • style-dictionary

    A build system for creating cross-platform styles.

  • Project mention: Syncing Figma Variables and StyleDictionary with GitHub Actions | dev.to | 2023-08-03

    function getStyleDictionaryConfig(brand) { return { source: [`tokens/brands/${brand}/*.json`, 'tokens/globals/**/*.json'], platforms: { /** * Available platforms: https://amzn.github.io/style-dictionary/#/config?id=platform */ web: { transformGroup: 'web', buildPath: `build/web/${brand}/`, files: [ { destination: 'tokens.scss', format: 'scss/variables', }, ], }, }, } } /** * Build the tokens for each brand. * {@see - Example based on https://github.com/amzn/style-dictionary/tree/main/examples/advanced/multi-brand-multi-platform} */ ['microsoft', 'xbox'].map(function (brand) { ['web'].map(function (platform) { const StyleDictionary = StyleDictionaryPackage.extend( getStyleDictionaryConfig(brand), ) StyleDictionary.buildPlatform(platform) }) })

  • react-native-extended-stylesheet

    Extended StyleSheets for React Native

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • remark-lint

    plugins to check (lint) markdown code style

  • osmicsx

    An utility style framework for React Native

  • webpack-fix-style-only-entries

    Webpack plugin to solve the problem of having a style only entry (css/sass/less) generating an extra js file.

  • html-bundler-webpack-plugin

    This plugin allows to use an HTML template as a starting point for all dependencies used in your web application. All source styles, scripts specified in HTML are processed, and the extracted JS, CSS are saved to the output directory. The plugin automatically substitutes output filenames into the generated HTML file.

  • Project mention: Show HN: HTML Bundler Plugin for Webpack Supports Now the Pug | news.ycombinator.com | 2024-02-19

    The new version 3.5.0 of the html-bundler-webpack-plugin support for the `Pug` template engine.

    https://github.com/webdiscus/html-bundler-webpack-plugin

  • webpack-remove-empty-scripts

    Webpack plugin to remove empty scripts generated by usage only a style without JS in entry.

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
  • react-native-style-utilities

    Fully typed hooks and utility functions for the React Native StyleSheet API

  • babel-plugin-react-native-classname-to-style

    Transform JSX className property to style property in react-native.

  • eslint-config-react-strong

    ESLint strong (strict) config for React and React Native development.

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).

JavaScript Style related posts

Index

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

Project Stars
1 style-dictionary 3,626
2 react-native-extended-stylesheet 2,909
3 remark-lint 911
4 osmicsx 271
5 webpack-fix-style-only-entries 268
6 html-bundler-webpack-plugin 106
7 webpack-remove-empty-scripts 100
8 react-native-style-utilities 87
9 babel-plugin-react-native-classname-to-style 12
10 eslint-config-react-strong 4

Sponsored
The modern identity platform for B2B SaaS
The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
workos.com