{"_id":"@goldpage/postcss","_rev":"41-6c498c81e9ef76e99ef288c0eebdf387","name":"@goldpage/postcss","dist-tags":{"latest":"0.5.13"},"versions":{"0.5.0":{"name":"@goldpage/postcss","version":"0.5.0","@brillout/autoload":true,"dependencies":{"@brillout/reconfig":"0.5.0","css-loader":"^2.1.1","mini-css-extract-plugin":"^0.6.0","postcss-loader":"^3.0.0"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/reframejs/goldpage.git"},"gitHead":"71a1a4d54bc06858541687db32a4367ad532604c","description":"\n\nGoldpage + PostCSS = :heart:\n\n# `@goldpage/postcss`\n\nUse Goldpage with PostCSS.\n\n### Usage\n\nInstall `@goldpage/postcss`.\n\n~~~shell\n$ npm install @goldpage/postcss\n~~~\n\nThe `@goldpage/postcss` plugin is automatically loaded.\n\nConfigure PostCSS:\n\n~~~js\nmodule.exports = {\n // All options defined here are passed down as options for `postcss-loader`.\n // Thus, this is where you add PostCSS plugins, a PostCSS parser, etc.\n postcss: {\n plugins: [\n require('postcss-cssnext')()\n ],\n parser: 'sugarss',\n },\n};\n~~~\n\n### Example\n\n~~~sugarss\n// ./example/pages/landing.css\n\n:root\n --red: #f88\n --blue: #88f\n\n.red-on-blue\n background-color: var(--blue)\n color: var(--red)\n\n.blue-on-red\n background-color: var(--red)\n color: var(--blue)\n\n.red-on-blue,\n.blue-on-red\n font-size: 2em\n width: 300px\n padding: 20px\n margin: 10px\n~~~\n\n~~~js\n// ./example/pages/landing.page.js\n\nimport React from 'react';\nimport './landing.css';\n\nconst LandingComponent = () => (\n
\n
\n Blue on red.\n
\n
\n Red on blue.\n
\n
\n);\n\nconst LandingPage = {\n route: '/',\n view: LandingComponent,\n renderToDom: false,\n renderToHtml: true,\n};\n\nexport default LandingPage;\n~~~\n\n~~~js\n// ./example/goldpage.config.js\n\nmodule.exports = {\n // All options defined here are passed down as options for `postcss-loader`.\n // Thus, this is where you add PostCSS plugins, a PostCSS parser, etc.\n postcss: {\n plugins: [\n require('postcss-cssnext')()\n ],\n parser: 'sugarss',\n },\n};\n~~~\n\n\n","readmeFilename":"readme.md","description":"\n\nGoldpage + PostCSS = :heart:\n\n# `@goldpage/postcss`\n\nUse Goldpage with PostCSS.\n\n### Usage\n\nInstall `@goldpage/postcss`.\n\n~~~shell\n$ npm install @goldpage/postcss\n~~~\n\nThe `@goldpage/postcss` plugin is automatically loaded.\n\nConfigure PostCSS:\n\n~~~js\nmodule.exports = {\n // All options defined here are passed down as options for `postcss-loader`.\n // Thus, this is where you add PostCSS plugins, a PostCSS parser, etc.\n postcss: {\n plugins: [\n require('postcss-cssnext')()\n ],\n parser: 'sugarss',\n },\n};\n~~~\n\n### Example\n\n~~~sugarss\n// ./example/pages/landing.css\n\n:root\n --red: #f88\n --blue: #88f\n\n.red-on-blue\n background-color: var(--blue)\n color: var(--red)\n\n.blue-on-red\n background-color: var(--red)\n color: var(--blue)\n\n.red-on-blue,\n.blue-on-red\n font-size: 2em\n width: 300px\n padding: 20px\n margin: 10px\n~~~\n\n~~~js\n// ./example/pages/landing.page.js\n\nimport React from 'react';\nimport './landing.css';\n\nconst LandingComponent = () => (\n
\n
\n Blue on red.\n
\n
\n Red on blue.\n
\n
\n);\n\nconst LandingPage = {\n route: '/',\n view: LandingComponent,\n renderToDom: false,\n renderToHtml: true,\n};\n\nexport default LandingPage;\n~~~\n\n~~~js\n// ./example/goldpage.config.js\n\nmodule.exports = {\n // All options defined here are passed down as options for `postcss-loader`.\n // Thus, this is where you add PostCSS plugins, a PostCSS parser, etc.\n postcss: {\n plugins: [\n require('postcss-cssnext')()\n ],\n parser: 'sugarss',\n },\n};\n~~~\n\n\n","readmeFilename":"readme.md"}