{"id":15891198,"url":"https://github.com/ctrlplusb/react-app-rewire-css-blocks","last_synced_at":"2025-04-02T17:23:52.501Z","repository":{"id":66058695,"uuid":"131081023","full_name":"ctrlplusb/react-app-rewire-css-blocks","owner":"ctrlplusb","description":"Adds support for CSS Blocks to your react-app-rewired config.","archived":false,"fork":false,"pushed_at":"2018-04-26T01:06:47.000Z","size":57,"stargazers_count":2,"open_issues_count":1,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-08T08:11:48.858Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ctrlplusb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-26T01:03:41.000Z","updated_at":"2019-04-06T04:39:19.000Z","dependencies_parsed_at":null,"dependency_job_id":"f1dc9f29-3f2d-4184-b6c9-59f0ca9545fa","html_url":"https://github.com/ctrlplusb/react-app-rewire-css-blocks","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctrlplusb%2Freact-app-rewire-css-blocks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctrlplusb%2Freact-app-rewire-css-blocks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctrlplusb%2Freact-app-rewire-css-blocks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctrlplusb%2Freact-app-rewire-css-blocks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ctrlplusb","download_url":"https://codeload.github.com/ctrlplusb/react-app-rewire-css-blocks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246857704,"owners_count":20845176,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-06T07:20:58.983Z","updated_at":"2025-04-02T17:23:52.476Z","avatar_url":"https://github.com/ctrlplusb.png","language":"JavaScript","readme":"# react-app-rewire-css-blocks\n\nAdds support for [CSS Blocks](http://css-blocks.com/) to your [`react-app-rewired`](https://github.com/timarney/react-app-rewired) config.\n\n[![npm](https://img.shields.io/npm/v/react-app-rewire-css-blocks.svg?style=flat-square)](http://npm.im/react-app-rewire-css-blocks)\n[![MIT License](https://img.shields.io/npm/l/react-app-rewire-css-blocks.svg?style=flat-square)](http://opensource.org/licenses/MIT)\n[![Travis](https://img.shields.io/travis/ctrlplusb/react-app-rewire-css-blocks.svg?style=flat-square)](https://travis-ci.org/ctrlplusb/react-app-rewire-css-blocks)\n\n## TOCs\n\n  - [Installation](#installation)\n  - [Usage](#usage)\n\n## Installation\n\nNote: `babel-loader` is a peer dependency.\n\n```\nnpm install babel-loader react-app-rewire-css-blocks -D\n```\n\n_or_\n\n```\nyarn add babel-loader react-app-rewire-css-blocks -D\n```\n\n## Usage\n\nWithin your `react-app-rewire` config:\n\n```javascript\nconst cssBlocksPlugin = require('react-app-rewire-css-blocks')\n\nconst pluginConfig = {\n  appIndexJs: 'src/index.js',\n  webpackOptions: {\n    outputCssFile: 'styles.css'\n  }\n} // See docs below for full details\n\n// Adds support for modernizr\nconfig = cssBlocksPlugin(\n  config,\n  env,\n  pluginConfig // Option, see docs below\n)\n```\n\n## Configuration\n\nThe configuration object that you provide to the plugin allows the following options to be configured:\n\n - __appIndexJs__ (_String_, _required_)\n\n   The entry point to your application.\n\n - __jsxOptions__ (_Object_, _optional_)\n\n   The jsx plugin configuration options. For full details see [here](http://css-blocks.com/api/modules/_css_blocks_jsx.html).\n\n   It supports quite a complex configuration, however, you likely may only need to focus on __types__ if you are using Flow or Typescript.\n\n   As a quick reference it supports the following options:\n\n    - __baseDir__ (_optional_, _string_, Default: process.cwd())\n\n    - __types__ (_optional_, _string_, Default: \"none\")\n\n      \"typescript\" | \"flow\" | \"none\"\n\n    - __aliases__ (_optional_, _Object_)\n\n    - __compilationOptions__ (_optional_, _ResolvedConfiguration_)\n\n    - __parserOptions__ (_optional_, _BabylonOptions_)\n\n - __webpackOptions__ (_optional_, _Object_)\n\n   The configuration options for the CSS Blocks webpack plugin. For full details see [here](http://css-blocks.com/api/modules/_css_blocks_webpack.html).\n\n   It supports quite a complex configuration, however, you likely may only need to focus on __outputCssFile__ and __optimization.enabled__.\n\n   As a quick reference it supports the following options:\n\n    - __name__: (_optional_, _string_, Default: \"css-blocks\")\n\n    - __outputCssFile__: (_optional_, _string_, Default: \"styles.css\")\n\n    - __compilationOptions__ (_optional_, _Object_)\n\n        - __outputMode__ (_optional, _string_)\n\n          Only \"BEM\" is supported at the moment.\n\n        - __rootDir__: (_string_);\n\n        - __maxConcurrentCompiles__ (_number_, Default: 4);\n\n          Limits block parsing and compilation to this number at any one time.\n\n        - __preprocessors__: (_Preprocessors_)\n\n          A preprocessor function can be declared by syntax.\n\n        - __importer__: (_Importer__)\n\n        - __importerData__ (_ImporterData_)\n\n        - __disablePreprocessChaining__ (_boolean_)\n\n          If a preprocessor function is declared for `css`, all blocks will be ran through it, even those that were preprocessed for another syntax.\n          this can be disabled by setting `disablePreprocessChaining` to true.\n\n    - __optimization__ (_optional_, _Object_)\n\n        - __enabled__ (_boolean_)\n\n          Whether to perform any optimizations.\n\n        - __only__: (_optional_, _Optimizations_)\n\n          Only perform the optimizations specified and no others.\n\n        - __except__?: (_optional_, _Optimizations_)\n\n          Perform all optimizations except the ones specified. Overrides optimizations enabled by the `only` option.\n\n        - __css__?: (_optional_, _Object_)\n\n          Some CSS features can be used for more optimal output but may have\n          varying level of support. These options control wether the optimizer\n          will take advantage of those features where it can.\n\n          CSS features are never output with vendor prefixes. You can try using\n          autoprefixer or cssnext, but doing so is likely to result in output that\n          is less optimal than if the optimization hadn't been performed.\n\n           - __useMatchesPseudoClass__ (_boolean_)\n\n             Indicates that class and id selectors should be treated as  case-insensitive.\n             In quirksmode and some older doctypes, selectors are case  insensitive.\n             Identifiers are more compressible when case sensitivity can be  assumed.\n\n          - __caseInsensitiveSelectors__ (_boolean_)\n\nPlease see the [CSS Blocks](http://css-blocks.com/) docs for more information.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctrlplusb%2Freact-app-rewire-css-blocks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fctrlplusb%2Freact-app-rewire-css-blocks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctrlplusb%2Freact-app-rewire-css-blocks/lists"}