{ children }
# Deterministic Style Sheets ✨
[](https://travis-ci.org/giuseppeg/dss)
[](https://github.com/sindresorhus/xo)
[](https://github.com/prettier/prettier)
DSS (Deterministic StyleSheets) is a component-oriented CSS authoring system that compiles to high-performance atomic CSS classes-based stylesheets.
DSS works like CSS Modules except that styles resolution is deterministic, CSS is compiled to atomic classes and the final bundle is very small.
Read more about how it works on the [website](https://giuseppeg.github.io/dss/).
[**warning, this is an experimental project and might not be production ready**]
The repo comes with `examples`:
```shell
cd examples/cli
# or cd examples/webpack
npm install
npm start
```
## Features
* ⚡️ Automatic compilation to Atomic CSS classes and high-performance stylesheets
* 🆎 Deterministic styles resolution: styles are always resolved in application order
* 📦 Scoped Styles
* 🌎 Framework and language agnostic
* 🤝 Preprocessors friendly
* 💻 Standalone CLI and support for Webpack 3 and 4 with automatic vendor prefixing
* ✂️ CSS the Best Parts
## Contributing
DSS is developed as a monorepo thanks to lerna and yarn workspaces. Everything you need to know is in this repository.
Since this is a side project and I don't want to burn out, I decided to disable the GitHub issues.
### Bugs
If you find a bug please submit a pull request with a failing test or a fix, and good description for the issue.
### Features request
Please submit a pull request with an RFC where you explain the why and the how you think this feature is useful. I'd be glad to start a conversation from there before moving on to implementation. Also please let me know if you would be up to implement the feature you are suggesting.
### My code is crap
I know, it is a side project and I didn't sweat the details. I am more than happy to discuss about a complete rewrite if the project becomes popular.
## LICENSE
MIT
================================================
FILE: acss-stats-tool/LICENSE
================================================
Copyright 2018-present Giuseppe Gurgone.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
================================================
FILE: acss-stats-tool/README.md
================================================
# atomic-css-stats
Provides stats on `.css` files size (gzipped and brotli). Also compiles the styles to atomic CSS classes for compariaon.
```
npm i -g atomic-css-stats
```
Accepts a space separated list of paths or URL to css files.
```
acss-stats ./file.css https://example.com/bundle.css [...]
```
example:
```
$ acss-stats https://abs.twimg.com/a/1532484778/css/t1/twitter_core.bundle.css
==============
| https://abs.twimg.com/a/1532484778/css/t1/twitter_core.bundle.css
==============
Original file:
Size: 182.72 KB
Gzipped size: 34.08 KB
Brotli size: 28.95 KB
---
Compiled to atomic CSS classes:
Size: 60.05 KB
Gzipped size: 15.48 KB
Brotli size: 12.83 KB
```
## Contributing
This package is part of the [DSS monorepo](https://github.com/giuseppeg/dss#contributing).
## License
MIT
================================================
FILE: acss-stats-tool/cli.js
================================================
#!/usr/bin/env node
const fs = require('fs')
const path = require('path')
const { promisify } = require('util')
const fetch = require('isomorphic-fetch')
const getStats = require('./')
function read(resource) {
if (/^https?:\/\//.test(resource)) {
return fetch(resource).then(r => r.text())
}
return promisify(fs.readFile)(path.resolve(resource))
}
const resources = [...process.argv.slice(2)]
;(async function () {
const stats = []
for (const resource of resources) {
if (!resources) {
console.error('Provide a valid path to file or url for ' + resource)
process.exit(1)
}
const content = await read(resource)
const s = await getStats(content)
stats.push({
resource,
stats: s,
})
}
stats.forEach(({ resource, stats }) => {
console.log(
`
==============
| ${resource}
==============
Original file:
Size: ${stats.original.size}
Gzipped size: ${stats.original.gzipSize}
Brotli size: ${stats.original.brotliSize}
---
Compiled to atomic CSS classes:
Size: ${stats.atomic.size}
Gzipped size: ${stats.atomic.gzipSize}
Brotli size: ${stats.atomic.brotliSize}
`)
})
}());
================================================
FILE: acss-stats-tool/index.js
================================================
const filesize = require('filesize')
const gzipSize = require('gzip-size')
const brotliSize = require('brotli-size')
const mrmuh = require('murmurhash')
const hash = str => mrmuh(str, str.length).toString(36)
const postcss = require('postcss')
exports = module.exports = async function getStats(content) {
const originalSize = filesize(content.length)
const atomizedContent = await atomizer(content)
return {
original: {
size: filesize(content.length),
gzipSize: filesize(gzipSize.sync(content)),
brotliSize:filesize(brotliSize.sync(content))
},
atomic: {
size: filesize(atomizedContent.length),
gzipSize: filesize(gzipSize.sync(atomizedContent)),
brotliSize: filesize(brotliSize.sync(atomizedContent)),
}
}
}
async function atomizer(src) {
const processed = {}
let css = ''
function plugin() {
return root => {
root.walkDecls(decl => {
if (processed[decl.prop + decl.value]) return
processed[decl.prop + decl.value] = true
if (decl.prop.startsWith('-') && !decl.prop.startsWith('--') && css.endsWith('}')) {
css += `${css.substring(0, -1)}; ${decl.prop}: ${decl.value} }`
} else {
css += `.dss_${hash(decl.prop)}-${hash(decl.value)} { ${decl.prop}: ${decl.value} }`
}
})
}
}
return await postcss(plugin()).process(src, { from: undefined }).then(() => css)
}
================================================
FILE: acss-stats-tool/package.json
================================================
{
"name": "atomic-css-stats",
"version": "0.1.0-beta.4",
"description": "Provides information about regular and compiled to atomic CSS classes files size (gzipped)",
"main": "index.js",
"bin": {
"acss-stats": "cli.js"
},
"keywords": [
"dss",
"atomic css",
"css in js",
"css",
"classes",
"css modules",
"sass",
"postcss",
"classnames"
],
"author": "Giuseppe Gurgone",
"license": "MIT",
"dependencies": {
"brotli-size": "^0.0.2",
"filesize": "^3.6.1",
"gzip-size": "^5.0.0",
"isomorphic-fetch": "^2.2.1",
"murmurhash": "^0.0.2",
"postcss": "^7.0.1"
}
}
================================================
FILE: classnames/LICENSE
================================================
Copyright 2018-present Giuseppe Gurgone.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
================================================
FILE: classnames/README.md
================================================
# dss-classnames
Deterministic Style Sheets - classNames helper. Read [more about this package](https://dss-lang.com/usage/#dss-classnames).
## Contributing
This package is part of the [DSS monorepo](https://github.com/giuseppeg/dss#contributing).
## License
MIT
================================================
FILE: classnames/index.js
================================================
/* eslint-disable no-var, prefer-arrow-callback */
;(function(root) {
if (typeof module === 'object' && module.exports) {
module.exports = classnames
} else {
root.classnames = classnames
}
function setVal(processed, out, propValue) {
var prop
if (propValue.substr(0, 4) !== 'dss_') {
return propValue + ' ' + out
}
prop = propValue.substr(0, propValue.indexOf('-'))
if (!processed[prop]) {
processed[prop] = true
return out + ' ' + propValue
}
return out
}
function classnames() {
var groups = arguments
var processed = {}
var out = ''
for (var i = groups.length - 1; i >= 0; i--) {
var group = groups[i]
if (!group) {
continue
}
if (typeof group === 'string') {
out = setVal(processed, out, group)
continue
}
group.forEach(function(item) {
out = setVal(processed, out, item)
})
}
return out
}
})(typeof self === 'undefined' ? this : self)
================================================
FILE: classnames/package.json
================================================
{
"name": "dss-classnames",
"version": "0.1.0-beta.0",
"description": "Deterministic Style Sheets - classNames helper",
"main": "index.js",
"keywords": [
"dss",
"atomic css",
"css in js",
"css",
"classes",
"css modules",
"sass",
"postcss",
"classnames"
],
"author": "Giuseppe Gurgone",
"license": "MIT"
}
================================================
FILE: compiler/.gitignore
================================================
dist
node_modules
coverage
================================================
FILE: compiler/LICENSE
================================================
Copyright 2018-present Giuseppe Gurgone.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
================================================
FILE: compiler/README.md
================================================
# dss-compiler
Deterministic Style Sheets - compiler. Read [more about this package](https://dss-lang.com/usage/#dss-compiler).
## Contributing
This package is part of the [DSS monorepo](https://github.com/giuseppeg/dss#contributing).
## License
MIT
================================================
FILE: compiler/bin/dss
================================================
#!/usr/bin/env node
const fs = require('fs')
const path = require('path')
const getopts = require("getopts")
const glob = require('glob')
const dss = require('..')
const optimizer = require('../processor').optimizer
const read = filePath => fs.readFileSync(filePath, 'utf-8')
const args = getopts(process.argv.slice(2), {
alias: {
t: 'outType',
n: 'bundleName',
h: 'help'
},
default: {
outType: 'json',
bundleName: 'index.css',
help: false,
}
})
if (args._.length != 2 && !args.help) {
console.error('You must specifiy a glob pattern to find .css files and a target directory\n')
args.help = true
}
if (args.help) {
const programName = process.argv[1].split('/').slice(-1).toString()
console.log([
'Usage:',
programName + ' hello
hello
hello
` ================================================ FILE: examples/webpack3/webpack.config.js ================================================ const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const ExtractTextPlugin = require('extract-text-webpack-plugin') const DSSWebpackPlugin = require('dss-webpack') const localIdentName = process.env.NODE_ENV === 'production' ? 'DSS-[hash:base32]' : '[name]-[local]--[hash:base32:5]' const config = { entry: path.resolve('./src/index.js'), output: { path: path.resolve('./dist'), filename: '[name].js', }, module: { rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ use: [ { loader: DSSWebpackPlugin.loader, query: { localIdentName, }, }, ], }), }, ], }, plugins: [ new HtmlWebpackPlugin({ template: path.resolve('./src/index.html'), }), new ExtractTextPlugin('index.css'), new DSSWebpackPlugin({ test: /index\.css$/, }), ], } module.exports = config ================================================ FILE: examples/webpack4/package.json ================================================ { "name": "dss-example-webpack4", "version": "0.1.0-beta.0", "description": "", "main": "index.js", "scripts": { "start": "webpack-dev-server", "prod": "NODE_ENV=production webpack --config webpack.config.js" }, "keywords": [], "author": "", "license": "MIT", "dependencies": { "dss-classnames": "0.1.0-beta.0" }, "devDependencies": { "dss-webpack": "0.1.0-beta.0", "html-webpack-plugin": "^3.0.0", "mini-css-extract-plugin": "^0.4.0", "webpack": "^4.0.0", "webpack-cli": "^2.0.15", "webpack-dev-server": "^3.0.0", "last-call-webpack-plugin": "^3.0.0" } } ================================================ FILE: examples/webpack4/src/a.css ================================================ .root:hover { color: yellow; } .block { display: block; margin-top: 10px; filter: blur(20px); border-top-left-radius: 5px; } @media (min-width: 600px) { .root { color: green; } .test { color: green; color: yellow; } } .root { color: red; font-family: Verdana; display: block; } .test { color: red; color: pink; } ================================================ FILE: examples/webpack4/src/b.css ================================================ .root { color: blue; font-family: monospace; font-size: 2em; } @media (max-width: 400px) { .root { color: hotpink; } } @media (min-width: 600px) { .root { color: orange; } } ================================================ FILE: examples/webpack4/src/d.css ================================================ @supports (color: yellow) { .root { color: yellow; } } ================================================ FILE: examples/webpack4/src/index.html ================================================hello
hello
hello
` ================================================ FILE: examples/webpack4/webpack.config.js ================================================ const path = require('path') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') const DSSWebpackPlugin = require('dss-webpack') const localIdentName = process.env.NODE_ENV === 'production' ? 'DSS-[hash:base32]' : '[name]-[local]--[hash:base32:5]' const mode = process.env.NODE_ENV || 'development' const config = { mode, entry: path.resolve('./src/index.js'), output: { path: path.resolve('./dist'), filename: '[name].js', }, module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, { loader: DSSWebpackPlugin.loader, query: { localIdentName, }, }, ], }, ], }, plugins: [ new HtmlWebpackPlugin({ template: path.resolve('./src/index.html'), }), new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // both options are optional filename: 'index.css', }), new DSSWebpackPlugin({ test: /index\.css$/, }), ], } module.exports = config ================================================ FILE: lerna.json ================================================ { "lerna": "2.11.0", "packages": [ "classnames", "compiler", "next-dss", "webpack" ], "version": "independent", "command": { "init": { "exact": true } }, "npmClient": "yarn", "useWorkspaces": true } ================================================ FILE: next-dss/LICENSE ================================================ Copyright 2018-present Giuseppe Gurgone. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: next-dss/README.md ================================================ # next-dss Deterministic Style Sheets - Next.js plugin. Read [more about this package](https://dss-lang.com/usage/#next-dss). ## Contributing This package is part of the [DSS monorepo](https://github.com/giuseppeg/dss#contributing). ## License MIT ================================================ FILE: next-dss/index.js ================================================ const DSSWebpackPlugin = require('dss-webpack') const ExtractTextPlugin = require('extract-text-webpack-plugin') const cssLoaderConfig = require('@zeit/next-css/css-loader-config') const commonsChunkConfig = require('@zeit/next-css/commons-chunk-config') const escapeStringRegexp = require('escape-string-regexp') module.exports = (nextConfig = {}) => { return Object.assign({}, nextConfig, { webpack(config, options) { if (!options.defaultLoaders) { throw new Error( 'This plugin is not compatible with Next.js versions below 5.0.0 https://err.sh/next-plugins/upgrade' ) } const { dev, isServer } = options const { dssLoaderOptions } = nextConfig // Support the user providing their own instance of ExtractTextPlugin. // If extractCSSPlugin is not defined we pass the same instance of ExtractTextPlugin to all css related modules // So that they compile to the same file in production let extractCSSPlugin = nextConfig.extractCSSPlugin || options.extractCSSPlugin const bundleName = dssLoaderOptions.filename || 'static/style.css' if (!extractCSSPlugin) { extractCSSPlugin = new ExtractTextPlugin({ filename: bundleName }) config.plugins.push(extractCSSPlugin) options.extractCSSPlugin = extractCSSPlugin if (!isServer) { config = commonsChunkConfig(config, /\.css$/) } } options.defaultLoaders.css = cssLoaderConfig(config, extractCSSPlugin, { cssModules: true, cssLoaderOptions: {}, dev, isServer: false }).map(loader => { // Replace css-loader with the dss-loader if (typeof loader.loader !== 'string' || !loader.loader.startsWith('css-loader')) { return loader } return { loader: DSSWebpackPlugin.loader, query: { localIdentName: dssLoaderOptions.localIdentName } } }) config.module.rules.push({ test: /\.css$/, use: options.defaultLoaders.css }) config.plugins.push( new DSSWebpackPlugin({ test: new RegExp(escapeStringRegexp(bundleName)) }) ) if (typeof nextConfig.webpack === 'function') { return nextConfig.webpack(config, options) } return config } }) } ================================================ FILE: next-dss/package.json ================================================ { "name": "next-dss", "version": "0.1.0-beta.0", "main": "index.js", "keywords": [ "dss", "atomic css", "css in js", "css", "classes", "css modules", "sass", "postcss", "classnames", "react", "next plugin", "next.js" ], "license": "MIT", "dependencies": { "dss-webpack": "0.1.0-beta.0", "@zeit/next-css": "0.2.0", "escape-string-regexp": "1.0.5", "extract-text-webpack-plugin": "3.0.2", "last-call-webpack-plugin": "2.1.2" } } ================================================ FILE: package.json ================================================ { "private": true, "version": "0.1.0-beta.0", "description": "Deterministic Style Sheets", "keywords": [], "author": "Giuseppe Gurgone", "license": "MIT", "workspaces": [ "classnames", "compiler", "examples/cli", "examples/webpack*", "webpack", "website" ], "scripts": { "test": "xo && cd compiler && npm test", "lint": "xo", "format": "prettier --single-quote --trailing-comma=es5 --no-semi --write all {src,test,*}/**/*.js", "clean": "rm -rf node_modules **/node_modules **/**/node_modules **/dist **/**/dist website/.next website/out" }, "devDependencies": { "lerna": "2.11.0", "prettier": "^1.11.1", "push-dir": "^0.4.1", "xo": "^0.20.3" }, "xo": { "envs": [ "node", "browser" ], "extends": [ "prettier" ], "ignores": [ "compiler/src/vendor", "examples", "website" ], "rules": { "capitalized-comments": 0, "unicorn/import-index": 0 }, "globals": [ "describe", "it", "expect" ] } } ================================================ FILE: release-website ================================================ #!/usr/bin/env bash rm -rf out cd website && yarn export && touch out/.nojekyll && touch out/CNAME && echo "dss-lang.com" >> out/CNAME && ../node_modules/.bin/push-dir --dir=out --branch=gh-pages ================================================ FILE: webpack/LICENSE ================================================ Copyright 2018-present Giuseppe Gurgone. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: webpack/README.md ================================================ # dss-webpack Deterministic Style Sheets - webpack loader and plugin for webpack 3 and 4. Read [more about this package](https://dss-lang.com/usage/#dss-webpack). ## Contributing This package is part of the [DSS monorepo](https://github.com/giuseppeg/dss#contributing). ## License MIT ================================================ FILE: webpack/index.js ================================================ const optimizer = require('dss-compiler/processor').optimizer let LastCallWebpackPlugin try { LastCallWebpackPlugin = require('last-call-webpack-plugin') } catch (error) { if (/cannot find module/i.test(error.message)) { throw new Error(`DSSWebpackPlugin depends on last-call-webpack-plugin. Are you Webpack 3 user? Please install last-call-webpack-plugin@^2.0.0 as devDependency. Are you Webpack 4 user? Please install last-call-webpack-plugin@^3.0.0 as devDependency. `) } throw error } const PHASES = "PHASE" in LastCallWebpackPlugin ? "PHASE" : "PHASES"; function processor(assetName, asset) { const css = asset.source() return optimizer(css, { from: assetName, to: assetName }).then(result => result.css) } class DSSPlugin extends LastCallWebpackPlugin { constructor(options = { canPrint: false }) { super({ assetProcessors: [ { phase: LastCallWebpackPlugin[PHASES].OPTIMIZE_ASSETS, regExp: options.test || /\.css$/g, processor }, { phase: LastCallWebpackPlugin[PHASES].OPTIMIZE_CHUNK_ASSETS, regExp: options.test || /\.css$/g, processor } ], canPrint: options.canPrint }) } buildPluginDescriptor() { return { name: 'DSSWebpackPlugin' } } } DSSPlugin.loader = require.resolve('./loader') module.exports = DSSPlugin ================================================ FILE: webpack/loader.js ================================================ const loaderUtils = require('loader-utils') const dss = require('dss-compiler') const BANNER = '/* DSS file */' module.exports = function(content) { if (this.cacheable) this.cacheable() this.addDependency(this.resourcePath) const callback = this.async() const options = loaderUtils.getOptions(this) || {} let readableClass if (typeof options.localIdentName === 'string') { const identName = loaderUtils.interpolateName(this, options.localIdentName, { content }) readableClass = localName => identName.replace(/\[local]/g, localName) } dss(content, { readableClass }) .then(({ locals, flush }) => { const moduleExports = [ BANNER, `exports = module.exports = [[module.id, "${flush()}", ""]];`, `exports.locals = ${JSON.stringify(locals)}` ].join('\n') callback(null, moduleExports) }) .catch(callback) } ================================================ FILE: webpack/package.json ================================================ { "name": "dss-webpack", "version": "0.1.0-beta.0", "description": "Deterministic Style Sheets - webpack plugin and loader", "main": "index.js", "keywords": [ "dss", "atomic css", "css in js", "css", "classes", "css modules", "sass", "postcss", "classnames", "webpack", "react" ], "author": "Giuseppe Gurgone", "license": "MIT", "dependencies": { "dss-compiler": "0.1.0-beta.0", "loader-utils": "1.1.0" }, "peerDependencies": { "last-call-webpack-plugin": "^2.0.0 || ^3.0.0" } } ================================================ FILE: website/.babelrc ================================================ { "presets": ["next/babel"], "plugins": [["babel-plugin-classnames", { "packageName": "dss-classnames"}]] } ================================================ FILE: website/LICENSE ================================================ Copyright 2018-present Giuseppe Gurgone. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: website/components/analytics/index.js ================================================ import React from 'react' import ReactGA from 'react-ga' export default class Analytics extends React.Component { track = () => { ReactGA.set({ page: this.props.route + window.location.hash }) ReactGA.pageview(this.props.route + window.location.hash) } componentDidMount() { ReactGA.initialize(this.props.id) this.track() window.addEventListener('hashchange', this.track) } componentDidUpdate(prevProps) { if (prevProps.route !== this.props.route) { this.track() } } componentWillUnmount() { window.removeEventListener('hashchange', this.track) } render() { return this.props.children } } ================================================ FILE: website/components/body/index.css ================================================ .root { margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; display: flex; flex-direction: column; } ================================================ FILE: website/components/body/index.js ================================================ import styles from './index.css' export default ({children}) => {children} ================================================ FILE: website/components/heading/index.css ================================================ .tag { display: block; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; font-family: $HeadingFontFamily; font-size: $HeadingFontSize; font-weight: $HeadingFontWeight; color: $HeadingColor; } .content { display: block; margin-top: 2em; } .link { color: inherit; } .size1 { font-size: $u-fontSize1; margin-top: 0; } .size2 { font-size: $u-fontSize2; } .size3 { font-size: $u-fontSize3; } .size4 { font-size: $u-fontSize4; } .size5 { font-size: $u-fontSize5; } .size6 { font-size: $u-fontSize6; } ================================================ FILE: website/components/heading/index.js ================================================ import Link from '../link' import styles from './index.css' const defaultClassName = { link: [], tag: [], content: [], } const Wrap = ({children, className, href, target}) => { if (!href) { return children } return {children} } export default ({children, className = defaultClassName, level = 1, size = 1, href = null, target = '_self', autolink = true}) => { const Tag = `h${level}` if (!href && autolink && level > 1) { href = '#' + children.toLowerCase().replace(/[^a-z]/g, '-') } return ({children}
const Code = ({className = [], isBlock = true, ...props}) =>