basant307/AI_Governance_Project

1 2 3<div align="center">4  <img width="100" height="100" title="Load Options" src="http://michael-ciniawsky.github.io/postcss-load-options/logo.svg">5  <a href="https://github.com/postcss/postcss">6    <img width="110" height="110" title="PostCSS"           src="http://postcss.github.io/postcss/logo.svg" hspace="10">7  </a>8  <img width="100" height="100" title="Load Plugins" src="http://michael-ciniawsky.github.io/postcss-load-plugins/logo.svg">9  <h1>Load Config</h1>10</div>11 12<h2 align="center">Install</h2>13 14```bash15npm i -D postcss-load-config16```17 18<h2 align="center">Usage</h2>19 20```bash21npm i -S|-D postcss-plugin22```23 24Install all required PostCSS plugins and save them to your **package.json** `dependencies`/`devDependencies`25 26Then create a PostCSS config file by choosing one of the following formats27 28### `package.json`29 30Create a **`postcss`** section in your project's **`package.json`**31 32```33Project (Root)34  |– client35  |– public36  |37  |- package.json38```39 40```json41{42  "postcss": {43    "parser": "sugarss",44    "map": false,45    "plugins": {46      "postcss-plugin": {}47    }48  }49}50```51 52### `.postcssrc`53 54Create a **`.postcssrc`** file in JSON or YAML format55 56> ℹ️ It's recommended to use an extension (e.g **`.postcssrc.json`** or **`.postcssrc.yml`**) instead of `.postcssrc`57 58```59Project (Root)60  |– client61  |– public62  |63  |- (.postcssrc|.postcssrc.json|.postcssrc.yml)64  |- package.json65```66 67**`.postcssrc.json`**68```json69{70  "parser": "sugarss",71  "map": false,72  "plugins": {73    "postcss-plugin": {}74  }75}76```77 78**`.postcssrc.yml`**79```yaml80parser: sugarss81map: false82plugins:83  postcss-plugin: {}84```85 86> [!NOTE]87> For YAML configs, you must have [yaml](https://www.npmjs.com/package/yaml) installed as a peer dependency.88 89### `.postcssrc.js` or `postcss.config.js`90 91You may need some logic within your config.92In this case create JS/TS file named:93- `.postcssrc.js`94- `.postcssrc.mjs`95- `.postcssrc.cjs`96- `.postcssrc.ts`97- `.postcssrc.mts`98- `.postcssrc.cts`99- `postcss.config.js`100- `postcss.config.mjs`101- `postcss.config.cjs`102- `postcss.config.ts`103- `postcss.config.mts`104- `postcss.config.cts`105 106> [!NOTE]107> For TypeScript configs, you must have [tsx](https://www.npmjs.com/package/tsx) or [jiti](https://www.npmjs.com/package/jiti) installed as a peer dependency.108 109```110Project (Root)111  |– client112  |– public113  |- (.postcssrc|postcss.config).(js|mjs|cjs|ts|mts|cts)114  |- package.json115```116 117You can export the config as an `{Object}`118 119**.postcssrc.js**120```js121module.exports = {122  parser: 'sugarss',123  map: false,124  plugins: {125    'postcss-plugin': {}126  }127}128```129 130Or export a `{Function}` that returns the config (more about the `ctx` param below)131 132**.postcssrc.js**133```js134module.exports = (ctx) => ({135  parser: ctx.parser ? 'sugarss' : false,136  map: ctx.env === 'development' ? ctx.map : false,137  plugins: {138    'postcss-plugin': ctx.options.plugin139  }140})141```142 143Plugins can be loaded either using an `{Object}` or an `{Array}`144 145#### `{Object}`146 147**.postcssrc.js**148```js149module.exports = ({ env }) => ({150  ...options,151  plugins: {152    'postcss-plugin': env === 'production' ? {} : false153  }154})155```156 157> ℹ️ When using an `{Object}`, the key can be a Node.js module name, a path to a JavaScript file that is relative to the directory of the PostCSS config file, or an absolute path to a JavaScript file.158 159#### `{Array}`160 161**.postcssrc.js**162```js163module.exports = ({ env }) => ({164  ...options,165  plugins: [166    env === 'production' ? require('postcss-plugin')() : false167  ]168})169```170> :warning: When using an `{Array}`, make sure to `require()` each plugin171 172<h2 align="center">Options</h2>173 174|Name|Type|Default|Description|175|:--:|:--:|:-----:|:----------|176|[**`to`**](#to)|`{String}`|`undefined`|Destination File Path|177|[**`map`**](#map)|`{String\|Object}`|`false`|Enable/Disable Source Maps|178|[**`from`**](#from)|`{String}`|`undefined`|Source File Path|179|[**`parser`**](#parser)|`{String\|Function}`|`false`|Custom PostCSS Parser|180|[**`syntax`**](#syntax)|`{String\|Function}`|`false`|Custom PostCSS Syntax|181|[**`stringifier`**](#stringifier)|`{String\|Function}`|`false`|Custom PostCSS Stringifier|182 183### `parser`184 185**.postcssrc.js**186```js187module.exports = {188  parser: 'sugarss'189}190```191 192### `syntax`193 194**.postcssrc.js**195```js196module.exports = {197  syntax: 'postcss-scss'198}199```200 201### `stringifier`202 203**.postcssrc.js**204```js205module.exports = {206  stringifier: 'midas'207}208```209 210### [**`map`**](https://github.com/postcss/postcss/blob/master/docs/source-maps.md)211 212**.postcssrc.js**213```js214module.exports = {215  map: 'inline'216}217```218 219> :warning: In most cases `options.from` && `options.to` are set by the third-party which integrates this package (CLI, gulp, webpack). It's unlikely one needs to set/use `options.from` && `options.to` within a config file. Unless you're a third-party plugin author using this module and its Node API directly **dont't set `options.from` && `options.to` yourself**220 221### `to`222 223```js224module.exports = {225  to: 'path/to/dest.css'226}227```228 229### `from`230 231```js232module.exports = {233  from: 'path/to/src.css'234}235```236 237<h2 align="center">Plugins</h2>238 239### `{} || null`240 241The plugin will be loaded with defaults242 243```js244'postcss-plugin': {} || null245```246 247**.postcssrc.js**248```js249module.exports = {250  plugins: {251    'postcss-plugin': {} || null252  }253}254```255 256> :warning: `{}` must be an **empty** `{Object}` literal257 258### `{Object}`259 260The plugin will be loaded with given options261 262```js263'postcss-plugin': { option: '', option: '' }264```265 266**.postcssrc.js**267```js268module.exports = {269  plugins: {270    'postcss-plugin': { option: '', option: '' }271  }272}273```274 275### `false`276 277The plugin will not be loaded278 279```js280'postcss-plugin': false281```282 283**.postcssrc.js**284```js285module.exports = {286  plugins: {287    'postcss-plugin': false288  }289}290```291 292### `Ordering`293 294Plugin **execution order** is determined by declaration in the plugins section (**top-down**)295 296```js297{298  plugins: {299    'postcss-plugin': {}, // [0]300    'postcss-plugin': {}, // [1]301    'postcss-plugin': {}  // [2]302  }303}304```305 306<h2 align="center">Context</h2>307 308When using a `{Function}` (`postcss.config.js` or `.postcssrc.js`), it's possible to pass context to `postcss-load-config`, which will be evaluated while loading your config. By default `ctx.env (process.env.NODE_ENV)` and `ctx.cwd (process.cwd())` are available on the `ctx` `{Object}`309 310> ℹ️ Most third-party integrations add additional properties to the `ctx` (e.g `postcss-loader`). Check the specific module's README for more information about what is available on the respective `ctx`311 312<h2 align="center">Examples</h2>313 314**postcss.config.js**315 316```js317module.exports = (ctx) => ({318  parser: ctx.parser ? 'sugarss' : false,319  map: ctx.env === 'development' ? ctx.map : false,320  plugins: {321    'postcss-import': {},322    'postcss-nested': {},323    cssnano: ctx.env === 'production' ? {} : false324  }325})326```327 328<div align="center">329  <img width="80" height="80" src="https://worldvectorlogo.com/logos/nodejs-icon.svg">330</div>331 332```json333"scripts": {334  "build": "NODE_ENV=production node postcss",335  "start": "NODE_ENV=development node postcss"336}337```338 339```js340const { readFileSync } = require('fs')341 342const postcss = require('postcss')343const postcssrc = require('postcss-load-config')344 345const css = readFileSync('index.css', 'utf8')346 347const ctx = { parser: true, map: 'inline' }348 349postcssrc(ctx).then(({ plugins, options }) => {350  postcss(plugins)351    .process(css, options)352    .then((result) => console.log(result.css))353})354```355 356<div align="center">357  <img width="80" height="80" halign="10" src="https://worldvectorlogo.com/logos/gulp.svg">358</div>359 360```json361"scripts": {362  "build": "NODE_ENV=production gulp",363  "start": "NODE_ENV=development gulp"364}365```366 367```js368const { task, src, dest, series, watch } = require('gulp')369 370const postcss = require('gulp-postcssrc')371 372const css = () => {373  src('src/*.css')374    .pipe(postcss())375    .pipe(dest('dest'))376})377 378task('watch', () => {379  watch(['src/*.css', 'postcss.config.js'], css)380})381 382task('default', series(css, 'watch'))383```384 385<div align="center">386  <img width="80" height="80" src="https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon.svg">387</div>388 389```json390"scripts": {391  "build": "NODE_ENV=production webpack",392  "start": "NODE_ENV=development webpack-dev-server"393}394```395 396**webpack.config.js**397```js398module.exports = (env) => ({399  module: {400    rules: [401      {402        test: /\.css$/,403        use: [404          'style-loader',405          'css-loader',406          'postcss-loader'407        ]408      }409    ]410  }411})412```413 414<h2 align="center">Maintainers</h2>415 416<table>417  <tbody>418   <tr>419    <td align="center">420      <img width="150" height="150"421        src="https://github.com/michael-ciniawsky.png?v=3&s=150">422      <br />423      <a href="https://github.com/michael-ciniawsky">Michael Ciniawsky</a>424    </td>425    <td align="center">426      <img width="150" height="150"427        src="https://github.com/ertrzyiks.png?v=3&s=150">428      <br />429      <a href="https://github.com/ertrzyiks">Mateusz Derks</a>430    </td>431  </tr>432  <tbody>433</table>434 435<h2 align="center">Contributors</h2>436 437<table>438  <tbody>439   <tr>440    <td align="center">441      <img width="150" height="150"442        src="https://github.com/sparty02.png?v=3&s=150">443      <br />444      <a href="https://github.com/sparty02">Ryan Dunckel</a>445    </td>446    <td align="center">447      <img width="150" height="150"448        src="https://github.com/pcgilday.png?v=3&s=150">449      <br />450      <a href="https://github.com/pcgilday">Patrick Gilday</a>451    </td>452    <td align="center">453      <img width="150" height="150"454        src="https://github.com/daltones.png?v=3&s=150">455      <br />456      <a href="https://github.com/daltones">Dalton Santos</a>457    </td>458    <td align="center">459      <img width="150" height="150"460        src="https://github.com/fwouts.png?v=3&s=150">461      <br />462      <a href="https://github.com/fwouts">François Wouts</a>463    </td>464  </tr>465  <tbody>466</table467 468 469## Security Contact470 471To report a security vulnerability, please use the [Tidelift security contact].472Tidelift will coordinate the fix and disclosure.473 474[Tidelift security contact]: https://tidelift.com/security475