{"id":19739538,"url":"https://github.com/suitcss/preprocessor","last_synced_at":"2026-03-09T00:34:22.944Z","repository":{"id":15346874,"uuid":"18077597","full_name":"suitcss/preprocessor","owner":"suitcss","description":"A future-facing CSS preprocessor (used by SUIT CSS)","archived":false,"fork":false,"pushed_at":"2022-05-29T08:13:38.000Z","size":342,"stargazers_count":136,"open_issues_count":0,"forks_count":21,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-10-09T09:39:38.882Z","etag":null,"topics":["javascript","postcss","preprocessor","suit-css"],"latest_commit_sha":null,"homepage":"http://suitcss.github.io","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/suitcss.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-03-24T20:26:41.000Z","updated_at":"2024-12-04T21:06:31.000Z","dependencies_parsed_at":"2022-09-01T00:22:21.774Z","dependency_job_id":null,"html_url":"https://github.com/suitcss/preprocessor","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/suitcss/preprocessor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suitcss%2Fpreprocessor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suitcss%2Fpreprocessor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suitcss%2Fpreprocessor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suitcss%2Fpreprocessor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/suitcss","download_url":"https://codeload.github.com/suitcss/preprocessor/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suitcss%2Fpreprocessor/sbom","scorecard":{"id":857795,"data":{"date":"2025-08-11","repo":{"name":"github.com/suitcss/preprocessor","commit":"62c04dfc0051bacb9c36600198d3f720188e0d72"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.3,"checks":[{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":4,"reason":"Found 8/18 approved changesets -- score normalized to 4","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE.md:0","Info: FSF or OSI recognized license: MIT License: LICENSE.md:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 23 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"106 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-832h-xg76-4gv6","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-hc9w-4p87-j549","Warn: Project is vulnerable to: GHSA-wg6g-ppvx-927h","Warn: Project is vulnerable to: GHSA-wxhq-pm8v-cw75","Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h","Warn: Project is vulnerable to: GHSA-g74r-ffvr-5q9f","Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-hr2v-3952-633q","Warn: Project is vulnerable to: GHSA-h6ch-v84p-w6p9","Warn: Project is vulnerable to: GHSA-9q64-mpxx-87fg","Warn: Project is vulnerable to: GHSA-jc84-3g44-wf2q","Warn: Project is vulnerable to: GHSA-7fv9-m79r-j9x8","Warn: Project is vulnerable to: GHSA-4w88-rjj3-x7wp","Warn: Project is vulnerable to: GHSA-w222-53c6-c86p","Warn: Project is vulnerable to: GHSA-fjqr-fx3f-g4rv","Warn: Project is vulnerable to: GHSA-6vrv-94jv-crrg","Warn: Project is vulnerable to: GHSA-f9mq-jph6-9mhm","Warn: Project is vulnerable to: GHSA-h9jc-284h-533g","Warn: Project is vulnerable to: GHSA-m93v-9qjc-3g79","Warn: Project is vulnerable to: GHSA-hvf8-h2qh-37m9","Warn: Project is vulnerable to: GHSA-mpjm-v997-c4h4","Warn: Project is vulnerable to: GHSA-3p22-ghq8-v749","Warn: Project is vulnerable to: GHSA-77xc-hjv8-ww97","Warn: Project is vulnerable to: GHSA-mq8j-3h7h-p8g7","Warn: Project is vulnerable to: GHSA-p2jh-44qj-pf2v","Warn: Project is vulnerable to: GHSA-p7v2-p9m8-qqg7","Warn: Project is vulnerable to: GHSA-7x97-j373-85x5","Warn: Project is vulnerable to: GHSA-7m48-wc93-9g85","Warn: Project is vulnerable to: GHSA-qqvq-6xgj-jw8g","Warn: Project is vulnerable to: GHSA-6r2x-8pq8-9489","Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2","Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h","Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-xf7w-r453-m56c","Warn: Project is vulnerable to: GHSA-qh2h-chj9-jffq","Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq","Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm","Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-4hpf-3wq7-5rpr","Warn: Project is vulnerable to: GHSA-f522-ffg8-j8r6","Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr","Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg","Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546","Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-282f-qqgm-c34q","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm","Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574","Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-pp57-mqmh-44h7","Warn: Project is vulnerable to: GHSA-f9cm-qmx5-m98h","Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-wrvr-8mpx-r7pp","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-w9mr-4mfr-499f","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-4cpg-3vgw-4877","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-gqgv-6jq5-jjj9","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6","Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj","Warn: Project is vulnerable to: GHSA-2m39-62fm-q8r3","Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7","Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-g7q5-pjjr-gqvp","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-xc7v-wxcw-j472","Warn: Project is vulnerable to: GHSA-cf4h-3jhx-xvhq"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-24T00:22:00.205Z","repository_id":15346874,"created_at":"2025-08-24T00:22:00.205Z","updated_at":"2025-08-24T00:22:00.205Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30278562,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-08T20:45:49.896Z","status":"ssl_error","status_checked_at":"2026-03-08T20:45:49.525Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["javascript","postcss","preprocessor","suit-css"],"created_at":"2024-11-12T01:17:36.644Z","updated_at":"2026-03-09T00:34:22.915Z","avatar_url":"https://github.com/suitcss.png","language":"JavaScript","readme":"# suitcss-preprocessor\n\n[![Build Status](https://travis-ci.org/suitcss/preprocessor.svg?branch=master)](https://travis-ci.org/suitcss/preprocessor) [![Build status](https://ci.appveyor.com/api/projects/status/txiwk8cppv3eno3x?svg=true)](https://ci.appveyor.com/project/simonsmith/preprocessor)\n\n[SUIT CSS](https://github.com/suitcss/suit) preprocessor.\n\nProvides a CLI and Node.js interface for a preprocessor that combines\nvarious [PostCSS](https://github.com/postcss/postcss) plugins.\n\nCompiles CSS packages with:\n\n* [postcss-easy-import](https://github.com/TrySound/postcss-easy-import)\n* [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties)\n* [postcss-calc](https://github.com/postcss/postcss-calc)\n* [postcss-autoreset](https://github.com/maximkoretskiy/postcss-autoreset)\n* [postcss-color-function](https://github.com/postcss/postcss-color-function)\n* [postcss-apply](https://github.com/pascalduez/postcss-apply)\n* [postcss-custom-media](https://github.com/postcss/postcss-custom-media)\n* [autoprefixer](https://github.com/postcss/autoprefixer)\n\nEach imported file is linted with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and [stylelint](http://stylelint.io/). Minification is provided by [cssnano](http://cssnano.co/).\n\nAdditional plugins can be added via the configuration options.\n\n## Installation\n\n```\nnpm install suitcss-preprocessor\n```\n\n## Usage\n\n```\nsuitcss input.css output.css\n```\n\n## API\n\n### Command Line\n\nOptions are [documented below](#options)\n\n```\nUsage: suitcss [\u003cinput\u003e] [\u003coutput\u003e]\n\nOptions:\n\n  -h, --help                output usage information\n  -c, --config [path]       a custom PostCSS config file\n  -i, --import-root [path]  the root directory for imported css files\n  -s, --encapsulate         encapsulate component styles\n  -w, --watch               watch the input file and any imports for changes\n  -m, --minify              minify output with cssnano\n  -e, --throw-error         throw an error when any warnings are found\n  -L, --no-lint             disable stylelint and postcss-bem-linter\n  -v, --verbose             log verbose output for debugging\n  -V, --version             output the version number\n\nExamples:\n\n  # pass an input and output file:\n  $ suitcss input.css output.css\n\n  # configure the import root directory:\n  $ suitcss --import-root src/css input.css output.css\n\n  # watch the input file and imports for changes:\n  $ suitcss --watch input.css output.css\n\n  # configure postcss plugins with a config file:\n  $ suitcss --config config.js input.css output.css\n\n  # unix-style piping to stdin and stdout:\n  $ cat input.css | suitcss | grep background-color\n```\n\n### Node.js\n\nReturns a [PostCSS promise](http://api.postcss.org/LazyResult.html)\n\n```js\npreprocessor(css: String [, options: Object] [, filename: String]);\n```\n\n* `css`: CSS input (_required_)\n* `options`: Options to the preprocessor (see below) (_optional_)\n* `filename`: Filename of the input CSS file (_optional_)\n\n#### Example\n\n```js\nvar preprocessor = require('suitcss-preprocessor');\nvar fs = require('fs');\n\nvar filename = 'src/components/index.css';\nvar css = fs.readFileSync(filename, 'utf8');\n\npreprocessor(css, {\n  root: 'path/to/css',\n  minify: true,\n}, filename).then(function(result) {\n  fs.writeFileSync('build/bundle.css', result.css);\n});\n```\n\n### Options\n\n#### `root`\n\n* Type: `String`\n* Default: `process.cwd()`\n\nWhere to resolve imports from. Passed to [`postcss-import`](https://github.com/postcss/postcss-import/blob/master/README.md#root).\n\n#### `debug`\n\n* Type: `Function`\n* Default: identity (it does nothing)\n\nBefore preprocessing `debug` is invoked on the postcss `plugins` array.\nThis allows you to pass a [`postcss-debug`](https://www.npmjs.com/package/postcss-debug) instance.\n\n```javascript\nvar preprocessor = require('suitcss-preprocessor');\nvar createDebugger = require('postcss-debug').createDebugger;\nvar debug = createDebugger();\n\npreprocessor(css, {\n  debug: debug\n}).then(function () {\n  debug.inspect();\n});\n```\n\nN.B. `debug` should always take one argument that is `plugins` and eventually return it:\n\n```javascript\nfunction debug(plugins) {\n  // do something with plugins here\n  return plugins;\n}\n```\n\n#### `encapsulate`\n\n_(experimental)_\n\n* Type: `Boolean`\n* Default: `false`\n\nResets CSS properties to their [initial values](https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value)\nto effectively allow a component to opt out of CSS inheritance and be\nencapsulated from the rest of the application similar to [the Shadow DOM](https://www.w3.org/TR/shadow-dom/).\nThere are two types of CSS properties that affect components, inherited (e.g.\n`font-size,` `color`) and non-inherited (e.g. `margin`, `background`). This\noption works so that:\n\n* Root elements (e.g. `.Component`) have both inherited and non-inherited\n  properties reset to default values.\n* Descendants (e.g. `.Component-item`) only have non-inherited properties reset\n  as this allows properties set on the root element to be inherited by its\n  descendants.\n\nThis means that components are isolated from styles outside the component root\nelement but should an inheritable property such as `font-size` be applied on the\ncomponent root element it will be inherited by the component descendants as\nnormal. This prevents the need to redeclare properties on every descendant in a\ncomponent.\n\nThe same rules also apply to nested components.\n\n**Rationale**\n\nOne of the difficulties with CSS components is predictability. Unwanted styles\ncan be inherited from parent components and this can make it difficult to\nreuse components in different contexts.\n\nMethodologies such as SUIT and BEM exist to solve problems around the cascade\nand specificity but they cannot protect components from inheriting unwanted\nstyles. What would really help is to allow inheritance to be 'opt-in' and let\ncomponent authors decide what properties are inherited. This creates a more\npredictable baseline for styling components and promoting easier\nreuse.\n\n* [Component Based Style Reuse](https://youtu.be/_70Yp8KPXH8?t=27m45s)\n* [React: CSS in JS](http://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html)\n\n**Examples**\n\n* [CodePen encapsulate](http://codepen.io/simonsmith/pen/BLOyAX) - Demonstrates\n  how components are encapsulated from global and parent styles.\n* [CodePen encapsulate inheritance](http://codepen.io/simonsmith/pen/LRgxdp) -\n  Similar to above but shows how components can opt-in to inheritance.\n\n**What about `all: initial`?**\n\nThe `all: initial` declaration will reset both inherited and non-inherited\nproperties but this can be too forceful. For example `display` is reset to\n`inline` on block elements and as mentioned earlier, descendants of a component\nshould only have non-inherited properties reset to allow declarations to be\ninherited from the root element.\n\n\u003e For example, if an author specifies `all: initial` on an element it will block\n  all inheritance and reset all properties, as if no rules appeared in the\n  author, user, or user-agent levels of the cascade.\n\nhttps://www.w3.org/TR/css3-cascade/#all-shorthand\n\nInstead a subset of properties are reset to allow more\ngranular control over what parts of a component use inheritance.\n\nTo achieve this the preprocessor uses\n[postcss-autoreset](https://github.com/maximkoretskiy/postcss-autoreset) with\nthe SUIT preset and a [custom set of CSS properties](lib/encapsulation.js) that\nare reset to their initial values. **Only selectors conforming** to the SUIT naming\nconventions are affected.\n\n**Caveats**\n\n##### Selectors must be present in the component CSS\n\nIf an element is present in the HTML but not styled in the component CSS\n(perhaps relying on utility classes) it will not be reset. In\nthis instance an empty ruleset can be added to ensure it is correctly reset:\n\n```html\n\u003cdiv class=\"Component u-posRelative u-textCenter\"\u003e\n  \u003cdiv class=\"Component-item\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n```css\n/**\n * Empty ruleset required.\n * Note the disabling of stylelint\n */\n\n/* stylelint-disable-next-line block-no-empty */\n.Component {}\n\n.Component-item {\n  color: red;\n}\n```\n\n##### Global styles can still override descendants\n\nBecause component descendants only have non-inheritable properties reset it can\nlead to specific global rules still applying:\n\n```css\n/* global.css */\nspan {\n  color: red;\n}\n\n/* component.css */\n.Component-text {\n  font-style: bold;\n}\n```\n```html\n\u003cdiv class=\"Component\"\u003e\n  \u003cspan class=\"Component-text\"\u003e\n    \u003c!-- this text is red --\u003e\n  \u003cspan\u003e\n\u003c/div\u003e\n```\n\nThe solution to this is to minimise or avoid entirely the use of global styles\nwhich is the recommended approach in a SUIT CSS application.\n\n#### `lint`\n\n* Type: `Boolean`\n* Default: `true`\n\nEnsure code conforms to the [SUIT code style](https://github.com/suitcss/suit/blob/master/doc/STYLE.md)\nby using the [stylelint-config-suitcss](https://github.com/suitcss/stylelint-config-suitcss) package.\n\nStylelint [configuration\noptions](http://stylelint.io/?/docs/user-guide/configuration.md) can also be\noverridden but this requires the `stylelint-config-suitcss` to be installed\nlocally in your package.\n\n```js\n{\n  stylelint: {\n    extends: 'stylelint-config-suitcss',\n    rules: {\n      indentation: [4, 'tab'],\n    }\n  }\n}\n```\n\n#### `minify`\n\n* Type: `Boolean`\n* Default: `false`\n\nIf set to `true` then the output is minified by [`cssnano`](http://cssnano.co/).\n\n#### `postcss`\n\n* Type: `Object`\n* Default: `undefined`\n\nOptions that are passed directly to `postcss`, as per [the documentation](http://api.postcss.org/global.html#processOptions).\n\n```js\n{\n  postcss: {from: 'filename.css'}\n}\n```\n\n##### `use`\n\n* Type: `Array`\n* Default: `undefined`\n\nA list of plugins that are passed to PostCSS. This can be used to add new plugins and/or reorder the defaults\n\n```js\n{\n  use: ['postcss-at2x', 'postcss-property-lookup']\n}\n```\n\n#### `\u003cplugin-name\u003e`\n\n* Type: `Object`\n* Default: `undefined`\n\nProperty matching the name of a PostCSS plugin that has options for that plugin\n\n```js\n{\n  autoprefixer: {\n    browsers: ['\u003e 1%', 'IE 7'],\n    cascade: false\n  },\n  'postcss-calc': { preserve: true }\n}\n```\n\n### Plugin configuration\n\nCreating a configuration file allows options to be passed to the individual PostCSS plugins. It can be passed to the `suitcss` CLI via the `-c` flag and can be either JavaScript or JSON\n\n```js\nmodule.exports = {\n  root: 'path/to/css',\n  autoprefixer: { browsers: ['\u003e 1%', 'IE 7'], cascade: false },\n  'postcss-calc': { preserve: true }\n}\n```\n\n```js\n{\n  \"root\": \"path/to/css\",\n  \"autoprefixer\": { \"browsers\": [\"\u003e 1%\", \"IE 7\"], \"cascade\": false },\n  \"postcss-calc\": { \"preserve\": true }\n}\n```\n\nOptions are merged recursively with the defaults. For example, adding new plugins to the `use` array will result in them being merged alongside the existing ones.\n\n#### Adding additional plugins\n\nBy default the preprocessor uses all necessary plugins to build SUIT components. However additional plugins can be installed into a project and then added to the `use` array. They will be appended to the existing list of plugins.\n\n**Note**: This will not work with the preprocessor installed globally. Instead rely on the convenience of `npm run script`\n\n```js\nmodule.exports = {\n  use: [\n    'postcss-property-lookup'\n  ]\n};\n```\n\n```js\n{\n  \"name\": \"my-pkg\",\n  \"version\": \"0.1.0\",\n  \"dependencies\": {\n    \"postcss-property-lookup\": \"^1.1.3\",\n    \"suitcss-preprocessor\": \"^0.5.0\"\n  },\n  \"scripts\": {\n    \"preprocess\": \"suitcss -c myconfig.js index.css build/built.css\"\n  }\n}\n```\n\n```\nnpm run preprocess\n```\n\n#### Changing plugin order\n\nIf duplicate plugins are used they will be removed, but the new order will be respected. This is useful if you need to change the default order:\n\n```js\n// Default order\nvar defaults = [\n  'postcss-custom-properties',\n  'postcss-calc',\n  'postcss-color-function',\n  'postcss-custom-media',\n  'postcss-apply',\n];\n\n// config\nmodule.exports = {\n  use: [\n    'postcss-at2x',\n    'postcss-calc',\n  ]\n};\n\nvar result = [\n  'postcss-custom-properties',\n  'postcss-color-function',\n  'postcss-custom-media',\n  'postcss-apply',\n  'postcss-at2x',\n  'postcss-calc',\n];\n```\n\n**Note** Some core plugins such as `postcss-easy-import` and `autoprefixer`\ncannot be re-ordered. This is to ensure components are preprocessed correctly.\n\n#### Autoprefixer: vendor prefixes\n\nBy default the preprocessor uses the SUIT\n[browserslist](https://github.com/ai/browserslist) configuration:\n\n```\n\u003e 1%, last 2 versions, safari \u003e 6, ie \u003e 9, ios \u003e 6, android \u003e 4.3, samsung \u003e 3, chromeandroid \u003e 50\n```\n\nThe preprocessor doesn't attempt to find any `browserslist` config file.\n\nInstead you can customise the browsers list\nvia [configuration file](#plugin-configuration).\n\n\n## Acknowledgements\n\nBased on [Myth](https://github.com/segmentio/myth) by Segment.io.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuitcss%2Fpreprocessor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsuitcss%2Fpreprocessor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuitcss%2Fpreprocessor/lists"}